/* ===================================================================
   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; }
}

/* =====================================================================
   DIE STUFEN ERKLÄREN SICH SELBST (11.09.2026)

   Filipe: "perfektionnier diese kategorien wie die aussehen und was man
   da noch alles immer in jeder kategorie eintragen kann. weil man kan
   da nichts machen."

   Zwei Dinge steckten dahinter, und nur eins davon war Optik:

     1. Man KONNTE etwas machen -- der ganze Editor lag hinter einem
        stillen Textknopf namens "Details". Ein Wort, das Lesen
        verspricht, an einer Stelle, an der man ändert. Er heißt jetzt
        "Bearbeiten" und sieht auch danach aus.
     2. Die Stufen hatten nur einen Namen. Was "Interessiert" von
        "Gespräch" unterscheidet, stand einmal im leeren Zustand der
        Seite -- also genau so lange, bis der erste Kontakt da war.

   Der Ton der Stufe (--stufe-farbe) steht schon oben in dieser Datei;
   er wird hier nur konsequent benutzt, statt nur die Zahl zu färben.
   ===================================================================== */
.stufe__text { min-width: 0; }
.stufe__was {
  margin: 2px 0 0;
  font-size: .8rem; line-height: 1.45;
  color: var(--text-still);
  /* Der Satz darf umbrechen, aber nicht die Überschrift überragen. */
  max-width: 62ch;
}
/* Eine feine Kante in der Farbe der Stufe -- sie trennt die Abschnitte,
   ohne dass eine durchgehende Linie die Seite zerschneidet. */
.stufe__kopf {
  align-items: flex-start;
  padding-bottom: 9px;
  border-bottom: 1px solid color-mix(in srgb, var(--stufe-farbe, var(--rand)) 34%, transparent);
}
.stufe__zahl { margin-left: auto; flex: none; }

/* ---- Die harten Zahlen auf der Karte -------------------------------
   Land und Reichweite beantworten "lohnt sich das überhaupt". Sie
   stehen deshalb in der Kurzinfo und nicht im aufgeklappten Teil --
   wer sie erst nach einem Klick sieht, sortiert nicht danach. */
.kk__fakt {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border: 1px solid var(--rand-hell); border-radius: 999px;
  font-size: .76rem; font-weight: 600;
  color: var(--text-leise);
  white-space: nowrap;
}
.kk__fakt[data-art="follower"] {
  font-variant-numeric: tabular-nums;
  border-color: color-mix(in srgb, var(--akzent) 34%, transparent);
  color: color-mix(in srgb, var(--akzent) 62%, #ffffff);
}

/* ---- „Schon im Netzwerk" ------------------------------------------
   Die teuerste Angabe der ganzen Pipeline: Wer unter Vertrag steht,
   kann nicht übernommen werden. Sie trägt deshalb die Warnfarbe des
   Hauses -- nicht als Alarm, sondern als Stoppschild. */
.marke-punkt[data-warn="ja"] {
  border-color: color-mix(in srgb, var(--k-warn, #e0736b) 55%, transparent);
  background: color-mix(in srgb, var(--k-warn, #e0736b) 16%, transparent);
  color: color-mix(in srgb, var(--k-warn, #e0736b) 42%, #ffffff);
}

/* ---- Der Knopf, der nicht gefunden wurde --------------------------
   Er sah aus wie ein Nebensatz und war die einzige Tür zum Editor.
   Jetzt hat er eine Kante -- er bleibt zurückhaltend gegenüber
   „Weiter zu …", ist aber als Knopf zu erkennen. */
.knopf-still--bearbeiten {
  border: 1px solid var(--rand-hell);
  border-radius: 10px;
  padding: 5px 12px;
}
.knopf-still--bearbeiten:hover { border-color: var(--akzent); color: var(--text); }
.knopf-still--bearbeiten[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--akzent) 55%, transparent);
  background: color-mix(in srgb, var(--akzent) 12%, transparent);
}

@media (forced-colors: active) {
  .kk__fakt, .knopf-still--bearbeiten { border: 1px solid CanvasText; }
  .marke-punkt[data-warn="ja"] { border: 2px solid CanvasText; }
}