/* CompanyOS · Oberfläche in der Marke M.For.Studios: Creme, dunkle Seitenleiste, Orange als Akzent,
   fette Kennzahlen in Plus Jakarta Sans, gestaffelte Einblendungen, Remix Icons, Mobil-Drawer. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  /* Marke M.For.Studios (wie Creative Hub / mamontov-marketing.de): Creme, Schwarz, Orange */
  --green: #0e0c0b; --green-mid: #1d1916; --green-dark: #0e0c0b;
  --white: #ffffff; --black: #1d1916;
  --cyan: #c2531f; --cyan-bright: #e8834f; --cyan-deep: #a6461a;
  --text-56: #1d19168f; --text-32: #1d191652;
  --white-72: #f3efe9b8; --white-48: #f3efe97a; --white-32: #f3efe952;
  --white-16: #f3efe929; --white-10: #f3efe91a; --white-6: #f3efe90f;
  --border-light: #e4ddd2;
  --canvas: #f3efe9; --tint: #f7f4ef; --tint-deep: #efe9e0;
  --grad-green-cyan-d: linear-gradient(160deg, #0e0c0b 0%, #1d1916 70%, #2a1f19 100%);
  --r-card: 16px; --r-control: 999px; --r-chip: 999px; --r-pill: 999px;
  --card-shadow: 0 1px 2px rgba(14,12,11,.04), 0 10px 24px -10px rgba(14,12,11,.10);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --meta: #2a63a8; --meta-bg: #2a63a814;
  --google: #b07c2a; --google-bg: #b07c2a14;
  --organic: #5f7a3a; --organic-bg: #5f7a3a14;
  --nl: #a8386f; --nl-bg: #a8386f12;
  --ok: #3f7a3a; --ok-bg: #3f7a3a14; --warn: #b7791f; --warn-bg: #b7791f14; --stop: #b91c1c; --stop-bg: #b91c1c12;
}
html { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
body { background: var(--canvas); color: var(--black); line-height: 1.5; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; font-family: inherit; background: none; color: inherit; }
h1, h2, h3 { text-wrap: balance; }
.mono { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.serif { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.02em; }
.ic { display: inline-grid; place-items: center; width: 1.15em; height: 1.15em; flex-shrink: 0; }
.ic i { font-size: 1em; line-height: 1; font-style: normal; }

/* ════════ Shell + Sidebar ════════ */
.shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.sb {
  background: var(--grad-green-cyan-d); color: var(--white);
  padding: 1.5rem 0 1.25rem; display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
}
.sb::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.08) 0.75px, transparent 0.75px);
  background-size: 18px 18px; opacity: 0.5; pointer-events: none;
}
.sb > * { position: relative; z-index: 1; }
.sb-brand { padding: 0 1.3rem; margin-bottom: 1.35rem; display: flex; align-items: center; gap: 0.6rem; }
.sb-logo { width: 30px; height: 30px; border-radius: 8px; flex-shrink: 0; }
.sb-wordmark { font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
.sb-badge {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 0.22rem 0.5rem;
  background: var(--white-10); border: 1px solid var(--white-16);
  border-radius: 4px; color: var(--cyan-bright);
}
.sb-scroll { flex: 1; overflow-y: auto; }
.sb-scroll::-webkit-scrollbar { width: 0; }
.sb-grouphead {
  width: 100%; padding: 0.5rem 1.25rem 0.35rem; text-align: left;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--white-32);
}
.sb-nav { display: flex; flex-direction: column; padding: 0 0.6rem; gap: 0.34rem; margin-bottom: 0.6rem; }
.sb-nav a {
  display: flex; align-items: center; gap: 0.65rem;
  padding: 0.5rem 0.72rem; border-radius: 0.5rem;
  font-size: 0.82rem; color: var(--white-48);
  transition: color 0.25s var(--ease-smooth), background 0.25s var(--ease-smooth);
}
.sb-nav a .ic { font-size: 1.02rem; }
.sb-nav a:hover { color: var(--white); background: var(--white-10); }
.sb-nav a.active { color: var(--white); background: var(--white-6); }
.sb-nav a.active::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cyan-bright); box-shadow: 0 0 8px var(--cyan-bright);
  margin-left: auto; flex-shrink: 0;
  animation: dot-in 0.45s var(--ease-spring) backwards;
}
@keyframes dot-in { from { transform: scale(0); opacity: 0; } }
.sb-user {
  margin: 0.8rem 1rem 0; padding-top: 0.9rem; border-top: 1px solid var(--white-10);
  display: flex; align-items: center; gap: 0.6rem;
}
.avatar {
  width: 2rem; height: 2rem; border-radius: var(--r-pill); flex-shrink: 0;
  display: grid; place-items: center; font-size: 0.72rem; font-weight: 600;
  background: linear-gradient(135deg, var(--cyan), var(--cyan-bright)); color: var(--green);
}
.sb-user .info { line-height: 1.25; flex: 1; min-width: 0; }
.sb-user strong { display: block; font-size: 0.8rem; font-weight: 500; }
.sb-user span { font-size: 0.68rem; color: var(--white-48); }
.sb-logout { color: var(--white-32); transition: color 0.2s; display: grid; place-items: center; }
.sb-logout:hover { color: var(--white); }
.scrim {
  position: fixed; inset: 0; z-index: 54; background: rgba(14,12,11,0.45);
  opacity: 0; pointer-events: none; visibility: hidden;
  transition: opacity 0.32s var(--ease-smooth), visibility 0s linear 0.32s;
}
/* Weichzeichner nur, wenn die Ebene sichtbar ist: eine unsichtbare Vollbild-Ebene mit blur bremst sonst jedes Scrollen */
body.drawer-open .scrim, body.lead-open .scrim { opacity: 1; pointer-events: auto; visibility: visible; backdrop-filter: blur(2px); transition: opacity 0.32s var(--ease-smooth); }

/* ════════ Main + Header ════════ */
.main { min-width: 0; display: flex; flex-direction: column; }
.view { display: none; flex-direction: column; flex: 1; }
.view.cur { display: flex; }
.page-header {
  background: var(--white); border-bottom: 1px solid var(--border-light);
  padding: 1.6rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.view.cur .page-header { animation: fade-down 0.55s var(--ease-smooth) backwards; }
@keyframes fade-down { from { opacity: 0; transform: translateY(-8px); } }
.page-header h1 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; }
.page-header h1 .serif { color: var(--green-dark); font-weight: 400; }
.page-header p { font-size: 0.85rem; color: var(--text-56); margin-top: 0.1rem; }
.page-header .actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.52rem 0.95rem; border-radius: var(--r-control);
  font-size: 0.82rem; font-weight: 500;
  transition: all 0.22s var(--ease-smooth);
}
.btn:active { transform: scale(0.96); }
.btn .ic { font-size: 0.92rem; }
.btn-primary { background: var(--green); color: var(--white); }
.btn-primary:hover { background: var(--green-mid); box-shadow: 0 6px 16px -6px rgba(14,12,11,0.4); }
.btn-secondary { background: var(--white); border: 1px solid var(--border-light); color: var(--black); }
.btn-secondary:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); }

.content { padding: 1.6rem 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.15rem; }

/* ════════ Filterleiste ════════ */
.filters { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.view.cur .filters { animation: fade-down 0.55s 0.08s var(--ease-smooth) backwards; }
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 0.2rem; background: var(--white); border-radius: var(--r-control); padding: 0.18rem; box-shadow: var(--card-shadow); }
.seg button {
  padding: 0.32rem 0.75rem; border-radius: var(--r-chip);
  font-size: 0.76rem; font-weight: 500; color: var(--text-56);
  transition: all 0.25s var(--ease-smooth);
}
.seg button.active { background: var(--green); color: var(--white); }
.seg button:not(.active):hover { color: var(--green-dark); }
.filters .hint { font-size: 0.72rem; color: var(--text-32); margin-left: auto; }
.filters .hint .livedot { display: inline-block; position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; margin-right: 0.35rem; }
/* Puls nur über transform und opacity, ohne Neuzeichnen je Bild */
.filters .hint .livedot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; background: rgba(34,197,94,0.18); animation: pulse 2.2s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.6); opacity: 0.35; } }
.search {
  display: flex; align-items: center; gap: 0.5rem; min-width: 240px;
  background: var(--white); border-radius: var(--r-control); padding: 0.42rem 0.7rem;
  box-shadow: var(--card-shadow); border: 1.5px solid transparent; transition: border-color 0.2s;
}
.search:focus-within { border-color: var(--cyan-deep); }
.search .ic { color: var(--text-32); font-size: 0.9rem; }
.search input { border: none; outline: none; background: none; font-family: inherit; font-size: 0.8rem; flex: 1; min-width: 0; color: var(--black); }
.search input::placeholder { color: var(--text-32); }

/* ════════ Karten / Bento ════════ */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.15rem; }
.w {
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 1.15rem 1.25rem; min-width: 0;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth),
              box-shadow 0.3s var(--ease-smooth);
}
.w.in { opacity: 1; transform: none; }
.w:hover { box-shadow: 0 2px 4px rgba(14,12,11,.05), 0 20px 36px -16px rgba(14,12,11,.16); }
.w .l {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--text-56); display: flex; align-items: center; gap: 0.45rem;
}
.w .l .ic { font-size: 0.95rem; color: var(--cyan-deep); }
.w .l .n { margin-left: auto; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.6rem; text-transform: none; letter-spacing: 0; color: var(--text-32); font-weight: 400; }
.w .v {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 800; letter-spacing: -0.02em;
  font-size: 2rem; margin-top: 0.4rem; color: var(--green-dark);
  font-variant-numeric: tabular-nums;
}
.w .d { font-size: 0.74rem; font-weight: 500; margin-top: 0.15rem; }
.w .d.up { color: var(--cyan-deep); } .w .d.down { color: #dc2626; }

/* Hero (Spend) */
.w.hero {
  grid-column: span 4;
  background: radial-gradient(circle at 85% 8%, rgba(232,131,79,0.16) 0%, transparent 55%), var(--green-dark);
  color: var(--white);
}
.w.hero .l { color: var(--white-72); }
.w.hero .l .ic { color: var(--cyan-bright); }
.w.hero .v { font-size: 2.7rem; color: var(--white); }
.w.hero .v .euro { color: var(--cyan-bright); }
.w.hero .d.up { color: var(--cyan-bright); }
.w.hero .spark i { background: rgba(232,131,79,0.28); }
.w.hero .spark i:last-child { background: var(--cyan-bright); }

.w.kpi3 { grid-column: span 8; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; padding: 0; }
.w.kpi3 > div { padding: 1.15rem 1.25rem; min-width: 0; }
.w.kpi3 > div + div { border-left: 1px solid var(--tint-deep); }

.spark { display: flex; align-items: flex-end; gap: 3px; height: 38px; margin-top: 0.7rem; }
.spark i {
  flex: 1; background: rgba(194,83,31,0.35); border-radius: 2px 2px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.7s var(--ease-smooth);
}
.spark i:last-child { background: var(--cyan-deep); }
.w.in .spark i { transform: scaleY(1); }

/* Balken-Chart */
.w.chart { grid-column: span 8; }
.chart-bars { display: flex; align-items: flex-end; gap: 0.55rem; height: 150px; margin-top: 1.1rem; }
.chart-bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; min-width: 0; }
.chart-bars .fill {
  background: var(--tint-deep); border-radius: 3px 3px 0 0;
  transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.75s var(--ease-smooth);
}
.chart-bars .fill.good { background: var(--cyan-deep); border-radius: 0 0 3px 3px; }
.w.in .chart-bars .fill { transform: scaleY(1); }
.chart-days { display: flex; gap: 0.55rem; margin-top: 0.4rem; }
.chart-days span { flex: 1; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.58rem; color: var(--text-32); text-align: center; }
.legend { display: flex; gap: 1rem; margin-top: 0.9rem; font-size: 0.72rem; color: var(--text-56); }
.legend .li { display: flex; align-items: center; gap: 0.4rem; }
.legend .dot { width: 8px; height: 8px; border-radius: 2px; }
.legend .dot.total { background: var(--tint-deep); }
.legend .dot.good { background: var(--cyan-deep); }

/* Activity-Feed */
.w.feed { grid-column: span 4; display: flex; flex-direction: column; }
.feed-list { display: flex; flex-direction: column; gap: 0.15rem; margin-top: 0.8rem; }
.feed .it {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.4rem;
  border-radius: var(--r-control);
  opacity: 0; transform: translateX(10px);
  transition: opacity 0.5s var(--ease-smooth), transform 0.5s var(--ease-smooth), background 0.15s;
}
.w.in .feed-list .it { opacity: 1; transform: none; }
.w.in .feed-list .it:nth-child(1) { transition-delay: 0.15s; }
.w.in .feed-list .it:nth-child(2) { transition-delay: 0.24s; }
.w.in .feed-list .it:nth-child(3) { transition-delay: 0.33s; }
.w.in .feed-list .it:nth-child(4) { transition-delay: 0.42s; }
.w.in .feed-list .it:nth-child(5) { transition-delay: 0.51s; }
.feed .it:hover { background: var(--tint); }
.feed .ico {
  width: 1.9rem; height: 1.9rem; border-radius: var(--r-chip); flex-shrink: 0;
  display: grid; place-items: center; background: var(--tint-deep); color: var(--green-mid);
}
.feed .ico .ic { font-size: 0.98rem; }
.feed .tx { flex: 1; min-width: 0; }
.feed .tx .t { font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed .fd-camp {
  display: inline-block; margin-top: 0.22rem; padding: 0.06rem 0.42rem;
  background: var(--tint); border-radius: var(--r-pill); font-size: 0.66rem; color: var(--text-56);
}
.feed .tm { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.62rem; color: var(--text-32); flex-shrink: 0; }

/* ════════ Tabellen ════════ */
.w.tablew { grid-column: span 12; padding: 0; overflow: hidden; }
.w.tablew .head { padding: 1.05rem 1.25rem 0.9rem; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.w.tablew .head .hl { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-56); display: flex; align-items: center; gap: 0.45rem; }
.w.tablew .head .hl .ic { font-size: 0.95rem; color: var(--cyan-deep); }
.w.tablew .head .n { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.6rem; color: var(--text-32); }
.tbl-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
thead th {
  background: var(--white); text-align: left; padding: 0.55rem 1.25rem;
  border-top: 1px solid var(--tint-deep); border-bottom: 1px solid var(--tint-deep);
  font-size: 0.64rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-56);
  white-space: nowrap;
}
tbody td { padding: 0.7rem 1.25rem; border-top: 1px solid var(--tint); white-space: nowrap; }
tbody tr:first-child td { border-top: none; }
tbody tr { transition: background 0.14s; cursor: pointer; }
tbody tr:hover { background: var(--tint); }
td .mono, th .mono { font-size: 0.74rem; }
.pill { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.18rem 0.6rem; border-radius: var(--r-pill); font-size: 0.7rem; font-weight: 500; }
.pill.hot { background: rgba(194,83,31,0.14); color: var(--cyan-deep); }
.pill.warm { background: var(--tint-deep); color: var(--text-56); }
.pill.new { background: rgba(42,99,168,0.1); color: var(--meta); }
.pill.live { background: rgba(34,197,94,0.12); color: #15803d; }
.pill.paused { background: rgba(176,124,42,0.12); color: var(--google); }
.pill.draft { background: var(--tint-deep); color: var(--text-56); }
.pill .pdot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.src-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.76rem; font-weight: 500;
}
.src-chip .sic {
  width: 1.55rem; height: 1.55rem; border-radius: var(--r-chip);
  display: grid; place-items: center; font-size: 0.8rem;
}
.sic.meta { background: var(--meta-bg); color: var(--meta); }
.sic.google { background: var(--google-bg); color: var(--google); }
.sic.organic { background: var(--organic-bg); color: var(--organic); }
.sic.nl { background: var(--nl-bg); color: var(--nl); }
.scorebar { display: inline-flex; align-items: center; gap: 0.5rem; }
.scorebar .track { width: 64px; height: 5px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; }
.scorebar .fillb { height: 100%; border-radius: var(--r-pill); background: var(--cyan-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.8s var(--ease-smooth); }
.w.in .scorebar .fillb { transform: scaleX(1); }
.scorebar .sv { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.68rem; color: var(--text-56); }

/* ════════ Funnels-Grid ════════ */
.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.15rem; }
.fcard {
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 1.15rem 1.25rem 1.25rem; cursor: pointer; text-align: left;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth), box-shadow 0.3s var(--ease-smooth);
  display: flex; flex-direction: column; gap: 0.85rem; min-width: 0;
}
.fcard.in { opacity: 1; transform: none; }
.fcard:hover { box-shadow: 0 2px 4px rgba(14,12,11,.05), 0 20px 36px -16px rgba(14,12,11,.16); transform: translateY(-2px); }
.fcard .top { display: flex; align-items: flex-start; gap: 0.7rem; }
.fcard .fico {
  width: 2.3rem; height: 2.3rem; border-radius: var(--r-chip); flex-shrink: 0;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--tint-deep); color: var(--green-mid);
}
.fcard .tt { flex: 1; min-width: 0; }
.fcard h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.fcard .slug { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.64rem; color: var(--text-32); margin-top: 0.12rem; }
.fcard .kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.fcard .k { min-width: 0; }
.fcard .k b { display: block; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 800; font-size: 1.28rem; color: var(--green-dark); font-variant-numeric: tabular-nums; }
.fcard .k span { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-32); }
.fcard .stagebar { display: flex; gap: 3px; height: 6px; }
.fcard .stagebar i { border-radius: var(--r-pill); background: var(--tint-deep); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease-smooth); }
.fcard.in .stagebar i { transform: scaleX(1); }
.fcard .stagebar i.s1 { background: var(--green-mid); }
.fcard .stagebar i.s2 { background: var(--cyan-deep); }
.fcard .stagebar i.s3 { background: var(--cyan); }
.fcard .stagelbl { display: flex; justify-content: space-between; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.58rem; color: var(--text-32); }

/* ════════ Analytics: Quellen-Balken ════════ */
.w.sources { grid-column: span 4; }
.srcrow { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; }
.srcrow + .srcrow { border-top: 1px solid var(--tint); }
.srcrow .bd { flex: 1; min-width: 0; }
.srcrow .nm { display: flex; justify-content: space-between; font-size: 0.78rem; font-weight: 500; margin-bottom: 0.3rem; }
.srcrow .nm .val { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.68rem; color: var(--text-56); }
.srcrow .track { height: 6px; border-radius: var(--r-pill); background: var(--tint); overflow: hidden; }
.srcrow .fillb { height: 100%; border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left; transition: transform 0.85s var(--ease-smooth); }
.w.in .srcrow .fillb { transform: scaleX(1); }

/* ════════ Platzhalter-View ════════ */
.stub { flex: 1; display: grid; place-items: center; padding: 3rem 2rem; }
.stub-card {
  background: var(--white); border-radius: var(--r-card); box-shadow: var(--card-shadow);
  padding: 3rem 3.5rem; text-align: center; max-width: 460px;
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.65s var(--ease-smooth), transform 0.65s var(--ease-smooth);
}
.stub-card.in { opacity: 1; transform: none; }
.stub-card .bico {
  width: 3.4rem; height: 3.4rem; border-radius: var(--r-card); margin: 0 auto 1.1rem;
  display: grid; place-items: center; font-size: 1.5rem;
  background: var(--tint-deep); color: var(--green-mid);
}
.stub-card h2 { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.015em; }
.stub-card h2 .serif { color: var(--green-dark); font-weight: 400; }
.stub-card p { font-size: 0.85rem; color: var(--text-56); margin: 0.5rem 0 1.4rem; }
.stub-card .tag {
  display: inline-block; margin-bottom: 1.1rem; padding: 0.2rem 0.6rem;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--tint); border-radius: var(--r-pill); color: var(--text-32);
}

/* ════════ Lead-Slide-Over ════════ */
.leadpanel {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 60;
  background: var(--white); box-shadow: -24px 0 60px rgba(14,12,11,0.18);
  transform: translateX(103%); transition: transform 0.42s var(--ease-smooth);
  display: flex; flex-direction: column;
}
body.lead-open .leadpanel { transform: none; }
.lp-head {
  padding: 1.4rem 1.5rem 1.2rem; border-bottom: 1px solid var(--tint-deep);
  display: flex; align-items: center; gap: 0.85rem;
}
.lp-head .avatar { width: 2.7rem; height: 2.7rem; font-size: 0.88rem; }
.lp-head .tt { flex: 1; min-width: 0; }
.lp-head h2 { font-size: 1.08rem; font-weight: 600; letter-spacing: -0.01em; }
.lp-head .sub { font-size: 0.74rem; color: var(--text-56); margin-top: 0.05rem; }
.lp-close { width: 2rem; height: 2rem; border-radius: var(--r-control); display: grid; place-items: center; color: var(--text-56); transition: all 0.2s; flex-shrink: 0; }
.lp-close:hover { background: var(--tint); color: var(--black); }
.lp-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.5rem; }
.lp-body::-webkit-scrollbar { width: 0; }
.lp-sec {
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-32); margin: 1.3rem 0 0.55rem;
}
.lp-sec:first-child { margin-top: 0; }
.lp-kv { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.82rem; }
.lp-kv .ic { color: var(--cyan-deep); font-size: 0.95rem; }
.lp-kv .mono { font-size: 0.74rem; }
.lp-score { display: flex; align-items: center; gap: 0.8rem; background: var(--tint); border-radius: var(--r-control); padding: 0.75rem 0.9rem; }
.lp-score .big { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-style: normal; font-weight: 800; font-size: 1.7rem; color: var(--green-dark); }
.lp-score .bd { flex: 1; }
.lp-score .track { height: 6px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; margin-top: 0.3rem; }
.lp-score .fillb { height: 100%; border-radius: var(--r-pill); background: var(--cyan-deep); transition: transform 0.8s var(--ease-smooth); transform-origin: left; }
.lp-score span { font-size: 0.68rem; color: var(--text-56); }
.tl { position: relative; padding-left: 1.35rem; }
.tl::before { content: ''; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--tint-deep); }
.tl-it { position: relative; padding: 0.45rem 0; }
.tl-it::before {
  content: ''; position: absolute; left: -1.35rem; top: 0.85rem;
  width: 8px; height: 8px; border-radius: 50%; margin-left: 2px;
  background: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(194,83,31,0.18);
}
.tl-it .t { font-size: 0.8rem; font-weight: 500; }
.tl-it .m { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.62rem; color: var(--text-32); margin-top: 0.1rem; }
.lp-foot { padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--tint-deep); display: flex; flex-wrap: wrap; gap: 0.55rem; }
.lp-foot .btn { flex: 1; justify-content: center; }
.lp-foot .btn-primary { flex: 1 1 100%; }

