/* Cryopoint BI — Design-Preview (statisch). Brand-treu zu app/globals.css. */
:root {
  --cp-blau: #002343;
  --cp-blau-dark: #001a33;
  --cp-schwarzblau: #0f1625;
  --cp-tuerkis: #00b2ea;
  --cp-tuerkis-dark: #0098c8;
  --cp-grauweis: #fbfaf6;
  --cp-creme: #ece7dd;
  --cp-beige: #ddcab4;
  --cp-rot: #e23d4b;
  --cp-gelb: #e0a800;
  --cp-gruen: #1ea672;

  --surface: #ffffff;
  --line: rgba(0, 35, 67, 0.08);
  --line-strong: rgba(0, 35, 67, 0.14);
  --muted: rgba(0, 35, 67, 0.55);
  --muted-2: rgba(0, 35, 67, 0.42);

  --radius: 14px;
  --radius-sm: 10px;
  --shadow-soft: 0 1px 3px rgba(0, 35, 67, 0.06), 0 1px 2px -1px rgba(0, 35, 67, 0.04);
  --shadow-lift: 0 14px 40px -18px rgba(0, 35, 67, 0.30);
  --sidebar-w: 252px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  background: var(--cp-grauweis);
  color: var(--cp-blau);
  line-height: 1.45;
  font-feature-settings: "cv11", "ss01";
}
.tnum { font-variant-numeric: tabular-nums; }
a { color: inherit; text-decoration: none; }

/* ---------- App shell ---------- */
.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: linear-gradient(180deg, var(--cp-blau) 0%, var(--cp-blau-dark) 100%);
  color: #fff; position: sticky; top: 0; height: 100vh;
  display: flex; flex-direction: column; padding: 22px 16px;
}
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 22px; }
.brand .mark { width: 30px; height: 30px; color: var(--cp-tuerkis); flex-shrink: 0; }
.brand .word { font-weight: 800; letter-spacing: 0.14em; font-size: 15px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: 10px; color: rgba(255,255,255,0.66); font-size: 14px; font-weight: 500;
  position: relative; transition: background .18s, color .18s; cursor: pointer;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,0.06); color: #fff; }
