/* Akquise-Tool Design-System — Tokens aus data/design_handoff_akquise_tool */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --pink: #FF3D7F; --pink-dark: #E5006D; --pink-wash: #FFF0F6; --pink-tint: #FFE0EE;
  --purple: #8B6EC4; --purple-dark: #6B4FA8; --purple-wash: #F3EEFF;
  --teal: #00C896; --teal-dark: #00A87E; --teal-wash: #E6FAF5;
  --amber: #FFB347; --amber-text: #B87A1F; --amber-wash: #FFF7EC; --amber-border: #FFE2B8;
  --red: #FF4D6A; --red-wash: #FFECEE;
  --info-text: #2E86E0; --info-wash: #E8F3FF;
  --white: #FFFFFF; --surface: #F8F8FC; --surface-alt: #F2F2F8;
  --border: #EDEDF5; --divider: #F0F0F8;
  --text: #1A1A2E; --text-2: #6B6B80; --muted: #9B9BAA; --muted-2: #C4C4D2;
  --grad-pink: linear-gradient(135deg, #FF6B8A 0%, #FF2D6B 100%);
  --shadow-xs: 0 1px 4px rgba(0,0,0,.05); --shadow-sm: 0 2px 8px rgba(0,0,0,.07);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'SF Mono', Menlo, 'Courier New', monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0; font-family: var(--font); font-size: 12.5px; font-weight: 400;
  color: var(--text); background: var(--surface); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- Sidebar (Icon-only, 64px) ---------------- */
.sidebar {
  position: fixed; inset: 0 auto 0 0; width: 64px; background: var(--white);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  align-items: center; padding: 16px 0; gap: 6px; z-index: 50;
}
.sidebar .logo {
  width: 32px; height: 32px; border-radius: 9px; background: var(--grad-pink);
  color: #fff; font-weight: 700; font-size: 15px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 18px;
}
.sidebar a.navicon {
  text-decoration: none;
  position: relative; width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center; color: var(--muted);
  transition: background .2s ease, color .2s ease;
}
.sidebar a.navicon:hover { background: var(--surface-alt); }
.sidebar a.navicon.active { background: var(--pink-wash); color: var(--pink); }
.sidebar a.navicon svg { width: 18px; height: 18px; }
.sidebar .tooltip {
  position: absolute; left: 52px; top: 50%; transform: translateY(-50%) translateX(-4px);
  background: var(--text); color: #fff; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px; white-space: nowrap; opacity: 0;
  pointer-events: none; transition: opacity .13s ease, transform .13s ease; z-index: 60;
}
.sidebar .tooltip::before {
  content: ""; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  border: 4px solid transparent; border-right-color: var(--text); border-left: 0;
}
.sidebar a.navicon:hover .tooltip, .sidebar .avatar:hover .tooltip {
  opacity: 1; transform: translateY(-50%) translateX(0);
}
.sidebar .avatar {
  position: relative; margin-top: auto; width: 32px; height: 32px; border-radius: 50%;
  background: var(--purple-wash); color: var(--purple); font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; cursor: default;
}

/* Sidebar aufgeklappt (210px, Icon + Label) */
body.nav-open .sidebar { width: 210px; align-items: stretch; padding: 16px 12px; }
body.nav-open .sidebar .logo { margin-left: 4px; }
body.nav-open .sidebar a.navicon { width: 100%; justify-content: flex-start; gap: 11px; padding: 0 11px; }
body.nav-open .sidebar .navlabel { display: inline; }
body.nav-open .sidebar .tooltip { display: none; }
body.nav-open .sidebar .avatar-row { display: flex; align-items: center; gap: 10px; margin-top: auto; }
body.nav-open .content { margin-left: 210px; }
.sidebar .navlabel { display: none; font-size: 12.5px; font-weight: 600; }
.sidebar .avatar-row { margin-top: auto; display: flex; justify-content: center; }
/* Abmelden ist ein POST-Formular, sieht aber aus wie die Navigationssymbole */
.sidebar form.abmelden { margin: 4px 0 0; display: flex; justify-content: center; }
.sidebar button.navicon {
  position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; padding: 0;
  background: none; font: inherit; cursor: pointer; color: var(--muted);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, color .2s ease;
}
.sidebar button.navicon:hover { background: var(--surface-alt); color: var(--red); }
.sidebar button.navicon:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.sidebar button.navicon svg { width: 18px; height: 18px; }
.sidebar button.navicon:hover .tooltip { opacity: 1; transform: translateY(-50%) translateX(0); }
body.nav-open .sidebar form.abmelden { justify-content: stretch; }
body.nav-open .sidebar button.navicon { width: 100%; justify-content: flex-start; gap: 11px; padding: 0 11px; }
.sidebar, .content { transition: width .18s ease, margin-left .18s ease; }
.navtoggle {
  position: absolute; top: 24px; right: -12px; width: 24px; height: 24px;
  border-radius: 50%; border: 1px solid var(--border); background: var(--white);
  color: var(--muted); cursor: pointer; display: flex; align-items: center;
  justify-content: center; box-shadow: var(--shadow-xs); z-index: 55;
  transition: all .15s ease;
}
.navtoggle:hover { color: var(--pink); border-color: var(--pink-tint); background: var(--pink-wash); }
body.nav-open .navtoggle svg { transform: rotate(180deg); }

/* ---------------- Content chrome ---------------- */
.content { margin-left: 64px; min-height: 100vh; }
.pagehead {
  height: 56px; background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 40;
}
.pagehead .title { font-size: 15px; font-weight: 600; }
.main { padding: 24px; max-width: 1440px; }

/* ---------------- Cards / typography ---------------- */
.card {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px 20px; box-shadow: var(--shadow-xs);
}
.card-title { font-size: 13px; font-weight: 600; margin: 0; }
.card-sub { font-size: 11.5px; color: var(--muted); margin: 2px 0 0; }
.grouplabel {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 18px 0 8px;
}
.muted { color: var(--muted); }
.tnum { font-variant-numeric: tabular-nums; }

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: none; cursor: pointer;
  font-family: var(--font); font-size: 12.5px; font-weight: 600; border-radius: 10px;
  padding: 9px 16px; transition: all .2s ease; text-decoration: none; line-height: 1.3;
}
.btn svg { width: 14px; height: 14px; }
.btn-primary { background: var(--pink); color: #fff; box-shadow: 0 2px 8px rgba(255,61,127,.25); }
.btn-primary:hover { background: var(--pink-dark); }
.btn-secondary { background: var(--white); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--muted-2); background: var(--surface); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid var(--red-wash); }
.btn-danger-ghost:hover { background: var(--red-wash); }
.btn-amber { background: var(--amber-text); color: #fff; }
.btn-amber-outline { background: transparent; color: var(--amber-text); border: 1px solid var(--amber-border); }
.btn-sm { padding: 6px 12px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.iconbtn {
  width: 26px; height: 26px; border-radius: 8px; border: none; background: transparent;
  color: var(--muted); cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; transition: all .15s ease;
}
.iconbtn svg { width: 14px; height: 14px; }
.iconbtn.mail:hover { background: var(--pink-wash); color: var(--pink); }
.iconbtn.del:hover { background: var(--red-wash); color: var(--red); }

/* ---------------- Inputs ---------------- */
.input, select.input, textarea.input {
  font-family: var(--font); font-size: 12.5px; color: var(--text);
  background: var(--white); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; transition: border .15s ease, box-shadow .15s ease; width: 100%;
}
.input:focus, textarea.input:focus, select.input:focus {
  outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-tint);
}
.input.error { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-wash); }
.fieldlabel { display: block; font-size: 11.5px; font-weight: 500; color: var(--text-2); margin: 12px 0 5px; }
.fielderror { font-size: 11px; color: var(--red); margin-top: 4px; }
textarea.input { resize: vertical; line-height: 1.55; }

