/* ============================================================
   Die Pipeline als Board

   Vorbild ist die Deal-Ansicht von HubSpot. Vier Dinge machen dort
   den Unterschied, und alle vier sind Struktur, nicht Zierrat:

   1. SPALTEN FESTER BREITE. Vorher teilten sich fuenf Bahnen die
      Flaeche zu gleichen Teilen — bei sieben Phasen waere jede
      davon ein Streifen gewesen, auf dem kein Firmenname mehr
      steht. Feste Breite heisst: eine Karte sieht in jeder Phase
      gleich aus, und wird es eng, scrollt das Board waagerecht.
   2. ALLE GLEICH HOCH, bis zum unteren Rand. Vorher war jede Bahn
      so hoch wie ihr Inhalt; eine leere Phase schrumpfte auf eine
      Kopfzeile und war beim Ziehen kaum zu treffen. Jetzt ist jede
      Bahn eine Flaeche, und eine leere Phase ist eine leere
      Flaeche.
   3. DIE KARTEN SCROLLEN IN DER SPALTE, nicht die Seite. Die
      Kopfzeile bleibt stehen, also weiss man beim Scrollen durch
      vierzig Deals immer noch, in welcher Phase man liest.
   4. DIE SUMME STEHT UNTEN. Oben die Frage (welche Phase, wie
      viele), unten die Antwort in Geld — und die Zahlen aller
      Spalten liegen auf einer Linie, also vergleicht man sie, ohne
      zu suchen.

   Die Rundungen und die Akzentfarbe bleiben die der Suite. HubSpot
   ist hier die Vorlage fuer den AUFBAU, nicht fuer das Aussehen —
   eine zweite Formensprache mitten in der Anwendung waere kein
   Vorbild, sondern ein Fremdkoerper.

   pipeline.js zieht dafuer zwei Dinge ein, die es im HTML der
   Workstation nicht gibt: .pl-liste um die Karten und .pl-fuss mit
   der Summe. Ohne das Skript greift von hier nur die Haelfte.
   ============================================================ */

/* ---------- Das Board fuellt die Seite ----------
   :has() statt einer Regel auf .scrm-body: dieselbe Flaeche traegt
   auch die Kontaktliste, und die soll nichts davon abbekommen. */
.scrm-body:has(.scrm-bahnen) {
  display: flex;
  flex-direction: column;
}

/* Der Trichter ueber dem Board faellt weg.

   Er zeigte sechs Kacheln mit Phase, Anzahl und Summe — also genau
   das, was seit dem Umbau in jeder Spalte oben und unten steht. Zwei
   Anzeigen derselben Zahl nebeneinander sind keine Uebersicht,
   sondern eine Frage danach, welche von beiden gemeint ist. Und sie
   kosteten 80 Pixel Hoehe, die jetzt die Karten haben.

   Bedienbar war daran nur der Sprung zwischen Leads und Deals, und
   den macht die Leiste links laengst — seit beide eigene Eintraege
   sind. Es geht nichts verloren.

   NUR ueber dem Board: auf der Leads-Seite bleibt der Trichter die
   einzige Uebersicht ueber die Phasen, dort waere er wirklich weg. */
.scrm-body:has(.scrm-bahnen) > .cld-trichter { display: none; }
.scrm-body:has(.scrm-bahnen) > .cld-blatt:has(.scrm-bahnen) {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.scrm-bahnen {
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex: 1;
  /* 340 als Boden: darunter wird das Board zum Guckloch, und dann
     ist eine Liste ehrlicher als ein Board. */
  min-height: 340px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 4px;
}

/* Die Umbrueche von crm.css gelten nicht mehr: dort wurden aus
   fuenf Spalten bei schmalem Schirm drei und dann zwei. Ein Board
   bricht nicht um, es scrollt. */
@media (max-width: 1240px) {
  .scrm-bahnen { grid-template-columns: none; }
}
@media (max-width: 880px) {
  .scrm-bahnen { grid-template-columns: none; }
}

/* ---------- Eine Bahn ----------
   Waechst mit, wenn Platz da ist, schrumpft aber nie unter 264 —
   das ist die Breite, bei der ein zweizeiliger Firmenname noch
   lesbar bleibt. Nach oben gedeckelt, sonst stehen bei fuenf
   Phasen auf einem breiten Schirm fuenf fast leere Flaechen. */
.scrm-bahn {
  flex: 1 0 264px;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  border-radius: 14px;
  /* Der Grund der Bahn. Vorher stand hier #f3f7fb, und die Seite
     dahinter ist #f5f8fc — zwei Stufen im Rot, eine in Gruen und
     Blau. Das sieht niemand, und damit schwamm das Board auf der
     Seite. Mein Fehler war, den Ton zu setzen, ohne die Flaeche
     dahinter zu messen.

     #dee8f3 steht zu #f5f8fc bei 1,164 : 1 nach relativer
     Leuchtdichte. Gerechnet, nicht geschaetzt: die Differenz der
     Hexzahlen taeuscht hier, weil das Auge Gruen viel staerker
     wiegt als Blau. Unter etwa 1,06 ist ein Flaechenunterschied
     Einbildung, ab 1,12 sieht man ihn sicher. */
  background: #dee8f3;
}

/* Die Vorzimmer-Bahn "unklar" sieht aus wie die anderen.

   Vorher war sie durchsichtig und hatte einen Rahmen. Neben vier
   deutlich getoenten Bahnen waere sie jetzt die eine helle Luecke
   in der Reihe — das liest sich wie ein Fehler, nicht wie eine
   Aussage. Dass sie nicht zur Summe zaehlt, steht in ihrem Fuss,
   und zwar woertlich: "zaehlt nicht". Ein Satz, den man lesen
   kann, ist besser als ein Rahmen, den man deuten muss. */

/* Zwei Klassen, weil crm.css selbst .scrm-bahn.vor setzt — mein
   einklassiges .scrm-bahn verliert dagegen, egal wie spaet diese
   Datei geladen wird. Spezifitaet schlaegt Reihenfolge. */
.scrm-bahn.vor {
  background: #dee8f3;
  box-shadow: none;
}
/* Und ihre Karten sind weiss wie ueberall. In crm.css waren sie
   #fbfdff — ein eigener Ton, der nur Sinn ergab, solange die Bahn
   darunter durchsichtig war. */
.scrm-bahn.vor .scrm-vk {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 35, 58, .07);
}