.nav-item.active { background: rgba(0,178,234,0.14); color: #fff; }
.nav-item.active::before {
  content: ""; position: absolute; left: -16px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 3px 3px 0; background: var(--cp-tuerkis);
}
.nav-spacer { flex: 1; }
.nav-label { padding: 14px 12px 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,0.40); }
.org-chip {
  margin-top: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; gap: 10px;
}
.org-chip .o-logo { width: 26px; height: 26px; border-radius: 7px; background: var(--cp-tuerkis); color: var(--cp-blau);
  display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.org-chip .o-name { font-size: 12.5px; font-weight: 600; }
.org-chip .o-sub { font-size: 10.5px; color: rgba(255,255,255,0.5); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 32px; border-bottom: 1px solid var(--line); background: rgba(251,250,246,0.85);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 20;
}
.page-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; }
.subtitle { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.topbar-right { display: flex; align-items: center; gap: 12px; }

.segmented { display: inline-flex; background: #fff; border: 1px solid var(--line-strong); border-radius: 10px; padding: 3px; }
.seg { padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--muted); border-radius: 7px; cursor: pointer; }
.seg.active { background: var(--cp-blau); color: #fff; }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background: var(--cp-blau); color: #fff; }
.btn-primary:hover { background: var(--cp-blau-dark); }
.btn-ghost { background: #fff; border-color: var(--line-strong); color: var(--cp-blau); }
.btn svg { width: 15px; height: 15px; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--cp-creme); color: var(--cp-blau);
  display: grid; place-items: center; font-weight: 700; font-size: 13px; border: 1px solid var(--line); }

.content { padding: 26px 32px 48px; max-width: 1480px; }
.section-gap { display: flex; flex-direction: column; gap: 22px; }

/* ---------- Cards ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-soft); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 14.5px; font-weight: 700; }
.card-sub { font-size: 12px; color: var(--muted); }
.card-body { padding: 16px 18px; }

.tag { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
  background: rgba(0,178,234,0.12); color: var(--cp-tuerkis-dark); border: 1px solid rgba(0,178,234,0.22); }
.tag-soft { background: var(--cp-creme); color: var(--cp-braun, #8a6e49); border-color: rgba(171,139,97,0.25); }

/* ---------- KPI band ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 16px 12px; box-shadow: var(--shadow-soft); position: relative; overflow: hidden; }
.kpi.primary { border-color: rgba(0,178,234,0.5); box-shadow: 0 0 0 1px rgba(0,178,234,0.35), var(--shadow-soft); }
.kpi.primary::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--cp-tuerkis); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-label { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; }
.kpi-value { font-size: 27px; font-weight: 800; letter-spacing: -0.02em; margin-top: 9px; }
.kpi-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.delta.up { background: rgba(30,166,114,0.12); color: var(--cp-gruen); }
.delta.warn { background: rgba(224,168,0,0.14); color: #b58600; }
.delta.down { background: rgba(226,61,75,0.12); color: var(--cp-rot); }
.spark { height: 26px; width: 88px; }

/* ---------- Insight strip ---------- */
.insight-strip { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: 0; align-items: stretch; }
.insight-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-right: 1px solid var(--line); min-width: 196px; }
.insight-head .ic { width: 34px; height: 34px; border-radius: 9px; background: var(--cp-blau); color: var(--cp-tuerkis); display: grid; place-items: center; }
.insight-head .t { font-size: 13px; font-weight: 700; }
.insight-head .s { font-size: 11px; color: var(--muted); }
.insight { display: flex; gap: 11px; padding: 14px 18px; border-right: 1px solid var(--line); align-items: flex-start; }
.insight:last-child { border-right: none; }
.insight .dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; }
.insight p { font-size: 12.5px; color: rgba(0,35,67,0.78); }
.insight .link { font-size: 11.5px; font-weight: 700; color: var(--cp-tuerkis-dark); margin-top: 6px; display: inline-block; }
.dot.red { background: var(--cp-rot); } .dot.amber { background: var(--cp-gelb); } .dot.green { background: var(--cp-gruen); }

/* ---------- Two-column grid ---------- */
.cols { display: grid; grid-template-columns: 1.9fr 1fr; gap: 22px; align-items: start; }
.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }

/* ---------- Store board (table) ---------- */
.sort-pill { font-size: 12px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line-strong); border-radius: 9px; }
.sort-pill b { color: var(--cp-blau); }
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { text-align: right; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); font-weight: 600; padding: 10px 18px; }
.tbl thead th:first-child { text-align: left; }
.tbl tbody tr { border-top: 1px solid var(--line); transition: background .14s; }
.tbl tbody tr:hover { background: rgba(0,35,67,0.025); }
.tbl tbody tr.risk td:first-child { box-shadow: inset 3px 0 0 var(--cp-rot); }
.tbl tbody tr.watch td:first-child { box-shadow: inset 3px 0 0 var(--cp-gelb); }
.tbl td { padding: 13px 18px; font-size: 13.5px; text-align: right; }
.tbl td:first-child { text-align: left; }
.store-cell { display: flex; align-items: center; gap: 11px; }
.hdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.hdot.red { background: var(--cp-rot); } .hdot.amber { background: var(--cp-gelb); } .hdot.green { background: var(--cp-gruen); }
.store-name { font-weight: 700; font-size: 13.5px; }
.store-city { font-size: 11px; color: var(--muted-2); }
.pilot { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 6px; background: rgba(0,178,234,0.12); color: var(--cp-tuerkis-dark); margin-left: 7px; }
.trend { font-weight: 700; font-size: 12px; }
.trend.up { color: var(--cp-gruen); } .trend.down { color: var(--cp-rot); } .trend.flat { color: var(--muted-2); }
.score { display: inline-grid; place-items: center; min-width: 34px; padding: 3px 8px; border-radius: 8px; font-weight: 800; font-size: 12.5px; }
.score.s-green { background: rgba(30,166,114,0.13); color: var(--cp-gruen); }
.score.s-amber { background: rgba(224,168,0,0.16); color: #b58600; }
.score.s-red { background: rgba(226,61,75,0.13); color: var(--cp-rot); }

/* ---------- Funnel ---------- */
.funnel { display: flex; flex-direction: column; gap: 7px; }
.fstage { position: relative; }
.fbar { border-radius: 10px; padding: 12px 14px; color: #fff; display: flex; align-items: center; justify-content: space-between;
  background: linear-gradient(90deg, var(--cp-blau), var(--cp-tuerkis-dark)); }
.fbar .fl { font-size: 12.5px; font-weight: 600; opacity: .95; }
.fbar .fv { font-size: 15px; font-weight: 800; }
.fconv { font-size: 11px; color: var(--muted); text-align: right; padding: 3px 6px 1px; font-weight: 600; }
.fconv b { color: var(--cp-gruen); }
.cac { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-strong); display: flex; justify-content: space-between; font-size: 12.5px; }
.cac b { font-size: 15px; }