/* Chip-Input */
.chipbox {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: var(--white);
  border: 1px solid var(--border); border-radius: 10px; padding: 6px 10px; min-height: 38px;
  cursor: text; transition: border .15s ease, box-shadow .15s ease;
}
.chipbox:focus-within { border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-tint); }
.chipbox input {
  border: none; outline: none; font-family: var(--font); font-size: 12.5px;
  flex: 1; min-width: 90px; background: transparent; color: var(--text);
}
.chip {
  display: inline-flex; align-items: center; gap: 5px; background: var(--purple-wash);
  color: var(--purple); font-size: 11.5px; font-weight: 500; border-radius: 999px;
  padding: 3px 6px 3px 10px;
}
.chip button {
  border: none; background: transparent; color: inherit; cursor: pointer; font-size: 12px;
  line-height: 1; padding: 2px 4px; border-radius: 50%;
}
.chip button:hover { background: rgba(0,0,0,.07); }

/* Checkbox */
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.check input { appearance: none; width: 18px; height: 18px; flex-shrink: 0; border: 1.5px solid var(--muted-2); border-radius: 5px; cursor: pointer; position: relative; transition: all .15s ease; margin: 0; }
.check input:checked { background: var(--pink); border-color: var(--pink); }
.check input:checked::after {
  content: ""; position: absolute; left: 5px; top: 1.5px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------------- KPI-Kacheln ---------------- */
.kpirow { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.kpi {
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; box-shadow: var(--shadow-xs); cursor: pointer; position: relative;
  transition: all .2s ease;
}
.kpi:hover { border-color: var(--pink); }
.kpi .num { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .lbl { font-size: 12px; font-weight: 500; color: var(--muted); }
.kpi.teal .num { color: var(--teal-dark); }
.kpi.active { background: var(--pink-wash); border: 2px solid var(--pink); padding: 13px 15px; }
.kpi.active .num, .kpi.active .lbl { color: var(--pink); }
.kpi.active .clearhint { position: absolute; top: 10px; right: 12px; font-size: 10.5px; font-weight: 600; color: var(--pink); }
.kpi.dim { opacity: .65; }

/* ---------------- Status-Pills (9 Werte) ---------------- */
.pillwrap {
  position: relative; display: inline-flex; align-items: center; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}
.pillwrap select {
  appearance: none; -webkit-appearance: none; border: none; background: transparent;
  color: inherit; font: inherit; padding: 4px 24px 4px 12px; cursor: pointer; border-radius: 999px;
}
.pillwrap select:focus { outline: 2px solid var(--pink-tint); }
.pillwrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; transform: translateY(-65%) rotate(45deg);
  width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  pointer-events: none;
}
.badge {
  display: inline-flex; align-items: center; border-radius: 999px; font-size: 11px;
  font-weight: 600; padding: 3px 10px; white-space: nowrap;
}
.st-neu     { background: var(--surface-alt); color: var(--text-2); }
.st-m1      { background: #F3EEFF; color: #8B6EC4; }
.st-m2      { background: #EDE4FB; color: #7554B8; }
.st-m3      { background: #E3D3F9; color: #6B4FA8; }
.st-antwort { background: var(--teal-wash); color: var(--teal-dark); }
.st-angebot { background: var(--info-wash); color: var(--info-text); }
.st-termin  { background: var(--teal); color: #fff; }
.st-kein    { background: var(--red-wash); color: var(--red); }
.st-abg     { background: var(--text); color: #fff; }
.st-bounce  { background: var(--red); color: #fff; }

/* ---------------- Lead-Tabelle (CSS-Grid) ---------------- */
.tablecard { padding: 0; overflow: hidden; border-radius: 14px; }
.filterbar {
  display: flex; align-items: center; gap: 10px; padding: 14px 16px;
  border-bottom: 1px solid var(--divider);
  /* Umbruch statt Schrumpfen: seit dem Modus-Filter und „+ Lead pruefen“
     (TICKET-04) passt die Zeile auf schmalen Fenstern nicht mehr in eine
     Zeile - ohne wrap quetscht Flexbox Knopf und Zaehler in zwei Textzeilen. */
  flex-wrap: wrap; row-gap: 8px;
}
.filterbar .input, .filterbar .btn, .filterbar .searchbox { flex: none; }
.filterbar .btn { white-space: nowrap; }
.searchbox { position: relative; width: 260px; }
.searchbox svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; color: var(--muted); }
.searchbox input { padding-left: 32px; }
.trow, .thead {
  display: grid; gap: 10px; align-items: center; padding: 7px 16px;
  grid-template-columns: 28px minmax(150px,1.4fr) minmax(150px,1.2fr)
    minmax(90px,0.8fr) 150px 84px;
}
.trow { cursor: pointer; }
.trow.sel { background: var(--pink-wash); box-shadow: inset 3px 0 0 var(--pink); }
.trow.sel:hover { background: var(--pink-wash); }

/* Split-View: Tabelle + Detail-Panel */
.leadlayout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.leadlayout.open { grid-template-columns: minmax(0, 1fr) 360px; }
.leadpanel { position: sticky; top: 72px; }
.thead {
  background: var(--surface); font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); padding-top: 9px; padding-bottom: 9px;
}
.trow { min-height: 44px; border-top: 1px solid var(--divider); font-size: 12px; transition: background .15s ease; }
.trow:hover { background: var(--surface); }
.trow .firma { font-weight: 600; }
.trow .sub { font-size: 10.5px; color: var(--muted); line-height: 1.3; }
.trow .dim2 { color: var(--text-2); }
.trow .email { font-size: 11.5px; color: var(--muted); }
.ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weblink { color: var(--purple); text-decoration: none; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.weblink:hover { text-decoration: underline; }
.datecell { font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.datecell.teal { color: var(--teal-dark); font-weight: 500; }
.noteinput {
  width: 100%; border: 1px solid transparent; border-radius: 8px; background: transparent;
  font-family: var(--font); font-size: 11.5px; color: var(--text-2); padding: 4px 8px;
  transition: all .15s ease; text-overflow: ellipsis;
}
.noteinput:hover { border-color: var(--border); background: var(--white); }
.noteinput:focus { outline: none; border-color: var(--pink); background: var(--white); box-shadow: 0 0 0 3px var(--pink-tint); }
/* Postfach-Liste (Setup) */
.mbgrid {
  display: grid; gap: 10px; align-items: center;
  grid-template-columns: 46px minmax(180px,1.4fr) minmax(110px,1fr) minmax(130px,1fr) 130px 250px;
}
.mbhead {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); padding: 0 0 8px; border-bottom: 1px solid var(--divider);
}
.mbrow { padding: 10px 0; border-bottom: 1px solid var(--divider); font-size: 12.5px; }
.mbrow:last-of-type { border-bottom: none; }

/* Sequenz-Anzeige (M1/M2/M3 + Antwort) */
.seq { display: flex; gap: 4px; align-items: center; }
.seqdot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--surface-alt);
  border: 1px solid var(--border); cursor: default;
}
.seqdot.on { background: var(--purple); border-color: var(--purple); }
.seqdot.antwort { background: var(--teal); border-color: var(--teal); margin-left: 4px; }

.tfoot {
  display: flex; align-items: center; justify-content: space-between; padding: 10px 16px;
  border-top: 1px solid var(--divider); font-size: 11.5px; color: var(--muted);
}
.pager { display: flex; gap: 4px; }
.pager button {
  min-width: 26px; height: 26px; border: none; border-radius: 8px; background: transparent;
  font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--text-2);
  cursor: pointer; padding: 0 6px;
}
.pager button:hover { background: var(--surface-alt); }
.pager button.on { background: var(--pink-wash); color: var(--pink); font-weight: 600; }
.linkbtn { border: none; background: none; color: var(--pink); font-family: var(--font); font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 0; }
.linkbtn:hover { text-decoration: underline; }

/* ---------------- Progress / Warnkarte ---------------- */
.progressbar { height: 8px; background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.progressbar .fill { height: 100%; background: var(--grad-pink); border-radius: 999px; transition: width .4s ease; }
.progressbar.amber .fill { background: var(--amber); }
.progressbar.teal .fill { background: var(--teal); }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--pink); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
.warncard { background: var(--amber-wash); border: 1px solid var(--amber-border); border-radius: 12px; padding: 18px 20px; }
.warncard .card-title { color: var(--amber-text); display: flex; align-items: center; gap: 8px; }
.errlog { font-size: 11.5px; color: var(--text-2); }
.errlog .code { font-weight: 600; color: var(--red); }
details.errwrap summary { cursor: pointer; font-size: 11.5px; color: var(--muted); user-select: none; margin-top: 10px; }

/* ---------------- Stepper (Lead-Finder) ---------------- */
.stepper { display: flex; flex-direction: column; }
.step { display: flex; gap: 12px; position: relative; padding-bottom: 20px; }
.step:last-child { padding-bottom: 0; }
.step::before {
  content: ""; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px;
  background: var(--border);
}
.step:last-child::before { display: none; }
.step.done::before { background: var(--teal); }
.step .dot {
  width: 21px; height: 21px; border-radius: 50%; flex-shrink: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; background: var(--surface-alt);
}
.step.done .dot { background: var(--teal); color: #fff; }
.step.done .dot svg { width: 11px; height: 11px; }
.step.active .dot { background: var(--white); border: 2px solid var(--pink); }
.step.active .dot::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); }
.step .stitle { font-size: 12.5px; font-weight: 600; line-height: 1.4; }
.step.active .stitle { color: var(--pink); }
.step .smeta { font-size: 11px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-top: 14px; }
.tile { border-radius: 10px; padding: 10px; text-align: center; }
.tile .tnum2 { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tile .tlbl { font-size: 10.5px; font-weight: 500; }
.tile.teal { background: var(--teal-wash); color: var(--teal-dark); }
.tile.gray { background: var(--surface-alt); color: var(--text-2); }
.tile.amber { background: var(--amber-wash); color: var(--amber-text); }

/* ---------------- Posteingang Split-View ---------------- */
.inboxgrid { display: grid; grid-template-columns: 420px 1fr; gap: 16px; align-items: start; }
.replyitem { padding: 14px 16px; border-top: 1px solid var(--divider); cursor: pointer; transition: background .15s ease; }
.replyitem:hover { background: var(--surface); }
.replyitem.sel { background: var(--pink-wash); border-left: 3px solid var(--pink); padding-left: 13px; }
.replyitem .rname { font-size: 12.5px; font-weight: 600; }
.replyitem .rsub { font-size: 12px; font-weight: 500; margin-top: 3px; }
.replyitem .rprev { font-size: 11.5px; color: var(--muted); }
.avatar-lg {
  width: 32px; height: 32px; border-radius: 50%; background: var(--purple-wash);
  color: var(--purple); font-size: 11px; font-weight: 600; display: inline-flex;
  align-items: center; justify-content: center; flex-shrink: 0;
}
.mailbody { font-size: 12.5px; line-height: 1.7; color: var(--text); white-space: pre-wrap; }
.replyform { background: var(--surface); border-radius: 12px; padding: 16px; }
.emptystate { text-align: center; padding: 56px 20px; }
.emptystate .icobadge {
  width: 64px; height: 64px; border-radius: 18px; background: var(--pink-wash);
  color: var(--pink); display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.emptystate .icobadge svg { width: 26px; height: 26px; }
.emptystate h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.emptystate p { font-size: 12.5px; color: var(--muted); max-width: 380px; margin: 0 auto 18px; }

/* ---------------- Templates ---------------- */
.phchips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.phchip {
  border: none; cursor: pointer; background: var(--pink-wash); color: var(--pink);
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; border-radius: 999px;
  padding: 4px 12px; transition: background .15s ease;
}
.phchip:hover { background: var(--pink-tint); }
.tplnum {
  width: 24px; height: 24px; border-radius: 8px; color: #fff; font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.tplnum.n1 { background: var(--pink); }
.tplnum.n2 { background: var(--purple); }
.tplnum.n3 { background: var(--purple-dark); }

/* ---------------- Feedback-Pills / Chips ---------------- */
.pill-ok { background: var(--teal-wash); color: var(--teal-dark); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.pill-err { background: var(--red-wash); color: var(--red); border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; }
.schedchip {
  display: inline-flex; align-items: center; gap: 7px; background: var(--amber-wash);
  border: 1px solid var(--amber-border); color: var(--amber-text); font-size: 11.5px;
  font-weight: 500; border-radius: 999px; padding: 5px 8px 5px 12px;
}
.schedchip button { border: none; background: transparent; color: inherit; cursor: pointer; font-size: 13px; padding: 0 4px; border-radius: 50%; }
.schedchip button:hover { background: rgba(0,0,0,.07); }
.badge-ok { display: inline-flex; align-items: center; gap: 5px; background: var(--teal-wash); color: var(--teal-dark); font-size: 10.5px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.badge-ok::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }

/* ============================================================
   Sniper-Modus — Lead-Detailseite (TICKET-02)
   Uebernommen aus prototyp_sniper/index.html (Stand V6).
   ============================================================ */

/* Kopf der Detailseite */
.dosshead { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.dosshead h2 { font-size: 18px; font-weight: 600; margin: 0; }
.dosshead .meta { font-size: 11.5px; color: var(--muted); margin-top: 3px; }
.backlink {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  font-family: var(--font); font-size: 11.5px; font-weight: 600; color: var(--muted);
  text-decoration: none; cursor: pointer; padding: 0 0 8px;
}
.backlink:hover { color: var(--pink); }
.backlink svg { width: 13px; height: 13px; }
.kontaktzeile {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 11.5px; color: var(--text-2); font-variant-numeric: tabular-nums;
}
.kontaktzeile svg { width: 12px; height: 12px; color: var(--muted-2); flex: none; }
/* Stammdaten rechts im Kopf: Label/Wert-Paare, so schmal wie moeglich */
.stammdaten {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px;
  margin: 0; flex: none; max-width: 320px; font-size: 11.5px;
}
.stammdaten dt { color: var(--muted); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; align-self: center; }
.stammdaten dd { margin: 0; color: var(--text-2); word-break: break-word; }
@media (max-width: 900px) {
  .dosshead { flex-direction: column; }
  .stammdaten { max-width: none; }
}

.dossgrid { display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: 16px; align-items: start; }
.dosscol { position: sticky; top: 72px; }
@media (max-width: 1100px) {
  .dossgrid { grid-template-columns: minmax(0,1fr); }
  .dosscol { position: static; }
}
.blockhead {
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 22px 0 9px;
}

/* Aktivitaets-Timeline */
.tl { list-style: none; margin: 12px 0 0; padding: 0; }
.tl li { position: relative; padding: 0 0 13px 26px; }
.tl li:last-child { padding-bottom: 0; }
.tl li::before {
  content: ""; position: absolute; left: 5px; top: 15px; bottom: 0; width: 2px; background: var(--border);
}
.tl li:last-child::before { display: none; }
.tldot {
  position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--muted-2); box-shadow: 0 0 0 3px var(--white);
}
.tldot.mail { background: var(--purple); }
.tldot.antwort { background: var(--teal); }
.tldot.sniper, .tldot.anruf { background: var(--pink); }
.tldot.info { background: var(--muted-2); }
.tldot.negativ { background: var(--red); }
.tlttl { font-size: 12.5px; font-weight: 600; }
.tldate { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.tlprev {
  margin-top: 6px; background: var(--surface); border-left: 2px solid var(--teal);
  border-radius: 0 9px 9px 0; padding: 8px 12px; font-size: 11.5px; color: var(--text-2); line-height: 1.6;
}
.tlprev.negativ { border-left-color: var(--red); color: var(--red); }
.tlprev.neutral { border-left-color: var(--muted-2); }

/* Score-Karte */
.scorehead { display: flex; align-items: baseline; gap: 10px; }
.scorenum { font-size: 34px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.scorenum.prio { color: var(--pink); }
.scorenum.ok { color: var(--teal-dark); }
.scorenum.watch { color: var(--text-2); }
.scoremax { font-size: 12px; color: var(--muted); font-weight: 500; }
.scorescale { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); margin-top: 5px; }
.progressbar.gray .fill { background: var(--muted-2); }

/* Regel-Ampeln: die harten Regeln sichtbar begruendet */
.rulelist { list-style: none; margin: 14px 0 0; padding: 0; }
.rulelist li {
  display: flex; align-items: flex-start; gap: 9px; font-size: 12px;
  padding: 7px 0; border-top: 1px solid var(--divider); line-height: 1.45;
}
.rulelist li:first-child { border-top: none; }
.lamp {
  width: 16px; height: 16px; border-radius: 50%; flex: none; margin-top: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: #fff;
}
.lamp.ok { background: var(--teal); }
.lamp.no { background: var(--red); }
.lamp svg { width: 9px; height: 9px; }
.rulelist .rtext { color: var(--text-2); }
.rulelist li.bad .rtext { color: var(--red); font-weight: 500; }

/* Signal-Karten: belegter Fakt */
.signal {
  border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px;
  background: var(--white); display: grid; grid-template-columns: 34px 1fr auto; gap: 12px;
  align-items: start;
}
.signal + .signal { margin-top: 10px; }
/* Verfallen: bleibt lesbar, zaehlt aber nicht mehr - sichtbar zurueckgenommen */
.signal.verfallen { background: var(--surface); opacity: .72; }
.verfallmeta { color: var(--amber-text); font-weight: 600; }
.verfallhint {
  display: flex; gap: 8px; align-items: flex-start; margin-top: 12px;
  background: var(--surface-alt); border-radius: 9px; padding: 9px 11px;
  font-size: 11.5px; color: var(--text-2); line-height: 1.5;
}
.verfallhint svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--muted); }
.verfallhint.nah { background: var(--amber-wash); border: 1px solid var(--amber-border); color: var(--amber-text); }
.verfallhint.nah svg { color: var(--amber-text); }
.sigico {
  width: 34px; height: 34px; border-radius: 10px; background: var(--pink-wash); color: var(--pink);
  display: flex; align-items: center; justify-content: center;
}
.sigico svg { width: 16px; height: 16px; }
.signal.verfallen .sigico { background: var(--surface-alt); color: var(--muted); }
.sigtype { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sigtext { font-size: 12.5px; font-weight: 500; line-height: 1.5; margin: 1px 0 5px; }
.sigmeta { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sigsrc { display: inline-flex; align-items: baseline; gap: 5px; }
.sigsrc svg { width: 11px; height: 11px; color: var(--muted-2); flex: none; }
/* Quell-URLs sind lang - anders als die kurzen Links in der Tabelle duerfen sie umbrechen */
.quelllink { white-space: normal; word-break: break-all; font-size: 11.5px; }
span.quelllink { color: var(--muted); }
.sigright { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ptchip {
  background: var(--surface-alt); color: var(--text-2); font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.ptchip.aus { color: var(--muted); text-decoration: line-through; }
.risk { font-size: 13px; line-height: 1; }
.fnnum {
  display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px;
  border-radius: 5px; background: var(--surface-alt); color: var(--muted);
  font-size: 10px; font-weight: 700; padding: 0 4px;
}

/* Einordnung je Signal — Hypothese, klar vom Fakt abgesetzt */
.einord {
  grid-column: 1 / -1; margin-top: 6px; background: var(--surface);
  border: 1px dashed var(--muted-2); border-radius: 10px; padding: 8px 11px;
}
.einord summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; gap: 9px; }
.einord summary::-webkit-details-marker { display: none; }
.einord summary::before {
  content: ""; width: 5px; height: 5px; flex: none; border: solid var(--muted);
  border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform .15s ease;
  align-self: center; margin-right: -4px;
}
.einord[open] summary::before { transform: rotate(45deg) translate(-1px,-1px); }
/* Beide Kopf-Teile in einem Block: bricht die Zeile um, bleibt der zweite Teil
   auf der Textkante statt unter dem Pfeil zu rutschen. */
.eohead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; row-gap: 2px; }
.eolabel {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-2);
}
.eokamp { font-size: 10px; color: var(--muted); }
.eobody { margin-top: 10px; display: grid; gap: 10px; }
.eorow { display: block; }
.eok {
  display: block; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); line-height: 1.4; margin-bottom: 1px;
}
.eov { display: block; font-size: 11.5px; line-height: 1.6; font-style: italic; color: var(--text-2); }

/* Kanalreihenfolge (§ 7 UWG) */
.chan { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--divider); }
.chan:first-of-type { border-top: none; }
.chanico {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: flex;
  align-items: center; justify-content: center; background: var(--teal-wash); color: var(--teal-dark);
}
.chanico svg { width: 15px; height: 15px; }
.chan.off { opacity: .55; }
.chan.off .chanico { background: var(--surface-alt); color: var(--muted); }
.chanttl { font-size: 12.5px; font-weight: 600; }
.chanttl .step-n { color: var(--muted); font-weight: 700; margin-right: 5px; }
.chansub { font-size: 11px; color: var(--muted); line-height: 1.5; }
.lawnote {
  margin-top: 12px; background: var(--surface); border-radius: 9px; padding: 9px 11px;
  font-size: 10.5px; color: var(--text-2); line-height: 1.5;
}

/* Blockade-Karte (Regelwerk sperrt die Ansprache) */
.blockcard { background: var(--surface); border: 1px dashed var(--muted-2); border-radius: 12px; padding: 18px 20px; }
.blockcard .card-title { color: var(--text-2); }

/* Kontaktsperre + neutraler Hinweis */
.sperrbanner {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
  background: var(--red-wash); border: 1px solid #FFD3DA; border-radius: 10px;
  padding: 11px 14px; color: var(--red); font-size: 12px; line-height: 1.55;
}
.sperrbanner svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }
.sperrbanner strong { font-weight: 600; }
.sperrsub { color: var(--text-2); display: block; margin-top: 4px; font-size: 11.5px; line-height: 1.5; }
.hinweiszeile {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
  background: var(--info-wash); border-radius: 9px; padding: 9px 11px;
  font-size: 11.5px; color: var(--info-text); line-height: 1.55;
}
.hinweiszeile svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }

/* Modus- und Bewertungs-Badges */
.md-sniper   { background: var(--pink-wash); color: var(--pink); }
.md-shotgun  { background: var(--surface-alt); color: var(--text-2); }
.md-beob     { background: var(--white); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--muted-2); }
.md-gesperrt { background: var(--red); color: #fff; }
/* Verfalls-Hinweis (TICKET-06): amber, weil er eine Frist meldet und keinen
   Fehler - der Lead ist heute ansprechbar, nur nicht mehr lange. */
.md-verfall  { background: var(--amber-wash); color: var(--amber-text); box-shadow: inset 0 0 0 1px var(--amber-border); }
.sn-prio     { background: var(--pink); color: #fff; }
.sn-ok       { background: var(--teal-wash); color: var(--teal-dark); }
.sn-watch    { background: var(--surface-alt); color: var(--text-2); }
.sn-none     { background: var(--white); color: var(--muted); border: 1px dashed var(--muted-2); }

/* Leerzustand ohne Handlungsaufforderung (Shotgun/Beobachtung) */
.emptystate .icobadge.grau { background: var(--surface-alt); color: var(--muted); }

/* Firmenname in der Lead-Tabelle verlinkt auf die Detailseite */
.trow .firma a { color: inherit; text-decoration: none; }
.trow .firma a:hover { color: var(--pink); text-decoration: underline; }

/* ---- Kontakt-Hygiene: Aktionen, Dialog, Cooldown (TICKET-03) ---- */

/* Aktionsleiste im Kopf der Detailseite; bricht auf schmalen Fenstern um. */
.dossaktionen { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.dossaktionen .btn svg { width: 13px; height: 13px; }

/* Bestaetigungs-Dialog (Uebernahme, Rueckstufung, Sperre). Uebernommen aus
   prototyp_sniper/index.html - ein `confirm()` wie sonst im Dashboard kann den
   Zielzustand nicht darstellen und truege kein Pflicht-Grund-Feld. */
.overlay {
  position: fixed; inset: 0; background: rgba(26, 26, 46, .34); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.overlay[hidden] { display: none; }
.dlgcard {
  background: var(--white); border-radius: 14px; box-shadow: var(--shadow-lg);
  padding: 22px 24px; max-width: 460px; width: 100%;
}
.dlgcard h3 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.dlgcard p { font-size: 12.5px; color: var(--text-2); line-height: 1.65; margin: 0 0 6px; }
.dlgcard label { display: block; font-size: 11.5px; color: var(--text-2); margin: 12px 0 5px; }
.dlgziel {
  background: var(--surface); border-left: 2px solid var(--pink); border-radius: 0 9px 9px 0;
  padding: 9px 13px; font-size: 12px; color: var(--text); margin: 12px 0 4px; line-height: 1.6;
}
.dlgfehler { color: var(--red); font-size: 11.5px; margin-top: 8px; min-height: 14px; }

/* ---- Messelisten-Abgleich (TICKET-06) ---- */
/* Die Vorschau stellt CSV-Zeile und Lead gegenueber und braucht dafuer mehr
   Breite als ein Bestaetigungs-Dialog; die Zeilenliste scrollt in sich. */
.dlgcard.wide { max-width: 760px; }
.mlrows { max-height: 340px; overflow-y: auto; margin-top: 10px; border-top: 1px solid var(--border); }
.mlrow {
  display: grid; grid-template-columns: 84px 1fr 1fr; gap: 10px; align-items: start;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 11.5px;
}
.mlrow > .badge { justify-self: start; }   /* nicht auf die Spaltenbreite ziehen */
.mlrow .mlcsv, .mlrow .mlziel { min-width: 0; overflow-wrap: anywhere; }
/* `.weblink` ist sonst einzeilig (nowrap) - in der schmalen Spalte der
   Vorschau muss ein Firmenname umbrechen duerfen. */
.mlrow a.weblink { white-space: normal; }
.mlrow .muted { font-size: 10.5px; }
.mlwarn { color: var(--amber-text); font-size: 10.5px; margin-top: 2px; line-height: 1.45; }

/* Cooldown ist ein Hinweis, keine Sperre; die Anlasszeile hebt ihn auf. */
.cooldown {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  background: var(--amber-wash); border: 1px solid var(--amber-border); border-radius: 9px;
  padding: 9px 11px; font-size: 11px; color: var(--amber-text); line-height: 1.55;
}
.cooldown svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }
.anlasszeile {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  background: var(--teal-wash); border-radius: 9px; padding: 9px 11px;
  font-size: 11px; color: var(--teal-dark); line-height: 1.55;
}
.anlasszeile svg { width: 12px; height: 12px; flex: none; margin-top: 2px; }

/* ---------------- Utility ---------------- */
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.stack > * + * { margin-top: 16px; }
.divider-v { width: 1px; background: var(--divider); align-self: stretch; }
.mono { font-family: var(--mono); }
.scrollx { overflow-x: auto; }

/* ---- Dossier-Recherche (TICKET-05): Null-Karte und Quellenprotokoll ---- */
.nulltext { font-size: 12px; color: var(--text-2); margin: 9px 0 0; line-height: 1.65; }
.quellen { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12px; }
.quellen li { display: flex; gap: 12px; padding: 6px 0; border-top: 1px solid var(--border); line-height: 1.5; }
.quellen .qk { flex: 0 0 150px; font-weight: 600; }
.quellen .qs { color: var(--text-2); }
.quellen .qs.warn { color: var(--amber); }
.quellen .qs.bad { color: var(--red); }

/* ---------------------------------------------------------------- Abmelde-Erkennung
   Ein Widerspruch muss sichtbar bleiben, bis er bearbeitet ist. Deshalb steht
   der Zaehler in der Sidebar (also auf jeder Seite) und nicht nur im
   Posteingang, und deshalb ist er rot und nicht grau. */
.sidebar .navbadge {
  position: absolute; top: 4px; right: 4px; min-width: 17px; height: 17px;
  padding: 0 4px; border-radius: 9px; background: var(--red); color: #fff;
  font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
  box-shadow: 0 0 0 2px var(--white);
}
body.nav-open .sidebar .navbadge { position: static; margin-left: auto; box-shadow: none; }

/* Kategorie-Chips im Posteingang. Nur die Abmeldung ist rot - waeren es alle
   Kategorien, verloere die eine, auf die es ankommt, ihre Wirkung. */
.katchip {
  display: inline-block; padding: 1px 7px; border-radius: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .01em; white-space: nowrap;
}
.kat-abmeldung { background: var(--red-wash); color: var(--red); }
.kat-negativ { background: var(--amber-wash); color: var(--amber-text); }
.kat-interesse { background: var(--green-wash, #E9F7EF); color: var(--green-text, #1E7A46); }
.kat-abwesenheit { background: var(--surface-alt); color: var(--muted); }
.kat-erledigt { background: var(--surface-alt); color: var(--muted); }

/* Der Balken ueber der Liste. Er verschwindet erst, wenn jede Abmeldung
   entschieden ist - gesperrt oder mit Begruendung verworfen. */
.abmeldebanner {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
  padding: 13px 15px; border-radius: 12px; background: var(--red-wash);
  border: 1px solid var(--red); color: var(--text);
}
.abmeldebanner svg { width: 17px; height: 17px; color: var(--red); flex: 0 0 auto; margin-top: 1px; }
.abmeldebanner .titel { font-weight: 700; font-size: 13px; }
.abmeldebanner .sub { display: block; margin-top: 3px; font-size: 11.5px; color: var(--text-2); }

/* Herkunftsnachweis auf der Widersprueche-Seite: bewusst als Monospace-Block,
   damit URL und Lauf-Kennung im Zweifel sauber kopierbar sind. */
/* Die Widerspruchs-Karte nutzt dieselbe Beschriftungsspalte wie die Lead-
   Detailseite, aber ohne deren 320px-Deckel: hier stehen ganze Mail-Auszüge
   im Wert, keine Einzeiler. */
.widerspruch .stammdaten { max-width: none; gap: 10px 18px; align-items: start; }
.widerspruch .stammdaten dt { align-self: start; padding-top: 2px; }
.widerspruch .stammdaten dd { font-size: 12px; }

.herkunft { font-size: 11px; color: var(--text-2); line-height: 1.55; }
.herkunft .mono { font-size: 10.5px; }
.herkunft .fehlt { color: var(--red); font-weight: 600; }