/* ════════ Toast ════════ */
.toast {
  position: fixed; bottom: 1.6rem; left: 50%; transform: translate(-50%, 20px); z-index: 80;
  background: var(--green-dark); color: var(--white); border-radius: var(--r-pill);
  padding: 0.6rem 1.1rem; font-size: 0.8rem; display: flex; align-items: center; gap: 0.5rem;
  box-shadow: 0 12px 32px rgba(14,12,11,0.4); opacity: 0; pointer-events: none;
  transition: all 0.35s var(--ease-spring);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast .ic { color: var(--cyan-bright); }

/* ════════ Mobile ════════ */
.mob-bar {
  display: none; position: sticky; top: 0; z-index: 52;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-light);
  padding: 0.7rem 1rem; padding-top: calc(0.7rem + env(safe-area-inset-top));
  align-items: center; gap: 0.8rem;
}
.hb { width: 2.3rem; height: 2.3rem; border-radius: var(--r-control); background: var(--green-dark); display: grid; place-items: center; flex-shrink: 0; position: relative; }
.hb i { position: absolute; left: 0.62rem; right: 0.62rem; height: 2px; border-radius: 2px; background: var(--white); transition: transform 0.32s var(--ease-smooth), opacity 0.2s; }
.hb i:nth-child(1) { top: 0.83rem; }
.hb i:nth-child(2) { bottom: 0.83rem; }
body.drawer-open .hb i:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
body.drawer-open .hb i:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
.mob-bar .mtitle { flex: 1; min-width: 0; }
.mob-bar .mtitle strong { display: block; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-bar .mtitle span { display: block; font-size: 0.64rem; color: var(--text-32); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; letter-spacing: 0.1em; text-transform: uppercase; }
.mob-bar .avatar { width: 2.1rem; height: 2.1rem; font-size: 0.7rem; }

@media (max-width: 1100px) {
  .w.hero { grid-column: span 12; }
  .w.kpi3 { grid-column: span 12; }
  .w.chart { grid-column: span 12; }
  .w.feed { grid-column: span 12; }
  .w.sources { grid-column: span 12; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .mob-bar { display: flex; }
  .sb {
    position: fixed; inset: 0 18% 0 0; z-index: 55;
    transform: translateX(-102%);
    transition: transform 0.38s var(--ease-smooth);
    box-shadow: 0 0 60px rgba(14,12,11,0.4);
    padding-top: calc(1.5rem + env(safe-area-inset-top));
  }
  body.drawer-open .sb { transform: none; }
  body.drawer-open { overflow: hidden; }
  .page-header { padding: 1.15rem 1rem; }
  .page-header h1 { font-size: 1.2rem; }
  .page-header .actions { display: none; }
  .content { padding: 1rem 1rem calc(4.5rem + env(safe-area-inset-bottom)); }
  .w.kpi3 { grid-template-columns: 1fr; }
  .w.kpi3 > div + div { border-left: none; border-top: 1px solid var(--tint-deep); }
  .filters .hint { display: none; }
  .search { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .w, .fcard, .stub-card { opacity: 1 !important; transform: none !important; }
  .spark i, .chart-bars .fill, .scorebar .fillb, .srcrow .fillb, .fcard .stagebar i { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   Ergänzungen für die echte App (Formulare, Modale, Aufgaben, Team, Einstellungen)
   ════════════════════════════════════════════════════════════════ */
[hidden] { display: none !important; }
.sb-wordmark { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; }
.sb-nav a .zahl {
  margin-left: auto; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.6rem; color: var(--white-48);
  background: var(--white-10); border-radius: var(--r-pill); padding: 0.05rem 0.45rem;
}
.sb-nav a.active .zahl { display: none; }
.lade { padding: 3rem 2rem; color: var(--text-32); font-size: 0.82rem; display: flex; align-items: center; gap: 0.5rem; }
.lade::before { content: ''; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--tint-deep); border-top-color: var(--cyan-deep); animation: dreh 0.8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* KPI-Leiste mit vier Kennzahlen */
.w.kpi4 { grid-column: span 8; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0; }
.w.kpi4 > div { padding: 1.15rem 1.15rem; min-width: 0; }
.w.kpi4 > div + div { border-left: 1px solid var(--tint-deep); }
.w.kpi4 .v { font-size: 1.85rem; }
.w .d.flat { color: var(--text-32); }
.w.feed .feed-list { max-height: 318px; overflow-y: auto; margin-right: -0.4rem; padding-right: 0.2rem; }
.w.feed .feed-list::-webkit-scrollbar { width: 4px; }
.w.feed .feed-list::-webkit-scrollbar-thumb { background: var(--tint-deep); border-radius: 4px; }
.feed .it.klickbar { cursor: pointer; }
.chart-bars .col { position: relative; }
.chart-bars .col:hover .fill { filter: brightness(0.94); }
.w.chart .leer, .w.sources .leer { margin-top: 1rem; }

/* Auswahlfelder in der Filterleiste */
.sel {
  appearance: none; -webkit-appearance: none; font-family: inherit; font-size: 0.78rem; color: var(--black);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c161580' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.7rem center;
  border: 1.5px solid transparent; border-radius: var(--r-control); padding: 0.42rem 2rem 0.42rem 0.75rem;
  box-shadow: var(--card-shadow); cursor: pointer; transition: border-color 0.2s; max-width: 220px;
}
.sel:focus { outline: none; border-color: var(--cyan-deep); }
.seg button .cnt { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.6rem; opacity: 0.6; margin-left: 0.25rem; }

/* Stufen-Farben nach Art (für selbst angelegte Stufen); einzelne Stufen unten bekommen eigene Töne */
.pill.art-offen { background: var(--tint-deep); color: var(--text-56); }
.pill.art-qualifiziert { background: rgba(194,83,31,0.12); color: var(--cyan-deep); }
.pill.art-gewonnen { background: var(--green); color: var(--white); }
.pill.art-verloren { background: rgba(220,38,38,0.08); color: #b91c1c; }
/* Weitere Status- und Quellenfarben */
.pill.neu { background: rgba(42,99,168,0.1); color: var(--meta); }
.pill.kontaktiert { background: var(--tint-deep); color: var(--text-56); }
.pill.qualifiziert { background: rgba(194,83,31,0.12); color: var(--green-mid); }
.pill.termin { background: rgba(194,83,31,0.14); color: var(--cyan-deep); }
.pill.angebot { background: rgba(176,124,42,0.14); color: var(--google); }
.pill.gewonnen, .pill.kunde { background: var(--green); color: var(--white); }
.pill.verloren { background: rgba(220,38,38,0.08); color: #b91c1c; }
.pill.disqualifiziert { background: var(--tint-deep); color: var(--text-32); }
.pill.admin { background: rgba(194,83,31,0.14); color: var(--cyan-deep); }
.pill.mitglied { background: var(--tint-deep); color: var(--text-56); }
.sic.empfehlung { background: rgba(194,83,31,0.08); color: var(--green-mid); }
.sic.instagram { background: rgba(194,83,31,0.1); color: var(--cyan-deep); }
.sic.sonstige, .sic.kaltakquise, .sic.linkedin, .sic.tiktok { background: var(--tint-deep); color: var(--text-56); }
.lnk { color: var(--cyan-deep); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 2px; transition: text-decoration-color 0.2s; }
.lnk:hover { text-decoration-color: currentColor; }
.klein { font-size: 0.72rem; color: var(--text-56); }
.mono-klein { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.66rem; color: var(--text-32); }
td .unter { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; color: var(--text-32); font-size: 0.66rem; }
td.rechts, th.rechts { text-align: right; }

/* Buttons */
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn-ghost { color: var(--text-56); }
.btn-ghost:hover { color: var(--black); background: var(--tint); }
.btn-danger { background: var(--white); border: 1px solid rgba(220,38,38,0.25); color: #b91c1c; }
.btn-danger:hover { background: rgba(220,38,38,0.06); }
.btn-klein { padding: 0.32rem 0.6rem; font-size: 0.74rem; }
.icon-btn { width: 1.9rem; height: 1.9rem; border-radius: var(--r-control); display: inline-grid; place-items: center; color: var(--text-32); transition: all 0.2s; }
.icon-btn:hover { background: var(--tint); color: var(--black); }
.icon-btn.gefahr:hover { color: #b91c1c; background: rgba(220,38,38,0.06); }

/* Leerer Zustand */
.leer { padding: 2.2rem 1.25rem; text-align: center; color: var(--text-56); font-size: 0.82rem; }
.leer .ic { font-size: 1.6rem; color: var(--cyan-deep); display: block; margin: 0 auto 0.6rem; width: auto; height: auto; }
.leer b { display: block; color: var(--black); font-weight: 600; margin-bottom: 0.2rem; }
.mehr { display: flex; justify-content: center; padding: 0.9rem; border-top: 1px solid var(--tint); }

/* Formulare */
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem 0.9rem; }
.felder .breit { grid-column: 1 / -1; }
.feld label { display: block; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-56); margin-bottom: 0.3rem; }
.feld input, .feld select, .feld textarea, .lp-body select, .lp-body input, .lp-body textarea, .stufe-zeile input, .stufe-neu input, .termine-monate input {
  width: 100%; font-family: inherit; font-size: 0.84rem; color: var(--black); background: var(--white);
  border: 1px solid var(--border-light); border-radius: var(--r-control); padding: 0.55rem 0.7rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.feld textarea, .lp-body textarea { resize: vertical; min-height: 4.5rem; line-height: 1.45; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .lp-body select:focus, .lp-body input:focus, .lp-body textarea:focus, .stufe-zeile input:focus, .stufe-neu input:focus, .termine-monate input:focus {
  outline: none; border-color: var(--cyan-deep); box-shadow: 0 0 0 3px rgba(194,83,31,0.15);
}
.feld .hilfe { font-size: 0.7rem; color: var(--text-32); margin-top: 0.25rem; }
.formfehler { color: #b91c1c; font-size: 0.78rem; min-height: 1.1em; }

/* Modal */
.modal-bg {
  position: fixed; inset: 0; z-index: 70; background: rgba(14,12,11,0.45); backdrop-filter: blur(2px);
  display: grid; place-items: center; padding: 1rem; opacity: 0; transition: opacity 0.25s var(--ease-smooth);
}
.modal-bg.offen { opacity: 1; }
.modal {
  width: min(560px, 100%); max-height: calc(100dvh - 2rem); display: flex; flex-direction: column;
  background: var(--white); border-radius: var(--r-card); box-shadow: 0 30px 80px rgba(14,12,11,0.35);
  transform: translateY(14px) scale(0.98); transition: transform 0.35s var(--ease-smooth);
}
.modal.gross { width: min(860px, 100%); }
.modal-bg.offen .modal { transform: none; }
.modal-kopf { padding: 1.2rem 1.4rem 1rem; border-bottom: 1px solid var(--tint-deep); display: flex; align-items: center; gap: 0.75rem; }
.modal-kopf h2 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; flex: 1; }
.modal-kopf h2 .serif { color: var(--green-dark); font-weight: 400; }
.modal-inhalt { padding: 1.2rem 1.4rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
.modal-fuss { padding: 0.9rem 1.4rem; border-top: 1px solid var(--tint-deep); display: flex; gap: 0.5rem; align-items: center; }
.modal-fuss .links { margin-right: auto; }

/* Code-/Snippet-Kästen */
.code {
  position: relative; font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.7rem; line-height: 1.55;
  background: var(--tint); border: 1px solid var(--tint-deep); border-radius: var(--r-control);
  padding: 0.7rem 2.6rem 0.7rem 0.8rem; white-space: pre-wrap; word-break: break-all; color: var(--green-dark);
}
.code .kopieren { position: absolute; top: 0.35rem; right: 0.35rem; }
.zwischen-titel { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-56); }

/* Lead-Panel: Status, Felder, Aufgaben, Notizen */
.lp-status { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.lp-status button {
  padding: 0.28rem 0.7rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 500;
  background: var(--tint); color: var(--text-56); border: 1px solid transparent; transition: all 0.2s var(--ease-smooth);
}
.lp-status button:hover { border-color: var(--cyan-deep); color: var(--cyan-deep); }
.lp-status button.active { background: var(--green); color: var(--white); }
.lp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lp-grid label { display: block; font-size: 0.64rem; color: var(--text-32); margin-bottom: 0.2rem; }
.lp-grid select, .lp-grid input { padding: 0.42rem 0.55rem; font-size: 0.78rem; }
.lp-kv a { color: inherit; }
.lp-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lp-zahlen > div { background: var(--tint); border-radius: var(--r-card); padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.25rem; }
.lp-zahlen span { font-size: 0.64rem; color: var(--text-32); }
.lp-zahlen b { font-size: 1.3rem; font-weight: 800; color: var(--black); }
.lp-zahlen .btn { align-self: flex-start; margin-top: 0.2rem; }
.lp-leitfaden { background: var(--tint); border-radius: var(--r-card); padding: 0.55rem 0.8rem; margin-bottom: 0.4rem; font-size: 0.78rem; }
.lp-leitfaden summary { cursor: pointer; font-weight: 600; }
.lp-leitfaden p { white-space: pre-wrap; margin: 0.45rem 0 0; color: var(--text-56); line-height: 1.5; }
.lp-leitfaden .einwand { margin-top: 0.55rem; }
.lp-leitfaden .einwand b { display: block; }
.lp-kv a:hover { color: var(--cyan-deep); }
.lp-utm { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.35rem; }
.lp-utm span { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-size: 0.62rem; background: var(--tint); border-radius: var(--r-pill); padding: 0.1rem 0.5rem; color: var(--text-56); }
.aufg { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0; border-top: 1px solid var(--tint); }
.aufg:first-child { border-top: none; }
.aufg .tx { flex: 1; min-width: 0; font-size: 0.8rem; }
.aufg .tx .m { font-size: 0.66rem; color: var(--text-32); font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
.aufg.fertig .tx > span { text-decoration: line-through; color: var(--text-32); }
.chk {
  width: 1.1rem; height: 1.1rem; border-radius: 4px; border: 1.5px solid var(--border-light); background: var(--white);
  display: inline-grid; place-items: center; flex-shrink: 0; transition: all 0.2s var(--ease-smooth); color: transparent; font-size: 0.75rem;
}
.chk:hover { border-color: var(--cyan-deep); }
.chk.an { background: var(--cyan-deep); border-color: var(--cyan-deep); color: var(--white); }
.aufg-neu { display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem; margin-top: 0.5rem; }
.aufg-neu input[type="date"] { width: 8.6rem; }
.notiz-neu { display: flex; flex-direction: column; gap: 0.4rem; }
.notiz-neu .btn { align-self: flex-end; }
.tl-it .t .zitat { display: block; font-weight: 400; color: var(--text-56); margin-top: 0.1rem; white-space: pre-wrap; }
.ueberfaellig { color: #b91c1c !important; }
.heute { color: var(--cyan-deep) !important; font-weight: 600; }

/* Einstellungen */
.einst { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 1.15rem; align-items: start; }
.einst .w { display: flex; flex-direction: column; gap: 0.8rem; }
.einst .w p { font-size: 0.82rem; color: var(--text-56); }
.einst .w .zeile { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.82rem; }

/* Ausbau-Karte (nächste Module) */
.stub-card.ausbau { max-width: 640px; text-align: left; padding: 2.2rem 2.4rem; }
.stub-card.ausbau .bico { margin: 0 0 1rem; }
.stub-card.ausbau .code { margin: 0.4rem 0 1.2rem; font-size: 0.72rem; }

@media (max-width: 1100px) {
  .w.kpi4 { grid-column: span 12; }
}
@media (max-width: 900px) {
  .w.kpi4 { grid-template-columns: 1fr 1fr; }
  .w.kpi4 > div:nth-child(3) { border-left: none; }
  .w.kpi4 > div:nth-child(n+3) { border-top: 1px solid var(--tint-deep); }
  .felder, .lp-grid { grid-template-columns: 1fr; }
  .einst { grid-template-columns: 1fr; }
  .sel { max-width: none; flex: 1; }
  .page-header .actions { display: flex; }
  .page-header { flex-wrap: wrap; }
  .page-header .actions .btn .txt { display: none; }
  .stub-card.ausbau { padding: 1.6rem 1.3rem; }
  .chart-bars, .chart-days { gap: 0.2rem !important; }
  .chart-days span { font-size: 0.5rem; }
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg button { flex-shrink: 0; }
  .w.tablew .head { flex-wrap: wrap; }
}

/* Pipeline-Board (Leads, später Kunden und Aufgaben) */
.w.tablew.pl-modus { background: transparent; box-shadow: none; overflow: visible; border: 0; }
.pl-wahl { display: none; margin-bottom: 0.8rem; }
.pl-wahl .sel { max-width: none; width: 100%; }
.pl-board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 0.9rem; overflow-x: auto; padding-bottom: 0.4rem; align-items: start; }
.pl-spalte { background: var(--tint); border-radius: var(--r-card); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.55rem; min-height: 9rem; border: 1.5px dashed transparent; transition: border-color 0.15s, background 0.15s; }
.pl-spalte.ziel { border-color: var(--cyan-deep); background: var(--tint-deep); }
.pl-spalte header { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.15rem 0.25rem; font-size: 0.8rem; }
.pl-spalte header .cnt { font-size: 0.68rem; color: var(--text-32); }
.pl-spalte header .sum { margin-left: auto; font-size: 0.68rem; color: var(--text-56); font-weight: 600; }
.pl-karten { display: flex; flex-direction: column; gap: 0.5rem; }
.pl-karte { background: var(--white); border-radius: 12px; padding: 0.7rem 0.8rem; box-shadow: var(--card-shadow); cursor: grab; transition: transform 0.15s, box-shadow 0.15s; }
.pl-karte:hover { transform: translateY(-1px); }
.pl-karte:focus-visible { outline: 2px solid var(--cyan-deep); outline-offset: 2px; }
.pl-karte.zieht { opacity: 0.45; }
.pk-kopf { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.82rem; }
.pk-kopf b { font-weight: 600; overflow-wrap: anywhere; }
.pk-score { margin-left: auto; font-size: 0.66rem; font-weight: 700; color: var(--cyan-deep); background: rgba(194,83,31,0.1); border-radius: var(--r-pill); padding: 0.05rem 0.45rem; }
.pk-unter { font-size: 0.7rem; color: var(--text-56); margin-top: 0.15rem; }
.pk-meta { display: flex; flex-wrap: wrap; gap: 0.3rem 0.65rem; margin-top: 0.5rem; font-size: 0.66rem; color: var(--text-56); }
.pk-meta span { display: inline-flex; align-items: center; gap: 0.2rem; }
.pk-meta .ueberfaellig { color: #b91c1c; font-weight: 600; }
.pl-leer { font-size: 0.72rem; color: var(--text-32); text-align: center; padding: 0.8rem 0.4rem; }
.seg button .ic { margin-right: 0.3rem; }
@media (max-width: 700px) {
  .pl-wahl { display: block; }
  .pl-board { display: block; overflow: visible; }
  .pl-spalte { display: none; }
  .pl-spalte.aktiv { display: flex; }
}

/* Dashboard: Trichter vom Klick zum Abschluss */
.w.trichterw { grid-column: span 12; }
.trichter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.9rem; margin-top: 1rem; }
.trichter .stufe { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.trichter .kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.4rem; font-size: 0.72rem; color: var(--text-56); }
.trichter .kopf em { font-style: normal; font-weight: 600; color: var(--cyan-deep); font-size: 0.68rem; }
.trichter b { font-size: 1.7rem; font-weight: 800; color: var(--black); line-height: 1.1; }
.trichter .balken { height: 8px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; }
.trichter .balken i { display: block; height: 100%; border-radius: inherit; background: var(--cyan-deep); }
.trichter small { font-size: 0.68rem; color: var(--text-32); }
.chart-days { overflow: hidden; }
.chart-days.dicht span { overflow: visible; white-space: nowrap; }
@media (max-width: 600px) {
  .chart-days span { white-space: nowrap; }
  .chart-days:not(.dicht) span:nth-child(even) { visibility: hidden; }
}
@media (max-width: 900px) {
  .trichter { grid-template-columns: 1fr 1fr; }
  .trichter .stufe:first-child { grid-column: span 2; }
}

/* Einstellungen: Stufen-Editor */
.stufen-liste { display: flex; flex-direction: column; gap: 0.45rem; margin: 0.9rem 0 0.7rem; }
.stufe-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 12rem) 2.2rem auto; gap: 0.45rem; align-items: center; }
.stufe-zeile .pfeile { display: flex; flex-direction: column; }
.stufe-zeile .pfeile .icon-btn { height: 1.15rem; }
.stufe-zeile input { min-width: 0; }
.stufe-zeile .sel { max-width: none; width: 100%; }
.stufe-zeile .anz { font-size: 0.72rem; color: var(--text-32); text-align: center; }
.stufe-neu { display: flex; gap: 0.5rem; }
.stufe-neu input { flex: 1; min-width: 0; }
@media (max-width: 600px) {
  .stufe-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .stufe-zeile .sel { grid-column: 2 / 3; }
  .stufe-zeile .anz { display: none; }
}

/* Kunden */
.kunden-kpis { margin-bottom: 1.15rem; }
.w.kz { grid-column: span 3; }
.w.kz .v { font-size: 1.9rem; font-weight: 800; }
.ges { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 0.3rem; }
.ges.on-track { background: #22c55e; } .ges.leicht-off { background: #e0a43a; } .ges.kritisch { background: #dc2626; }
.pk-kopf .ges { margin-left: auto; }
.kd-titel { display: inline-flex; align-items: center; gap: 0.6rem; }
.kd-titel .avatar { width: 2rem; height: 2rem; font-size: 0.75rem; }
.termine-monate { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.5rem; }
.termine-monate label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.7rem; color: var(--text-56); }
@media (max-width: 1100px) { .w.kz { grid-column: span 6; } }

/* Abrechnung */
.monatwahl { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--white); border-radius: var(--r-control); padding: 0.15rem 0.3rem; box-shadow: var(--card-shadow); }
.monatwahl b { font-size: 0.82rem; min-width: 8.5rem; text-align: center; }
.mob-aktionen { display: none; }
.abr-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.posten { display: flex; flex-direction: column; gap: 0.4rem; }
.posten-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem 6rem; gap: 0.4rem; align-items: center; }
.posten-zeile .mono { text-align: right; font-size: 0.78rem; }
.posten-summe { display: flex; justify-content: flex-end; gap: 0.6rem; align-items: baseline; font-size: 0.82rem; margin: 0.6rem 0 0.4rem; }
.posten-summe b { font-size: 1.2rem; font-weight: 800; }
.abr-report small { font-size: 0.66rem; color: var(--text-32); }
.kunden-wahl { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.35rem 0.8rem; font-size: 0.8rem; max-height: 16rem; overflow-y: auto; }
.kunden-wahl label { display: flex; gap: 0.4rem; align-items: center; }
.preise-liste { display: flex; flex-direction: column; gap: 0.35rem; }
.preis-zeile { display: grid; grid-template-columns: 6rem auto minmax(0, 1fr) auto; gap: 0.6rem; align-items: center; font-size: 0.8rem; }
.preis-neu { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0.4rem; margin-top: 0.3rem; }
.posten-zeile input, .preis-neu input { width: 100%; min-width: 0; font-family: inherit; font-size: 0.82rem; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-control); padding: 0.45rem 0.6rem; }
.posten-zeile input:disabled { background: var(--tint); color: var(--text-56); }
@media (max-width: 900px) {
  .mob-aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
}
@media (max-width: 600px) {
  .posten-zeile { grid-template-columns: minmax(0, 1fr) 3.5rem 5rem; }
  .posten-zeile .mono { grid-column: 1 / -1; }
  .preis-zeile { grid-template-columns: auto minmax(0, 1fr) auto; }
  .preis-zeile > span:not(.mono) { grid-column: 1 / -1; order: 3; }
  .preis-neu { grid-template-columns: 1fr 1fr; }
}

/* Finanzen */
.fin-ziel { height: 6px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; margin-top: 0.4rem; }
.fin-ziel i { display: block; height: 100%; background: var(--cyan-deep); border-radius: inherit; }
.w.fin-chart { grid-column: span 12; }
.fin-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.4rem; height: 170px; margin-top: 1rem; align-items: end; }
.fin-col { display: flex; flex-direction: column; align-items: stretch; height: 100%; cursor: pointer; min-width: 0; }
.fin-col .paar { flex: 1; display: flex; align-items: flex-end; gap: 2px; }
.fin-col .paar i { flex: 1; border-radius: 3px 3px 0 0; min-height: 2px; }
.fin-col .paar i.ein { background: var(--cyan-deep); }
.fin-col .paar i.aus { background: var(--tint-deep); }
.fin-col span { font-size: 0.6rem; color: var(--text-32); text-align: center; margin-top: 0.3rem; }
.fin-col:hover .paar i.ein { background: var(--cyan); }
.fin-kat { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 1.25rem 1rem; }
.fin-kat-zeile { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) 6rem; gap: 0.6rem; align-items: center; font-size: 0.76rem; }
.fin-kat-zeile .track { height: 7px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; }
.fin-kat-zeile .track i { display: block; height: 100%; background: var(--cyan-deep); }
.fin-kat-zeile b { text-align: right; font-weight: 600; }
td.minus { color: #b91c1c; }
tr.leer-zeile td { color: var(--text-32); }
.fin-einst-mobil { display: none; }
@media (max-width: 900px) { .fin-einst-mobil { display: inline-flex; } }
@media (max-width: 600px) {
  .fin-kat-zeile { grid-template-columns: minmax(0, 1fr) 5rem; }
  .fin-kat-zeile .track { grid-column: 1 / -1; order: 3; }
  .fin-bars { gap: 0.2rem; }
}

/* Fließband */
.fb-fort { display: inline-block; width: 4.5rem; height: 6px; border-radius: var(--r-pill); background: var(--tint-deep); overflow: hidden; vertical-align: middle; margin-right: 0.4rem; }
.fb-fort i { display: block; height: 100%; background: var(--cyan-deep); }
.fb-schritte { display: flex; flex-direction: column; gap: 0.5rem; }
.fb-schritt { border-radius: var(--r-card); padding: 0.65rem 0.85rem; background: var(--tint); display: flex; flex-direction: column; gap: 0.45rem; }
.fb-schritt.wartet { opacity: 0.55; }
.fb-schritt.aktiv { background: var(--white); box-shadow: var(--card-shadow); border: 1.5px solid rgba(194,83,31,0.25); }
.fb-kopf { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; font-size: 0.84rem; }
.fb-kopf .nr { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--tint-deep); font-size: 0.7rem; font-weight: 700; }
.fb-schritt.freigegeben .fb-kopf .nr { background: var(--green); color: var(--white); }
.fb-check { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.8rem; }
.fb-check label { display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; }
.fb-check input { margin-top: 0.2rem; accent-color: var(--cyan-deep); }
.fb-kommentar { display: flex; gap: 0.4rem; font-size: 0.78rem; background: rgba(220,38,38,0.06); color: #b91c1c; border-radius: 10px; padding: 0.45rem 0.6rem; }
.fb-aktionen { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.fb-stationen { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.6rem 0; }
.fb-station { background: var(--tint); border-radius: var(--r-card); padding: 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.fb-st-kopf { display: flex; gap: 0.3rem; align-items: center; }
.fb-st-kopf input { flex: 1; min-width: 0; font-weight: 600; }
.fb-st-felder { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; align-items: end; font-size: 0.7rem; color: var(--text-56); }
.fb-st-felder label { display: flex; flex-direction: column; gap: 0.2rem; }
.fb-st-felder .sel { max-width: none; width: 100%; }
.fb-st-felder .fb-admin { flex-direction: row; align-items: center; gap: 0.35rem; }
.fb-station input, .fb-station textarea { width: 100%; font-family: inherit; font-size: 0.82rem; background: var(--white); border: 1px solid var(--border-light); border-radius: var(--r-control); padding: 0.45rem 0.6rem; }
.fb-station .fb-admin input { width: auto; }
.fb-station textarea { border-radius: 12px; resize: vertical; }
.mob-knoepfe { display: none; }
@media (max-width: 900px) { .mob-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; } }
@media (max-width: 600px) { .fb-st-felder { grid-template-columns: 1fr; } }

/* Gesprächsleitfaden: Knopf im Lead-Panel und eigenes Fenster */
.lp-leitfaden-knopf { width: 100%; display: flex; align-items: center; gap: 0.75rem; text-align: left; padding: 0.8rem 0.95rem; margin-bottom: 0.6rem;
  border-radius: var(--r-card); background: var(--green); color: var(--white); transition: transform 0.2s var(--ease-smooth), background 0.2s; }
.lp-leitfaden-knopf:hover { background: var(--green-mid); transform: translateY(-1px); }
.lp-leitfaden-knopf > .ic:first-child { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--cyan); display: grid; place-items: center; flex-shrink: 0; }
.lp-leitfaden-knopf > span:not(.ic) { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.lp-leitfaden-knopf small { font-size: 0.7rem; color: var(--white-48); }
.lp-quali { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.4rem; margin-bottom: 0.7rem; }
.lp-quali div { background: var(--tint); border-radius: 12px; padding: 0.45rem 0.6rem; display: flex; flex-direction: column; min-width: 0; }
.lp-quali span { font-family: inherit; font-weight: 700; font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-56); }
.lp-quali b { font-size: 0.8rem; overflow-wrap: anywhere; }

.modal.lf { width: min(1080px, 100%); position: relative; }
.modal.lf .modal-kopf h2 { display: flex; flex-direction: column; }
.lf-kicker { font-family: inherit; font-weight: 700; font-size: 0.6rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cyan); }
.lf-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.8rem; font-size: 0.8rem; color: var(--text-56); }
.lf-kopf .lf-calls { font-family: inherit; font-weight: 700; font-size: 0.66rem; }
.lf-kopf [data-lf-vorlage] { margin-left: auto; }
.lf-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0.9rem; align-items: start; }
.lf-spalte { display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.lf-box { background: var(--tint); border-radius: var(--r-card); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; }
.lf-einstieg { background: linear-gradient(160deg, #c2531f14, #c2531f05); border: 1px solid #c2531f30; }
.lf-titel { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; display: flex; align-items: baseline; gap: 0.5rem; }
.lf-titel .klein { text-transform: none; letter-spacing: 0; font-weight: 400; }
.lf-varianten button { font-size: 0.74rem; }
.lf-skript { white-space: pre-wrap; font-size: 0.92rem; line-height: 1.75; background: var(--white); border-radius: 12px; padding: 0.9rem 1rem; max-height: 46vh; overflow-y: auto; }
.lf-eigen { width: 100%; font: inherit; font-size: 0.88rem; line-height: 1.6; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.75rem 0.9rem; resize: vertical; }
.lf-einwand { display: flex; flex-direction: column; gap: 0.15rem; text-align: left; background: var(--white); border-radius: 12px; padding: 0.55rem 0.75rem; transition: box-shadow 0.2s; }
.lf-einwand:hover { box-shadow: var(--card-shadow); }
.lf-einwand b { font-size: 0.8rem; }
.lf-einwand span { font-size: 0.74rem; color: var(--text-56); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.lf-frage { display: flex; flex-direction: column; gap: 0.35rem; }
.lf-frage > label { font-size: 0.74rem; font-weight: 600; display: flex; gap: 0.4rem; align-items: baseline; }
.lf-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.lf-chips button, .lf-skala button { padding: 0.36rem 0.7rem; border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--border-light); font-size: 0.76rem; font-weight: 600; color: var(--text-56); transition: all 0.15s; display: inline-flex; align-items: center; gap: 0.3rem; }
.lf-chips button.active { background: var(--green); border-color: var(--green); color: var(--white); }
.lf-chips input { width: 4.6rem; padding: 0.36rem 0.5rem; border-radius: var(--r-pill); border: 1px solid var(--border-light); font: inherit; font-size: 0.76rem; text-align: center; }
.lf-skala { display: grid; grid-template-columns: repeat(10, 1fr); gap: 0.25rem; }
.lf-skala button { padding: 0.36rem 0; justify-content: center; border-radius: 8px; }
.lf-skala[data-stufe="hoch"] button.active { background: var(--ok); border-color: var(--ok); color: var(--white); }
.lf-skala[data-stufe="mittel"] button.active { background: var(--warn); border-color: var(--warn); color: var(--white); }
.lf-skala[data-stufe="tief"] button.active { background: var(--stop); border-color: var(--stop); color: var(--white); }
.lf-gate-hinweis { margin-top: 0.3rem; text-align: left; padding: 0.5rem 0.75rem; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.lf-gate-hinweis.grenz { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); }
.lf-gate-hinweis.stop { background: var(--stop-bg); color: var(--stop); border: 1px solid var(--stop); }
.lf-zeile { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lf-zeile input[type="datetime-local"] { padding: 0.45rem 0.7rem; border-radius: var(--r-control); border: 1px solid var(--border-light); font: inherit; font-size: 0.8rem; background: var(--white); }
.lf-erg button.active[data-ergebnis="termin"] { background: var(--ok); border-color: var(--ok); }
.lf-erg button.active[data-ergebnis="kein_interesse"], .lf-erg button.active[data-ergebnis="disqualifiziert"] { background: var(--stop); border-color: var(--stop); }
.lf-ergebnis textarea { width: 100%; font: inherit; font-size: 0.82rem; border: 1px solid var(--border-light); border-radius: 12px; padding: 0.55rem 0.75rem; resize: vertical; background: var(--white); }
.lf-overlay { position: absolute; inset: 0; z-index: 5; background: rgba(14,12,11,0.55); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 1.2rem; border-radius: inherit; }
.lf-overlay[hidden] { display: none; }
.lf-karte { background: var(--white); border-radius: var(--r-card); width: min(720px, 100%); max-height: 100%; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 30px 80px rgba(14,12,11,0.35); }
.lf-karte.stop { border-top: 4px solid var(--stop); }
.lf-karte.grenz { border-top: 4px solid var(--warn); }
.lf-karte-kopf { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem 0.9rem; border-bottom: 1px solid var(--tint-deep); }
.lf-karte-kopf h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.lf-karte-inhalt { padding: 1.1rem 1.3rem; overflow-y: auto; display: flex; flex-direction: column; gap: 0.6rem; }
.lf-gross { font-size: 1.12rem; line-height: 1.7; white-space: pre-wrap; }
.lf-karte-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.8rem 1.3rem; border-top: 1px solid var(--tint-deep); background: var(--tint); }
.lf-luecke { flex: 1; }
.lf-kosten { background: var(--tint); border-radius: 12px; padding: 0.6rem 0.9rem; font-size: 0.85rem; }
.lf-kosten div { display: flex; justify-content: space-between; padding: 0.15rem 0; }
.lf-kosten .summe { border-top: 1px solid var(--border-light); margin-top: 0.3rem; padding-top: 0.4rem; font-weight: 800; }
.lf-ew-zeile { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem; padding: 0.6rem; background: var(--tint); border-radius: 12px; margin-bottom: 0.45rem; }
.lf-ew-zeile input, .lf-ew-zeile textarea { font: inherit; font-size: 0.8rem; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.45rem 0.6rem; background: var(--white); }
.lf-ew-zeile textarea { grid-column: 1 / -1; resize: vertical; }
.lf-ew-zeile .icon-btn { grid-row: 1; grid-column: 2; }
@media (max-width: 860px) {
  .lf-grid { grid-template-columns: 1fr; }
  .lf-skript { max-height: none; }
}
@media (max-width: 700px) {
  .lf-kopf [data-lf-vorlage] { margin-left: 0; }
  .lf-skala { grid-template-columns: repeat(5, 1fr); }
  .lf-gross { font-size: 1rem; }
  .lf-karte-fuss .btn { flex: 1 1 100%; justify-content: center; }
  .lf-luecke { display: none; }
}

/* Closing Call: zweiter Knopf im Lead-Panel und Fenster mit Phasen */
.lp-leitfaden-knopf.closing { background: var(--white); color: var(--black); border: 1px solid var(--border-light); }
.lp-leitfaden-knopf.closing:hover { background: var(--tint); }
.lp-leitfaden-knopf.closing > .ic:first-child { background: var(--ok); color: var(--white); }
.lp-leitfaden-knopf.closing small { color: var(--text-56); }
.lp-leitfaden-knopf.closing.vorn { border-color: var(--ok); box-shadow: 0 0 0 3px var(--ok-bg); }
.lp-zitat { font-size: 0.78rem; line-height: 1.5; color: var(--text-56); background: var(--tint); border-left: 3px solid var(--ok); border-radius: 8px; padding: 0.5rem 0.7rem; margin-bottom: 0.7rem; white-space: pre-wrap; }

.modal.cl .modal-inhalt { gap: 0.8rem; }
.cl-leiste { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 0.6rem; align-items: end; background: var(--tint); border-radius: var(--r-card); padding: 0.75rem 0.9rem; position: relative; }
.cl-leiste > * { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.cl-leiste span:first-child { font-family: inherit; font-weight: 700; font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-56); }
.cl-leiste b { font-size: 0.85rem; overflow-wrap: anywhere; }
.cl-leiste b a { color: var(--cyan); }
.cl-leiste input, .cl-felder input { width: 100%; padding: 0.45rem 0.7rem; border-radius: 10px; border: 1px solid var(--border-light); font: inherit; font-size: 0.88rem; background: var(--white); }
.cl-nk { align-items: center; background: var(--green); color: var(--white); border-radius: 12px; padding: 0.35rem 0.9rem; }
.cl-nk span:first-child { color: var(--white-48); }
.cl-nk b { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }
.cl-wrap { display: grid; grid-template-columns: 11rem 1fr; gap: 0.9rem; align-items: start; }
.cl-phasen { display: flex; flex-direction: column; gap: 0.2rem; position: sticky; top: 0; }
.cl-phasen button { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.6rem; border-radius: 12px; font-size: 0.8rem; font-weight: 600; color: var(--text-56); text-align: left; transition: all 0.15s; }
.cl-phasen button:hover { background: var(--tint); color: var(--black); }
.cl-phasen button.active { background: var(--green); color: var(--white); }
.cl-pnr { width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.66rem; background: var(--tint-deep); color: var(--text-56); flex-shrink: 0; }
.cl-phasen button.active .cl-pnr { background: var(--cyan); color: var(--white); }
.cl-phasen button.fertig .cl-pnr { background: var(--ok); color: var(--white); }
.cl-inhalt { display: flex; flex-direction: column; gap: 0.8rem; min-width: 0; }
.cl-bloecke { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.8rem; align-items: start; }
.cl-block { background: var(--tint); border-radius: var(--r-card); padding: 0.85rem 1rem; display: flex; flex-direction: column; gap: 0.6rem; border-top: 3px solid var(--farbe, var(--cyan)); }
.cl-kopf { display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cl-nr { width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--farbe, var(--cyan)); color: var(--white); display: grid; place-items: center; font-size: 0.64rem; letter-spacing: 0; }
.cl-skript { display: flex; flex-direction: column; gap: 0.25rem; }
.cl-notiz { font-family: inherit; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-56); }
.cl-satz { background: var(--white); border-radius: 12px; padding: 0.7rem 0.85rem; font-size: 0.9rem; line-height: 1.65; white-space: pre-wrap; }
.cl-satz.gross { font-size: 0.95rem; font-weight: 600; border-left: 3px solid var(--stop); }
.cl-edit { cursor: text; transition: box-shadow 0.15s; }
.cl-edit:hover { box-shadow: 0 0 0 1px var(--border-light); }
.cl-edit textarea { width: 100%; font: inherit; border: 1px solid var(--cyan); border-radius: 10px; padding: 0.5rem 0.6rem; resize: vertical; }
.cl-edit-knoepfe { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
.cl-hinweis { font-size: 0.76rem; color: var(--warn); background: var(--warn-bg); border-radius: 10px; padding: 0.5rem 0.7rem; }
.cl-frage { display: flex; flex-direction: column; gap: 0.3rem; }
.cl-check { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.86rem; line-height: 1.5; cursor: pointer; }
.cl-check input { margin-top: 0.25rem; accent-color: var(--ok); width: 1rem; height: 1rem; flex-shrink: 0; }
.cl-check > div { flex: 1; }
.cl-block textarea:not(.cl-edit textarea) { width: 100%; font: inherit; font-size: 0.82rem; border: 1px solid var(--border-light); border-radius: 10px; padding: 0.5rem 0.65rem; resize: vertical; background: var(--white); }
.cl-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.cl-felder.vier { grid-template-columns: repeat(4, 1fr); }
.cl-felder label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.66rem; color: var(--text-56); font-weight: 600; }
.cl-analyse { display: flex; flex-direction: column; gap: 0.5rem; }
.cl-analyse label { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.78rem; font-weight: 600; }
.cl-regler { display: flex; align-items: center; gap: 0.6rem; }
.cl-regler input { flex: 1; accent-color: var(--ok); }
.cl-regler b { width: 1.6rem; text-align: right; font-size: 0.95rem; }
.cl-punkt { display: flex; gap: 0.5rem; align-items: baseline; background: var(--white); border-radius: 10px; padding: 0.5rem 0.7rem; font-size: 0.86rem; }
.cl-punkt > div { flex: 1; }
.cl-punkt em { font-style: normal; font-size: 0.72rem; color: var(--ok); font-weight: 700; white-space: nowrap; }
.cl-einwand { background: var(--tint); border-radius: var(--r-card); padding: 0.8rem 1rem; border-left: 3px solid var(--stop); }
.cl-einwand summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.cl-einwand[open] summary { margin-bottom: 0.6rem; }
.cl-einwand .cl-skript + .cl-skript { margin-top: 0.5rem; }
.cl-gewonnen { border-top-color: var(--ok); background: var(--ok-bg); }
.cl-gewonnen .btn { align-self: flex-start; }
.cl-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding-top: 0.3rem; }
.cl-luecke { flex: 1; }
@media (max-width: 860px) {
  .cl-wrap { grid-template-columns: 1fr; }
  .cl-phasen { flex-direction: row; flex-wrap: wrap; position: static; }
  .cl-phasen button { padding: 0.4rem 0.55rem; font-size: 0.74rem; }
  .cl-leiste { grid-template-columns: 1fr 1fr; }
  .cl-leiste > div:first-child { grid-column: 1 / -1; }
  .cl-felder.vier { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .cl-bloecke { grid-template-columns: 1fr; }
  .cl-nav .btn { flex: 1 1 100%; justify-content: center; }
  .cl-luecke { display: none; }
}

/* Eingang in den Einstellungen */
.eingang-quellen { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.6rem; }
.eq { background: var(--tint); border-radius: 14px; padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.eq-kopf { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.eq p { margin: 0; }
.code.klein-code { font-size: 0.66rem; overflow-wrap: anywhere; }
.eingang-log { display: flex; flex-direction: column; max-height: 22rem; overflow-y: auto; }
.eingang-log .el { display: grid; grid-template-columns: auto auto auto 1fr; gap: 0.6rem; align-items: center; text-align: left; padding: 0.45rem 0.4rem; border-bottom: 1px solid var(--tint-deep); font-size: 0.78rem; }
.eingang-log .el:hover { background: var(--tint); }
.eingang-log .pdot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ok); }
.eingang-log .el.fehler .pdot { background: var(--stop); }
.eingang-log .el-text { color: var(--text-56); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code.roh { white-space: pre-wrap; font-size: 0.7rem; max-height: 60vh; overflow: auto; }
@media (max-width: 700px) {
  .eingang-log .el { grid-template-columns: auto 1fr; }
  .eingang-log .el .mono { display: none; }
}
.lp-eingang { background: var(--tint); border-radius: 12px; padding: 0.55rem 0.75rem; margin-bottom: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; }
.lp-eingang-kopf { font-family: inherit; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); display: flex; justify-content: space-between; }
.lp-eingang-kopf span { color: var(--text-56); letter-spacing: 0; text-transform: none; }
.lp-kv2 { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.78rem; }
.lp-kv2 span { color: var(--text-56); }
.lp-kv2 b { text-align: right; overflow-wrap: anywhere; font-weight: 600; }

/* Aktionen */
.ak-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 0.8rem; padding: 0.9rem; }
.ak-karte { text-align: left; background: var(--tint); border-radius: var(--r-card); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid transparent; transition: all 0.2s var(--ease-smooth); }
.ak-karte:hover { background: var(--white); border-color: var(--border-light); box-shadow: var(--card-shadow); transform: translateY(-1px); }
.ak-karte.entwurf, .ak-karte.pruefung { border-style: dashed; border-color: var(--border-light); }
.ak-karte.archiv { opacity: 0.55; }
.ak-karte p { font-size: 0.8rem; color: var(--text-56); line-height: 1.5; flex: 1; }
.ak-kopf { display: flex; justify-content: space-between; gap: 0.5rem; align-items: center; }
.ak-kopf b { font-size: 0.98rem; }
.ak-kz { font-family: inherit; font-weight: 700; font-size: 0.62rem; letter-spacing: 0.08em; background: var(--green); color: var(--white); border-radius: 6px; padding: 0.1rem 0.4rem; }
.ak-fuss { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ak-kopfzeile { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.ak-kurz { font-size: 0.95rem; line-height: 1.6; }
.ak-teil p { font-size: 0.86rem; line-height: 1.6; white-space: pre-wrap; }
.ak-teil ul { margin: 0; padding-left: 1.1rem; font-size: 0.84rem; line-height: 1.6; }
.ak-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.8rem; }
.ak-texte { display: flex; flex-direction: column; gap: 0.4rem; }
.ak-texte > div { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 0.6rem; align-items: start; background: var(--tint); border-radius: 10px; padding: 0.5rem 0.7rem; }
.ak-texte span { font-family: inherit; font-weight: 700; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-56); padding-top: 0.2rem; }
.ak-texte p { margin: 0; font-size: 0.84rem; white-space: pre-wrap; }
.ak-verlauf { display: flex; flex-direction: column; }
.ak-verlauf > div { display: grid; grid-template-columns: 1fr auto auto; gap: 0.8rem; font-size: 0.8rem; padding: 0.35rem 0; border-bottom: 1px solid var(--tint-deep); }
.ak-verlauf span { color: var(--text-56); }
.ak-aktuell { background: var(--tint); border-radius: 12px; padding: 0.6rem 0.8rem; font-size: 0.86rem; }
.ak-check { display: flex !important; gap: 0.5rem; align-items: center; font-size: 0.82rem !important; margin-top: 1.4rem; }
@media (max-width: 700px) {
  .ak-texte > div { grid-template-columns: 1fr auto; }
  .ak-texte span { grid-column: 1 / -1; }
  .ak-grid { padding: 0.6rem; }
}
.cl-zeile { display: flex; gap: 0.3rem; align-items: flex-start; }
.cl-zeile > :first-child { flex: 1; min-width: 0; }
.cl-weg { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; color: var(--text-32); flex-shrink: 0; margin-top: 0.15rem; }
.cl-weg:hover { background: var(--stop-bg); color: var(--stop); }
.cl-einwand summary .cl-weg { display: inline-grid; vertical-align: middle; margin-left: 0.3rem; }
.cl-einwand-titel { font-size: 0.82rem; color: var(--text-56); margin-bottom: 0.4rem; }
.cl-plusleiste { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cl-plus { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.72rem; font-weight: 600; color: var(--text-56); border: 1px dashed var(--border-light); border-radius: var(--r-pill); padding: 0.2rem 0.6rem; }
.cl-plus:hover { color: var(--black); border-color: var(--text-32); }

/* ════════════════════════════════════════════════════════════════
   Design 2026 · Markensprache wie der Creative Hub (31.10.2026)
   Creme-Fläche, helle Seitenleiste, dunkle Kopffläche mit Orange-Schimmer, weiße Karten mit feiner Linie,
   Orange nur für den Hauptknopf. Überschreibt die Vorlage oben; Farben nur über Variablen.
   ════════════════════════════════════════════════════════════════ */
:root {
  --ink: #0e0c0b; --ink-soft: #1d1916; --ink-70: #4a423c;
  --grey: #7d746b; --grey-soft: #a89f95;
  --paper: #f3efe9; --cream: #f7f4ef; --surface: #fbf9f6; --stone: #efe9e0; --line: #e4ddd2; --card: #fffdfa;
  --orange: #c2531f; --orange-deep: #a6461a; --orange-soft: #f4e4d9;
  --canvas: var(--paper); --border-light: var(--line); --tint: var(--cream); --tint-deep: var(--stone);
  --card-shadow: 0 1px 3px #1a17160a;
  --r-card: 18px;
}
body { background: var(--paper); color: var(--ink-soft); }

/* Rahmen: helle Seitenleiste */
.shell { grid-template-columns: 236px minmax(0, 1fr); }
.sb { background: var(--cream); color: var(--ink-soft); border-right: 1px solid var(--line); padding: 1.1rem 0 1rem; }
.sb::before { display: none; }
.sb-brand { padding: 0.2rem 1.1rem 0.4rem; margin-bottom: 0.9rem; color: var(--ink); }
.sb-logo { width: 34px; height: 34px; border-radius: 10px; }
.sb-text { display: grid; line-height: 1.15; min-width: 0; }
.sb-text strong { font-weight: 800; font-size: 0.95rem; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-text small { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.sb-group { margin-top: 0.7rem; }
.sb-grouphead { color: var(--grey-soft); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; padding: 0.3rem 1.4rem 0.3rem; }
.sb-nav { padding: 0 0.7rem; gap: 2px; margin-bottom: 0; }
.sb-nav a { color: var(--ink-70); font-size: 0.86rem; font-weight: 600; padding: 0.5rem 0.75rem; border-radius: 10px; gap: 0.7rem; }
.sb-nav a .ic { color: var(--grey); font-size: 1.05rem; transition: color 0.18s; }
.sb-nav a:hover { color: var(--ink); background: #1a17160a; }
.sb-nav a:hover .ic { color: var(--ink); }
.sb-nav a.active { color: var(--ink); background: var(--card); box-shadow: 0 1px 2px #1a171612, 0 0 0 1px var(--line); }
.sb-nav a.active .ic { color: var(--orange); }
.sb-nav a.active::after { display: none; }
.sb-nav a .tx { flex: 1; min-width: 0; }
.sb-nav a .zahl { color: var(--card); background: var(--orange); font-weight: 700; font-size: 0.62rem; }
.sb-nav a.active .zahl { display: inline-block; }
.sb-user { border-top: 1px solid var(--line); margin: 0.8rem 0.9rem 0; }
.sb-user span { color: var(--grey); }
.sb-user strong { font-weight: 700; color: var(--ink); }
.sb-logout { color: var(--grey-soft); }
.sb-logout:hover { color: var(--ink); }
.avatar { background: var(--ink); color: var(--paper); }

/* Kopf jeder Seite: dunkle Fläche */
.page-header {
  margin: 1.4rem 2rem 0; border: 0; border-radius: 22px; background: var(--ink); color: var(--paper);
  padding: 1.7rem 2rem; position: relative; overflow: hidden; align-items: flex-end;
}
.page-header::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 120% at 88% 0%, #c2531f40, transparent 70%); }
.page-header > * { position: relative; }
.ph-eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange); margin-bottom: 0.45rem; }
.page-header h1 { font-size: clamp(1.7rem, 3.2vw, 2.35rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--paper); }
.page-header h1 .serif { color: var(--grey-soft); font-weight: 600; font-size: 0.62em; letter-spacing: -0.01em; margin-left: 0.6rem; }
.page-header p { color: var(--grey-soft); font-size: 0.86rem; margin-top: 0.4rem; }
.page-header .actions { flex-wrap: wrap; justify-content: flex-end; }
.page-header .btn-secondary { background: #ffffff14; border-color: #ffffff26; color: var(--paper); }
.page-header .btn-secondary:hover { background: #ffffff24; border-color: #ffffff40; color: var(--paper); }
.content { padding: 1.3rem 2rem 3rem; }

/* Knöpfe: Orange nur für den Hauptknopf */
.btn { font-weight: 600; font-size: 0.84rem; padding: 0.55rem 1.05rem; }
.btn-primary { background: var(--orange); color: var(--card); }
.btn-primary:hover { background: var(--orange-deep); box-shadow: none; }
.btn-secondary { background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.btn-secondary:hover { border-color: var(--ink-70); color: var(--ink); }

/* Karten */
.w { background: var(--card); border: 1px solid var(--line); box-shadow: var(--card-shadow); border-radius: var(--r-card); }
.w:hover { box-shadow: 0 1px 3px #1a17160a, 0 14px 30px -18px #1a171633; }
.w .l { color: var(--grey); letter-spacing: 0.1em; font-weight: 700; }
.w .l .ic { color: var(--orange); }
.w .v, .w.kz .v { color: var(--ink); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.w.kz .v { font-size: 2.1rem; line-height: 1.05; margin-top: 0.2rem; }
.w .d.up { color: var(--olive, #5f7a3a); }
.w.hero { background: var(--ink); border-color: var(--ink); }

/* Filter, Segmente, Suche, Auswahl */
.seg { background: var(--stone); box-shadow: none; padding: 0.2rem; }
.seg button { color: var(--ink-70); font-weight: 600; }
.seg button.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px #1a171614, 0 0 0 1px var(--line); }
.search, .sel, .monatwahl { box-shadow: none; border: 1px solid var(--line); background-color: var(--card); }
.search:focus-within, .sel:focus { border-color: var(--orange); }

/* Tabellen */
.w.tablew .head .hl { color: var(--ink); letter-spacing: 0.08em; }
.w.tablew .head .hl .ic { color: var(--orange); }
thead th { background: var(--surface); color: var(--grey); border-color: var(--line); }
tbody td { border-top: 1px solid var(--stone); }
tbody tr:hover { background: var(--cream); }
td strong { color: var(--ink); }

/* Status-Pillen etwas klarer */
.pill { font-weight: 600; }
.pill.art-gewonnen, .pill.gewonnen, .pill.kunde { background: var(--ink); color: var(--paper); }
.pill.live { background: #5f7a3a1f; color: #4b6230; }

/* Pipeline-Board */
.pl-spalte { background: var(--stone); border-radius: 16px; }
.pl-karte { background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px #1a17160a; border-radius: 12px; }
.pl-karte:hover { border-color: var(--grey-soft); }

/* Modale und Lead-Panel */
.modal { background: var(--card); border-radius: 20px; box-shadow: 0 30px 80px -20px #0e0c0b66, 0 0 0 1px var(--line); }
.modal-fuss { background: var(--surface); border-top-color: var(--line); }
.modal-kopf { border-bottom-color: var(--line); }
.modal-kopf h2 { font-weight: 800; }
.leadpanel { background: var(--card); border-left: 1px solid var(--line); }

/* Tablet: Seitenleiste nur mit Symbolen */
@media (max-width: 1180px) and (min-width: 901px) {
  .shell { grid-template-columns: 72px minmax(0, 1fr); }
  .sb { align-items: center; padding: 1rem 0; }
  .sb-text, .sb-grouphead, .sb-nav a .tx, .sb-user .info, .sb-nav a .zahl { display: none; }
  .sb-brand { padding: 0.2rem 0 0.4rem; justify-content: center; }
  .sb-group { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid var(--line); width: 100%; }
  .sb-nav { padding: 0 0.6rem; align-items: center; }
  .sb-nav a { justify-content: center; padding: 0.6rem; width: 44px; }
  .sb-user { flex-direction: column; margin: 0.6rem 0 0; padding-top: 0.6rem; }
  .page-header, .content { margin-left: 1.2rem; margin-right: 1.2rem; }
  .content { padding-left: 0; padding-right: 0; }
}

/* Handy: Kopf schlank, Leiste unten wie eine App, „Mehr“ öffnet die Seitenleiste */
.tabbar { display: none; }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .mob-bar { background: #f7f4efee; border-bottom-color: var(--line); }
  .hb { background: var(--ink); }
  .sb { background: var(--cream); inset: 0 18% 0 0; }
  .page-header { margin: 0.8rem 0.8rem 0; padding: 1.2rem 1.15rem; border-radius: 18px; }
  .page-header h1 { font-size: 1.5rem; }
  .page-header h1 .serif { display: block; margin: 0.2rem 0 0; font-size: 0.6em; }
  .content { padding: 0.9rem 0.8rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: #f7f4efee; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--line); padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
  }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; padding: 0.35rem 0.2rem; border-radius: 12px; color: var(--grey); font-size: 0.62rem; font-weight: 700; font-family: inherit; background: none; }
  .tabbar i { font-size: 1.25rem; line-height: 1; }
  .tabbar a.active { color: var(--orange-deep); }
  body.lead-open .tabbar { display: none; }
}

/* Cockpit „Heute“ */
.heute { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.w.ht { padding: 1rem 1.1rem 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.w.ht.ruhig { background: var(--surface); }
.ht-kopf { display: flex; align-items: center; gap: 0.55rem; }
.ht-kopf .ic { width: 2rem; height: 2rem; border-radius: 10px; background: var(--orange-soft); color: var(--orange-deep); font-size: 1rem; }
.w.ht.ruhig .ht-kopf .ic { background: var(--stone); color: var(--grey); }
.ht-kopf b { font-size: 0.9rem; color: var(--ink); flex: 1; min-width: 0; }
.ht-n { font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.w.ht.ruhig .ht-n { color: var(--grey-soft); }
.ht-alle { font-size: 0.72rem; font-weight: 700; color: var(--orange-deep); }
.ht-liste { display: flex; flex-direction: column; }
.ht-zeile { display: flex; justify-content: space-between; gap: 0.8rem; text-align: left; padding: 0.42rem 0.2rem; border-top: 1px solid var(--stone); font-size: 0.82rem; color: var(--ink-soft); font-family: inherit; background: none; border-radius: 6px; }
.ht-zeile:hover { background: var(--cream); }
.ht-zeile span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ht-zeile em { font-style: normal; font-size: 0.74rem; color: var(--grey); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ht-zeile.warn em { color: var(--stop); font-weight: 700; }
.ht-leer { font-size: 0.8rem; color: var(--grey); margin: 0 0 0.3rem; }
.heute-trenner { margin-top: 0.6rem; color: var(--grey); }
@media (max-width: 700px) {
  .w.ht.ruhig { padding: 0.6rem 0.9rem; }
  .w.ht.ruhig .ht-leer { display: none; }
  .w.ht.ruhig .ht-kopf .ic { width: 1.7rem; height: 1.7rem; }
  .heute { gap: 0.6rem; }
}

/* ════════ Design 2026 · Runde 2: App-Prinzip, kompakt und luftig ════════ */
/* Kopf kompakter, Reiter des Bereichs unten im Kopf */
.page-header { padding: 1.25rem 1.6rem; margin: 1.2rem 1.6rem 0; flex-wrap: wrap; row-gap: 0.9rem; border-radius: 20px; }
.page-header h1 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); }
.page-header p { margin-top: 0.25rem; font-size: 0.82rem; }
.ph-eyebrow { margin-bottom: 0.3rem; }
.ph-text { flex: 1; min-width: 0; }
.ph-reiter { flex-basis: 100%; display: flex; gap: 0.25rem; overflow-x: auto; scrollbar-width: none; margin: 0.1rem -0.2rem -0.2rem; }
.ph-reiter::-webkit-scrollbar { display: none; }
.ph-reiter a { padding: 0.42rem 0.9rem; border-radius: 999px; font-size: 0.82rem; font-weight: 700; color: var(--grey-soft); white-space: nowrap; transition: background 0.18s, color 0.18s; }
.ph-reiter a:hover { color: var(--paper); background: #ffffff14; }
.ph-reiter a.aktiv { background: var(--paper); color: var(--ink); }
.content { padding: 1.1rem 1.6rem 2.6rem; gap: 1rem; }

/* Seitenleiste: Nebenpunkte klein unten, externer Link markiert */
.sb-nav { padding-top: 0.2rem; }
.sb-nav a .extern { margin-left: auto; color: var(--grey-soft); font-size: 0.85rem; }
.sb-neben { padding: 0 0.7rem; display: flex; flex-direction: column; gap: 2px; }
.sb-neben a { display: flex; align-items: center; gap: 0.7rem; padding: 0.42rem 0.75rem; border-radius: 10px; font-size: 0.8rem; font-weight: 600; color: var(--grey); }
.sb-neben a .ic { color: var(--grey-soft); }
.sb-neben a:hover, .sb-neben a.active { color: var(--ink); background: #1a17160a; }
.sb-nav a { padding: 0.62rem 0.8rem; font-size: 0.9rem; }

/* Kennzahlen: eine schlanke Leiste statt großer Kacheln */
.bento:has(> .w.kz) { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--card-shadow); overflow: hidden; }
.bento:has(> .w.kz) > .w.kz { grid-column: auto; border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0.9rem 1.1rem; }
.bento:has(> .w.kz) > .w.kz + .w.kz { border-left: 1px solid var(--stone); }
.bento:has(> .w.kz) > .w.kz:hover { box-shadow: none; }
.w.kz .v { font-size: 1.55rem; }
.w.kz .l { font-size: 0.62rem; }
.w.kz .d { font-size: 0.72rem; }
.kunden-kpis { margin-bottom: 0; }

/* Handy-Leiste: Zahl als Punkt */
.tabbar a { position: relative; }
.tabbar .zahl { position: absolute; top: 0.15rem; left: calc(50% + 0.45rem); min-width: 1rem; height: 1rem; padding: 0 0.25rem; border-radius: 999px; background: var(--orange); color: var(--card); font-size: 0.58rem; font-weight: 800; display: grid; place-items: center; }

@media (max-width: 1180px) and (min-width: 901px) {
  .sb-neben a .tx { display: none; }
  .sb-neben a { justify-content: center; padding: 0.55rem; }
  .sb-nav a .extern { display: none; }
  .page-header, .content { margin-left: 1.1rem; margin-right: 1.1rem; }
}
@media (max-width: 900px) {
  .page-header { margin: 0.7rem 0.7rem 0; padding: 1rem 1rem 0.9rem; }
  .page-header h1 { font-size: 1.35rem; }
  .page-header h1 .serif { display: inline; margin-left: 0.45rem; font-size: 0.62em; }
  .page-header .actions { display: flex; position: absolute; right: 0.9rem; top: 0.9rem; }
  .page-header .actions .btn .txt { display: none; }
  .page-header .actions .btn { padding: 0.5rem; }
  .page-header .actions .btn-secondary { display: none; }
  .ph-text { padding-right: 3rem; }
  .content { padding: 0.8rem 0.7rem calc(5.5rem + env(safe-area-inset-bottom)); }
  .bento:has(> .w.kz) { grid-template-columns: 1fr 1fr; }
  .bento:has(> .w.kz) > .w.kz:nth-child(odd) { border-left: 0; }
  .bento:has(> .w.kz) > .w.kz:nth-child(n+3) { border-top: 1px solid var(--stone); }
  .bento:has(> .w.kz) > .w.kz { padding: 0.7rem 0.85rem; }
  .w.kz .v { font-size: 1.3rem; }
  .mob-bar { display: none; }
}

/* Finanzen wie im CRM: drei Karten oben, Ziele, Verlauf, Steuer-Rechenkette */
.fin { display: flex; flex-direction: column; gap: 1rem; }
.fin .w { opacity: 1; transform: none; }
.fin-oben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fin-oben.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w.fin-karte { display: flex; flex-direction: column; gap: 0.45rem; padding: 1.15rem 1.25rem; }
.w.fin-karte.dunkel { background: var(--ink-soft); border-color: var(--ink-soft); color: var(--paper); }
.w.fin-karte.dunkel .l { color: var(--grey-soft); }
.w.fin-karte.warn { border-color: var(--warn); }
.fin-gross { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-karte.dunkel .fin-gross { color: var(--paper); }
.fin-zeile { font-size: 0.8rem; font-weight: 600; color: var(--grey); }
.fin-zeile.plus { color: #7fa35a; } .fin-zeile.minus { color: #e07a5f; }
.fin-karte:not(.dunkel) .fin-zeile.plus { color: var(--ok); } .fin-karte:not(.dunkel) .fin-zeile.minus { color: var(--stop); }
.fin-rechnung { display: flex; flex-direction: column; margin-top: 0.3rem; }
.fin-rechnung > div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.32rem 0; border-top: 1px solid var(--stone); font-size: 0.8rem; }
.fin-karte.dunkel .fin-rechnung > div { border-top-color: #ffffff1a; }
.fin-rechnung span { color: var(--grey); min-width: 0; }
.fin-karte.dunkel .fin-rechnung span { color: var(--grey-soft); }
.fin-rechnung b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fin-rechnung .klickbar { cursor: pointer; }
.fin-link { margin-top: auto; padding-top: 0.4rem; font-size: 0.78rem; font-weight: 700; color: var(--orange-deep); display: inline-flex; align-items: center; gap: 0.25rem; }
.fin-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.fin-paar span { display: block; font-size: 0.72rem; color: var(--grey); font-weight: 600; }
.fin-paar b { font-size: 1.45rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.fin-ampel { align-self: flex-start; font-size: 0.8rem; font-weight: 800; padding: 0.3rem 0.75rem; border-radius: 999px; }
.fin-ampel.rot { background: var(--stop-bg); color: var(--stop); }
.fin-ampel.gruen { background: var(--ok-bg); color: var(--ok); }
.fin-ziele { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.w.fin-zielkarte { padding: 0.95rem 1.15rem; display: flex; flex-direction: column; gap: 0.45rem; }
.fz-kopf { display: flex; justify-content: space-between; gap: 0.8rem; align-items: baseline; font-size: 0.82rem; }
.fz-kopf span { color: var(--grey); font-weight: 700; }
.fz-kopf b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fz-balken { height: 10px; border-radius: 999px; background: var(--stone); overflow: hidden; }
.fz-balken i { display: block; height: 100%; border-radius: inherit; background: var(--ink); }
.fz-balken.orange i { background: var(--orange); }
.fz-fuss { font-size: 0.74rem; color: var(--grey); }
.fin-col.zukunft { opacity: 0.35; }
.fin-col { text-decoration: none; color: inherit; }
details.w.fin-posten { padding: 0.8rem 1.15rem; }
.fin-posten summary { cursor: pointer; display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.fin-posten summary b { margin-left: auto; }
.fin-posten[open] summary { margin-bottom: 0.4rem; }
.fin-tabelle tfoot td { padding: 0.7rem 1.25rem; border-top: 2px solid var(--line); font-weight: 800; background: var(--surface); }
.fin-kette .kette { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; margin: 0.8rem 0 0.5rem; }
.kette > div { background: var(--cream); border-radius: 14px; padding: 0.6rem 0.9rem; display: flex; flex-direction: column; min-width: 9rem; }
.kette > div span { font-size: 0.7rem; color: var(--grey); font-weight: 700; }
.kette > div b { font-size: 1.2rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.kette > div.ergebnis { background: var(--ink); }
.kette > div.ergebnis span { color: var(--grey-soft); } .kette > div.ergebnis b { color: var(--paper); }
.kette em { font-style: normal; font-size: 1.2rem; font-weight: 800; color: var(--grey-soft); }
.w.fin-summe { display: flex; justify-content: space-between; align-items: center; padding: 0.9rem 1.25rem; background: var(--ink); border-color: var(--ink); color: var(--paper); }
.fin-summe span { font-weight: 700; color: var(--grey-soft); }
.fin-summe b { font-size: 1.5rem; font-weight: 800; }
.fin-annahmen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.6rem; margin-top: 0.7rem; }
.fin-annahme { display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.74rem; font-weight: 700; color: var(--grey); }
.fin-annahme input { font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem 0.7rem; background: var(--card); }
.fin-schalter-reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; margin-top: 0.8rem; }
.fin-schalter { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.fin-schalter input { accent-color: var(--orange); width: 1rem; height: 1rem; }
.fin-monatsreiter { display: flex; gap: 0.3rem; overflow-x: auto; scrollbar-width: none; }
.fin-monatsreiter button { padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink-70); white-space: nowrap; }
.fin-monatsreiter button.aktiv { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.w.fin-kat-karte { padding: 1rem 1.2rem; }
.warn-text { color: var(--warn) !important; font-weight: 700 !important; }
.fin-buchungen { display: flex; flex-direction: column; }
.fb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 12rem; gap: 0.8rem; align-items: center; padding: 0.6rem 1.2rem; border-top: 1px solid var(--stone); }
.fb-zeile:first-child { border-top: 0; }
.fb-text { min-width: 0; display: flex; flex-direction: column; }
.fb-text strong { font-size: 0.84rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-text span { font-size: 0.72rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-zeile .sel { max-width: none; width: 100%; }
.fin-mehr { width: 100%; padding: 0.8rem; border-top: 1px solid var(--stone); font: inherit; font-size: 0.82rem; font-weight: 700; color: var(--orange-deep); background: var(--surface); }
@media (max-width: 1100px) { .fin-oben { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .fin-oben.zwei { grid-template-columns: 1fr; }
  .fin-gross { font-size: 1.75rem; }
  .fb-zeile { grid-template-columns: minmax(0, 1fr) auto; padding: 0.55rem 0.85rem; }
  .fb-zeile .sel { grid-column: 1 / -1; }
  .kette > div { min-width: 0; flex: 1 1 40%; }
  .kette em { display: none; }
  .fin-tabelle th:nth-child(5), .fin-tabelle td:nth-child(5), .fin-tabelle th:nth-child(7), .fin-tabelle td:nth-child(7) { display: none; }
}
.fin-monatsreiter button.leer:not(.aktiv) { opacity: 0.45; }

/* Kunden-Detail mit Reitern */
.modal.kd { width: min(880px, 100%); }
.kd-titel small { display: block; font-size: 0.74rem; font-weight: 500; color: var(--grey); letter-spacing: 0; }
.kd-reiter { display: flex; gap: 0.25rem; background: var(--stone); border-radius: 999px; padding: 0.2rem; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 2; box-shadow: 0 -1.2rem 0 var(--card); }
.kd-reiter button { flex: 1; padding: 0.45rem 0.8rem; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink-70); white-space: nowrap; background: none; }
.kd-reiter button.aktiv { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px #1a171614; }
.kd-teil { display: flex; flex-direction: column; gap: 0.9rem; }
.kd-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.kd-chips .pill .ges { margin: 0 0.15rem 0 0; }
.kd-label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.kd-next { background: var(--orange-soft); border-radius: 16px; padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 0.4rem; }
.kd-next.fertig { background: var(--ok-bg); }
.kd-next .kd-label { color: var(--orange-deep); }
.kd-next.fertig .kd-label { color: var(--ok); }
.kd-next .btn { align-self: flex-start; }
.kd-check { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.45rem 0.2rem; font-size: 0.86rem; line-height: 1.45; cursor: pointer; border-top: 1px solid var(--stone); }
.kd-check:first-of-type { border-top: 0; }
.kd-check input { margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ok); flex-shrink: 0; }
.kd-check input:checked + span { color: var(--grey); text-decoration: line-through; text-decoration-color: var(--grey-soft); }
.kd-check.gross { border: 0; font-size: 1rem; font-weight: 700; color: var(--ink); padding: 0; }
.kd-check.gross input { width: 1.25rem; height: 1.25rem; margin-top: 0.15rem; }
.kd-phasen { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.4rem; }
.kd-phase { display: grid; grid-template-columns: 1fr auto; gap: 0.25rem 0.5rem; align-items: center; text-align: left; padding: 0.55rem 0.7rem; border-radius: 12px; background: var(--cream); border: 1px solid transparent; font: inherit; }
.kd-phase span { font-size: 0.76rem; font-weight: 700; color: var(--ink-70); grid-column: 1 / -1; }
.kd-phase em { font-style: normal; font-size: 0.7rem; color: var(--grey); font-variant-numeric: tabular-nums; }
.kd-phase.aktiv { background: var(--card); border-color: var(--orange); }
.kd-balken { display: block; height: 6px; border-radius: 999px; background: var(--stone); overflow: hidden; }
.kd-balken i { display: block; height: 100%; background: var(--ok); border-radius: inherit; }
.kd-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: 0.5rem; }
.kd-feld { background: var(--cream); border-radius: 12px; padding: 0.55rem 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kd-feld span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.kd-feld b { font-size: 0.92rem; color: var(--ink); overflow-wrap: anywhere; }
.kd-feld small { font-size: 0.72rem; color: var(--grey); }
.kd-feld small a { color: var(--orange-deep); font-weight: 700; }
.kd-feld input { font: inherit; font-size: 0.95rem; font-weight: 700; border: 1px solid var(--line); border-radius: 8px; padding: 0.2rem 0.45rem; width: 5rem; background: var(--card); }
.kd-kontakt { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kd-verlauf summary { cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--ink-70); }
.kd-verlauf[open] summary { margin-bottom: 0.5rem; }
details.kd-cl { background: var(--cream); border-radius: 14px; padding: 0.7rem 0.9rem; }
details.kd-cl summary { cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 6rem auto; gap: 0.7rem; align-items: center; font-size: 0.88rem; }
details.kd-cl summary em { font-style: normal; font-size: 0.74rem; color: var(--grey); }
details.kd-cl[open] summary { margin-bottom: 0.4rem; }
.kd-rechnungen { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.kd-rechnungen span { font-size: 0.72rem; font-weight: 700; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--stone); color: var(--grey); }
.kd-rechnungen span.ok { background: var(--ok-bg); color: var(--ok); }
.kd-rechnungen span.offen { background: var(--stop-bg); color: var(--stop); }
.kd-testi { border: 1px solid var(--line); border-radius: 14px; padding: 0.75rem 0.9rem; display: flex; flex-direction: column; gap: 0.5rem; }
.kd-testi.freigegeben { background: var(--ok-bg); border-color: transparent; }
.kd-testi-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.kd-testi-kopf b { font-size: 0.9rem; }
.kd-testi-kopf .sel { margin-left: auto; }
.kd-testi-text { position: relative; background: var(--cream); border-radius: 10px; padding: 0.6rem 2.4rem 0.6rem 0.75rem; font-size: 0.8rem; line-height: 1.55; white-space: pre-wrap; }
.kd-testi-text .icon-btn { position: absolute; top: 0.35rem; right: 0.35rem; }
.pk-fortschritt { display: grid; grid-template-columns: 1fr auto; gap: 0.45rem; align-items: center; margin: 0.35rem 0 0.15rem; }
.pk-fortschritt em { font-style: normal; font-size: 0.68rem; color: var(--grey); font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
  .kd-reiter button { flex: 0 0 auto; }
  details.kd-cl summary { grid-template-columns: minmax(0, 1fr) auto; }
  details.kd-cl summary .kd-balken { display: none; }
}
/* Abgeschlossene Stufen schmal und ruhig */
.pl-spalte.eingeklappt { background: transparent; border: 1.5px dashed var(--line); min-height: 0; }
.pl-spalte.eingeklappt .pl-leer { text-align: left; font-size: 0.74rem; color: var(--grey); padding: 0.2rem 0.25rem; }
.pl-spalte.eingeklappt .pl-leer a { color: var(--orange-deep); font-weight: 700; }
@media (min-width: 701px) {
  .pl-board { display: flex; }
  .pl-board > .pl-spalte { flex: 1 0 230px; }
  .pl-board > .pl-spalte.eingeklappt { flex: 0 0 150px; }
}
.pl-ende-zeile { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.35rem 0.25rem; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--ink-70) !important; font-weight: 600 !important; }
.pl-ende-zeile:first-child { border-top: 0; }
.pl-ende-zeile b { color: var(--ink); }
.pl-ende-zeile:hover { color: var(--orange-deep) !important; }
@media (min-width: 701px) { .pl-board > .pl-spalte { flex-basis: 190px; } .pl-board > .pl-spalte.eingeklappt { flex: 0 0 170px; } }
/* Schnellere, ruhigere Übergänge */
.w { transform: translateY(6px); transition: opacity 0.28s var(--ease-smooth), transform 0.28s var(--ease-smooth), box-shadow 0.2s var(--ease-smooth); }
.view.cur .page-header, .view.cur .filters { animation-duration: 0.25s; }

/* Aufgaben: Schnelleingabe und Gruppen nach Dringlichkeit */
.schnell { display: flex; align-items: center; gap: 0.6rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 0.5rem 0.6rem 0.5rem 0.9rem; box-shadow: var(--card-shadow); }
.schnell:focus-within { border-color: var(--orange); }
.schnell .ic { color: var(--orange); font-size: 1.1rem; }
.schnell input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 0.92rem; background: none; color: var(--ink); }
.schnell .sel { box-shadow: none; }
.auf-gruppen { display: flex; flex-direction: column; gap: 0.8rem; }
details.w.auf-gruppe { padding: 0.3rem 0; }
.auf-gruppe summary { cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.1rem; font-size: 0.86rem; }
.auf-gruppe summary span { font-size: 0.72rem; font-weight: 800; background: var(--stone); color: var(--ink-70); border-radius: 999px; padding: 0.05rem 0.5rem; }
.auf-gruppe.rot summary b { color: var(--stop); } .auf-gruppe.rot summary span { background: var(--stop-bg); color: var(--stop); }
.auf-gruppe.orange summary b { color: var(--orange-deep); } .auf-gruppe.orange summary span { background: var(--orange-soft); color: var(--orange-deep); }
.auf-zeile { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.1rem; border-top: 1px solid var(--stone); }
.auf-text { flex: 1; min-width: 0; display: flex; flex-direction: column; text-align: left; font: inherit; background: none; }
.auf-text span { font-size: 0.88rem; color: var(--ink); font-weight: 600; }
.auf-text small { font-size: 0.72rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auf-zeile.fertig .auf-text span { text-decoration: line-through; color: var(--grey); }
@media (max-width: 700px) { .schnell .sel { max-width: 7.5rem; } .auf-zeile { padding: 0.55rem 0.8rem; } }
/* Tabellen als Karten am Handy (z. B. Kunden-Liste) */
@media (max-width: 700px) {
  table.karten-mobil thead { display: none; }
  table.karten-mobil tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.5rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--stone); }
  table.karten-mobil tbody td { padding: 0; border: 0; white-space: normal; font-size: 0.76rem; }
  table.karten-mobil tbody td:first-child { flex-basis: 100%; }
  table.karten-mobil tbody td:empty { display: none; }
}

/* Lead-Fenster: Aktionsleiste oben, Score als kleine Zahl im Kopf */
.lp-scorepill { font-size: 0.8rem; font-weight: 800; background: var(--stone); color: var(--ink); border-radius: 999px; padding: 0.2rem 0.6rem; font-variant-numeric: tabular-nums; }
.lp-aktionen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; padding: 0 1.25rem 0.9rem; border-bottom: 1px solid var(--line); }
.lp-aktionen > a, .lp-aktionen > button, .lp-aktionen > span { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: 0.6rem 0.3rem; border-radius: 14px; background: var(--cream); color: var(--ink); font: inherit; font-size: 0.72rem; font-weight: 700; text-decoration: none; transition: background 0.15s; }
.lp-aktionen .ic { font-size: 1.2rem; }
.lp-aktionen > a:hover, .lp-aktionen > button:hover { background: var(--stone); }
.lp-aktionen > [data-aktion="anrufen"] { background: var(--ink); color: var(--paper); }
.lp-aktionen > [data-aktion="anrufen"]:hover { background: var(--ink-soft); }
.lp-aktionen > [data-aktion="closing"] .ic { color: var(--ok); }
.lp-aktionen > [data-aktion="leitfaden"] .ic { color: var(--orange); }
.lp-aktionen > .aus { opacity: 0.45; }
.lp-hinweis { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; font-weight: 600; color: var(--ink-70); background: var(--cream); border-radius: 10px; padding: 0.45rem 0.6rem; margin-bottom: 0.6rem; }
.lp-hinweis.vorn { background: var(--ok-bg); color: var(--ok); }
@media (min-width: 601px) { .stufe-zeile { grid-template-columns: auto minmax(0, 1fr) minmax(0, 12rem) 2.2rem auto auto; } }
.einst > .w:only-child { grid-column: 1 / -1; max-width: 820px; }
.heute { align-items: start; }
/* Inhalte in Fenstern nie zusammendrücken (Elemente mit eigener Scrollleiste schrumpften sonst) */
.modal-inhalt > * { flex-shrink: 0; }
/* Cockpit: Karten lückenlos in Spalten, leere Bereiche als eine Zeile */
.heute { display: block; }
.heute-karten { columns: 3 18rem; column-gap: 1rem; }
.heute-karten > .w { break-inside: avoid; margin-bottom: 1rem; display: flex; width: 100%; }
.heute-ruhig { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.8rem; color: var(--grey); padding: 0.2rem 0.2rem 0.4rem; }
.heute-ruhig .ic { color: var(--ok); }
.heute-ruhig a { padding: 0.2rem 0.6rem; border-radius: 999px; background: var(--card); border: 1px solid var(--line); color: var(--ink-70); font-weight: 600; }
.heute-ruhig a:hover { border-color: var(--grey-soft); color: var(--ink); }
/* Pipeline am Laptop: klassisches Kanban wie im alten CRM. Gleich breite Spalten, Balken je Stufe, jede Spalte scrollt für sich */
@media (min-width: 701px) {
  .pl-board { display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; align-items: stretch; height: var(--pl-hoehe, calc(100vh - 290px)); min-height: 22rem; padding-bottom: 0.6rem; scrollbar-width: thin; }
  .pl-board > .pl-spalte, .pl-board > .pl-spalte.eingeklappt, .pl-board > .pl-spalte.leer { flex: 2 1 0; min-width: 240px; max-width: 340px; }
  .pl-board > .pl-spalte.leer { flex: 1 1 0; min-width: 148px; max-width: 240px; }
  .pl-board > .pl-spalte.eingeklappt { flex: 0 0 210px; min-width: 210px; }
  .pl-spalte, .pl-spalte.eingeklappt { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0; gap: 0; min-height: 0; max-height: 100%; overflow: hidden; box-shadow: 0 1px 2px #1a17160a; }
  .pl-spalte header { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; min-height: 4.25rem; text-align: left; gap: 0.2rem 0.5rem; padding: 0.85rem 0.9rem 0.75rem; position: relative; flex-shrink: 0; }
  .pl-spalte header b { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); line-height: 1.35; }
  .pl-spalte header .cnt { margin-left: auto; font-size: 0.7rem; font-weight: 700; color: var(--ink-70); background: var(--stone); border-radius: 999px; padding: 0.1rem 0.55rem; }
  .pl-spalte header .sum { flex-basis: 100%; margin: 0; font-size: 0.72rem; color: var(--grey); font-weight: 600; }
  .pl-spalte header::after { content: ''; position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0; height: 2px; border-radius: 2px; background: color-mix(in srgb, var(--orange) calc(var(--f, 0) * 100%), var(--line)); }
  .pl-spalte.eingeklappt header::after { background: var(--ink-70); }
  .pl-karten, .pl-spalte:not(.leer):not(.eingeklappt) .pl-karten { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.6rem; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: thin; border-radius: 0 0 14px 14px; transition: background 0.15s; }
  .pl-spalte.leer .pl-karten { display: flex; }
  .pl-karte { background: var(--paper); border: 1px solid var(--line); box-shadow: none; flex-shrink: 0; }
  .pl-karte:hover { border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 12%, transparent); transform: none; }
  .pl-leer { display: flex; align-items: center; justify-content: center; min-height: 4.5rem; border: 1.5px dashed var(--line); border-radius: 10px; font-size: 0.74rem; color: var(--grey); text-align: center; padding: 0.8rem; }
  .pl-spalte.eingeklappt .pl-leer { border: 0; display: block; min-height: 0; padding: 0; }
  .pl-spalte.ziel, .pl-spalte.leer.ziel { border-color: var(--orange); background: var(--card); }
  .pl-spalte.ziel .pl-karten { background: color-mix(in srgb, var(--orange) 7%, transparent); }
  .pl-spalte.ziel .pl-leer { border-color: var(--orange); color: var(--orange-deep); }
}
}
.pill { white-space: nowrap; }
.pl-ganz-leer { padding: 2rem 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; color: var(--grey); }
.pl-ganz-leer b { font-size: 0.95rem; color: var(--ink); }
.pl-stationen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem; max-width: 52rem; }
.pl-stationen span { font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); color: var(--ink-70); }
.pl-spalte header b { min-width: 0; }
/* Finanzen: woher die Zahlen kommen, Kontoauszug-Import, Buchung von Hand */
.fin-quellen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin-bottom: 1rem; }
.fq { display: flex; align-items: center; gap: 0.7rem; padding: 0.9rem 1.1rem; border-left: 1px solid var(--line); min-width: 0; }
.fq:first-child { border-left: 0; }
.fq > div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fq b { font-size: 0.84rem; color: var(--ink); }
.fq span { font-size: 0.74rem; color: var(--grey); line-height: 1.4; }
.fq a { color: var(--orange-deep); font-weight: 600; }
.fq .fq-ic { flex: 0 0 2rem; height: 2rem; border-radius: 10px; display: grid; place-items: center; background: var(--stone); color: var(--ink-70); font-size: 1rem; }
.fq.warn .fq-ic { background: var(--warn-bg); color: var(--warn); }
.fq.warn span { color: var(--warn); }
.btn.klein { padding: 0.35rem 0.7rem; font-size: 0.76rem; white-space: nowrap; flex-shrink: 0; }
.fin-werkzeug { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.9rem; }
.fin-werkzeug .fin-monatsreiter { margin-bottom: 0; }
.fb-zeile { grid-template-columns: minmax(0, 1fr) auto 12rem 1.9rem; }
.fb-info { font-size: 0.72rem; color: var(--grey); }
.fb-weg { opacity: 0; }
.fb-zeile:hover .fb-weg, .fb-weg:focus-visible { opacity: 1; }
.fb-weg:hover { color: var(--stop); }
.leer-knoepfe { margin-top: 0.9rem; display: flex; justify-content: center; }
.ki-datei { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; padding: 2.2rem 1.5rem; border: 1.5px dashed var(--line); border-radius: 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; }
.ki-datei:hover { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 4%, transparent); }
.ki-datei input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ki-datei .ic { font-size: 1.8rem; color: var(--orange-deep); }
.ki-datei b { font-size: 0.95rem; color: var(--ink); }
.ki-datei span { font-size: 0.78rem; color: var(--grey); max-width: 30rem; }
.ki-kopf { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.ki-kopf > div:first-child { display: flex; flex-direction: column; }
.ki-kopf b { color: var(--ink); }
.ki-kopf span { font-size: 0.76rem; color: var(--grey); }
.ki-zahlen { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.ki-zahlen span { font-size: 0.74rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--stone); color: var(--ink-70); }
.ki-zahlen span.grau { opacity: 0.7; }
.ki-liste { border: 1px solid var(--line); border-radius: 12px; max-height: 46vh; overflow-y: auto; }
.ki-zeile { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto 12rem; gap: 0.7rem; align-items: center; padding: 0.5rem 0.8rem; border-top: 1px solid var(--stone); }
.ki-zeile:first-child { border-top: 0; }
.ki-zeile.da { opacity: 0.45; }
.ki-zeile .sel { max-width: none; width: 100%; }
.ki-hinweis { font-size: 0.72rem; color: var(--grey); }
.ki-zeile .mono.minus, .fb-zeile .mono.minus { color: var(--ink); }
@media (max-width: 900px) { .fin-quellen { grid-template-columns: 1fr; } .fq { border-left: 0; border-top: 1px solid var(--line); } .fq:first-child { border-top: 0; } }
@media (max-width: 700px) {
  .fb-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .fb-weg { opacity: 1; }
  .ki-zeile { grid-template-columns: 1.2rem minmax(0, 1fr) auto; }
  .ki-zeile .sel, .ki-zeile .ki-hinweis { grid-column: 2 / -1; }
  .fin-werkzeug { flex-direction: column; align-items: stretch; }
}
/* Kleinere Laptops (bis ~1360 px): Spalten etwas schmaler, damit die ganze Pipeline ohne Seitwärtsscrollen passt */
@media (min-width: 701px) and (max-width: 1360px) {
  .pl-board { gap: 0.6rem; }
  .pl-board > .pl-spalte, .pl-board > .pl-spalte.eingeklappt, .pl-board > .pl-spalte.leer { min-width: 220px; }
  .pl-board > .pl-spalte.leer { min-width: 124px; }
  .pl-board > .pl-spalte.eingeklappt { flex-basis: 190px; min-width: 190px; }
  .pl-spalte header { padding: 0.8rem 0.75rem 0.7rem; }
  .pl-spalte header::after { left: 0.75rem; right: 0.75rem; }
}
.pk-kopf .pk-score { white-space: nowrap; flex-shrink: 0; }
/* Eingaben 2026: sanft gerundete Felder statt Pillen, Beschriftung in normaler Schreibweise */
:root { --r-feld: 10px; }
.feld input, .feld select, .feld textarea, .lp-body select, .lp-body input, .lp-body textarea, .stufe-zeile input, .stufe-neu input, .termine-monate input,
.posten-zeile input, .preis-neu input, .fb-station input, .fb-station textarea, .lf-zeile input[type="datetime-local"], .code {
  border-radius: var(--r-feld); border-color: var(--line); background: var(--card); color: var(--ink);
}
.feld input, .feld select, .lp-body input, .lp-body select { min-height: 2.5rem; }
.feld textarea, .lp-body textarea { border-radius: 12px; padding: 0.7rem 0.8rem; min-height: 6rem; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: var(--grey-soft); }
.feld input:focus, .feld select:focus, .feld textarea:focus, .lp-body select:focus, .lp-body input:focus, .lp-body textarea:focus,
.posten-zeile input:focus, .preis-neu input:focus, .fb-station input:focus, .fb-station textarea:focus {
  outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 16%, transparent);
}
.feld label { text-transform: none; letter-spacing: 0; font-size: 0.78rem; font-weight: 600; color: var(--ink-70); margin-bottom: 0.35rem; }
.feld input::placeholder, .feld textarea::placeholder { color: var(--grey); opacity: 0.8; }
.sel { border-radius: var(--r-feld); }
/* Cockpit 2026: links „Heute dran“, rechts Geld und Kunden, darunter Pipeline, Zahlen, Verlauf */
.ck { display: flex; flex-direction: column; gap: 1rem; }
.ck-oben { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(19rem, 1fr); gap: 1rem; align-items: start; }
.ck-unten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.ck .w { padding: 1.15rem 1.25rem; }
.ck-kopf { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.8rem; }
.ck-kopf h2 { font-size: 1.05rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.ck-kopf h3 { font-size: 0.92rem; font-weight: 800; color: var(--ink); }
.ck-zahl { font-size: 0.75rem; font-weight: 800; color: var(--ink-70); background: var(--stone); border-radius: 999px; padding: 0.1rem 0.55rem; }
.ck-link { margin-left: auto; font-size: 0.76rem; font-weight: 700; color: var(--orange-deep); display: inline-flex; align-items: center; gap: 0.2rem; }
.ck-kopf .seg { margin-left: auto; }
.seg.klein button { padding: 0.25rem 0.6rem; font-size: 0.72rem; }
.ck-liste { display: flex; flex-direction: column; }
.ck-zeile { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 2rem; align-items: center; gap: 0.8rem; padding: 0.62rem 0.55rem; border-top: 1px solid var(--stone); border-radius: 10px; cursor: pointer; transition: background 0.15s; }
.ck-zeile:first-child { border-top-color: transparent; }
.ck-zeile:hover, .ck-zeile:focus-visible { background: var(--cream); outline: none; }
.ck-zeile:hover + .ck-zeile { border-top-color: transparent; }
.ck-ic { width: 2.2rem; height: 2.2rem; border-radius: 10px; display: grid; place-items: center; font-size: 1rem; background: var(--stone); color: var(--ink-70); }
.ck-ic.anruf, .ck-ic.lead { background: var(--orange-soft); color: var(--orange-deep); }
.ck-ic.termin { background: var(--ok-bg); color: var(--ok); }
.ck-ic.geld { background: var(--warn-bg); color: var(--warn); }
.ck-zeile.warn .ck-ic { background: var(--stop-bg); color: var(--stop); }
.ck-text { display: flex; flex-direction: column; min-width: 0; }
.ck-text b { font-size: 0.88rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-text small { font-size: 0.76rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-zeit { font-size: 0.74rem; font-weight: 700; color: var(--ink-70); background: var(--stone); border-radius: 999px; padding: 0.2rem 0.6rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-zeile.warn .ck-zeit { background: var(--stop-bg); color: var(--stop); }
.ck-tel { width: 2rem; height: 2rem; border-radius: 999px; display: grid; place-items: center; background: var(--ink); color: var(--paper); font-size: 0.9rem; transition: transform 0.15s, background 0.15s; }
.ck-tel:hover { background: var(--orange); transform: scale(1.06); }
.ck-pfeil { color: var(--grey-soft); font-size: 1.15rem; display: grid; place-items: center; }
.ck-mehr { width: 100%; margin-top: 0.4rem; padding: 0.6rem; border-radius: 10px; font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--ink-70); background: var(--surface); border: 1px dashed var(--line); }
.ck-mehr:hover { color: var(--orange-deep); border-color: var(--orange); }
.ck-fertig { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; padding: 2.4rem 1rem; }
.ck-fertig .ic, .ck-fertig i { font-size: 2.2rem; color: var(--ok); }
.ck-fertig b { font-size: 1rem; color: var(--ink); }
.ck-fertig span { font-size: 0.82rem; color: var(--grey); }
.ck-seite { display: flex; flex-direction: column; gap: 1rem; }
a.ck-karte { display: block; color: inherit; transition: box-shadow 0.15s, border-color 0.15s; }
a.ck-karte:hover { border-color: var(--grey-soft); }
.ck-l { display: flex; align-items: center; gap: 0.4rem; font-family: inherit; font-weight: 700; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); margin-bottom: 0.45rem; }
.ck-l i { font-size: 0.9rem; color: var(--orange-deep); }
.ck-gross { font-size: 1.9rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.2rem 0.5rem; font-variant-numeric: tabular-nums; }
.ck-gross small { font-size: 0.78rem; font-weight: 600; color: var(--grey); letter-spacing: 0; }
.ck-balken { height: 6px; border-radius: 6px; background: var(--stone); overflow: hidden; margin: 0.7rem 0 0.4rem; }
.ck-balken i { display: block; height: 100%; background: var(--orange); border-radius: 6px; }
.ck-reihen { display: flex; flex-direction: column; margin-top: 0.5rem; }
.ck-reihen > div { display: flex; justify-content: space-between; gap: 0.8rem; padding: 0.42rem 0; border-top: 1px solid var(--stone); font-size: 0.8rem; color: var(--ink-70); }
.ck-reihen > div:first-child { border-top: 0; }
.ck-reihen span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-reihen b { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ck-reihen .rot, .ck-reihen .rot b { color: var(--stop); }
.ck-reihen .gruen b { color: var(--ok); }
.ck-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.7rem 0 0.2rem; }
.ck-chips span { font-size: 0.72rem; color: var(--ink-70); background: var(--stone); border-radius: 999px; padding: 0.18rem 0.6rem; }
.ck-chips b { color: var(--ink); }
.ck-stufen { display: flex; flex-direction: column; gap: 0.35rem; margin: 0.9rem 0 0.8rem; }
.ck-stufe { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) 2rem; align-items: center; gap: 0.6rem; font-size: 0.78rem; color: var(--ink-70); }
.ck-stufe span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-stufe i { height: 8px; border-radius: 8px; background: var(--stone); overflow: hidden; display: block; }
.ck-stufe em { display: block; height: 100%; background: var(--ink-70); border-radius: 8px; min-width: 0; }
.ck-stufe b { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.ck-stufe.eng em { background: var(--orange); }
.ck-stufe.eng span { color: var(--orange-deep); font-weight: 700; }
.ck-fuss { display: flex; flex-direction: column; gap: 0.15rem; padding-top: 0.7rem; border-top: 1px solid var(--stone); font-size: 0.76rem; color: var(--grey); }
.ck-fuss b { color: var(--ink); }
.ck-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.ck-drei > div { display: flex; flex-direction: column; gap: 0.1rem; }
.ck-drei span { font-size: 0.74rem; color: var(--grey); font-weight: 600; }
.ck-drei b { font-size: 1.7rem; font-weight: 800; color: var(--ink); line-height: 1.15; font-variant-numeric: tabular-nums; }
.ck-drei em { font-style: normal; font-size: 0.7rem; color: var(--grey); }
.ck-drei em.hoch { color: var(--ok); }
.ck-drei em.runter { color: var(--stop); }
.ck-balkenreihe { display: flex; align-items: flex-end; gap: 2px; height: 3.2rem; margin: 1rem 0 0.7rem; }
.ck-balkenreihe i { flex: 1; background: var(--orange); border-radius: 3px 3px 0 0; opacity: 0.85; }
.ck-balkenreihe i.null { background: var(--line); opacity: 1; }
.ck-hinweis { font-size: 0.74rem; color: var(--grey); line-height: 1.45; display: flex; gap: 0.35rem; align-items: flex-start; }
.ck-hinweis a { color: var(--orange-deep); font-weight: 700; }
.ck-feedliste { display: flex; flex-direction: column; }
.ck-ev { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr) auto; gap: 0.55rem; align-items: center; padding: 0.42rem 0.3rem; border-top: 1px solid var(--stone); font-size: 0.78rem; color: var(--ink-70); border-radius: 8px; }
.ck-ev:first-child { border-top: 0; }
.ck-ev.klickbar { cursor: pointer; }
.ck-ev.klickbar:hover { background: var(--cream); }
.ck-ev-ic { width: 1.7rem; height: 1.7rem; border-radius: 8px; background: var(--stone); display: grid; place-items: center; font-size: 0.85rem; color: var(--ink-70); }
.ck-ev-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-ev em { font-style: normal; font-size: 0.7rem; color: var(--grey); white-space: nowrap; }
.ck-leer { font-size: 0.8rem; color: var(--grey); }
@media (max-width: 1100px) { .ck-oben { grid-template-columns: 1fr; } .ck-unten { grid-template-columns: 1fr 1fr; } .ck-feed { grid-column: 1 / -1; } }
@media (max-width: 700px) { .ck-unten { grid-template-columns: 1fr; } .ck-zeile { grid-template-columns: 2rem minmax(0, 1fr) 2rem; } .ck-zeit { display: none; } }
.ck-unterzeile { font-size: 0.72rem; color: var(--grey); margin: -0.4rem 0 0.7rem; }
.abr-hinweis { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.8rem 1rem; margin-bottom: 1rem; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--ink-70); font-size: 0.8rem; }
.abr-hinweis > i, .abr-hinweis > .ic { color: var(--warn); font-size: 1.1rem; }
.abr-hinweis div { display: flex; flex-direction: column; gap: 0.15rem; }
.abr-hinweis b { color: var(--ink); }
/* Kampagnen-Karten: Leads und Kosten groß, darunter der Weg als Treppe mit Quote je Schritt */
.fgrid { grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); }
.fcard.fk { display: flex; flex-direction: column; gap: 1rem; text-align: left; }
.fk-held { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
.fk-held div { display: flex; flex-direction: column; }
.fk-held b { font-size: 1.55rem; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.fk-held span { font-size: 0.74rem; color: var(--grey); font-weight: 600; }
.fk-weg { display: flex; align-items: stretch; gap: 0.2rem; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 0.5rem; }
.fk-stufe { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.05rem; padding: 0.45rem 0.2rem; border-radius: 9px; background: var(--card); }
.fk-stufe b { font-size: 0.98rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.fk-stufe span { font-size: 0.66rem; color: var(--grey); font-weight: 600; }
.fk-stufe.s3 { background: var(--orange-soft); }
.fk-stufe.s3 b { color: var(--orange-deep); }
.fk-pfeil { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 2.3rem; color: var(--grey-soft); }
.fk-pfeil i { font-size: 0.85rem; }
.fk-pfeil em { font-style: normal; font-size: 0.66rem; font-weight: 700; color: var(--ink-70); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fk-fuss { display: flex; justify-content: space-between; gap: 0.8rem; font-size: 0.76rem; color: var(--grey); padding-top: 0.7rem; border-top: 1px solid var(--stone); }
.fk-fuss b { color: var(--ink); }
.fk-leer { display: flex; align-items: center; gap: 0.5rem; padding: 1.2rem 0.9rem; border: 1.5px dashed var(--line); border-radius: 12px; font-size: 0.8rem; color: var(--grey); }
/* Klapp-Gruppen (überall gleich): zugeklappt mit Titel und Anzahl, öffnet weich */
.klapp-liste { display: flex; flex-direction: column; gap: 0.7rem; }
details.w.klapp { padding: 0; overflow: hidden; }
.klapp summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1.15rem; user-select: none; transition: background 0.15s; }
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary:hover { background: var(--surface); }
.klapp summary:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.kl-titel { font-size: 0.9rem; font-weight: 700; color: var(--ink); }
.kl-zahl { font-size: 0.72rem; font-weight: 800; background: var(--stone); color: var(--ink-70); border-radius: 999px; padding: 0.08rem 0.55rem; font-variant-numeric: tabular-nums; }
.kl-zusatz { margin-left: auto; font-size: 0.8rem; font-weight: 700; color: var(--ink-70); font-variant-numeric: tabular-nums; }
.kl-pfeil { font-size: 1.15rem; color: var(--grey); transition: transform 0.24s cubic-bezier(.2,.8,.2,1); }
.kl-zusatz + .kl-pfeil { margin-left: 0.4rem; }
.kl-zahl + .kl-pfeil, .kl-titel + .kl-pfeil { margin-left: auto; }
.klapp[open] > summary .kl-pfeil { transform: rotate(180deg); }
.klapp[open] > summary { border-bottom: 1px solid var(--stone); }
.kl-inhalt { overflow: hidden; }
.kl-inhalt .tbl-scroll table { margin: 0; }
.klapp.rot .kl-titel { color: var(--stop); } .klapp.rot .kl-zahl { background: var(--stop-bg); color: var(--stop); }
.klapp.orange .kl-titel { color: var(--orange-deep); } .klapp.orange .kl-zahl { background: var(--orange-soft); color: var(--orange-deep); }
.klapp.gruen .kl-zahl { background: var(--ok-bg); color: var(--ok); }
.klapp.grau .kl-titel { color: var(--ink-70); }
.w.tablew.klapp-modus { background: transparent; box-shadow: none; border: 0; overflow: visible; padding: 0; }
/* Klapp-Gruppe innerhalb einer Karte: ohne eigenen Kartenrahmen */
details.klapp.innen { border: 1px solid var(--line); border-radius: 12px; margin-top: 0.7rem; overflow: hidden; background: var(--card); }
details.klapp.innen summary { padding: 0.7rem 0.9rem; }
.fb-hinweis { padding: 0.6rem 1.2rem 0; margin: 0; }
.fin-gruppen .fb-zeile:first-child { border-top: 0; }
/* Steuer: drei große Karten wie im CRM (Rücklage, Mehrwertsteuer, Finanzamt gesamt) */
:root { --mwst: #2f6fb3; --mwst-bg: #2f6fb314; --hell-auf-dunkel: #c9bfb3; }
.fin-steuer-held { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.fsh { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.35rem; position: relative; overflow: hidden; }
.fsh::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--ink-70); }
.fsh.mwst::before { background: var(--mwst); }
.fsh.dunkel { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.fsh.dunkel::before { background: var(--orange); }
.fsh-l { font-family: inherit; font-weight: 700; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.fsh.dunkel .fsh-l { color: var(--hell-auf-dunkel); }
.fsh-zahl { font-size: 2.3rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums; }
.fsh.dunkel .fsh-zahl { color: var(--paper); }
.fsh.mwst .fsh-zahl { color: var(--mwst); }
.fsh-text { font-size: 0.8rem; color: var(--grey); line-height: 1.45; }
.fsh.dunkel .fsh-text { color: var(--hell-auf-dunkel); }
.fsh-chip { align-self: flex-start; margin-top: 0.35rem; font-size: 0.76rem; font-weight: 700; padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--stone); color: var(--ink); }
.fsh.dunkel .fsh-chip { background: #ffffff1a; color: var(--paper); }
.fsh.mwst .fsh-chip { background: var(--mwst-bg); color: var(--mwst); }
.fsh-aufteilung { display: flex; gap: 3px; height: 8px; margin-top: 0.5rem; border-radius: 8px; overflow: hidden; }
.fsh-aufteilung i { display: block; min-width: 4px; }
.fsh-aufteilung .a, .fsh-legende b.a { background: var(--orange); }
.fsh-aufteilung .b, .fsh-legende b.b { background: var(--ink-70); }
.fsh-aufteilung .c, .fsh-legende b.c { background: var(--mwst); }
.fsh-legende { display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; font-size: 0.72rem; color: var(--grey); }
.fsh-legende span { display: inline-flex; align-items: center; gap: 0.3rem; }
.fsh-legende b { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.fin-tabelle tr.summe td { font-weight: 800; color: var(--ink); border-top: 1.5px solid var(--line); }
#ansicht details.klapp + .w, #ansicht .fin-steuer-held + details.klapp { margin-top: 0; }
[data-fin] > details.klapp { margin-bottom: 1rem; }
@media (max-width: 1000px) { .fin-steuer-held { grid-template-columns: 1fr; } }
.kosten-gruppen { gap: 0.5rem; margin-top: 0.6rem; } .kosten-gruppen details.klapp.innen { margin-top: 0; }
.fin-rechnung > div.summe { border-top: 1.5px solid var(--line); font-weight: 800; color: var(--ink); padding-top: 0.45rem; }
.fin-karte.dunkel .fin-rechnung > div.summe { border-top-color: #ffffff40; color: var(--paper); }
.fin-rechnung > div.summe.minus b, .fin-karte.dunkel .fin-zeile.minus { color: #f0a08f; }
.fin-karte:not(.dunkel) .fin-rechnung > div.summe.minus b { color: var(--stop); }
.fin-karte.dunkel .fin-fuss { color: var(--hell-auf-dunkel); margin-top: 0.5rem; }

/* ===== Design-Runde 3 (Markensprache Creative Hub) ===== */
:root { --gut-auf-dunkel: #a9c98a; --schlecht-auf-dunkel: #f0a08f; --haar-auf-dunkel: #ffffff1f; }
/* Kennzahlen als Leiste im dunklen Kopf (Hairline-Raster statt Kästchen) */
.ph-band { flex-basis: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); border-top: 1px solid var(--haar-auf-dunkel); padding-top: 1rem; margin-top: 0.3rem; }
.ph-band:empty { display: none; }
.ph-band .w.kz { grid-column: auto; background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 0 1.2rem 0.2rem 0; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ph-band .w.kz + .w.kz { padding-left: 1.2rem; border-left: 1px solid #ffffff14; }
.ph-band .w.kz:hover { box-shadow: none; }
.ph-band .w.kz .l { color: var(--grey-soft); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; margin: 0; display: flex; align-items: center; gap: 0.4rem; }
.ph-band .w.kz .l .ic, .ph-band .w.kz .l i { color: var(--orange); }
.ph-band .w.kz .v { color: var(--cream); font-size: 1.8rem; line-height: 1.05; margin: 0; white-space: nowrap; }
.ph-band .w.kz .d { color: var(--grey-soft); font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-band .w.kz .d.down { color: var(--schlecht-auf-dunkel); }
.ph-band .w.kz .d.up { color: var(--gut-auf-dunkel); }
/* Kartentitel wie im Hub: klarer Titel statt winziger Großbuchstaben */
.w > .l, .w > .head .hl { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); gap: 0.5rem; }
.w > .l .ic, .w > .head .hl .ic { color: var(--orange); font-size: 1.05rem; }
.w > .l .n { font-size: 0.74rem; font-weight: 500; color: var(--grey); }
/* Tabellen ruhiger: kleine Großbuchstaben im Kopf, mehr Luft in den Zeilen */
thead th { background: transparent; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); padding-top: 0.75rem; padding-bottom: 0.6rem; }
tbody td { padding-top: 0.7rem; padding-bottom: 0.7rem; font-size: 0.86rem; }
tbody tr { transition: background 0.15s; }
tbody tr:hover { background: var(--surface); }
/* Karten: ruhiger Schatten, weiche Hover-Hebung nur bei klickbaren Karten */
.w { border-radius: 18px; }
.w:hover { box-shadow: var(--card-shadow); }
a.w:hover, button.w:hover, .fcard:hover, a.ck-karte:hover { box-shadow: 0 1px 3px #1a17160a, 0 16px 34px -20px #1a171640; }
.content { padding: 1.5rem 2rem 3.5rem; }
.bento > .w[data-billdu] { grid-column: 1 / -1; }
.ck-oben { align-items: stretch; }
.ck-heute { display: flex; flex-direction: column; }
.ck-rest { margin-top: auto; display: flex; align-items: center; gap: 0.5rem; padding: 0.9rem 0.6rem 0.2rem; border-top: 1px dashed var(--line); font-size: 0.8rem; color: var(--grey); }
.ck-rest i { color: var(--ok); font-size: 1.05rem; }
.w.tablew > .head .hl, .w.w > .l { font-size: 0.98rem; font-weight: 800; letter-spacing: -0.01em; text-transform: none; color: var(--ink); }
.w.tablew > .head .hl .ic { color: var(--orange); }
.w.w.dunkel > .l, .w.w.hero > .l, .w.w.ck-dunkel > .l { color: var(--paper); }
/* Lead-Detail: breiter, dunkler Kopf wie die Seitenköpfe, mehr Luft */
.leadpanel { width: min(540px, 94vw); }
.lp-head { position: relative; background: var(--ink); color: var(--paper); border-bottom: 0; padding: 1.5rem 1.6rem 1.25rem; overflow: hidden; }
.lp-head::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 140% at 95% 0%, #c2531f40, transparent 70%); }
.lp-head > * { position: relative; }
.lp-head h2 { color: var(--paper); font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em; }
.lp-head .sub { color: var(--grey-soft); font-size: 0.8rem; margin-top: 0.15rem; }
.lp-head .avatar { background: #ffffff14; color: var(--paper); border: 1px solid var(--haar-auf-dunkel); }
.lp-head .lp-scorepill { background: #ffffff1a; color: var(--paper); }
.lp-head .lp-close { color: var(--grey-soft); }
.lp-head .lp-close:hover { background: #ffffff14; color: var(--paper); }
.lp-aktionen { background: var(--ink); padding: 0 1.6rem 1.25rem; gap: 0.5rem; }
.lp-body { padding: 1.4rem 1.6rem 1.6rem; }
.lp-sec { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--grey); margin: 1.5rem 0 0.6rem; }
.lp-aktionen { border-bottom: 0; }
.lp-aktionen > a, .lp-aktionen > button, .lp-aktionen > span { background: #ffffff12; color: var(--paper); border: 1px solid #ffffff14; }
.lp-aktionen > a:hover, .lp-aktionen > button:hover { background: #ffffff22; }
.lp-aktionen > [data-aktion="anrufen"] { background: var(--orange); border-color: var(--orange); color: var(--paper); }
.lp-aktionen > [data-aktion="anrufen"]:hover { background: var(--orange-deep); }
.lp-aktionen > [data-aktion="closing"] .ic { color: var(--gut-auf-dunkel); }
/* Im Lead-Detail ist Anrufen der Hauptknopf (orange); der Abschluss unten in Dunkel */
.lp-foot .btn-primary { background: var(--ink); }
.lp-foot .btn-primary:hover { background: var(--ink-soft); }
.ph-band .w.kz .d { white-space: normal; overflow: visible; line-height: 1.35; }
/* Gehalt je Monat: Monatswahl in der dunklen Karte */
.gm-reiter { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0.2rem 0 0.6rem; }
.gm-reiter button { font: inherit; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid #ffffff1a; background: transparent; color: var(--grey-soft); cursor: pointer; transition: background 0.15s, color 0.15s; }
.gm-reiter button:hover { color: var(--paper); background: #ffffff14; }
.gm-reiter button.aktiv { background: var(--paper); color: var(--ink); border-color: var(--paper); }
/* Gehalt: Monatswahl als ‹ Monat › oben rechts in der Karte */
.gm-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.4rem; }
.gm-kopf .l { margin: 0; }
.gm-wahl { display: inline-flex; align-items: center; gap: 0.15rem; background: #ffffff12; border: 1px solid #ffffff1a; border-radius: 999px; padding: 0.15rem; }
.gm-wahl b { min-width: 6.2rem; text-align: center; font-size: 0.82rem; font-weight: 700; color: var(--paper); }
.gm-wahl button { width: 1.8rem; height: 1.8rem; border-radius: 999px; display: grid; place-items: center; border: 0; background: transparent; color: var(--paper); cursor: pointer; font-size: 1rem; }
.gm-wahl button:hover:not(:disabled) { background: #ffffff1f; }
.gm-wahl button:disabled { opacity: 0.3; cursor: default; }
.fb-kunden { margin-top: 1rem; } .fb-kunden:empty { display: none; }

/* Klickbare Kennzahlen und Fokus-Hinweis: Warnungen führen direkt zu den betroffenen Einträgen */
.w.kz.kz-klick { font: inherit; text-align: left; cursor: pointer; transition: background 0.18s ease; }
.w.kz.kz-klick:disabled { cursor: default; }
.ph-band .w.kz.kz-klick:not(:disabled):hover { background: #ffffff0a; }
.ph-band .w.kz.kz-klick.aktiv { background: #ffffff12; box-shadow: inset 0 -2px 0 var(--orange); }
.ph-band .w.kz.kz-klick:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; }
.fokus-hinweis { display: flex; gap: 0.75rem; align-items: center; padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: 14px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); color: var(--ink-70); font-size: 0.82rem; }
.fokus-hinweis > i, .fokus-hinweis > .ic { color: var(--warn); font-size: 1.15rem; }
.fokus-hinweis > div { display: flex; flex-direction: column; gap: 0.1rem; flex: 1; min-width: 0; }
.fokus-hinweis b { color: var(--ink); }
.fokus-hinweis .btn-secondary { flex-shrink: 0; }
.ck-reihen .ck-ziel { cursor: pointer; border-radius: 8px; }
.ck-reihen .ck-ziel:hover span { text-decoration: underline; text-underline-offset: 3px; }

/* Gehalt: Selbst weglegen (Steuer-Rücklage und MwSt des Monats) */
.gm-weglegen { margin-top: 0.9rem; padding: 0.8rem 0.9rem; border-radius: 14px; background: #ffffff0d; border: 1px solid #ffffff1a; }
.gm-weg-kopf { display: flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; font-weight: 700; color: var(--paper); }
.gm-weg-kopf > i, .gm-weg-kopf > .ic { color: var(--orange); font-size: 1rem; }
.gm-weg-kopf span:not(.ic) { flex: 1; }
.gm-weg-kopf b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.gm-weg-teile { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
.gm-weg-teile > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.65rem; border-radius: 10px; background: #00000026; }
.gm-weg-teile span { font-size: 0.7rem; color: var(--grey-soft); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.gm-weg-teile b { font-size: 1rem; color: var(--paper); font-variant-numeric: tabular-nums; }
.gm-weg-teile small { font-size: 0.7rem; color: var(--hell-auf-dunkel); line-height: 1.3; }
.gm-weglegen p { margin: 0.55rem 0 0; font-size: 0.72rem; color: var(--hell-auf-dunkel); line-height: 1.4; }

/* Jahreskarte Gehalt: zwei Balken statt Pille, Rechnung wie in der Gehaltskarte */
.gj-balken { display: flex; flex-direction: column; gap: 0.55rem; margin: 0.6rem 0 0.9rem; }
.gj-reihe { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: center; gap: 0.7rem; font-size: 0.8rem; }
.gj-reihe span { color: var(--grey); }
.gj-reihe b { font-size: 1.05rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; min-width: 5.5rem; text-align: right; }
.gj-reihe i { height: 10px; border-radius: 99px; background: var(--stone); overflow: hidden; }
.gj-reihe em { display: block; height: 100%; border-radius: 99px; transition: width 0.6s cubic-bezier(.2,.8,.2,1); }
.gj-reihe em.gut { background: var(--ink); }
.gj-reihe em.neutral { background: var(--grey-soft); }
.gj-reihe em.schlecht { background: var(--stop); }
.fin-rechnung > div.summe.plus b { color: var(--ink); }
.gj-fuss { margin-top: 0.6rem; color: var(--grey); line-height: 1.45; }
.gm-weg-kopf span:not(.ic) { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gm-weg-teile > div { text-align: left; }

/* Finanzen: Datenquellen als kleine Knöpfe in der Filterleiste */
.fin-schnell { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; }
.fs-knopf { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.1rem; padding: 0 0.85rem; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; font-size: 0.78rem; font-weight: 700; text-decoration: none; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; white-space: nowrap; }
.fs-knopf:hover { border-color: var(--ink-70); }
.fs-knopf > i, .fs-knopf > .ic { color: var(--grey); font-size: 0.95rem; }
.fs-knopf em { font-style: normal; color: var(--orange); font-weight: 800; padding-left: 0.4rem; margin-left: 0.1rem; border-left: 1px solid var(--line); }
.fs-knopf.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.fs-knopf.warn > i, .fs-knopf.warn > .ic { color: var(--warn); }
.filters .hint { margin-left: auto; }

/* Kunden im Fokus (kritisch, Mahnwesen): nur Spalten mit Treffern, schmal statt über die ganze Breite */
.pl-fokus .pl-board > .pl-spalte { flex: 0 1 340px; }
.pl-fokus .pl-board { height: auto !important; min-height: 0; }
.fokus-hinweis .btn.klein { height: 2rem; }

/* Creatives aus dem Hub an der Station „Creatives“ */
.cr-box { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0.85rem 0.95rem; margin: 0.6rem 0; display: flex; flex-direction: column; gap: 0.6rem; }
.cr-kopf { display: flex; align-items: center; gap: 0.75rem; }
.cr-kopf > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.cr-kopf b { font-size: 0.9rem; color: var(--ink); }
.cr-kopf b em { font-style: normal; color: var(--orange); }
.cr-kopf span:not(.ic):not(.cr-ic) { font-size: 0.76rem; color: var(--grey); }
.cr-ic { width: 2.2rem; height: 2.2rem; border-radius: 10px; background: var(--tint); display: grid; place-items: center; color: var(--orange); flex-shrink: 0; }
.cr-hinweis { margin: 0; display: flex; gap: 0.4rem; align-items: center; font-size: 0.76rem; color: var(--warn); }
.cr-nummern { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; }
.cr-nummern label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.72rem; color: var(--grey); font-weight: 700; }
.cr-nummern input { width: 9rem; height: 2rem; border: 1px solid var(--line); border-radius: 10px; padding: 0 0.6rem; font: inherit; background: var(--paper); color: var(--ink); }
.cr-laeufe { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.cr-lauf { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.6rem; border-radius: 10px; background: var(--tint); font-size: 0.75rem; color: var(--grey); min-width: 0; }
.cr-lauf span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cr-lauf b { color: var(--ink); }
.cr-punkt { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--grey-soft); flex-shrink: 0; }
.cr-lauf.laeuft .cr-punkt { background: var(--orange); animation: cr-puls 1.2s ease-in-out infinite; }
.cr-lauf.fertig .cr-punkt { background: var(--ok); }
.cr-lauf.fehler .cr-punkt { background: var(--stop); }
.cr-lauf.fehler { color: var(--stop); }
@keyframes cr-puls { 50% { opacity: 0.35; } }
.cr-fuss { display: flex; justify-content: space-between; align-items: center; font-size: 0.74rem; color: var(--grey); }
.cr-fuss a { color: var(--orange); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 0.25rem; }

/* Aktive Kunden: Zahl und Unterzeilen sind eigene Filter-Knöpfe */
.ph-band .w.kz .kz-zahl { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; color: var(--cream); font-size: 1.8rem; font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.ph-band .w.kz .kz-zahl:hover { color: #fff; }
.kz-link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: #ffffff40; text-underline-offset: 3px; }
.kz-link:hover, .kz-link.an { color: var(--cream); text-decoration-color: var(--orange); }
.ph-band .w.kz.kz-aktiv { box-shadow: inset 0 -2px 0 var(--orange); }

/* Suchfeld breit genug, dass der Hinweistext ganz zu lesen ist */
@media (min-width: 701px) { .filters .search { flex: 1 1 22rem; min-width: 20rem; max-width: 30rem; } }

/* ===== Kunden-Detail, Runde 2: Phasen in Farben, Fakten als Leiste, Karten statt Kachelwand ===== */
:root {
  --ph-1: #2f6fb3; --ph-2: #7a5bc4; --ph-3: #c2841f; --ph-4: #1f8a8a; --ph-5: #3f7a3a; --ph-6: #8a8178;
}
.kd .kd-teil { display: flex; flex-direction: column; gap: 0.9rem; }
.kd .kd-teil[hidden] { display: none; }

/* Phasen-Strahl: eine Zeile, jede Phase in ihrer Farbe */
.kd-strahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: 0.35rem; }
.kd-st { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; padding: 0.5rem 0.55rem 0.55rem; border-radius: 12px; background: transparent; border: 1px solid transparent; font: inherit; cursor: pointer; transition: background 0.15s ease; min-width: 0; }
.kd-st:hover { background: color-mix(in srgb, var(--ph) 7%, transparent); }
.kd-st > i { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ph) 16%, var(--stone)); overflow: hidden; }
.kd-st > i em { display: block; height: 100%; background: var(--ph); border-radius: inherit; }
.kd-st span { font-size: 0.76rem; font-weight: 800; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-st small { font-size: 0.7rem; color: var(--grey); display: inline-flex; align-items: center; gap: 0.2rem; font-variant-numeric: tabular-nums; }
.kd-st.fertig small { color: var(--ph); font-weight: 700; }
.kd-st.aktiv { background: color-mix(in srgb, var(--ph) 9%, var(--card)); border-color: color-mix(in srgb, var(--ph) 45%, transparent); }
.kd-st.aktiv span { color: var(--ph); }

/* Nächster Schritt in der Farbe der aktuellen Phase */
.kd-next { background: color-mix(in srgb, var(--ph, var(--orange)) 8%, var(--card)); border: 1px solid color-mix(in srgb, var(--ph, var(--orange)) 22%, transparent); }
.kd-next .kd-label, .kd-next.fertig .kd-label { color: var(--ph, var(--orange-deep)); }
.kd-next.fertig { background: color-mix(in srgb, var(--ph) 8%, var(--card)); flex-direction: row; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.kd-next.fertig > div { display: flex; flex-direction: column; gap: 0.15rem; }
.kd-next.fertig .btn { align-self: center; }

/* Fakten als eine Leiste mit Haarlinien */
.kd-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.kd-fakten > div { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.7rem 0.9rem; min-width: 0; box-shadow: -1px 0 0 var(--stone); }
.kd-fakten span { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.kd-fakten b { font-size: 0.95rem; color: var(--ink); overflow-wrap: anywhere; }
.kd-fakten small { font-size: 0.72rem; color: var(--grey); }
.kd-fakten small a { color: var(--orange-deep); font-weight: 700; }
.gut-text { color: var(--ok) !important; }

/* Karten im Detail */
.kd-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 0.7rem; }
@media (max-width: 760px) { .kd-zwei { grid-template-columns: 1fr; } }
.kd-karte { border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; }
.kd-karte-kopf { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.kd-karte-kopf b { font-size: 0.88rem; color: var(--ink); }
.kd-karte-kopf > .ic { color: var(--orange); }
.kd-karte-kopf .klein { margin-left: auto; }
.kd-termine { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.kd-termin { display: flex; flex-direction: column; gap: 0.3rem; }
.kd-termin > span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.kd-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--paper); width: fit-content; }
.kd-stepper button { width: 2rem; height: 2.2rem; display: grid; place-items: center; background: none; border: 0; color: var(--ink-70); cursor: pointer; font: inherit; }
.kd-stepper button:hover { background: var(--stone); color: var(--ink); }
.kd-stepper input { width: 3rem; height: 2.2rem; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; font: inherit; font-weight: 800; font-size: 1rem; background: var(--card); color: var(--ink); -moz-appearance: textfield; }
.kd-stepper input::-webkit-outer-spin-button, .kd-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kd-notiz { margin: 0; font-size: 0.8rem; color: var(--ink-70); white-space: pre-line; line-height: 1.5; padding-top: 0.55rem; border-top: 1px solid var(--stone); overflow-wrap: anywhere; }

/* Checkliste: Phasen mit Farbe, Nummer, aktueller Phase */
details.kd-cl { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 0; overflow: hidden; }
details.kd-cl summary { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto 7rem 2.6rem auto; gap: 0.7rem; align-items: center; padding: 0.75rem 0.9rem; cursor: pointer; }
details.kd-cl summary::-webkit-details-marker { display: none; }
details.kd-cl summary b { font-size: 0.9rem; color: var(--ink); }
details.kd-cl summary em { font-style: normal; font-size: 0.74rem; color: var(--grey); text-align: right; font-variant-numeric: tabular-nums; }
details.kd-cl[open] summary { margin: 0; border-bottom: 1px solid var(--stone); }
.kd-cl-punkt { width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.75rem; font-weight: 800; color: var(--ph); background: color-mix(in srgb, var(--ph) 12%, transparent); }
details.kd-cl.fertig .kd-cl-punkt { background: var(--ph); color: #fff; }
.kd-cl-jetzt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ph); background: color-mix(in srgb, var(--ph) 12%, transparent); padding: 0.15rem 0.45rem; border-radius: 999px; }
details.kd-cl:not(.aktuell) summary .kd-cl-jetzt { display: none; }
details.kd-cl summary > b + .kd-cl-balken { grid-column: 4; }
.kd-cl-balken { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ph) 14%, var(--stone)); overflow: hidden; }
.kd-cl-balken i { display: block; height: 100%; background: var(--ph); border-radius: inherit; }
.kd-cl-pfeil { color: var(--grey); transition: transform 0.2s ease; }
details.kd-cl[open] .kd-cl-pfeil { transform: rotate(180deg); }
details.kd-cl.aktuell { border-color: color-mix(in srgb, var(--ph) 45%, transparent); box-shadow: inset 3px 0 0 var(--ph); }
.kd-cl-liste { padding: 0.35rem 0.95rem 0.6rem 3.2rem; }
.kd-cl-liste .kd-check input { accent-color: var(--ph); }

/* Geld */
.kd-legende { margin-left: auto; display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.7rem; color: var(--grey); }
.kd-legende i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--stone); margin-left: 0.4rem; }
.kd-legende i.ok { background: var(--ok); }
.kd-legende i.offen { background: var(--stop); }
.kd .preis-zeile { display: grid; grid-template-columns: 6.5rem auto 1fr auto; gap: 0.8rem; align-items: center; padding: 0.4rem 0; border-top: 1px solid var(--stone); font-size: 0.84rem; }
.kd .preis-zeile:first-child { border-top: 0; }
.kd .preis-zeile > span:first-child { color: var(--grey); font-variant-numeric: tabular-nums; }
.kd .preis-zeile > span:nth-child(3) { color: var(--ink-70); }
.kd .preis-neu { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto; gap: 0.45rem; margin-top: 0.4rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.kd .preis-neu input { min-width: 0; height: 2.2rem; }
.kd .klapp .felder { padding-top: 0.3rem; }

/* Testimonials */
.kd-testi-kopf2 { display: flex; align-items: center; gap: 1rem; justify-content: space-between; flex-wrap: wrap; padding: 0.85rem 1rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.kd-testi-kopf2 > div:first-child { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.kd-testi-kopf2 b { font-size: 0.95rem; color: var(--ink); }
.kd-testi-kopf2 span { font-size: 0.76rem; color: var(--grey); }
.kd-testi-strahl { display: flex; gap: 0.3rem; }
.kd-testi-strahl span { width: 1.6rem; height: 0.45rem; border-radius: 999px; background: var(--stone); }
.kd-testi-strahl span.angefragt { background: var(--warn); }
.kd-testi-strahl span.erhalten, .kd-testi-strahl span.freigegeben { background: var(--ok); }
.kd-testi-strahl span.ueber { background: var(--stop); }
.kd-testi-titel { display: inline-flex; align-items: center; gap: 0.55rem; }
.kd-testi-nr { width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; background: var(--stone); color: var(--ink-70); }
.kd-testi-nr.angefragt { background: var(--warn-bg); color: var(--warn); }
.kd-testi-nr.erhalten, .kd-testi-nr.freigegeben { background: var(--ok); color: #fff; }
.kd-testi-wann { font-size: 0.74rem; color: var(--grey); font-weight: 500; }
.kd-testi-wann.ueber { color: var(--stop); font-weight: 700; }
.pill.testi-ausstehend { background: var(--stone); color: var(--ink-70); }
.pill.testi-angefragt { background: var(--warn-bg); color: var(--warn); }
.pill.testi-erhalten, .pill.testi-freigegeben { background: var(--ok-bg); color: var(--ok); }
.kd-testi-innen { display: flex; flex-direction: column; gap: 0.7rem; padding-top: 0.2rem; }
.kd-testi-text { background: var(--paper); border: 1px solid var(--stone); border-radius: 12px; padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.6rem; }
.kd-testi-text p { margin: 0; font-size: 0.86rem; line-height: 1.55; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.kd-testi-text .btn { align-self: flex-start; }
.kd-testi-stand { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.kd-testi-stand > span:first-child { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }

/* Daten: ruhiger Lösch-Bereich statt rotem Balken */
.kd-gefahr { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.2rem 0; font-size: 0.76rem; color: var(--grey); flex-wrap: wrap; }
.kd-gefahr .kd-loeschen { color: var(--stop); }
.kd-gefahr .kd-loeschen:hover { background: var(--stop-bg); }
.kd-st span { white-space: normal; overflow: visible; line-height: 1.2; }
.kd-st { justify-content: flex-start; }
.kd .klapp > .kl-inhalt { padding: 0.2rem 0.95rem 0.95rem; }
.kd .klapp { margin: 0; }

/* Kunden-Board: Spalten in der Farbe ihrer Phase, Pausiert und Beendet abgesetzt */
.pl-spalte[style*="--pf"] header::after { background: var(--pf); height: 3px; }
.pl-spalte[style*="--pf"] header b { color: var(--pf); }
.pl-spalte[data-spalte="status:pause"], .pl-spalte[data-spalte="status:churned"] { background: var(--stone); }
.pl-spalte[data-spalte="status:pause"] header::after { background: var(--warn); }
.pl-spalte[data-spalte="status:churned"] header::after { background: var(--grey-soft); }
.pl-spalte[data-spalte="status:churned"] .pl-karte { opacity: 0.75; }
.pk-phase { font-size: 0.68rem; font-weight: 700; color: var(--ink-70); background: var(--stone); padding: 0.1rem 0.45rem; border-radius: 999px; }

/* Kunden-Kopf: vier Kacheln, erwartete Einnahmen als Hauptzahl */
.ph-band .w.kz.kz-gross .v { font-size: 2.3rem; }
.ph-band .w.kz .kz-zahl small { font-size: 0.85rem; font-weight: 600; color: var(--grey-soft); letter-spacing: 0; }
.ph-band .w.kz .v.kz-rot { color: var(--schlecht-auf-dunkel); }
.ph-band .w.kz .d.down .kz-link { color: var(--schlecht-auf-dunkel); }
/* Leere Spalten schmaler, damit alle Spalten (auch Pausiert) auf den Laptop passen */
@media (min-width: 701px) { .pl-board > .pl-spalte.leer { flex: 0.55 1 128px; } }
@media (min-width: 701px) {
  .pl-board > .pl-spalte:not(.leer):not(.eingeklappt) { min-width: 210px; }
  .pl-board > .pl-spalte.leer { min-width: 112px; flex: 0.6 1 0; }
}

/* Paket-Detail: oben nur das Wesentliche, alles andere zugeklappt */
.ak-eckdaten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); border: 1px solid var(--line); border-radius: 14px; background: var(--card); overflow: hidden; }
.ak-eckdaten > div { padding: 0.75rem 0.95rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.ak-eckdaten > div + div { box-shadow: -1px 0 0 var(--stone); }
.ak-eckdaten span { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.ak-eckdaten b { font-size: 0.9rem; color: var(--ink); line-height: 1.4; }
.ak-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ak-chips em { font-style: normal; font-size: 0.76rem; font-weight: 700; color: var(--ink); background: var(--stone); padding: 0.2rem 0.55rem; border-radius: 999px; }
.ak-chips em small { font-weight: 600; color: var(--grey); }
@media (max-width: 640px) { .ak-eckdaten { grid-template-columns: 1fr; } .ak-eckdaten > div + div { box-shadow: 0 -1px 0 var(--stone); } }
.ak-klapps { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.2rem; }
.ak-klapps .klapp { margin: 0; }
.ak-klapps .klapp > .kl-inhalt { padding: 0.1rem 0.95rem 0.95rem; }
.ak-absatz { margin: 0 0 0.6rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-70); }
.ak-punkte { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.84rem; line-height: 1.45; color: var(--ink); }
.ak-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ak-zwei b { display: block; font-size: 0.78rem; margin-bottom: 0.4rem; color: var(--ink); }
@media (max-width: 640px) { .ak-zwei { grid-template-columns: 1fr; } }
.ak-vorlagen { display: flex; flex-direction: column; gap: 0.35rem; }
details.ak-vorlage { border: 1px solid var(--stone); border-radius: 10px; background: var(--paper); }
details.ak-vorlage summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.55rem 0.75rem; cursor: pointer; font-size: 0.82rem; font-weight: 700; color: var(--ink); }
details.ak-vorlage summary::-webkit-details-marker { display: none; }
details.ak-vorlage summary i { color: var(--grey); transition: transform 0.2s ease; }
details.ak-vorlage[open] summary i { transform: rotate(180deg); }
.ak-vorlage-text { padding: 0 0.75rem 0.7rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ak-vorlage-text p { margin: 0; font-size: 0.84rem; line-height: 1.55; white-space: pre-line; color: var(--ink-70); overflow-wrap: anywhere; }
.ak-vorlage-text .btn { align-self: flex-start; }
.ak-archiv-knopf { margin-left: auto; }
.ak-namen { font-size: 0.74rem; color: var(--grey); line-height: 1.4; }

/* Onboarding ohne Auftrag am Band: Wartende mit Startknopf, darunter der Ablauf als Strecke */
.fb-start { display: flex; flex-direction: column; gap: 1.1rem; padding: 0.4rem; }
.fb-start-teil { display: flex; flex-direction: column; gap: 0.75rem; }
.fb-start-kopf { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }
.fb-start-kopf b { font-size: 0.95rem; color: var(--ink); }
.fb-start-kopf .klein { color: var(--grey); }
.fb-warte-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 0.6rem; }
.fb-warte { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.fb-warte-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fb-warte-text > b { font-size: 0.95rem; color: var(--ink); }
.fb-warte-text > span { font-size: 0.76rem; color: var(--grey); }
.fb-warte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.35rem; }
.fb-warte-meta em { font-style: normal; font-size: 0.72rem; color: var(--grey); }
.fb-warte .btn { flex-shrink: 0; }
.fb-start-leer { flex-direction: row; align-items: center; gap: 0.8rem; padding: 0.9rem 1rem; border: 1px dashed var(--line); border-radius: 14px; }
.fb-start-leer > .ic { color: var(--orange); font-size: 1.2rem; }
.fb-start-leer > div { flex: 1; display: flex; flex-direction: column; gap: 0.1rem; }
.fb-start-leer span { font-size: 0.78rem; color: var(--grey); }
.fb-ablauf { padding-top: 1rem; border-top: 1px solid var(--stone); }
.fb-strecke { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.4rem 0; counter-reset: none; }
.fb-strecke li { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding-right: 0.6rem; }
.fb-strecke li::before { content: ''; position: absolute; top: 0.8rem; left: 1.7rem; right: 0; height: 2px; background: var(--stone); }
.fb-strecke li:last-child::before { display: none; }
.fb-strecke li span { position: relative; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.74rem; font-weight: 800; background: var(--card); border: 1.5px solid var(--line); color: var(--ink-70); }
.fb-strecke li b { font-size: 0.78rem; font-weight: 700; color: var(--ink); line-height: 1.3; }
.fb-kunden .fb-warte-karten { padding-bottom: 0.9rem; }
.fb-start { padding: 1.1rem 1.25rem 1.3rem; gap: 1.4rem; }
.fb-ablauf { padding-top: 1.3rem; }

/* „Alle abhaken“ über jeder Checkliste */
.kd-cl-alle { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.55rem 0 0.4rem; border-bottom: 1px solid var(--stone); margin-bottom: 0.15rem; }
.kd-cl-alle .klein { color: var(--grey); }
.kd-next-fuss { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.kd-next-fuss .btn { align-self: center; }

/* Lead-Fenster: Abschnitte aufklappbar, Kopfzeile zeigt das Wichtigste */
details.lp-klapp { border-top: 1px solid var(--stone); }
details.lp-klapp > summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; cursor: pointer; padding: 0.15rem 0; border-radius: 8px; }
details.lp-klapp > summary::-webkit-details-marker { display: none; }
details.lp-klapp > summary .lp-sec { margin: 0.75rem 0; flex-shrink: 0; }
details.lp-klapp > summary em { font-style: normal; font-size: 0.75rem; color: var(--grey); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: auto; }
details.lp-klapp > summary i { color: var(--grey); transition: transform 0.2s ease; flex-shrink: 0; }
details.lp-klapp > summary:not(:has(em)) i { margin-left: auto; }
details.lp-klapp[open] > summary i { transform: rotate(180deg); }
details.lp-klapp > summary:hover .lp-sec, details.lp-klapp > summary:hover i { color: var(--ink); }
.lp-klapp-inhalt { padding-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* Klickbar heißt sichtbar klickbar: nur Zeilen, die etwas öffnen, reagieren auf die Maus, mit Pfeil am Ende */
tbody tr { cursor: default; }
tbody tr:hover { background: transparent; }
tbody tr[data-kunde], tbody tr[data-auftrag], tbody tr[data-lead], tbody tr[data-funnel], tbody tr[data-monat-bearbeiten], tbody tr[data-zeile] { cursor: pointer; }
tbody tr[data-kunde]:hover, tbody tr[data-auftrag]:hover, tbody tr[data-lead]:hover, tbody tr[data-funnel]:hover, tbody tr[data-monat-bearbeiten]:hover, tbody tr[data-zeile]:hover { background: var(--surface); }
tbody tr[data-kunde] td:last-child, tbody tr[data-auftrag] td:last-child, tbody tr[data-lead] td:last-child { position: relative; padding-right: 2rem; }
tbody tr[data-kunde] td:last-child::after, tbody tr[data-auftrag] td:last-child::after, tbody tr[data-lead] td:last-child::after { content: '\ea6e'; font-family: 'remixicon'; position: absolute; right: 0.7rem; top: 50%; transform: translateY(-50%); color: var(--grey-soft); transition: color 0.15s, transform 0.15s; }
tbody tr[data-kunde]:hover td:last-child::after, tbody tr[data-auftrag]:hover td:last-child::after, tbody tr[data-lead]:hover td:last-child::after { color: var(--ink); transform: translate(2px, -50%); }
.pl-karte { cursor: pointer; }
.auf-alle { display: flex; justify-content: flex-end; padding: 0.3rem 1.1rem 0.1rem; }

/* Auswahlfelder in Formularen so hoch und rund wie die Eingabefelder (Safari zeichnet sonst flache System-Auswahl) */
.feld select, .lp-body select {
  -webkit-appearance: none; appearance: none; height: 2.5rem; padding: 0 2.1rem 0 0.8rem; border: 1px solid var(--line);
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c161580' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.85rem center;
  font: inherit; font-size: 0.86rem; color: var(--ink); width: 100%;
}
.feld-hilfe { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--grey); line-height: 1.4; }
.kd-aendern { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.35rem; padding: 0; background: none; border: 0; font: inherit; font-size: 0.74rem; font-weight: 700; color: var(--orange-deep); cursor: pointer; align-self: flex-start; }
.kd-aendern:hover { text-decoration: underline; text-underline-offset: 3px; }
.kd-nr-form { display: flex; gap: 0.4rem; align-items: center; margin-top: 0.4rem; flex-wrap: wrap; }
.kd-nr-form input { height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 0.5rem; font: inherit; font-size: 0.82rem; background: var(--card); color: var(--ink); min-width: 0; }
.kd-nr-form[hidden], .kd-aendern[hidden], .feld[hidden] { display: none; }

/* Finanzen-Leiste: Hinweis statt Knopf, wo nichts zu tun ist */
.fs-info { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--grey); text-decoration: none; padding: 0 0.3rem; }
.fs-info:hover { color: var(--ink); }
.fs-info > .ic { color: var(--ok); }
.fin-hinweis-klein { margin: 0.6rem 0 0; color: var(--grey); line-height: 1.45; }

/* Etappe: Leiter der Stufen, Balken mit Plan (hell) und Eingang (voll) */
.et-leiter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.55rem 0 0.7rem; }
.et-leiter span { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.74rem; font-weight: 800; padding: 0.22rem 0.6rem; border-radius: 999px; background: var(--stone); color: var(--grey); font-variant-numeric: tabular-nums; }
.et-leiter span.drin { background: var(--ok); color: #fff; }
.et-leiter span.plan { background: var(--ok-bg); color: var(--ok); }
.et-leiter span.ziel { background: var(--orange); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 18%, transparent); }
.et-balken { position: relative; }
.et-balken em { position: absolute; left: 0; top: 0; bottom: 0; border-radius: inherit; background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--ok) 35%, transparent) 0 6px, color-mix(in srgb, var(--ok) 18%, transparent) 6px 12px); }
.et-balken i { position: relative; background: var(--ok) !important; }
.kd-termin > span em { font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--grey); }
.kd-nr-form select { height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 0.5rem; font: inherit; font-size: 0.82rem; background: var(--card); color: var(--ink); }
.kd-nr-tag { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem; color: var(--grey); }
.kd-nr-tag input { width: 3.2rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; text-align: center; font: inherit; font-size: 0.82rem; background: var(--card); color: var(--ink); }
.kd-plan-satz { margin: 0; color: var(--grey); }
.kd .preis-zeile { grid-template-columns: 9.5rem auto 1fr auto; }
.kd-termin > span { white-space: nowrap; }

/* Häkchen in Formularen nie wie Eingabefelder aufblasen (die Feld-Regeln oben gelten nur für Text, Zahl, Datum, Auswahl) */
.feld input[type="checkbox"], .feld input[type="radio"], .lp-body input[type="checkbox"], .lp-body input[type="radio"] {
  min-height: 0; height: 1.1rem; width: 1.1rem; padding: 0; margin: 0; flex: none; border-radius: 4px; accent-color: var(--orange); -webkit-appearance: auto; appearance: auto;
}
.feld .ak-check, .feld label.ak-check { display: flex; align-items: center; gap: 0.55rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); cursor: pointer; line-height: 1.35; min-height: 2.5rem; }
.feld:has(> .ak-check) { justify-content: flex-end; }
.feld .ak-check { margin-top: 0 !important; }
.kd-termin > span { white-space: normal; }
.kd-termin > span em { display: block; margin-top: 0.1rem; }
.gm-weg-kopf span:not(.ic) { white-space: normal; overflow: visible; line-height: 1.25; }

/* Überfällige Rechnungen im Cockpit */
.uf-liste { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin-top: 0.6rem; }
.uf-zeile { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; gap: 1rem; align-items: center; padding: 0.75rem 0.95rem; border-top: 1px solid var(--stone); background: var(--card); }
.uf-zeile:first-child { border-top: 0; }
.uf-zeile > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.uf-zeile b { font-size: 0.88rem; color: var(--ink); overflow-wrap: anywhere; }
.uf-zeile span { font-size: 0.74rem; color: var(--grey); }
.uf-wann b { color: var(--warn); }
.uf-wann.lang b { color: var(--stop); }
.uf-betrag { text-align: right; align-items: flex-end; }
.uf-betrag b { font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .uf-zeile { grid-template-columns: 1fr auto; } .uf-zeile > .btn, .uf-zeile > .klein { grid-column: 1 / -1; justify-self: start; } }

/* Marge mit Ziel */
.marge-chip { display: inline-flex; align-items: center; gap: 0.35rem; align-self: flex-start; margin: 0.15rem 0 0.7rem; padding: 0.28rem 0.7rem; border-radius: 999px; font-size: 0.8rem; font-weight: 800; }
.marge-chip em { font-style: normal; font-weight: 600; opacity: 0.75; margin-left: 0.2rem; }
.fin-karte.dunkel .marge-chip.gut { background: #3f7a3a33; color: var(--gut-auf-dunkel); }
.fin-karte.dunkel .marge-chip.schlecht { background: #b91c1c33; color: var(--schlecht-auf-dunkel); }
.marge-chip.gut { background: var(--ok-bg); color: var(--ok); }
.marge-chip.schlecht { background: var(--stop-bg); color: var(--stop); }
.ck-reihen > div.gruen b { color: var(--ok); }

/* Tausch-Fenster: Start nachtragen, Fließband-Schalter als eigene Zeile */
.ak-aktuell { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.ak-aktuell .kd-aendern { margin: 0; }
.ak-start-form { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--grey); }
.ak-start-form[hidden] { display: none; }
.ak-start-form select { height: 2.1rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 0.5rem; font: inherit; font-size: 0.82rem; background: var(--card); color: var(--ink); }
.feld.ak-schalter { flex-direction: row !important; align-items: flex-start; gap: 0.7rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.feld.ak-schalter input { margin-top: 0.15rem !important; }
.feld.ak-schalter span { display: flex; flex-direction: column; gap: 0.15rem; }
.feld.ak-schalter b { font-size: 0.86rem; color: var(--ink); }
.feld.ak-schalter small { font-size: 0.75rem; color: var(--grey); line-height: 1.4; }
.felder > label.feld.ak-schalter, label.feld.ak-schalter { display: flex !important; }

/* Cockpit 2: Geld als Leiste im Kopf, „Heute dran“ nur so hoch wie nötig */
.ph-band .kz-link-kachel { text-decoration: none; color: inherit; border-radius: 10px; transition: background 0.15s; }
.ph-band .kz-link-kachel:hover { background: #ffffff0a; }
.ph-band .w.kz .v.kz-gut { color: var(--gut-auf-dunkel); }
.ph-band .w.kz .v.kz-rot { color: var(--schlecht-auf-dunkel); }
.kz-balken { height: 4px; border-radius: 999px; background: #ffffff1f; overflow: hidden; margin: 0.15rem 0 0.1rem; max-width: 12rem; }
.kz-balken i { display: block; height: 100%; background: var(--gut-auf-dunkel); border-radius: inherit; }
.ck .ck-oben { align-items: start; }
.ck .ck-heute { min-height: 0; }
.ck .ck-heute .ck-rest { margin-top: 0.4rem; }
.ck .ck-oben { align-items: stretch; } .ck .ck-seite > .ck-karte { flex: 1; }
.ph-band .w.kz .l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nächste Rechnung einstellen: eine breite Zeile statt gestapelt in der schmalen Spalte */
.kd-nr-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.8rem 0.95rem; border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--line)); border-radius: 14px; background: var(--orange-soft); }
.kd-nr-zeile[hidden] { display: none; }
.kd-nr-zeile > span { font-size: 0.84rem; font-weight: 700; color: var(--ink); }
.kd-nr-zeile select { height: 2.2rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 2rem 0 0.6rem; font: inherit; font-size: 0.84rem; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230c161580' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 0.7rem center; -webkit-appearance: none; appearance: none; color: var(--ink); }
.kd-nr-zeile .kd-nr-tag input { height: 2.2rem; width: 3.4rem; }
.kd-nr-zeile small { flex-basis: 100%; font-size: 0.74rem; color: var(--ink-70); }
.pk-phase-zeile { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.72rem; font-weight: 700; color: var(--ph-2); margin-top: 0.35rem; }
.pk-phase-zeile em { font-style: normal; color: var(--grey); font-weight: 600; }

/* Zahl am Reiter im Kopf: zeigt, wo im Bereich etwas wartet */
.reiter-zahl { display: inline-grid; place-items: center; min-width: 1.15rem; height: 1.15rem; padding: 0 0.3rem; margin-left: 0.4rem; border-radius: 999px; background: var(--orange); color: #fff; font-size: 0.68rem; font-weight: 800; vertical-align: 1px; }
.reiter-zahl[hidden] { display: none; }
.pk-unter b { color: var(--ink); font-weight: 700; }
@media (min-width: 701px) { .pl-board > .pl-spalte.leer { min-width: 92px; } .pl-board > .pl-spalte:not(.leer):not(.eingeklappt) { min-width: 196px; } }
@media (min-width: 701px) and (max-width: 1360px) {
  .pl-board { gap: 0.5rem; }
  .pl-board > .pl-spalte.leer { min-width: 84px; }
  .pl-board > .pl-spalte:not(.leer):not(.eingeklappt) { min-width: 176px; }
}

/* Offen in Billdu (im Geld-Reiter des Kunden) */
.kd-billdu { border-color: color-mix(in srgb, var(--stop) 30%, var(--line)); }
.kd-billdu .kd-karte-kopf > .ic { color: var(--stop); }
.kd-billdu .kd-karte-kopf .btn { margin-left: auto; }
.kd-billdu .kd-karte-kopf .klein { margin-left: 0.3rem; }
.kd-bd-liste { display: flex; flex-direction: column; }
.kd-bd-zeile { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto; gap: 1rem; align-items: center; padding: 0.6rem 0; border-top: 1px solid var(--stone); }
.kd-bd-zeile:first-child { border-top: 0; }
.kd-bd-zeile > div { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.kd-bd-zeile b { font-size: 0.86rem; color: var(--ink); }
.kd-bd-zeile span { font-size: 0.74rem; color: var(--grey); }
.kd-bd-zeile .rot b { color: var(--stop); }
.kd-bd-betrag b { font-variant-numeric: tabular-nums; }
.kd-bd-hilfe { margin: 0; color: var(--grey); line-height: 1.45; }
.kd-bd-erledigt { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.5rem; border-top: 1px dashed var(--line); }
.kd-bd-erledigt > div { display: flex; align-items: center; gap: 0.45rem; font-size: 0.78rem; color: var(--grey); }
.kd-bd-erledigt > div > .ic { color: var(--ok); }
.kd-bd-erledigt .kd-aendern { margin: 0 0 0 auto; }
@keyframes kd-blink { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 30% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--stop) 25%, transparent); } }
.kd-blink { animation: kd-blink 1.4s ease 2; }

/* Aktionen: Lage laut Creative Hub */
.pk-meta + .ak-hub, .ak-hub { margin-top: 0.35rem; font-size: 0.72rem; }
.ak-hub-zeile { display: flex; gap: 0.5rem; align-items: flex-start; margin-top: 0.6rem; padding: 0.55rem 0.8rem; border-radius: 12px; background: var(--tint); font-size: 0.84rem; }
.ak-hub-zeile.kritisch { background: var(--warn-bg); }
.ak-hub-zeile > i { margin-top: 0.15rem; color: var(--grey); }
.ak-hub-zeile .pill { margin: 0 0.25rem 0 0; vertical-align: 1px; }
.ak-hub-zeile small { display: block; color: var(--grey); margin-top: 0.2rem; }
.pill.ak-hub { background: var(--tint); color: var(--grey); }
.pill.ak-hub .pdot { background: currentColor; }
.pill.ak-hub-gelb { background: var(--warn-bg); color: var(--warn); }
.pill.ak-hub-rot { background: var(--stop-bg); color: var(--stop); }

/* Seitenleiste: Rubriken wie Cockpit, Sales, Paid Ads, Workspace */
.sb-rubrik { color: var(--grey-soft); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.9rem 0.8rem 0.3rem; }
.sb-rubrik:first-child { padding-top: 0.2rem; }
@media (max-width: 1180px) and (min-width: 901px) { .sb-rubrik { display: none; } }

/* Aufgaben: Priorität, Unteraufgaben, Notiz (wie im alten CRM) */
.auf-zeile { border-left: 3px solid transparent; }
.auf-zeile.prio-eilt { border-left-color: var(--warn); }
.auf-zeile.prio-dringend { border-left-color: var(--stop); }
.auf-prio { flex: none; font-size: 0.66rem; font-weight: 700; padding: 0.12rem 0.5rem; border-radius: 999px; }
.auf-prio.prio-eilt { background: var(--warn-bg); color: var(--warn); }
.auf-prio.prio-dringend { background: var(--stop-bg); color: var(--stop); }
.auf-mini { flex: none; display: inline-flex; align-items: center; gap: 0.25rem; font: inherit; font-size: 0.72rem; font-weight: 600; color: var(--grey); background: var(--tint); border-radius: 999px; padding: 0.15rem 0.5rem; }
.auf-unter.voll { color: var(--ok); background: var(--ok-bg); }
.auf-prio-wahl { display: inline-flex; flex-wrap: wrap; }
.auf-prio-wahl label { position: relative; cursor: pointer; }
.auf-prio-wahl input { position: absolute; opacity: 0; pointer-events: none; }
.auf-prio-wahl label.active.prio-eilt { color: var(--warn); }
.auf-prio-wahl label.active.prio-dringend { color: var(--stop); }
.auf-u-liste { display: flex; flex-direction: column; gap: 0.3rem; }
.auf-u { display: flex; align-items: center; gap: 0.5rem; }
.auf-u input[type="checkbox"] { flex: none; width: 1rem; height: 1rem; min-height: 0; margin: 0; accent-color: var(--orange); }
.auf-u .auf-u-text { flex: 1; min-width: 0; min-height: 0; padding: 0.35rem 0.6rem; font-size: 0.86rem; }
.auf-u.fertig .auf-u-text { text-decoration: line-through; color: var(--grey); }
.auf-u-neu { display: flex; gap: 0.5rem; margin-top: 0.4rem; }
.auf-u-neu input { flex: 1; min-width: 0; }
.auf-prio-wahl label { padding: 0.32rem 0.75rem; border-radius: var(--r-chip); font-size: 0.76rem; font-weight: 600; color: var(--ink-70); transition: all 0.25s var(--ease-smooth); }
.auf-prio-wahl label.active { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px #1a171614, 0 0 0 1px var(--line); }
.auf-prio-wahl label:has(input:focus-visible) { outline: 2px solid var(--orange); outline-offset: 1px; }
.feld .auf-prio-wahl label { display: inline-block; margin: 0; }
.feld .auf-prio-wahl label.active.prio-eilt { color: var(--warn); }
.feld .auf-prio-wahl label.active.prio-dringend { color: var(--stop); }

/* Lead-Fenster: Notizen, Angebot, Follow-up-Art (wie im alten CRM) */
.lp-label { display: block; font-size: 0.64rem; color: var(--text-32); margin: 0.7rem 0 0.2rem; }
.lp-klapp-inhalt .lp-label:first-child { margin-top: 0; }
.lp-hinweis.rot { background: var(--stop-bg); color: var(--stop); }
.lp-notiz-fuss { margin: 0.25rem 0 0.6rem; }
#lpAngNotiz { min-height: 4rem; }
.pk-hinweise { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.pk-hw { font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--tint); color: var(--grey); }
.pk-hw.rot { background: var(--stop-bg); color: var(--stop); }
.pk-hw.gelb { background: var(--warn-bg); color: var(--warn); }

/* Kunden-Detail: Aufgaben zum Kunden */
.kd-aufgaben { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.2rem 0; }
.kd-aufgabe { display: flex; align-items: center; gap: 0.55rem; padding: 0.35rem 0.5rem; border-radius: 10px; border-left: 3px solid transparent; }
.kd-aufgabe.prio-eilt { border-left-color: var(--warn); }
.kd-aufgabe.prio-dringend { border-left-color: var(--stop); }
.kd-auf-text { flex: 1; min-width: 0; font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-aufgabe small { flex: none; font-size: 0.72rem; color: var(--grey); }
.kd-aufgabe small.rot { color: var(--stop); font-weight: 700; }
.kd-auf-neu { display: flex; gap: 0.5rem; margin-top: 0.3rem; }
.kd-auf-neu [data-auf-titel] { flex: 1; min-width: 0; }
.kd-auf-neu input[type="date"] { width: 9.5rem; flex: none; }
.kd-auf-neu input { border: 1px solid var(--line); border-radius: 10px; padding: 0.45rem 0.7rem; font: inherit; font-size: 0.84rem; background: var(--card); color: var(--ink); }
.kd-auf-neu input:focus { outline: none; border-color: var(--orange); }

/* Gebietsschutz im Lead-Formular */
.gebiet-warn { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.7rem 0.85rem; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 0.82rem; }
.gebiet-warn.rot { background: var(--stop-bg); color: var(--stop); }
.gebiet-warn > i { font-size: 1.1rem; margin-top: 0.05rem; }
.gebiet-warn b { display: block; }
.gebiet-warn span { display: block; color: var(--ink-70); margin-top: 0.15rem; }
.gebiet-warn ul { margin: 0.35rem 0 0; padding-left: 1rem; color: var(--ink); }
.gebiet-warn li { margin: 0.1rem 0; }

/* Kunden-Detail Geld: Setup, Pausen, Ausstieg, Zusatzrechnungen */
.kd-vertrag .klein:first-child { margin: 0 0 0.6rem; }
.kd-pausen { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.4rem; }
.kd-pause { font: inherit; font-size: 0.74rem; font-weight: 600; padding: 0.3rem 0.65rem; border-radius: 999px; background: var(--tint); color: var(--ink-70); border: 1px solid var(--line); cursor: pointer; }
.kd-pause.an { background: var(--warn-bg); color: var(--warn); border-color: var(--warn); }
.kd-zusatz { display: flex; flex-direction: column; gap: 0.35rem; }
.kd-zusatz-zeile { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.4rem; border-radius: 10px; }
.kd-zusatz-zeile small { color: var(--grey); font-size: 0.74rem; }
.kd-zusatz-zeile b { font-size: 0.86rem; min-width: 5.5rem; text-align: right; }
.kd-zusatz-zeile.fertig .kd-auf-text { color: var(--grey); text-decoration: line-through; }
.kd-zusatz-bez { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.74rem; color: var(--ink-70); cursor: pointer; }
.kd-zusatz-bez input { width: 0.95rem; height: 0.95rem; min-height: 0; margin: 0; accent-color: var(--orange); }
.kd-auf-neu [data-zusatz-label] { flex: 1; min-width: 0; }
.marge-erkl { font-size: 0.78rem; color: inherit; opacity: 0.72; margin: 0.4rem 0 0.2rem; line-height: 1.45; }

/* Health: Verbindungen, Eingänge, Datenqualität */
.hl-gruppen { display: flex; flex-direction: column; gap: 0.8rem; }
.hl-liste { display: flex; flex-direction: column; }
.hl-zeile { display: flex; align-items: center; gap: 0.75rem; padding: 0.65rem 1.1rem; border-top: 1px solid var(--stone); color: var(--ink); text-decoration: none; }
a.hl-zeile:hover { background: var(--tint); }
.hl-zeile > i { color: var(--grey); }
.hl-punkt { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--grey-soft); }
.hl-punkt.ok { background: var(--ok); }
.hl-punkt.warn { background: var(--warn); }
.hl-punkt.fehler { background: var(--stop); }
.hl-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.hl-text b { font-size: 0.88rem; }
.hl-text small { font-size: 0.74rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hl-rechts { flex: none; font-size: 0.76rem; color: var(--grey); }
.hl-rechts .rot { color: var(--stop); font-weight: 600; }
.hl-zahl { font-size: 0.95rem; color: var(--ink); }
.hl-stand { margin: 0.4rem 0.2rem; }

/* Gehaltskarte: Marge-Regler (Gehalt schieben, Marge danach sehen) */
.mr { margin: 0.9rem 0 0.4rem; padding: 0.9rem 1rem 0.8rem; border-radius: 14px; background: var(--white-6); }
.mr-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.6rem; font-size: 0.84rem; opacity: 0.9; }
.mr-kopf b { font-size: 1.15rem; opacity: 1; }
.mr-regler { width: 100%; margin: 0.7rem 0 0.2rem; height: 6px; appearance: none; -webkit-appearance: none; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, var(--ok) 0 var(--mr-ziel), var(--stop) var(--mr-ziel) 100%); }
.mr-regler::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--paper); border: 3px solid var(--orange); box-shadow: 0 1px 4px #0006; }
.mr-regler::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 3px solid var(--orange); }
.mr-skala { position: relative; display: flex; justify-content: space-between; font-size: 0.68rem; opacity: 0.6; height: 1.1rem; }
.mr-ziel-marke { position: absolute; left: var(--mr-ziel); transform: translateX(-50%); white-space: nowrap; color: var(--ok); opacity: 1; font-weight: 700; }
.mr-werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.mr-werte div { display: flex; flex-direction: column; gap: 0.1rem; }
.mr-werte span { font-size: 0.66rem; opacity: 0.65; }
.mr-werte b { font-size: 0.98rem; }
.mr [data-mr-marge] { color: var(--ok); }
.mr.drueber [data-mr-marge] { color: var(--stop); }
.mr-hinweis { font-size: 0.72rem; opacity: 0.6; margin: 0.6rem 0 0; line-height: 1.4; }

/* Aufgaben: Listen-Reiter und Kanban-Karten (Präfix auf-k-) */
.auf-k-listen { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.8rem; flex-wrap: wrap; }
.auf-k-reiter { display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.auf-k-reiter-knopf { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--ink-70); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 0.32rem 0.8rem; display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; white-space: nowrap; }
.auf-k-reiter-knopf:hover { border-color: var(--grey-soft); color: var(--ink); }
.auf-k-reiter-knopf.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.auf-k-zahl { font-size: 0.68rem; font-weight: 800; background: var(--stone); color: var(--ink-70); border-radius: 999px; padding: 0 0.42rem; line-height: 1.5; }
.auf-k-reiter-knopf.active .auf-k-zahl { background: var(--white-16); color: var(--paper); }
.auf-k-neu { font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--grey); background: transparent; border: 1px dashed var(--line); border-radius: 999px; padding: 0.3rem 0.7rem; display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer; }
.auf-k-neu:hover { color: var(--ink); border-color: var(--grey-soft); }
.auf-k-listen-aktion { display: flex; gap: 0.2rem; }
.auf-k-rechts { margin-left: auto; display: inline-flex; gap: 0.4rem; align-items: center; }
.auf-k-rechts .btn.active { background: var(--stone); }
.auf-k-board.in { opacity: 1; }
.auf-k-board .pl-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: row; overflow: visible; }
.auf-k-board .pl-board > .pl-spalte { max-height: var(--pl-hoehe, none); overflow-y: auto; }
.auf-k-karte { display: flex; flex-direction: column; gap: 0.4rem; border-left: 3px solid transparent; margin: -0.7rem -0.8rem; padding: 0.7rem 0.8rem 0.7rem 0.7rem; border-radius: 12px; }
.auf-k-karte.prio-eilt { border-left-color: var(--warn); }
.auf-k-karte.prio-dringend { border-left-color: var(--stop); }
.auf-k-titel { font-size: 0.86rem; font-weight: 600; color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
.auf-k-karte.fertig .auf-k-titel { text-decoration: line-through; color: var(--grey); }
.auf-k-meta { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; }
.auf-k-meta:empty { display: none; }
.auf-k-datum { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 600; color: var(--grey); }
.auf-k-datum.rot { color: var(--stop); }
.auf-k-datum.orange { color: var(--orange-deep); }
.auf-k-wer { font-size: 0.72rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) {
  .auf-k-board .pl-board { display: block; }
  .auf-k-rechts { margin-left: 0; }
}

/* ── Kunden: Kundenwert und Etappen, Rechnungsbetrag je Monat (kw-), Testimonials Go-live/Link/Notiz (kd-testi-) ── */
.kw-platz { margin-bottom: 0.9rem; }
.kw-platz > .klapp .kl-zusatz b { color: var(--ink); font-weight: 800; }
.kw-innen { display: flex; flex-direction: column; gap: 0.9rem; padding-top: 0.2rem; }
.kw-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.kw-kopf .klein { flex: 1 1 320px; min-width: 0; }
.kw-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.kw-z { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: var(--tint); border: 1px solid var(--line); min-width: 0; }
.kw-z > span { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.kw-z > b { font-size: 1.35rem; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.kw-z > small { font-size: 0.72rem; color: var(--grey); line-height: 1.35; }
.kw-z.haupt { border-left: 3px solid var(--ink); }
.kw-z.ziel { background: var(--ok-bg); border-color: transparent; border-left: 3px solid var(--ok); }
.kw-z.ziel > b { color: var(--ok); }
.kw-potenzial { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--ok-bg); color: var(--ink-70); font-size: 0.82rem; line-height: 1.45; }
.kw-potenzial i { color: var(--ok); font-size: 1.1rem; margin-top: 0.05rem; }
.kw-potenzial b { color: var(--ok); }
.kw-etappen-kopf { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; font-size: 0.8rem; font-weight: 600; color: var(--ink-70); border-top: 1px solid var(--line); padding-top: 0.85rem; }
.kw-etappen-kopf input { width: 6.5rem; padding: 0.35rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; font-weight: 800; text-align: center; color: var(--ink); }
.kw-etappen-kopf .kd-aendern { margin-top: 0; }
.kw-etappen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.kw-et { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; padding: 0.7rem 0.4rem; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.kw-et > span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--grey); }
.kw-et > b { font-size: 1.3rem; font-weight: 800; color: var(--ink); line-height: 1.1; }
.kw-et > small { font-size: 0.68rem; color: var(--grey); }
.kw-et > em { font-style: normal; font-size: 0.74rem; font-weight: 800; color: var(--orange-deep); }
.kw-et.erreicht { background: var(--ok-bg); border-color: transparent; }
.kw-et.erreicht > b, .kw-et.erreicht > em { color: var(--ok); }
.kw-liste { display: flex; flex-direction: column; }
.kw-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 0.8rem; padding: 0.5rem 0.2rem; border: 0; border-bottom: 1px solid var(--line); background: none; font: inherit; text-align: left; cursor: pointer; color: var(--ink); }
.kw-zeile:last-child { border-bottom: 0; }
.kw-zeile:hover { background: var(--tint); }
.kw-zeile > span { font-weight: 700; font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-zeile > small { font-size: 0.74rem; color: var(--grey); }
.kw-zeile > b { font-size: 0.86rem; font-weight: 800; min-width: 5.5rem; text-align: right; }
.kw-zeile.top > b { color: var(--ok); }
.kw-rb { display: flex; flex-direction: column; gap: 0.15rem; }
.kw-rb > p { margin: 0 0 0.4rem; }
.kw-rb-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 7.5rem 9.5rem; align-items: center; gap: 0.8rem; padding: 0.45rem 0; border-bottom: 1px solid var(--line); }
.kw-rb-zeile:last-child { border-bottom: 0; }
.kw-rb-monat { display: flex; flex-direction: column; min-width: 0; }
.kw-rb-monat b { font-size: 0.84rem; color: var(--ink); }
.kw-rb-monat small { font-size: 0.72rem; color: var(--grey); }
.kw-rb-wert { display: inline-flex; align-items: center; gap: 0.35rem; }
.kw-rb-wert input { width: 7.5rem; padding: 0.35rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; font-weight: 800; text-align: right; color: var(--ink); }
.kw-rb-wert em { font-style: normal; font-size: 0.72rem; color: var(--grey); font-weight: 600; }
.kw-rb-brutto { font-size: 0.74rem; color: var(--grey); text-align: right; }
.kw-rb-zeile > .pill, .kw-rb-quelle { justify-self: start; }
.kw-rb-quelle { font-size: 0.74rem; color: var(--grey); grid-column: 4; }
.kw-rb-zeile > .pill { grid-column: 4; grid-row: 1; }
.kw-rb-zeile > .kd-aendern { grid-column: 4; grid-row: 1; justify-self: end; margin-top: 0; }
.kd-testi-golive { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.6rem 0 0.2rem; padding: 0.6rem 1rem; border-radius: 14px; background: var(--tint); border: 1px solid var(--line); }
.kd-testi-golive label { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.kd-testi-golive input { padding: 0.35rem 0.6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--card); font: inherit; color: var(--ink); }
.kd-testi-felder { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.6rem 0.8rem; border-top: 1px solid var(--line); padding-top: 0.7rem; }
.kd-testi-felder .feld-hilfe { grid-column: 1 / -1; margin-top: -0.2rem; }
.kd-testi-link { display: flex; gap: 0.4rem; align-items: center; }
.kd-testi-link input { flex: 1; min-width: 0; }
@media (max-width: 900px) {
  .kw-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kw-etappen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kd-testi-felder { grid-template-columns: 1fr; }
  .kw-rb-zeile { grid-template-columns: minmax(0, 1fr) auto; }
  .kw-rb-brutto { display: none; }
  .kw-rb-zeile > .pill, .kw-rb-quelle, .kw-rb-zeile > .kd-aendern { grid-column: auto; grid-row: auto; }
}
.kw-rb-quelle { display: inline-flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kw-rb-quelle .kd-aendern { margin-top: 0; }

/* ===== Leads/Pipeline (Präfix ld-): Kennzahlen, Umsatz-Pille, Telefon auf der Karte, Verlaufseintrag mit Datum, PLZ-Vorschlag ===== */
.ph-band .w.kz .v.ld-kz-text { font-size: 1.35rem; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; }
.pk-kopf .ld-tel { flex-shrink: 0; margin-left: auto; display: inline-flex; align-items: center; justify-content: center; width: 1.45rem; height: 1.45rem; border-radius: 999px; background: var(--ok-bg); color: var(--ok); font-size: 0.78rem; text-decoration: none; transition: background 0.15s; }
.pk-kopf .ld-tel:hover { background: var(--ok); color: var(--card); }
.pk-kopf .ld-tel + .pk-score { margin-left: 0; }
.pk-meta .ld-umsatz { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.02em; padding: 0.05rem 0.4rem; border-radius: 6px; background: var(--tint); color: var(--grey); gap: 0.2rem; }
.pk-meta .ld-umsatz.rot { background: var(--stop-bg); color: var(--stop); }
.pk-meta .ld-umsatz.gelb { background: var(--warn-bg); color: var(--warn); }
.pk-meta .ld-umsatz.gruen { background: var(--ok-bg); color: var(--ok); }
.pk-meta .ld-umsatz.top { background: var(--ok); color: var(--card); }
.pk-meta .ld-notiz { color: var(--grey); cursor: help; }
.ld-eintrag { margin-bottom: 0.8rem; }
.ld-eintrag-fuss { display: flex; align-items: center; gap: 0.5rem; justify-content: flex-end; }
.ld-eintrag-fuss input[type="date"] { width: auto; flex: 0 1 9.5rem; font-size: 0.78rem; padding: 0.3rem 0.5rem; }
.notiz-neu.ld-eintrag .btn { align-self: auto; }
.tl-it .m .ld-tl-weg { margin-left: 0.4rem; border: 0; background: none; padding: 0 0.15rem; color: var(--grey); cursor: pointer; font-size: 0.75rem; vertical-align: middle; opacity: 0; transition: opacity 0.15s, color 0.15s; }
.tl-it:hover .ld-tl-weg, .ld-tl-weg:focus-visible { opacity: 1; }
.tl-it .m .ld-tl-weg:hover { color: var(--stop); }
.ld-plz-tipp { margin-top: 0.35rem; display: inline-flex; align-items: center; gap: 0.3rem; border: 1px dashed var(--line); background: var(--tint); color: var(--ink); border-radius: 999px; padding: 0.2rem 0.6rem; font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.ld-plz-tipp:hover { border-color: var(--ok); color: var(--ok); }
.ld-plz-tipp[hidden] { display: none; }
@media (hover: none) { .tl-it .m .ld-tl-weg { opacity: 1; } }

/* ---------- Finanzen: Monatsabschluss, Sparanalyse, Prognose (Präfix fz-) ---------- */
.fz-ab-band { display: flex; align-items: center; gap: 0.9rem; width: 100%; margin: 0 0 1rem; padding: 0.85rem 1.1rem; border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); background: var(--warn-bg); border-radius: 14px; font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color 0.15s ease, transform 0.15s ease; }
.fz-ab-band:hover { border-color: var(--warn); transform: translateY(-1px); }
.fz-ab-ic { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border-radius: 10px; background: var(--card); color: var(--warn); font-size: 1.15rem; flex: none; }
.fz-ab-text { display: flex; flex-direction: column; gap: 0.12rem; min-width: 0; }
.fz-ab-text b { font-size: 0.92rem; }
.fz-ab-text span { font-size: 0.78rem; color: var(--ink-70); }
.fz-ab-band em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 0.82rem; color: var(--ink); display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.fz-ab-klein { margin: 0 0 0.8rem; }
.fz-ab-klein .fs-knopf > i { color: var(--ok); }
.fz-ab-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 0.8rem; }
.fz-ab-kachel { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--tint); color: var(--ink); text-decoration: none; transition: border-color 0.15s ease; }
.fz-ab-kachel:hover { border-color: var(--ink-70); }
.fz-ab-kachel span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.fz-ab-kachel b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fz-ab-kachel small { font-size: 0.74rem; color: var(--grey); }
.fz-ab-kachel.gut { background: var(--ok-bg); } .fz-ab-kachel.gut b { color: var(--ok); }
.fz-ab-kachel.schlecht { background: var(--stop-bg); } .fz-ab-kachel.schlecht b { color: var(--stop); }
.fz-ab-zeile { display: flex; justify-content: space-between; gap: 0.8rem; color: var(--ink); text-decoration: none; padding: 0.3rem 0; }
.fz-ab-zeile:hover span { text-decoration: underline; }
.fz-ab-liste { display: flex; flex-direction: column; gap: 0.35rem; }
.fz-ab-schritt { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--card); }
.fz-ab-schritt input { margin-top: 0.2rem; width: 1rem; height: 1rem; accent-color: var(--ok); flex: none; }
.fz-ab-schritt > span { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.fz-ab-schritt b { font-size: 0.86rem; }
.fz-ab-schritt small { font-size: 0.75rem; color: var(--grey); line-height: 1.45; }
.fz-ab-schritt:has(input:checked) { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.fz-ab-schritt:has(input:checked) b { color: var(--ok); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ok) 50%, transparent); }
.fz-ab-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 0.2rem; }
.fz-ab-rot { color: var(--stop); }

.fz-sp-leer { color: var(--grey-soft); }
.fz-sp-pille { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.18rem 0.6rem; border-radius: 999px; border: 0; font: inherit; font-size: 0.72rem; font-weight: 700; cursor: pointer; white-space: nowrap; background: var(--tint-deep); color: var(--ink-70); }
.fz-sp-pille.warn { background: var(--warn-bg); color: var(--warn); }
.fz-sp-pille.stop { background: var(--stop-bg); color: var(--stop); }
.fz-sp-pille.gut { background: var(--ok-bg); color: var(--ok); }
.fz-sp-pille:hover { filter: brightness(0.96); outline: 1px solid currentColor; }
.fz-sp-liste { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.6rem; }
.fz-sp-tip { padding: 0.7rem 0.85rem; border-radius: 10px; border: 1px solid var(--line); background: var(--tint); }
.fz-sp-tip b { font-size: 0.86rem; }
.fz-sp-tip p { margin: 0.2rem 0 0.35rem; font-size: 0.8rem; color: var(--ink-70); line-height: 1.5; }
.fz-sp-tip .fz-ab-link { font-size: 0.76rem; }
.fz-sp-tip.warn { background: var(--warn-bg); } .fz-sp-tip.warn b { color: var(--warn); }
.fz-sp-tip.stop { background: var(--stop-bg); } .fz-sp-tip.stop b { color: var(--stop); }
.fz-sp-tip.gut { background: var(--ok-bg); } .fz-sp-tip.gut b { color: var(--ok); }

.fz-pg-basis { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; padding: 0.8rem 1rem; margin-bottom: 1rem; }
.fz-pg-l { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); }
.fz-pg-basis .seg button b { font-variant-numeric: tabular-nums; margin-left: 0.25rem; }
.fz-pg-hint { margin-left: auto; font-size: 0.76rem; color: var(--grey); max-width: 22rem; text-align: right; }
.fz-pg-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; margin-bottom: 1rem; }
.fz-pg-kachel { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.9rem 1rem; }
.fz-pg-kachel span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.fz-pg-kachel b { font-size: 1.45rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.fz-pg-kachel small { font-size: 0.75rem; color: var(--grey); line-height: 1.4; }
.fz-pg-kachel.gut b { color: var(--ok); } .fz-pg-kachel.schlecht b { color: var(--stop); }
.fz-pg-etappe { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem 1rem; margin-bottom: 1rem; font-size: 0.82rem; }
.fz-pg-etappe > i { color: var(--grey); }
.fz-pg-etappe .fz-ab-link { margin-left: auto; font-size: 0.78rem; }
.fz-pg-chart { padding: 1rem 1.1rem; margin-bottom: 1rem; }
.fz-pg-svg { display: block; width: 100%; height: auto; margin-top: 0.6rem; }
.fz-pg-achse { stroke: var(--line); stroke-width: 1; }
.fz-pg-col rect { fill: var(--ink); }
.fz-pg-col.prog rect { fill: var(--stone); stroke: var(--grey-soft); stroke-dasharray: 4 3; }
.fz-pg-col.jetzt rect { stroke: var(--ink); stroke-width: 1.5; }
.fz-pg-col:hover rect { opacity: 0.8; }
.fz-pg-wert { font-size: 10px; font-weight: 700; fill: var(--ink-70); text-anchor: middle; font-family: inherit; }
.fz-pg-mon { font-size: 11px; fill: var(--grey); text-anchor: middle; font-family: inherit; }
.fz-pg-col.jetzt .fz-pg-mon { fill: var(--ink); font-weight: 800; }
.fz-pg-noetig { stroke: var(--stop); stroke-width: 1.5; stroke-dasharray: 6 4; }
.fz-pg-noetig-t { font-size: 10px; font-weight: 700; fill: var(--stop); text-anchor: end; font-family: inherit; }
.fz-pg-dot { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.fz-pg-dot.ist { background: var(--ink); }
.fz-pg-dot.prog { background: var(--stone); border: 1px dashed var(--grey-soft); }
.fz-pg-dot.noetig { height: 0; border-top: 2px dashed var(--stop); border-radius: 0; }
.fz-pg-szen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; padding: 0.2rem 1rem 1rem; }
.fz-pg-sz { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.8rem 0.9rem; border-radius: 12px; border: 1px solid var(--line); background: var(--tint); }
.fz-pg-sz span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.fz-pg-sz b { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.fz-pg-sz small { font-size: 0.74rem; color: var(--grey); }
.fz-pg-sz.gut b { color: var(--ok); } .fz-pg-sz.schlecht b { color: var(--stop); }
.fz-pg-bar { height: 6px; border-radius: 999px; background: var(--stone); overflow: hidden; margin-top: 0.2rem; }
.fz-pg-bar i { display: block; height: 100%; background: var(--ink); border-radius: inherit; }
.fz-pg-sz.gut .fz-pg-bar i { background: var(--ok); } .fz-pg-sz.schlecht .fz-pg-bar i { background: var(--stop); }
@media (max-width: 1100px) { .fz-pg-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fz-pg-hint { margin-left: 0; text-align: left; } }
@media (max-width: 640px) { .fz-pg-kacheln, .fz-pg-szen, .fz-ab-kacheln { grid-template-columns: 1fr; } .fz-ab-band em { display: none; } }

/* ===== Dashboard: Umschalter Heute | Woche | Monat, Briefing, Neukunden-Ziel (Präfix db-) ===== */
.db-kopf .seg { margin-left: auto; }
.db-blatt { display: flex; align-items: center; gap: 0.3rem; margin: -0.2rem 0 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--ink-70); }
.db-blatt.klein { margin: 0; font-size: 0.74rem; gap: 0.1rem; }
.db-pfeil { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; border: 0; background: transparent; color: var(--ink-70); font-size: 1rem; cursor: pointer; }
.db-pfeil:hover:not(:disabled) { background: var(--stone); color: var(--ink); }
.db-pfeil:disabled { opacity: 0.25; cursor: default; }
.db-gruppen details.klapp.innen { box-shadow: none; margin-top: 0.5rem; }
.db-gruppen .kl-titel { display: inline-flex; align-items: center; gap: 0.45rem; }
.db-gruppen .kl-titel i { color: var(--ink-70); font-size: 1rem; }
.db-gruppen .kl-inhalt { padding: 0.3rem 0.5rem 0.5rem; }
.db-rot { color: var(--stop); }
.db-leer { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.8rem; padding: 0.6rem 0.4rem 0; border-top: 1px dashed var(--line); font-size: 0.78rem; color: var(--grey); }
.db-leer i { font-size: 0.9rem; color: var(--grey-soft); }
.db-zeile { display: grid; grid-template-columns: minmax(0, 1fr) auto 1.2rem; align-items: center; gap: 0.7rem; padding: 0.5rem 0.55rem; border-radius: 9px; cursor: pointer; border-top: 1px solid var(--stone); }
.db-zeile:first-child { border-top-color: transparent; }
.db-zeile:hover, .db-zeile:focus-visible { background: var(--cream); outline: none; }
.db-zeile > i { color: var(--grey); }
.db-zeile em { font-style: normal; font-size: 0.74rem; font-weight: 700; color: var(--ink-70); white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-zeile.warn em, .db-zeile.warn b { color: var(--stop); }
.db-text { display: flex; flex-direction: column; min-width: 0; }
.db-text b { font-size: 0.84rem; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-text small { font-size: 0.74rem; color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-stufe { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.5rem 0.55rem; border-top: 1px solid var(--stone); }
.db-stufe:first-child { border-top-color: transparent; }
.db-stufe.heute { background: var(--cream); border-radius: 9px; }
.db-stufe-n { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.8rem; font-weight: 700; color: var(--ink); padding-top: 0.2rem; }
.db-stufe-n b, .db-stufe-n small { font-size: 0.72rem; font-weight: 700; color: var(--grey); }
.db-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.db-chip { font: inherit; font-size: 0.75rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 0.18rem 0.6rem; cursor: pointer; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-chip:hover { border-color: var(--orange); color: var(--orange-deep); }
.db-liste { margin-top: 0.6rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.25rem; }
.db-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1rem; }
.db-felder label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-70); }
/* Neukunden-Ziel in der Pipeline-Karte */
.db-nk { padding: 0.7rem 0 0.75rem; border-top: 1px solid var(--stone); }
.db-nk:empty { display: none; }
.db-nk-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.db-l { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.db-nk-ziel { width: 100%; display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); font: inherit; text-align: left; cursor: pointer; }
.db-nk-ziel:hover { border-color: var(--orange); }
.db-nk-zahl { display: flex; align-items: baseline; gap: 0.2rem; }
.db-nk-zahl b { font-size: 1.35rem; font-weight: 800; color: var(--warn); line-height: 1; font-variant-numeric: tabular-nums; }
.db-nk-zahl small { font-size: 0.8rem; font-weight: 700; color: var(--grey); }
.db-nk-ziel.gut .db-nk-zahl b { color: var(--ok); }
.db-nk-ziel.null .db-nk-zahl b { color: var(--stop); }
.db-nk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.74rem; font-weight: 600; color: var(--ink-70); }
.db-nk-balken { display: block; height: 5px; border-radius: 999px; background: var(--stone); overflow: hidden; }
.db-nk-balken em { display: block; height: 100%; border-radius: inherit; background: var(--warn); }
.db-nk-ziel.gut .db-nk-balken em { background: var(--ok); }
.db-vergleich { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; margin-top: 0.55rem; }
.db-vergleich > div { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.db-vergleich span { font-size: 0.68rem; color: var(--grey); white-space: nowrap; }
.db-vergleich b { font-size: 0.92rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-vergleich em { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--grey); white-space: nowrap; }
.db-vergleich em.hoch { color: var(--ok); } .db-vergleich em.runter { color: var(--stop); }
.db-vgl-zeile { margin-top: 0.35rem; font-size: 0.7rem; color: var(--grey); }
.kw-innen { padding: 0 1.15rem 1.1rem; }
.kw-innen .klapp { box-shadow: none; }
.kw-rb-zeile { grid-template-columns: minmax(0, 1fr) auto 7.5rem 13rem; }
.kw-rb-quelle { flex-wrap: nowrap; }
@media (max-width: 900px) { .kw-rb-zeile { grid-template-columns: minmax(0, 1fr) auto; } .kw-rb-quelle { flex-wrap: wrap; } }

/* ===== Meta-Auswertung (Präfix ma-) ===== */
.ma-gruppen { margin-bottom: 1.4rem; }
.ma-dot { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--line); flex-shrink: 0; vertical-align: 0.05rem; }
.ma-dot.gut { background: var(--ok); } .ma-dot.mittel { background: var(--warn); } .ma-dot.schlecht { background: var(--stop); }
.ma-pill { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.18rem 0.6rem; border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 700; white-space: nowrap; background: var(--tint); color: var(--ink-70); }
.ma-pill.gut { background: var(--ok-bg); color: var(--ok); } .ma-pill.mittel { background: var(--warn-bg); color: var(--warn); } .ma-pill.schlecht { background: var(--stop-bg); color: var(--stop); }
.ph-band .ma-kz { cursor: pointer; }
.ph-band .ma-kz:hover .v { color: var(--white); }
.ph-band .ma-kz .ma-d { display: flex; align-items: center; gap: 0.4rem; }
.ph-band .ma-dot.gut { background: var(--gut-auf-dunkel); } .ph-band .ma-dot.schlecht { background: var(--schlecht-auf-dunkel); } .ph-band .ma-dot.leer { background: var(--haar-auf-dunkel); }
.ph-band .ma-signal { font-size: 1.35rem; padding-top: 0.25rem; }
.ma-kamp { font-weight: 600; color: var(--grey); font-size: 0.85rem; margin-left: 0.3rem; }
.ma-trichter { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; margin-bottom: 1rem; }
.ma-stufe { background: var(--tint); border-radius: 12px; padding: 0.7rem 0.9rem; display: flex; flex-direction: column; gap: 0.15rem; cursor: help; }
.ma-stufe b { font-size: 1.35rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-stufe span { font-size: 0.75rem; color: var(--grey); }
.ma-karten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.7rem; }
.ma-karte { border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 12px; padding: 0.8rem 0.95rem; display: flex; flex-direction: column; gap: 0.3rem; background: var(--card); min-width: 0; cursor: help; }
.ma-karte.gut { border-top-color: var(--ok); } .ma-karte.mittel { border-top-color: var(--warn); } .ma-karte.schlecht { border-top-color: var(--stop); }
.ma-karte-kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; color: var(--ink-70); }
.ma-karte > b { font-size: 1.45rem; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-karte > small { font-size: 0.72rem; color: var(--grey); line-height: 1.35; }
.ma-werte { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin-bottom: 0.9rem; font-size: 0.85rem; color: var(--ink-70); }
.ma-werte span { cursor: help; } .ma-werte b { color: var(--ink); margin-left: 0.2rem; }
.ma-werte em { font-style: normal; font-size: 0.7rem; color: var(--grey); margin-left: 0.25rem; }
.ma-werte .btn { margin-left: auto; }
.ma-maxcpl { margin-top: 0.9rem; background: var(--tint); border-radius: 12px; padding: 0.9rem 1rem; cursor: help; }
.ma-maxcpl-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.ma-maxcpl-kopf > div:first-child b { display: block; font-size: 0.9rem; color: var(--ink); }
.ma-maxcpl-kopf small { font-size: 0.75rem; color: var(--grey); }
.ma-maxcpl-werte { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.ma-maxcpl-werte span { display: flex; flex-direction: column; align-items: flex-end; font-size: 0.72rem; font-weight: 700; color: var(--grey); }
.ma-maxcpl-werte span b { font-size: 1.05rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-maxcpl-werte .gut b { color: var(--ok); } .ma-maxcpl-werte .mittel b { color: var(--warn); } .ma-maxcpl-werte .schlecht b { color: var(--stop); }
.ma-maxcpl-werte .jetzt { border-left: 1px solid var(--line); padding-left: 1.2rem; }
.ma-skala { position: relative; height: 0.5rem; border-radius: 0.25rem; background: var(--line); display: flex; }
.ma-skala .zone.gut { background: var(--ok-bg); border-radius: 0.25rem 0 0 0.25rem; } .ma-skala .zone.mittel { background: var(--warn-bg); flex: 1; border-radius: 0 0.25rem 0.25rem 0; }
.ma-skala .marke { position: absolute; top: -0.25rem; width: 0.25rem; height: 1rem; border-radius: 2px; transform: translateX(-50%); background: var(--ink); }
.ma-skala .marke.gut { background: var(--ok); } .ma-skala .marke.mittel { background: var(--warn); } .ma-skala .marke.schlecht { background: var(--stop); }
.ma-skala-text { display: flex; justify-content: space-between; font-size: 0.7rem; color: var(--grey); margin-top: 0.35rem; }
.ma-satz { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--ink-70); line-height: 1.55; }
.ma-satz b { color: var(--ink); } .ma-satz .ma-t-gut { color: var(--ok); } .ma-satz .ma-t-mittel { color: var(--warn); } .ma-satz .ma-t-schlecht { color: var(--stop); }
.ma-budget { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.ma-budget.gut { border-color: var(--ok); background: var(--ok-bg); } .ma-budget.mittel { border-color: var(--warn); background: var(--warn-bg); } .ma-budget.schlecht { border-color: var(--stop); background: var(--stop-bg); }
.ma-budget-kopf { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; font-size: 1.1rem; cursor: help; }
.ma-budget-kopf .ma-dot { width: 0.85rem; height: 0.85rem; }
.ma-budget.gut .ma-budget-kopf b { color: var(--ok); } .ma-budget.mittel .ma-budget-kopf b { color: var(--warn); } .ma-budget.schlecht .ma-budget-kopf b { color: var(--stop); }
.ma-budget-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ma-budget-zahlen > div { padding: 0.7rem 1rem; text-align: center; display: flex; flex-direction: column; gap: 0.15rem; }
.ma-budget-zahlen > div + div { border-left: 1px solid var(--line); }
.ma-budget-zahlen span { font-size: 0.7rem; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; }
.ma-budget-zahlen b { font-size: 1.15rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.ma-empf { padding: 0.8rem 1rem; }
.ma-empf-t { font-size: 0.7rem; font-weight: 700; color: var(--grey); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.4rem; }
.ma-empf ul { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--ink-70); }
.ma-empf li.erste { font-weight: 700; color: var(--ink); }
.ma-tabelle td .ma-dot { margin-left: 0.3rem; }
.ma-tabelle tr[data-ma-kampagne] { cursor: pointer; }
.ma-tabelle tr.ma-ruhig { cursor: default; }
.ma-null { color: var(--grey); opacity: 0.6; }
.ma-legende { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; font-size: 0.75rem; color: var(--grey); padding: 0 0.3rem; }
.ma-legende .ma-dot + .ma-dot, .ma-legende .ma-dot { margin-left: 0.4rem; }
.ma-legende span { margin-left: 0.6rem; }
.ma-hinweis { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; border-radius: 12px; background: var(--warn-bg); color: var(--ink-70); font-size: 0.85rem; }
.ma-hinweis .ic { color: var(--warn); } .ma-hinweis .btn { margin-left: auto; flex-shrink: 0; }
.ma-leer .ma-leer-knopf { margin-top: 0.9rem; }
.ma-zaehler { grid-template-columns: repeat(3, 1fr); }
.ma-vorschau { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 0.9rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: var(--tint); }
.ma-vorschau div { display: flex; flex-direction: column; gap: 0.1rem; }
.ma-vorschau span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.ma-vorschau b { font-size: 0.95rem; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .ma-karten { grid-template-columns: repeat(2, 1fr); } .ma-trichter { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .ma-karten, .ma-zaehler { grid-template-columns: 1fr; } .ma-trichter { grid-template-columns: repeat(2, 1fr); } }

/* Gehaltskarte kompakt: Rechner, Rechnung und Weglegen klappen auf */
.gm-klapp { margin-top: 0.6rem; border-radius: 12px; background: var(--white-6); }
.gm-klapp > summary { list-style: none; display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.8rem; cursor: pointer; font-size: 0.82rem; }
.gm-klapp > summary::-webkit-details-marker { display: none; }
.gm-klapp > summary > span:first-child { display: inline-flex; align-items: center; gap: 0.4rem; }
.gm-klapp > summary em, .gm-klapp > summary b { margin-left: auto; font-style: normal; }
.gm-klapp > summary em { opacity: 0.6; font-size: 0.76rem; }
.gm-klapp[open] > summary { border-bottom: 1px solid var(--white-10); }
.gm-klapp > :not(summary) { margin-left: 0.8rem; margin-right: 0.8rem; }
.gm-klapp .fin-rechnung { margin-top: 0.4rem; }
.gm-klapp .fin-fuss { margin: 0.4rem 0.8rem 0.7rem; }
.gm-klapp .gm-weg-teile { margin-top: 0.6rem; }
.mr.gm-klapp { padding: 0; margin: 0.8rem 0 0; }
.mr.gm-klapp[open] { padding-bottom: 0.8rem; }
.mr.gm-klapp .mr-kopf { margin-top: 0.7rem; }
.mr-chip { font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; }
.mr-chip.gut { color: var(--ok); background: var(--ok-bg); }
.mr-chip.schlecht { color: var(--stop); background: var(--stop-bg); }
.mr-kurz { opacity: 0.7; font-size: 0.76rem; }
.mr-auf { margin-left: auto; display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: var(--orange); font-size: 0.78rem; }
.mr.gm-klapp[open] .mr-auf { opacity: 0.6; }
.mr-chip, .mr-auf { white-space: nowrap; flex: none; }
.mr-kurz { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kw-kopf .seg { flex: none; width: auto; }
.ph-band .ma-dot.keine { background: var(--haar-auf-dunkel); }
.ma-gruppen > .klapp > .kl-inhalt { padding: 1rem 1.15rem 1.15rem; }
.ma-gruppen > .klapp > .kl-inhalt > .tbl-scroll { margin: -1rem -1.15rem -1.15rem; }
.ma-skala .zone.gut { background: var(--ok); opacity: 0.35; } .ma-skala .zone.mittel { background: var(--warn); opacity: 0.3; }
.db-felder .feld { margin: 0; }
.db-felder .feld label { display: block; font-size: 0.68rem; font-weight: 600; color: var(--text-56); }

/* ===== Kompakt-Runde (01.11.2026): weniger Leerraum, Ansichten ohne Scrollen erfassbar ===== */
.page-header { padding: 14px 22px 12px; gap: 8px 16px; margin-top: 12px; }
.page-header h1 { font-size: 1.55rem; }
.page-header .ph-eyebrow { margin-bottom: 2px; }
.page-header .ph-text p { margin-top: 2px; font-size: 0.8rem; }
.ph-band { padding-top: 10px; margin-top: 2px; }
.ph-band .w.kz .v { font-size: 1.65rem; line-height: 1.15; }
.ph-band .w.kz .l { font-size: 0.66rem; }
.ph-band .w.kz .d { font-size: 0.7rem; margin-top: 1px; }
.ph-reiter { margin-top: 0; }
.ph-reiter a { padding: 5px 13px; }
.content { padding: 14px 28px 32px; }
.content > .filters, .filters { margin-bottom: 10px; }
.bento { gap: 12px; }
@media (max-width: 1360px) { .page-header { padding: 12px 18px 10px; } .content { padding: 12px 20px 28px; } }
/* Dashboard kompakt */
.db-vgl-klapp > summary { cursor: pointer; font-size: 0.74rem; color: var(--grey); list-style: none; margin-top: 0.35rem; }
.db-vgl-klapp > summary::-webkit-details-marker { display: none; }
.db-vgl-klapp > summary::after { content: ' ›'; }
.db-vgl-klapp[open] > summary::after { content: ' ⌄'; }
.ck-heute .ck-zeile, .ck-heute li { padding-top: 0.45rem; padding-bottom: 0.45rem; }
.ck-heute, .ck-pipe, .ck-zahlen, .ck-feed, .ck-seite > .w { padding: 14px 16px; }
.ck-zeile { padding: 0.4rem 0.5rem; gap: 0.7rem; grid-template-columns: 1.9rem minmax(0, 1fr) auto 1.6rem; }
.ck-zeile .ck-ic { width: 1.9rem; height: 1.9rem; }
.ck-stufen { gap: 0.22rem; margin: 0.55rem 0 0.5rem; }
.db-nk { padding-top: 0.6rem !important; padding-bottom: 0.4rem !important; }
.db-nk-ziel { padding: 0.35rem 0.6rem; margin-top: 0.3rem; }
.ck-unten, .ck-oben { gap: 12px; }
.ck-liste .ck-zeile { padding: 0.28rem 0.5rem; }
.ck-liste .ck-text { line-height: 1.25; }
.ck-heute .ck-rest { padding-top: 0.3rem; padding-bottom: 0; font-size: 0.74rem; }
.ck-pipe .ck-gross { margin-top: 0.1rem; }
.content { padding-bottom: 14px; }
.ck-pipe .ck-fuss { padding-top: 0.4rem; margin-top: 0.2rem; }
.ck-pipe .ck-kopf, .ck-zahlen .ck-kopf, .ck-feed .ck-kopf { margin-bottom: 0.2rem; }
.ck-stufen { gap: 0.12rem; } .ck-pipe .ck-gross { font-size: 1.55rem; line-height: 1.1; }
/* ===== Kompakt-Runde Ansichten (kp-): Pipeline-Spalten füllen die Breite, Höhe nach Inhalt, Filter in einer Zeile ===== */
@media (min-width: 701px) {
  .pl-board { height: auto; min-height: 0; align-items: flex-start; }
  .pl-board > .pl-spalte, .pl-board > .pl-spalte.eingeklappt, .pl-board > .pl-spalte.leer { max-width: none; max-height: var(--pl-hoehe, calc(100vh - 260px)); }
  .pl-board > .pl-spalte:not(.leer):not(.eingeklappt) { flex: 2 1 0; }
  .auf-k-board .pl-board > .pl-spalte { overflow: hidden; }
  .pl-spalte header { min-height: 0; padding: 0.55rem 0.8rem 0.45rem; }
  .pl-board.mit-summe .pl-spalte header { min-height: 3.1rem; }
  .pl-spalte header::after { left: 0.8rem; right: 0.8rem; }
  .pl-karten, .pl-spalte:not(.leer):not(.eingeklappt) .pl-karten { padding: 0.5rem; gap: 0.4rem; }
  .pl-leer { min-height: 3rem; padding: 0.6rem; }
}
.filters.kp-eine-zeile { flex-wrap: wrap; gap: 0.5rem 0.7rem; }
.kp-eine-zeile .auf-k-listen { margin: 0; }
.kp-rechts { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.kp-rechts .auf-k-rechts { margin-left: 0; }
/* kp: Abrechnung, Billdu als eine zugeklappte Zeile unter dem Board, Board lässt dafür Platz */
.w.kp-billdu-w { padding: 0; overflow: hidden; }
.kp-billdu { border: 0; margin: 0; background: transparent; }
.kp-billdu > summary { padding: 0.55rem 1rem; gap: 0.6rem; flex-wrap: wrap; }
.kp-billdu .kl-titel { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; }
.kp-billdu-stand { font-size: 0.76rem; font-weight: 600; color: var(--grey); }
.kp-billdu-stand.rot { color: var(--stop); }
.kp-billdu > summary > .btn { margin-left: auto; }
.kp-billdu > summary > .kl-zusatz + .btn { margin-left: 0.4rem; }
.kp-billdu > summary > .btn + .kl-pfeil { margin-left: 0.2rem; }
.kp-billdu .kl-inhalt { padding: 0 1rem 0.8rem; }
.kp-billdu .kl-inhalt p { margin: 0 0 0.5rem; }
@media (min-width: 701px) { .kp-mit-fuss .pl-board > .pl-spalte, .kp-mit-fuss .pl-board > .pl-spalte.leer, .kp-mit-fuss .pl-board > .pl-spalte.eingeklappt { max-height: calc(var(--pl-hoehe, 60vh) - 56px); } }
/* ===== Finanzen kompakt (fk-, Kompakt-Runde 01.11.2026): jede Finanz-Ansicht ohne Scrollen bei 1440x900 ===== */
.fin.fk-fin { gap: 0.75rem; }
.fk-fin > details.klapp { margin: 0 !important; }
.fk-fin .fin-oben { gap: 0.75rem; }
.fk-fin .w.fin-karte { padding: 0.95rem 1.1rem; gap: 0.35rem; }
.fk-fin .fin-gross { font-size: 1.9rem; }
.fk-fin .fin-link { padding-top: 0.2rem; }
.fk-fin .gm-kopf { margin-bottom: 0.15rem; }
/* Monatsabschluss als schmales Band */
.fk-abschluss .fz-ab-band { padding: 0.45rem 0.9rem; margin-bottom: 0.65rem; gap: 0.7rem; }
.fk-abschluss .fz-ab-ic { width: 1.8rem; height: 1.8rem; font-size: 1rem; border-radius: 8px; }
.fk-abschluss .fz-ab-text { flex-direction: row; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; }
.fk-abschluss .fz-ab-klein { margin-bottom: 0.6rem; }
/* Aufklapp-Zeile auf hellen Karten (Stil wie in der Gehaltskarte) */
.fin-karte:not(.dunkel) .gm-klapp.fk-klapp { background: var(--tint); border: 1px solid var(--line); margin-top: auto; }
.fin-karte:not(.dunkel) .gm-klapp.fk-klapp[open] > summary { border-bottom-color: var(--line); }
.fk-klapp > summary span:first-child::after { content: '\203A'; margin-left: 0.3rem; color: var(--grey); transition: transform 0.15s ease; display: inline-block; }
.fk-klapp[open] > summary span:first-child::after { transform: rotate(90deg); }
.gj-balken.fk-gj { margin: 0.35rem 0 0.2rem; gap: 0.4rem; }
.fk-gj .gj-reihe b { font-size: 0.92rem; }
/* Zweite Reihe: Diagramm links, Ziele rechts */
.fk-zeile2 { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 0.75rem; align-items: stretch; }
.w.fin-chart.fk-chart { display: flex; flex-direction: column; padding: 0.9rem 1.1rem 0.7rem; }
.fk-chart .fin-bars { flex: 1; height: auto; min-height: 110px; margin-top: 0.6rem; }
.fk-chart .legend { margin-top: 0.4rem; }
.fin-ziele.fk-ziele { grid-template-columns: 1fr; gap: 0.75rem; align-content: start; }
.fk-ziele .w.fin-zielkarte { padding: 0.75rem 1rem; gap: 0.35rem; }
.fk-ziele .et-leiter { margin: 0.2rem 0 0.3rem; }
.fk-fin details.w.fin-posten { padding: 0.6rem 1.1rem; }
/* Monate: dichtere Tabelle */
.fk-tabelle th { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fk-tabelle td { padding-top: 0.42rem; padding-bottom: 0.42rem; }
.fk-tabelle tfoot td { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fk-tabelle th .ic, .fk-tabelle th i { font-size: 0.8rem; opacity: 0.6; vertical-align: -1px; }
.fk-tabelle th[title] { cursor: help; }
.fk-fuss { margin: 0; }
/* Steuer: oben die Ergebnisse, Rechenweg in Gruppen */
.fk-fin .fin-steuer-held { margin-bottom: 0; gap: 0.75rem; }
.fk-fin .fsh { padding: 1rem 1.15rem; }
.fk-fin .fsh-zahl { font-size: 2rem; }
.fk-innen { padding: 0.2rem 1.15rem 1rem; display: flex; flex-direction: column; gap: 0.7rem; }
.fk-block { background: var(--tint); border: 1px solid var(--line); border-radius: 12px; padding: 0.8rem 0.95rem; }
.fk-block .l { display: flex; align-items: center; gap: 0.4rem; }
.fk-block .l .fk-wert { margin-left: auto; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; text-transform: none; font-variant-numeric: tabular-nums; }
.fk-block.fin-kette .klein { margin: 0.5rem 0 0; }
.fk-zwei { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.fk-block.fin-summe { display: flex; justify-content: space-between; align-items: center; }
.fk-innen.fin-annahmen .fk-ohne-rand { margin: 0; }
/* Prognose: flacheres Diagramm, kleinere Kacheln */
.fk-fin .fz-pg-basis, .fk-fin .fz-pg-kacheln, .fk-fin .fz-pg-etappe, .fk-fin .fz-pg-chart { margin-bottom: 0; }
.fk-fin .fz-pg-basis { padding: 0.55rem 0.9rem; }
.fk-pg-kacheln { gap: 0.75rem; }
.fk-pg-kacheln .fz-pg-kachel { padding: 0.7rem 0.95rem; gap: 0.1rem; }
.fk-pg-kacheln .fz-pg-kachel b { font-size: 1.3rem; }
.fk-fin .fz-pg-etappe { padding: 0.5rem 0.95rem; }
.fk-fin .fz-pg-chart { padding: 0.8rem 1rem 0.6rem; }
.fk-pg-svg { margin-top: 0.3rem; max-height: 250px; }
.fk-fin > p.klein { margin: 0; }
@media (max-width: 1100px) { .fk-zeile2, .fk-zwei { grid-template-columns: 1fr; } }
details.klapp.innen.kp-billdu { border: 0; margin: 0; border-radius: 0; background: transparent; }
details.klapp.innen.kp-billdu > summary { padding: 0.55rem 1rem; }
.fk-zeile2 > .w.fin-chart.fk-chart { grid-column: auto; }
/* kp: Meta Ads Kanäle, links Auswertung und Tabellen (zugeklappt), rechts Verlauf und Quellen */
.kp-ma-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 12px; align-items: start; }
.kp-ma-links { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.kp-ma-links .ma-gruppen { margin-bottom: 0; gap: 0.45rem; }
.kp-ma-tabellen { gap: 0.45rem; }
.ma-gruppen > .klapp > summary, .kp-ma-tabellen > .klapp > summary { padding: 0.55rem 1rem; }
.kp-ma-tabellen .kl-titel { display: inline-flex; align-items: center; gap: 0.35rem; }
.kp-ma-tabellen .kl-titel i { color: var(--grey); font-weight: 400; }
.ma-hinweis { padding: 0.45rem 0.8rem; font-size: 0.8rem; }
.kp-ma-links .ma-legende { font-size: 0.7rem; }
.kp-ma-rechts { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.kp-ma-rechts > .w { padding: 14px 16px; }
.kp-ma-rechts .chart-bars { height: 120px; margin-top: 0.7rem; }
.kp-ma-rechts .sources > div[style] { margin-top: 0.5rem !important; }
@media (max-width: 1000px) { .kp-ma-raster { grid-template-columns: 1fr; } }
.fk-innen .fin-annahmen-grid { grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }
.fk-tabelle td { padding-top: 0.34rem; padding-bottom: 0.34rem; }
/* kp: Health, Zeilen einzeilig (Titel und Hinweis nebeneinander) */
.hl-zeile { padding: 0.42rem 1.1rem; }
.hl-text { flex-direction: row; align-items: baseline; gap: 0.6rem; }
.hl-text b { flex: none; }
.hl-text small { min-width: 0; }
.hl-gruppen { gap: 0.5rem; }
.hl-gruppen > .klapp > summary { padding-top: 0.6rem; padding-bottom: 0.6rem; }
.fk-fin .gm-klapp { margin-top: 0.4rem; }
.fk-fin .gm-klapp.mr { margin: 0.45rem 0 0; }
.fk-fin .gm-klapp > summary { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.fk-fin .fin-karte:not(.dunkel) .gm-klapp.fk-klapp { margin-top: auto; }
.fk-ziele .et-leiter { gap: 0.22rem; flex-wrap: nowrap; }
.fk-ziele .et-leiter span { padding: 0.18rem 0.48rem; font-size: 0.72rem; }
@media (max-width: 1360px) { .fk-ziele .et-leiter { flex-wrap: wrap; } .fk-ziele .et-leiter span { padding: 0.16rem 0.4rem; } }
/* kp: leere Platzhalter erzeugen keine Lücke, Kundenwert-Leiste ohne Zusatzabstand */
.content > [data-fokus-hinweis]:empty, .content > [data-ohne]:empty { display: none; }
.kw-platz { margin-bottom: 0; }
/* kp: Kunden-Fenster straffer (Kopf, Abstände, zugeklappte Gruppen), Wichtigstes oben ohne Scrollen */
.modal.kd .modal-kopf { padding: 0.75rem 1.2rem 0.65rem; }
.modal.kd .modal-inhalt { padding: 0.75rem 1.2rem 0.9rem; gap: 0.65rem; }
.modal.kd .modal-fuss { padding: 0.55rem 1.2rem; }
.modal.kd .kd-teil { gap: 0.6rem; }
.modal.kd .klapp > summary { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.modal.kd .kd-next { padding: 0.65rem 0.9rem; gap: 0.3rem; }
@media (min-width: 901px) { .modal.kd .kd-teil .felder { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem 0.8rem; } }
.modal.kd .kd-teil textarea { min-height: 3.6rem; }
/* kp: Lead-Fenster straffer, Aktionen als flache Leiste, Fußknöpfe in einer Zeile */
.leadpanel .lp-head { padding: 0.8rem 1.25rem 0.7rem; }
.leadpanel .lp-aktionen { padding: 0.6rem 1.25rem; }
.leadpanel .lp-aktionen > a, .leadpanel .lp-aktionen > button, .leadpanel .lp-aktionen > span { flex-direction: row; justify-content: center; gap: 0.35rem; padding: 0.45rem 0.3rem; }
.leadpanel .lp-aktionen .ic { font-size: 1rem; }
.leadpanel .lp-body { padding: 0.85rem 1.25rem; }
.leadpanel .lp-sec { margin: 0.85rem 0 0.4rem; }
.leadpanel .lp-sec:first-child { margin-top: 0; }
.leadpanel .lp-grid { gap: 0.45rem 0.6rem; }
.leadpanel .lp-foot { padding: 0.6rem 1.25rem calc(0.6rem + env(safe-area-inset-bottom)); flex-wrap: nowrap; }
.leadpanel .lp-foot .btn-primary { flex: 1.3 1 0; }
.leadpanel details.lp-klapp > summary .lp-sec { margin: 0.55rem 0; }
.leadpanel .lp-zahlen > div { flex-direction: row; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; }
.leadpanel .lp-zahlen b { font-size: 1.05rem; }
.leadpanel .lp-zahlen .btn { margin: 0 0 0 auto; align-self: center; }
.leadpanel .lp-quali { margin-bottom: 0.5rem; }

/* ---------- Umziehen (Aktionen): Wackelkandidaten mit einem Klick auf eine neue Aktion ---------- */
.um-wrap { margin-bottom: 0.7rem; }
.um-wrap[hidden] { display: none; }
.w.klapp.um-gruppe { box-shadow: inset 3px 0 0 var(--warn); }
.um-gruppe .kl-titel i, .um-gg .kl-titel i { margin-right: 0.35rem; color: var(--grey); }
.um-liste { display: flex; flex-direction: column; }
.um-zeile { display: grid; grid-template-columns: minmax(10rem, 1.1fr) minmax(12rem, 1.6fr) minmax(11rem, 14rem) auto auto; gap: 0.7rem; align-items: center; padding: 0.45rem 0; }
.um-zeile + .um-zeile { border-top: 1px solid var(--line); }
.um-studio { display: flex; flex-direction: column; min-width: 0; }
.um-studio b { font-size: 0.86rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-studio span, .um-lage > span { font-size: 0.74rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-studio span i { color: var(--ok); margin-right: 0.2rem; }
.um-lage { display: flex; align-items: center; gap: 0.45rem; min-width: 0; }
.um-lage .pill { margin: 0; flex: none; }
.um-sel { height: 2rem; min-width: 0; width: 100%; }
.um-cr { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.72rem; font-weight: 700; color: var(--ok); white-space: nowrap; }
.um-cr.fehlt { color: var(--warn); }
.um-knopf, .um-link { white-space: nowrap; justify-self: end; }
.um-fertig { grid-template-columns: minmax(10rem, 1.1fr) minmax(12rem, 1.6fr) auto; opacity: 0.85; }
.um-leer { grid-column: span 3; }
.um-best { display: flex; flex-direction: column; gap: 0.8rem; }
.um-pfeil { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; border-radius: 12px; background: var(--tint); font-size: 0.92rem; }
.um-pfeil span { color: var(--grey); text-decoration: line-through; }
.um-pfeil i { color: var(--grey); }
.um-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; font-size: 0.85rem; color: var(--ink-70); }
.um-punkte li { display: flex; gap: 0.5rem; align-items: flex-start; }
.um-punkte li i { margin-top: 0.12rem; color: var(--grey); }
.um-punkte li.fehlt { color: var(--warn); }
.um-punkte li.fehlt i { color: var(--warn); }
.um-hubnr { display: inline-flex; align-items: center; gap: 0.35rem; margin-left: auto; font-size: 0.74rem; font-weight: 700; color: var(--grey); }
.um-hubnr.fehlt { color: var(--warn); }
.um-hubnr input { width: 4.5rem; height: 1.8rem; border: 1px solid var(--line); border-radius: 8px; padding: 0 0.45rem; font: inherit; background: var(--paper); color: var(--ink); }
.um-hubnr.fehlt input { border-color: var(--warn); }
.um-gg { margin-top: 0.8rem; }
.um-gg-liste { display: flex; flex-direction: column; gap: 0.4rem; }
.um-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.um-chips span { font-size: 0.74rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--tint); color: var(--ink-70); }
.um-dl { display: grid; grid-template-columns: 7rem 1fr; gap: 0.35rem 0.8rem; margin: 0; font-size: 0.82rem; }
.um-dl dt { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); padding-top: 0.15rem; }
.um-dl dd { margin: 0; color: var(--ink-70); }
@media (max-width: 900px) { .um-zeile, .um-fertig { grid-template-columns: 1fr auto; } .um-lage, .um-sel { grid-column: 1 / -1; } }
.um-gg-liste details.klapp.innen.um-gg-teil { margin-top: 0; }
.um-gg-liste details.klapp.innen.um-gg-teil > summary { padding: 0.55rem 0.9rem; }
.um-wrap > .klapp > .kl-inhalt, .um-gg > .klapp > .kl-inhalt { padding: 0 1rem 0.6rem; }
.um-erledigt.klapp.innen { margin-top: 0.4rem; }
.um-erledigt.klapp.innen > summary { padding: 0.45rem 0.8rem; }
.um-erledigt .kl-inhalt { padding: 0 0.8rem; }
.um-knopf i { color: var(--orange); }

/* ===== Kleine Lücken (Präfix kl-): Close Rate ohne Disq., Sortierung Leads-Liste, Fokus-Hinweise, Kundenkarten-Badges, Leitfaden ===== */
.kz .v .kl-odq { display: block; font-size: 0.7rem; font-weight: 600; color: var(--grey); letter-spacing: 0; line-height: 1.2; margin-top: 0.1rem; }
.ck-fuss .kl-odq { font-size: 0.72rem; }
th.kl-sort { padding: 0; }
th.kl-sort button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.2rem; width: 100%; padding: inherit; padding: 0.5rem 0.6rem; cursor: pointer; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; white-space: nowrap; }
th.kl-sort button i { font-size: 0.85rem; opacity: 0.35; }
th.kl-sort.an button { color: var(--ink); }
th.kl-sort.an button i { opacity: 1; }
th.kl-sort button:hover i, th.kl-sort button:focus-visible i { opacity: 0.8; }
th.kl-sort button:focus-visible { outline: 2px solid var(--orange); outline-offset: -2px; border-radius: 4px; }
td.ueberfaellig { color: var(--stop); font-weight: 600; }
.ck-zeit.kl-blick { color: var(--grey); font-style: normal; }
.kl-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.4rem; }
.kl-badge { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 0.2rem; font-size: 0.66rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--tint); color: var(--ink-70); cursor: pointer; line-height: 1.5; }
span.kl-badge { cursor: default; }
.kl-badge i { font-size: 0.75rem; }
.kl-badge.rot { background: var(--stop-bg); color: var(--stop); }
.kl-badge.gelb { background: var(--warn-bg); color: var(--warn); }
button.kl-badge:hover { filter: brightness(0.96); }
button.kl-badge:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.kl-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin: 0.2rem 0 0.4rem; }
.kl-ph-chip { all: unset; cursor: pointer; font-size: 0.72rem; font-weight: 600; padding: 0.12rem 0.5rem; border-radius: 999px; background: var(--tint); color: var(--ink-70); border: 1px solid var(--line); }
.kl-ph-chip:hover { background: var(--card); color: var(--ink); }
.kl-ph-chip:focus-visible { outline: 2px solid var(--orange); outline-offset: 1px; }
.kl-ph-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; }
.kl-ph-kopf p { margin: 0; }
.kl-lf-titel { cursor: pointer; user-select: none; }
.kl-lf-titel:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 4px; }
.kl-lf-pfeil { margin-left: auto; font-size: 1rem; transition: transform 0.15s; align-self: center; }
.lf-box.kl-zu .kl-lf-pfeil { transform: rotate(-90deg); }
.lf-box.kl-zu > :not(.lf-titel) { display: none !important; }
.um-zeile { grid-template-columns: minmax(9rem, 1fr) minmax(13rem, 1.7fr) 12rem 9.5rem auto; }
.um-cr { overflow: hidden; text-overflow: ellipsis; }
.um-zeile.um-fertig { grid-template-columns: minmax(9rem, 1fr) minmax(13rem, 1.7fr) auto; }
@media (max-width: 900px) { .um-zeile, .um-zeile.um-fertig { grid-template-columns: 1fr auto; } }
.um-zeile { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.7fr) minmax(9rem, 12rem) auto auto; }
.um-zeile.um-fertig { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.7fr) auto; }
@media (max-width: 1250px) { .um-zeile:not(.um-fertig) .um-cr { display: none; } .um-zeile:not(.um-fertig) { grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1.4fr) minmax(9rem, 11rem) auto; } }
@media (max-width: 900px) { .um-zeile:not(.um-fertig), .um-zeile.um-fertig { grid-template-columns: 1fr auto; } }

/* ---------- Bank-Einnahmen-Abgleich (Präfix ba-) ---------- */
.ba-monate { margin-bottom: 0.6rem; }
.ba-box { display: flex; flex-direction: column; gap: 0.6rem; }
.ba-kz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.ba-kz > div { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.55rem 0.75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--tint); min-width: 0; }
.ba-kz span { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--grey); }
.ba-kz b { font-size: 1.02rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.ba-kz small { font-size: 0.72rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-kz > div.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.ba-kz > div.warn b { color: var(--warn); }
.ba-kz > div.gut { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ba-kz > div.gut b { color: var(--ok); }
.ba-gruppen { display: flex; flex-direction: column; gap: 0.45rem; }
.ba-gruppen .kl-inhalt { max-height: 16rem; overflow-y: auto; }
.ba-alle { display: flex; align-items: center; gap: 0.45rem; font-size: 0.74rem; font-weight: 700; color: var(--ink-70); padding: 0.2rem 0.1rem 0.35rem; cursor: pointer; }
.ba-zeile { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0.6rem; padding: 0.45rem 0.1rem; border-top: 1px solid var(--line); font-size: 0.8rem; }
label.ba-zeile { cursor: pointer; }
div.ba-zeile { grid-template-columns: minmax(0, 1fr) auto auto; }
.ba-text { display: flex; flex-direction: column; min-width: 0; }
.ba-text strong { font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-sub { font-size: 0.72rem; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ba-zeile .mono { white-space: nowrap; color: var(--ok); }
.ba-pillen { display: inline-flex; gap: 0.25rem; }
.ba-pille { display: inline-flex; align-items: center; padding: 0.12rem 0.5rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--tint); color: var(--ink-70); white-space: nowrap; }
.ba-pille.ok { background: var(--ok-bg); color: var(--ok); }
.ba-zuordnen { display: inline-flex; align-items: center; gap: 0.35rem; }
.ba-zuordnen .sel { max-width: 15rem; font-size: 0.74rem; padding-top: 0.3rem; padding-bottom: 0.3rem; }
.ba-hinweis { margin: 0 0 0.3rem; }
.ba-luecke { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 0.5rem 0.75rem; border-radius: 12px; border: 1px solid var(--line); background: var(--tint); font-size: 0.8rem; }
.ba-luecke span { display: inline-flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; color: var(--ink-70); }
.ba-luecke b { color: var(--ink); }
.ba-luecke.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); }
.ba-luecke.gut { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.ba-luecke.gut b, .ba-luecke.gut i { color: var(--ok); }
.um-gg-liste details.klapp.innen.um-gg-teil > .kl-inhalt { padding: 0 0.9rem 0.75rem; }
.um-gg-teil .ak-punkte { margin: 0; }
.ba-zeile { padding-left: 0.35rem; padding-right: 0.35rem; }
.ck-heute .ck-mehr.kl-mehr { margin-top: 0.3rem; padding: 0.3rem 0.6rem; font-size: 0.74rem; }
.modal-inhalt > .kl-ph-kopf { position: sticky; top: -1.2rem; z-index: 2; background: var(--card); margin: -1.2rem -1.4rem 0; padding: 0.8rem 1.4rem 0.5rem; border-bottom: 1px solid var(--line); }
.kp-knopfreihe { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
/* Kunden-Detail: Antworten aus dem Onboarding-Formular */
.ob-kopf { display: flex; flex-direction: column; gap: 0.15rem; }
.ob-kopf span, .ob-leer span { color: var(--grey); font-size: 0.82rem; }
.ob-leer { display: flex; gap: 0.6rem; align-items: center; padding: 1rem; border: 1px dashed var(--line); border-radius: var(--r-card); }
.ob-liste { margin: 0; display: flex; flex-direction: column; }
.ob-zeile { display: grid; grid-template-columns: minmax(9rem, 14rem) 1fr; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--line); }
.ob-zeile:first-child { border-top: 0; }
.ob-zeile dt { color: var(--grey); font-size: 0.82rem; }
.ob-zeile dd { margin: 0; white-space: pre-wrap; font-size: 0.88rem; display: flex; flex-wrap: wrap; gap: 0.3rem 0.8rem; }
.ob-zeile dd a { color: var(--ink); text-decoration: underline; display: inline-flex; gap: 0.25rem; align-items: center; }

/* Umziehen, Runde 2: klare Wahl der neuen Aktion und ein eindeutiger Knopf */
.um-zeile, .um-zeile:not(.um-fertig) { grid-template-columns: minmax(11rem, 1fr) minmax(12rem, 1.3fr) auto auto; gap: 1rem; padding: 0.7rem 0; }
.um-studio b { font-size: 0.92rem; }
.um-studio span { font-size: 0.76rem; }
.um-wahl { display: flex; align-items: flex-end; gap: 0.6rem; justify-self: end; }
.um-ziel { display: flex; flex-direction: column; gap: 0.2rem; cursor: pointer; }
.um-ziel-l { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey); padding-left: 0.95rem; }
.um-ziel-feld { position: relative; display: inline-flex; align-items: center; }
.um-ziel-feld select { appearance: none; -webkit-appearance: none; font: inherit; font-size: 0.84rem; font-weight: 700; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 999px; height: 2.2rem; padding: 0 2.1rem 0 0.95rem; cursor: pointer;
  field-sizing: content; min-width: 10rem; max-width: 18rem; transition: border-color 0.15s, box-shadow 0.15s; }
.um-ziel-feld select:hover { border-color: var(--grey-soft); }
.um-ziel-feld select:focus-visible { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-soft); }
.um-ziel-feld i { position: absolute; right: 0.75rem; pointer-events: none; color: var(--grey); font-size: 1rem; }
.um-wahl .um-cr { height: 2.2rem; padding: 0 0.75rem; border-radius: 999px; background: var(--ok-bg); font-size: 0.74rem; }
.um-wahl .um-cr.fehlt { background: var(--warn-bg); }
.um-los { display: inline-flex; align-items: center; gap: 0.45rem; align-self: end; height: 2.2rem; padding: 0 1.05rem; border-radius: 999px;
  background: var(--ink); color: var(--paper); font: inherit; font-size: 0.84rem; font-weight: 700; border: 0; cursor: pointer; white-space: nowrap;
  transition: transform 0.15s var(--ease-smooth), background 0.15s; }
.um-los i { font-size: 1rem; transition: transform 0.2s var(--ease-smooth); }
.um-los:hover { background: var(--ink-soft); }
.um-los:hover i { transform: translateX(3px); }
.um-los:active { transform: scale(0.97); }
.um-los:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
@media (max-width: 1250px) { .um-zeile:not(.um-fertig) { grid-template-columns: minmax(10rem, 1fr) auto auto; } .um-zeile:not(.um-fertig) .um-lage { grid-column: 1; grid-row: 2; } .um-zeile:not(.um-fertig) .um-cr { display: inline-flex; } }
@media (max-width: 900px) { .um-zeile:not(.um-fertig) { grid-template-columns: 1fr; } .um-wahl { justify-self: start; flex-wrap: wrap; } .um-zeile:not(.um-fertig) .um-lage { grid-row: auto; } .um-los { justify-self: start; } }