/* ---------- Learnings ---------- */
.rank-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.rank-row:first-child { border-top: none; }
.rank-no { width: 22px; height: 22px; border-radius: 7px; background: var(--cp-creme); color: var(--cp-blau); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex-shrink: 0; }
.rank-row.best .rank-no { background: var(--cp-tuerkis); color: #fff; }
.rank-name { font-weight: 600; font-size: 13.5px; flex: 1; }
.rank-meta { font-size: 11.5px; color: var(--muted); }
.rank-cac { font-weight: 800; font-size: 13.5px; }
.rank-row.bad .rank-cac { color: var(--cp-rot); }
.rank-row.bad .rank-name { color: var(--muted); }

/* ---------- Heatmap ---------- */
.heat { display: grid; grid-template-columns: 78px repeat(12, 1fr); gap: 4px; align-items: center; }
.heat .hm-corner { font-size: 10px; }
.heat .hm-col { font-size: 9.5px; text-align: center; color: var(--muted-2); font-weight: 600; }
.heat .hm-row { font-size: 11.5px; font-weight: 600; color: var(--cp-blau); padding-right: 6px; }
.heat .cell { height: 24px; border-radius: 5px; }
.legend { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--muted); margin-top: 12px; }
.legend .sw { width: 16px; height: 11px; border-radius: 3px; }

/* ---------- Page-load stagger ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; animation: fadeUp .5s cubic-bezier(.4,0,.2,1) forwards; }
.d1 { animation-delay: .04s; } .d2 { animation-delay: .10s; } .d3 { animation-delay: .16s; }
.d4 { animation-delay: .22s; } .d5 { animation-delay: .28s; } .d6 { animation-delay: .34s; }
/* Robustheit: Inhalt ist auch ohne laufende Animation sichtbar (reduced-motion / Animation feuert nicht). */
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1 !important; animation: none !important; } }

/* ---------- Preview ribbon ---------- */
.ribbon { position: fixed; bottom: 16px; right: 16px; z-index: 50; background: var(--cp-blau); color: #fff;
  border-radius: 12px; padding: 10px 14px; font-size: 12px; box-shadow: var(--shadow-lift); display: flex; align-items: center; gap: 10px; }
.ribbon a { color: var(--cp-tuerkis); font-weight: 700; }
.ribbon .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--cp-tuerkis); box-shadow: 0 0 0 0 rgba(0,178,234,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,178,234,.5);} 70%{ box-shadow: 0 0 0 8px rgba(0,178,234,0);} 100%{ box-shadow:0 0 0 0 rgba(0,178,234,0);} }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .cols { grid-template-columns: 1fr; }
  .insight-strip { grid-template-columns: 1fr; }
  .insight, .insight-head { border-right: none; border-bottom: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .sidebar { display: none; }
  .cols-2 { grid-template-columns: 1fr; }
  .content, .topbar { padding-left: 18px; padding-right: 18px; }
}

