/* ===================================================================
   Scout-CRM.

   Die Pipeline hat eine Richtung, das soll man sehen: Jede Stufe traegt
   links eine farbige Kante, die von kuehl (neu entdeckt) zu warm/gruen
   (uebergeben) laeuft. Gedeckt gehalten -- kein Ampel-Geblinke.
   =================================================================== */

.steuerung { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.steuerung select {
  min-width: 160px; padding: 9px 12px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}

/* ---------- Fällige Follow-ups ------------------------------------------ */

.faellig {
  margin-bottom: 26px; padding: 14px 18px;
  background: rgba(255, 190, 120, .07);
  border: 1px solid rgba(255, 190, 120, .3);
  border-radius: var(--radius);
}
.faellig__titel {
  margin: 0 0 8px; font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: #f0c48a;
}
.faellig__liste { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.faellig__liste li { display: flex; align-items: baseline; gap: 7px; }
.faellig__knopf {
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--text); font: inherit; font-weight: 600;
  border-bottom: 1px solid rgba(240, 196, 138, .45);
}
.faellig__knopf:hover { color: #f0c48a; }

/* ---------- Stufen -------------------------------------------------------- */

.stufe { margin-bottom: 30px; }
.stufe__kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.stufe__titel {
  margin: 0; font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--akzent);
}
.stufe__zahl {
  min-width: 22px; padding: 1px 7px; text-align: center;
  font-size: .74rem; font-weight: 700; color: var(--text-still);
  background: rgba(255, 255, 255, .06);
  border-radius: 999px;
}
.stufe__karten { display: grid; gap: 10px; }

/* Farbverlauf entlang der Pipeline. */
.stufe[data-stufe="neu"]           { --stufe-farbe: #4c7fa8; }
.stufe[data-stufe="angesprochen"]  { --stufe-farbe: #5b8fd4; }
.stufe[data-stufe="gespraech"]     { --stufe-farbe: #7d84e0; }
.stufe[data-stufe="interessiert"]  { --stufe-farbe: #8ab8a0; }
.stufe[data-stufe="uebergeben"]    { --stufe-farbe: #79d1a2; }
.stufe[data-stufe="abgelehnt"]     { --stufe-farbe: #55606f; }
.stufe[data-stufe="abgelehnt"] .kk { opacity: .62; }
.stufe[data-stufe="abgelehnt"] .kk:hover { opacity: 1; }

/* ---------- Karte --------------------------------------------------------- */

.kk {
  position: relative;
  padding: 15px 18px 15px 21px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  transition: border-color .18s ease, background .18s ease, opacity .18s ease;
}
.kk::before {
  content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--stufe-farbe, var(--akzent));
  opacity: .8;
}
.kk:hover { border-color: rgba(255, 255, 255, .16); }
.kk[data-faellig="ja"] { border-color: rgba(255, 190, 120, .34); }

.kk__kopf { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.kk__name { margin: 0; font-size: 1.02rem; font-weight: 650; }
.kk__unter { margin: 2px 0 0; font-size: .82rem; color: var(--text-still); }

.kk__marken { display: flex; gap: 6px; flex-wrap: wrap; }
.marke-punkt, .marke-still, .marke-fertig {
  padding: 3px 9px; border-radius: 999px;
  font-size: .71rem; font-weight: 600; letter-spacing: .02em;
  border: 1px solid var(--rand); color: var(--text-still);
}
.marke-punkt[data-prio="hoch"] {
  color: #ffb4b9; border-color: rgba(255, 154, 162, .38); background: rgba(255, 154, 162, .1);
}
.marke-punkt[data-prio="mittel"] { color: var(--text-leise); }
.marke-fertig {
  color: #79d1a2; border-color: rgba(121, 209, 162, .35); background: rgba(121, 209, 162, .09);
}

.kk__info { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .78rem; }
.kk__still { color: var(--text-still); }
.kk__followup { color: var(--text-leise); }
.kk__followup[data-faellig="ja"] { color: #f0c48a; font-weight: 600; }

.kk__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 13px; }

/* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
   Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
   nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */

/* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
   der Knopf soll sich deshalb von den anderen abheben. */

/* ---------- Aufgeklappt ---------------------------------------------------- */

.kk__detail {
  margin-top: 15px; padding-top: 15px;
  border-top: 1px solid var(--rand);
}
.kk__zeile { margin: 0 0 9px; font-size: .87rem; color: var(--text-leise); }
.kk__schild {
  display: block; margin-bottom: 1px;
  font-size: .7rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--text-still);
}
.kk__notiz {
  width: 100%; margin: 4px 0 14px; padding: 10px 12px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit; resize: vertical;
}
.kk__raster {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}
.kk__raster input, .kk__raster select {
  width: 100%; padding: 9px 11px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--rand); border-radius: var(--radius-klein);
  color: var(--text); font: inherit;
}
.kk__notiz:focus, .kk__raster input:focus, .kk__raster select:focus {
  outline: none; border-color: rgba(63, 189, 245, .65);
  box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
}


/* ---------- Codefenster ---------------------------------------------------- */

.schleier {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 22px;
  background: rgba(3, 5, 10, .78);
  backdrop-filter: blur(5px);
}
.code-fenster {
  width: min(440px, 100%); padding: 26px 28px;
  background: #0b111b;
  border: 1px solid rgba(63, 189, 245, .3);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
}
.code-fenster__titel { margin: 3px 0 10px; font-size: 1.2rem; font-weight: 700; }
.code-fenster__text { margin: 0 0 16px; font-size: .85rem; color: var(--text-leise); }
.code-fenster__code {
  margin: 0 0 20px; padding: 15px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.4rem; font-weight: 700; letter-spacing: .16em; text-align: center;
  word-break: break-all;
  background: rgba(63, 189, 245, .09);
  border: 1px solid rgba(63, 189, 245, .28);
  border-radius: var(--radius-klein);
}

@media (prefers-reduced-motion: reduce) {
  .kk { transition: none; }
}

/* ---------- Die Erklaerung im leeren Zustand ---------------------------
   Der leere Zustand ist der einzige Moment, in dem jemand garantiert
   liest, was dort steht -- spaeter ist die Flaeche von Daten belegt.
   Deshalb steht hier keine Meldung, sondern die Erklaerung, wofuer die
   Pipeline ueberhaupt gut ist. Sie ist laenger als ein Hinweis und
   bekommt deshalb linksbuendigen Text statt zentrierten. */
.leer-hinweis--erklaerung {
  text-align: left;
  max-width: 62ch;
  margin: 0 auto;
  padding: 30px 28px 26px;
}
.erklaerung__satz {
  margin: 0 0 14px;
  font-size: 1.02rem; color: var(--text); line-height: 1.55;
}
.erklaerung__warum {
  margin: 0 0 20px;
  font-size: .9rem; color: var(--text-leise); line-height: 1.65;
}
.erklaerung__stufen {
  display: grid; gap: 10px;
  margin: 0 0 20px; padding: 0; list-style: none;
  counter-reset: none;
}
.erklaerung__stufe {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: .88rem;
}
/* Die Nummer als eigener Koerper: Die fuenf Stufen sind eine REIHENFOLGE,
   und die soll man sehen, ohne die Ueberschriften zu lesen. */
.erklaerung__nr {
  flex: none;
  display: grid; place-items: center;
  width: 24px; height: 24px; border-radius: 50%;
  font-size: .74rem; font-weight: 700;
  color: var(--ton, var(--akzent));
  border: 1px solid color-mix(in srgb, var(--ton, var(--akzent)) 40%, transparent);
  background: color-mix(in srgb, var(--ton, var(--akzent)) 12%, transparent);
}
.erklaerung__stufe strong { display: block; color: var(--text); }
.erklaerung__was {
  display: block; margin-top: 1px;
  font-size: .83rem; color: var(--text-still); line-height: 1.5;
}
.erklaerung__fuss {
  margin: 0 0 16px; padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: .86rem; color: var(--text-leise); line-height: 1.6;
}
.erklaerung__los {
  margin: 0;
  font-size: .88rem; color: var(--ton, var(--akzent));
}
/* Der Ring des leeren Zustands passt hier nicht -- es ist ja Text da. */
.leer-hinweis--erklaerung::before { display: none; }

@media (max-width: 560px) {
  .leer-hinweis--erklaerung { padding: 22px 16px 20px; }
}