/* ---------- Kopf: welche Phase, wie viele ---------- */
.scrm-bh {
  flex: none;
  padding: 11px 13px 9px;
  border-bottom: 1px solid rgba(18, 35, 58, .09);
}

/* ---------- Die Karten, und nur sie, scrollen ---------- */
.pl-liste {
  flex: 1;
  overflow-y: auto;
  padding: 10px 9px 2px;
  /* Nicht auto (das waere die Hoehe des Inhalts, und dann scrollt
     nichts), aber auch nicht 0: eine leere Bahn ist trotzdem ein
     Ablegeziel und waere sonst beim Ziehen nur ein Strich. */
  min-height: 60px;
}
/* Schmale Leiste: eine 15 Pixel breite Standardleiste nimmt einer
   264 breiten Spalte den Platz, der dem Namen fehlt. */
.pl-liste { scrollbar-width: thin; }
.pl-liste::-webkit-scrollbar { width: 8px; }
.pl-liste::-webkit-scrollbar-thumb {
  background: rgba(18, 35, 58, .16);
  border-radius: 4px;
}
.pl-liste::-webkit-scrollbar-track { background: transparent; }

/* ---------- Fuss: die Summe ----------
   Auf einer Linie mit den Fuessen der anderen Spalten. */
.pl-fuss {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 9px 13px;
  border-top: 1px solid rgba(18, 35, 58, .09);
}
.pl-fuss .s {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--scrm-text, #12233a);
  font-variant-numeric: tabular-nums;
}
.pl-fuss .s.aus {
  font-weight: 600;
  color: var(--scrm-mut, #8a97a8);
}

/* Der Knopf sitzt zwischen Liste und Fuss, nicht im Scrollbereich:
   "Chance anlegen" gehoert zur Spalte, nicht zu den Karten. */
.scrm-badd {
  flex: none;
  margin: 0 9px 8px;
  width: auto;
}

/* ---------- Alle Karten gleich hoch ----------
   So hoch wie eine, bei der alles ausgefuellt ist. Zwei Dinge
   machten den Unterschied, und beide werden hier festgenagelt —
   ohne eine Hoehe in Pixeln, die beim naechsten Schriftwechsel
   falsch waere:

   1. Der Titel darf zwei Zeilen haben und bekommt sie IMMER. Zwei,
      nicht eine: "Hochschwarzwald Hotelbetriebs GmbH" ist in einer
      264 Pixel breiten Spalte keine Ausnahme, sondern der Normal-
      fall. Wer laenger heisst, wird nach zwei Zeilen abgekuerzt.
   2. Die Personenzeile ist immer da. Fehlt sie im HTML, zieht
      pipeline.js eine leere ein — siehe .pl-ohnewer. */
.scrm-bahnen .scrm-vkt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.45;
  /* In em, nicht in px: zwei Zeilen bleiben zwei Zeilen, egal wie
     gross die Schrift gerade ist. */
  min-height: 2.9em;
}

/* Die eingezogene Leerzeile. visibility statt opacity: der Kasten
   bleibt und traegt die Hoehe, die Tinte verschwindet. Der Avatar
   darin ist derselbe .scrm-av.klein wie sonst, damit die Hoehe aus
   derselben Regel kommt und nicht aus einer abgeschriebenen Zahl. */
.pl-ohnewer { visibility: hidden; }

/* ---------- Die Karte ----------
   Weiss auf getoentem Grund, eine Haarlinie, kein Schatten im
   Ruhezustand. Der Schatten kommt erst beim Zeigen — eine Flaeche
   mit vierzig schwebenden Karten liest sich wie Kies. */
.scrm-bahnen .scrm-vk {
  margin-bottom: 7px;
  padding: 11px 12px;
  border-radius: 10px;
  /* Schwaecher als vorher: auf dem getoenten Grund traegt der
     Helligkeitssprung die Trennung, die Kante muss sie nicht mehr
     allein machen. */
  box-shadow: inset 0 0 0 1px rgba(18, 35, 58, .07);
  transition: box-shadow .12s, transform .12s, opacity .12s;
}
.scrm-bahnen .scrm-vk:hover {
  box-shadow: inset 0 0 0 1px var(--accent, #2f7ad6), 0 2px 8px -4px rgba(18, 35, 58, .3);
}

/* Beim Ziehen hebt sich die Zielbahn ab. Nur die Flaeche faerbt
   sich, die Breite bleibt — eine Spalte, die unter dem Zeiger die
   Groesse aendert, schiebt die anderen weg. */
.scrm-bahn.ziel {
  background: rgba(var(--accent-rgb, 47, 122, 214), .10);
  box-shadow: inset 0 0 0 1.5px var(--accent, #2f7ad6);
}