/* ===================== Owner / Storeleitung extras ===================== */
.action-row { display: flex; align-items: center; gap: 13px; padding: 13px 0; border-top: 1px solid var(--line); }
.action-row:first-child { border-top: none; }
.action-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.action-ic svg { width: 18px; height: 18px; }
.action-ic.urgent { background: rgba(226,61,75,0.12); color: var(--cp-rot); }
.action-ic.warn   { background: rgba(224,168,0,0.15); color: #b58600; }
.action-ic.info   { background: rgba(0,178,234,0.12); color: var(--cp-tuerkis-dark); }
.action-main { flex: 1; min-width: 0; }
.action-title { font-size: 13.5px; font-weight: 700; }
.action-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.action-btn { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 9px; background: var(--cp-blau); color: #fff; flex-shrink: 0; cursor: pointer; border: none; }
.action-btn.soft { background: #fff; color: var(--cp-blau); border: 1px solid var(--line-strong); }

.thermo-wrap { padding: 4px 2px 2px; }
.thermo-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; }
.thermo-top .g { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.thermo-top .v { font-size: 17px; font-weight: 800; }
.thermo { height: 12px; border-radius: 999px; background: var(--cp-creme); overflow: hidden; }
.thermo .fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cp-tuerkis), var(--cp-gruen)); }
.thermo-sub { font-size: 11.5px; color: var(--muted); margin-top: 7px; }

.bonus-toast { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(90deg, rgba(30,166,114,0.12), rgba(0,178,234,0.10)); border: 1px solid rgba(30,166,114,0.25); margin-bottom: 14px; }
.bonus-toast .b-ic { width: 32px; height: 32px; border-radius: 9px; background: var(--cp-gruen); color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.bonus-toast .b-t { font-size: 13px; font-weight: 700; }
.bonus-toast .b-s { font-size: 11.5px; color: var(--muted); }

.lead-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.lead-row:first-child { border-top: none; }
.lead-rank { width: 24px; font-weight: 800; font-size: 13px; color: var(--muted-2); text-align: center; }
.lead-row.top .lead-rank { color: var(--cp-tuerkis-dark); }
.lead-av { width: 30px; height: 30px; border-radius: 50%; background: var(--cp-creme); display: grid; place-items: center; font-size: 11.5px; font-weight: 700; flex-shrink: 0; }
.lead-name { flex: 1; font-size: 13.5px; font-weight: 600; }
.lead-bar { width: 90px; height: 7px; border-radius: 999px; background: var(--cp-creme); overflow: hidden; }
.lead-bar i { display: block; height: 100%; background: var(--cp-tuerkis); }
.lead-val { font-size: 13px; font-weight: 800; min-width: 64px; text-align: right; }
.lead-bonus { font-size: 10.5px; font-weight: 700; color: var(--cp-gruen); background: rgba(30,166,114,0.12); padding: 2px 7px; border-radius: 999px; }

.ring-row { display: flex; align-items: center; gap: 16px; }
.ring { width: 64px; height: 64px; flex-shrink: 0; }

/* ===================== Partner / Interessenten showcase ===================== */
.showcase { padding: 0; }
.sc-hero { background: linear-gradient(135deg, var(--cp-blau) 0%, var(--cp-schwarzblau) 100%); color: #fff; border-radius: 18px; padding: 38px 40px; position: relative; overflow: hidden; }
.sc-hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,178,234,0.35), transparent 70%); }
.sc-eyebrow { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--cp-tuerkis); font-weight: 700; }
.sc-h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin-top: 12px; max-width: 620px; line-height: 1.12; }
.sc-lead { font-size: 15px; color: rgba(255,255,255,0.72); margin-top: 14px; max-width: 560px; }
.sc-proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 30px; position: relative; z-index: 2; }
.sc-proof .p { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 13px; padding: 16px; }
.sc-proof .pv { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.sc-proof .pl { font-size: 11.5px; color: rgba(255,255,255,0.66); margin-top: 4px; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; box-shadow: var(--shadow-soft); }
.step .n { width: 28px; height: 28px; border-radius: 9px; background: var(--cp-blau); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.step .st { font-weight: 700; font-size: 14px; margin-top: 12px; }
.step .sd { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.step .arrow { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); color: var(--line-strong); z-index: 2; }
.feat-list { display: flex; flex-direction: column; gap: 12px; }
.feat { display: flex; gap: 12px; align-items: flex-start; }
.feat .fic { width: 30px; height: 30px; border-radius: 9px; background: rgba(0,178,234,0.12); color: var(--cp-tuerkis-dark); display: grid; place-items: center; flex-shrink: 0; }
.feat .ft { font-weight: 700; font-size: 13.5px; }
.feat .fd { font-size: 12.5px; color: var(--muted); }
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--cp-blau); color: #fff; border-radius: 16px; padding: 24px 28px; }
.cta-band .ct { font-size: 18px; font-weight: 800; }
.cta-band .cs { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 4px; }
.cta-band .btn { background: var(--cp-tuerkis); color: var(--cp-blau); font-size: 14px; padding: 12px 20px; }
@media (max-width: 1180px) { .sc-proof, .steps { grid-template-columns: repeat(2,1fr); } .step .arrow { display:none; } }

/* ===================== Vollbild-Kommandozone (no-scroll Hauptansicht) ===================== */
.topbar.tb-fixed { height: 64px; padding-top: 0; padding-bottom: 0; }
.command { height: calc(100dvh - 64px); display: grid; grid-template-rows: auto 1fr; gap: 15px; padding: 16px 28px; min-height: 0; }
.command .kpi { padding: 12px 14px 10px; }
.command .kpi-value { font-size: 23px; margin-top: 5px; }
.command .kpi-foot { margin-top: 8px; }
.command .spark { height: 22px; width: 74px; }
.command-main { display: grid; grid-template-columns: 1.7fr 1fr; gap: 15px; min-height: 0; }
.command-main > * { min-height: 0; }
.command-right { display: grid; grid-template-rows: auto 1fr; gap: 15px; min-height: 0; }
.fill-card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.fill-card .scroll { overflow: auto; min-height: 0; }
.fill-card .scroll::-webkit-scrollbar { width: 8px; } .fill-card .scroll::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; }
.deep { padding: 6px 28px 44px; display: flex; flex-direction: column; gap: 18px; }
.deep-sep { display: flex; align-items: center; gap: 12px; padding: 8px 0 2px; color: var(--muted-2); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.deep-sep::before, .deep-sep::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.fold-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.fold-hint svg { width: 14px; height: 14px; animation: bob 1.8s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(3px);} }
.insight-vert { display: flex; flex-direction: column; }
.insight-vert .insight { border-right: none; border-bottom: 1px solid var(--line); padding: 10px 16px; }
.insight-vert .insight:last-child { border-bottom: none; }
.insight-vert .insight p { font-size: 12px; }
.command .tbl td { padding: 10px 18px; } .command .tbl thead th { padding: 9px 18px; }
.command .funnel { gap: 5px; } .command .fbar { padding: 9px 14px; }

/* ===================== Lead-Lifecycle / ROAS ===================== */
.roas { display: inline-grid; place-items: center; padding: 3px 9px; border-radius: 8px; font-weight: 800; font-size: 12.5px; }
.roas.good { background: rgba(30,166,114,0.13); color: var(--cp-gruen); }
.roas.mid  { background: rgba(224,168,0,0.16); color: #b58600; }
.roas.bad  { background: rgba(226,61,75,0.13); color: var(--cp-rot); }

.timeline { position: relative; padding-left: 24px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-strong); }
.tl-item { position: relative; padding-bottom: 15px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { position: absolute; left: -24px; top: 2px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; background: var(--cp-tuerkis); box-shadow: 0 0 0 1px var(--line-strong); }
.tl-dot.ad { background: var(--cp-blau); } .tl-dot.contact { background: var(--cp-tuerkis); } .tl-dot.buy { background: var(--cp-gruen); }
.tl-day { font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.tl-title { font-size: 13px; font-weight: 700; margin-top: 1px; }
.tl-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.tl-sub .amt { font-weight: 800; color: var(--cp-gruen); }
.journey-foot { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--line-strong); }
.jf { text-align: center; } .jf .v { font-size: 17px; font-weight: 800; } .jf .l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.mix-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.mix-name { width: 150px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mix-name .sw { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; }
.mix-track { flex: 1; height: 10px; border-radius: 999px; background: var(--cp-creme); overflow: hidden; }
.mix-track i { display: block; height: 100%; border-radius: 999px; }
.mix-val { width: 92px; text-align: right; font-weight: 700; font-size: 12.5px; }
.mix-val .muted2 { color: var(--muted-2); font-weight: 500; }