/* ============================================================
   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.

     DIE BAHN IST WEISS, nicht getoent.

     Frueher stand hier ein blauer Grund, und die Karten darauf
     trugen die Vollfarbe ihrer Phase. Das war als Orientierung
     gedacht; tatsaechlich war die ganze Tafel Flaeche, und
     welcher Deal gross ist oder brennt, ging darin unter.

     Die Phasenfarbe steht jetzt als schmaler Streifen oben an
     der Bahn - einmal gelesen, statt an jeder Karte
     wiederholt.

     #f7f9fc ist die Kopfzeilenfarbe der Tabellen (.kt-th in
     tabellen.css). Dieselbe Farbe fuer dieselbe Rolle: der
     Rahmen, in dem Zeilen stehen. Und die weissen Karten heben
     sich davon ab - auf reinem Weiss taten sie das nur ueber
     ihre Linie. */
  background: #f7f9fc;
  box-shadow: inset 0 0 0 1px var(--scrm-linie2, #e7eef6);
  position: relative;
  /* KEIN overflow:hidden: eine gezogene Karte hebt sich und
     wuerde am Spaltenrand beschnitten. Der Streifen bekommt
     seinen Radius stattdessen selbst. */
}
/* Der Streifen: drei Pixel in der Farbe der Phase. Er sagt
   dasselbe wie eine eingefaerbte Spalte und nimmt dem Inhalt
   nichts weg. */
.scrm-bahn::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: rgb(var(--c, 222,232,243));
  pointer-events: none;
}


/* 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: #f7f9fc;
  box-shadow: inset 0 0 0 1px var(--scrm-linie2, #e7eef6);
}
/* 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);
}

/* ---------- Die Ablegeziele unter dem Board ----------
   Sie liegen immer da, nicht erst waehrend eines Zuges: ein Ziel,
   das nur im Zug erscheint, findet man beim ersten Mal nicht. */
.pl-ziele {
  flex: none;
  display: flex;
  gap: 12px;
  margin-top: 12px;
}
/* .scrm-bahn traegt hier nur den Empfaenger aus crm.js - die Form
   einer Spalte braucht es nicht. Darum alles zuruecksetzen, was
   die Bahn sonst ausmacht. */
.pl-ziel {
  flex: 1 1 0;
  max-width: none;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  min-height: 0;
  padding: 12px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(18, 35, 58, .1);
  transition: box-shadow .16s ease, background .16s ease, transform .16s ease;
}
.pl-zielic {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.pl-gewonnen .pl-zielic { background: #0e7c6b; }
.pl-verloren .pl-zielic { background: #8b9099; }
.pl-zielt b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.2; }
.pl-zielt small { display: block; font-size: 11.5px; color: var(--scrm-mut, #8b9099); }

/* Unter dem Zeiger. .ziel setzt crm.js selbst - dieselbe Klasse
   wie bei den Bahnen, also kostet das keine Zeile Logik. */
.pl-ziel.ziel { transform: translateY(-2px); }
.pl-gewonnen.ziel {
  background: rgba(14, 124, 107, .12);
  box-shadow: inset 0 0 0 2.5px #0e7c6b;
}
.pl-verloren.ziel {
  background: rgba(139, 144, 153, .14);
  box-shadow: inset 0 0 0 2.5px #8b9099;
}

/* ---------- Die drei Zahlen ueber dem Board ----------
   Label oben, ZAHL darunter: dieselbe Form wie die Kopfzahlen der
   Aufgabenseite, damit beide Seiten gleich gelesen werden. */
.pl-zahlen {
  flex: none;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 2px 2px 14px;
}
.pl-z { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pl-zic {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: var(--scrm-text2, #4b5159);
  box-shadow: 0 1px 2px rgba(18, 35, 58, .08);
}
.pl-zic .material-symbols-rounded { font-size: 20px; }
.pl-z.rot .pl-zic { background: rgba(179, 38, 30, .1); color: #b3261e; }
.pl-z.ruhig .pl-zic { background: rgba(14, 124, 107, .1); color: #0e7c6b; }
.pl-zt b {
  display: block; font-size: 22px; font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.pl-z.rot .pl-zt b { color: #b3261e; }
.pl-zt small {
  display: block; font-size: 12.5px; color: var(--scrm-text2, #4b5159);
  white-space: nowrap;
}

/* ---------- 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 traegt die Farbe ihrer Phase ----------
   Vorher: weiss auf getoentem Grund. Jetzt traegt die Karte selbst
   die Farbe ihrer Phase - ueber eine ganze Spalte hinweg erkennt
   man die Phase, ohne die Kopfzeile zu lesen. pipeline.js setzt
   --c und --ct je Bahn; ct ist die Schrift auf dieser Flaeche,
   nicht irgendein Grau: auf Gelb dunkel, auf Tannengruen hell.

   Die Reihenfolge im HTML (crm.js) ist Titel / Person / Fuss mit
   Wert und Datum. Gebraucht wird Datum OBEN und Wert gross unten.
   Umgehaengt wird dafuer nichts: display:contents loest den Fuss
   auf, seine Kinder werden direkte Flex-Kinder der Karte, und
   order setzt die Reihenfolge. So bleibt crm.js eine
   unveraenderte Kopie. */
/* DIE KARTE IST WEISS.

   Sie trug die Vollfarbe ihrer Phase. Bei vierundzwanzig Karten
   nebeneinander heisst das: alles schreit, nichts sticht
   hervor. Jetzt ist sie weiss mit feiner Linie, und Farbe
   erscheint nur noch, wo sie etwas bedeutet - rot an einer
   ueberfaelligen Frist. */
.scrm-bahnen .scrm-vk {
  display: flex;
  flex-direction: column;
  margin-bottom: 9px;
  padding: 12px 14px 13px;
  border-radius: 14px;
  background: #fff;
  color: var(--scrm-tinte, #12233a);
  box-shadow: 0 1px 2px rgba(18, 35, 58, .06), inset 0 0 0 1px var(--scrm-linie2, #e7eef6);
  transition: box-shadow .14s, transform .14s, opacity .12s;
}
.scrm-bahnen .scrm-vk:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 18px -8px rgba(18, 35, 58, .3), inset 0 0 0 1px var(--scrm-linie, #dde3ea);
}
/* Die Vorzimmer-Bahn sieht aus wie die anderen. */
.scrm-bahn.vor .scrm-vk {
  background: #fff;
  box-shadow: 0 1px 2px rgba(18, 35, 58, .06), inset 0 0 0 1px var(--scrm-linie2, #e7eef6);
}

/* Der Fuss verschwindet als Kasten - seine beiden Kinder bleiben. */
.scrm-bahnen .scrm-vkf { display: contents; }

/* Das Datum nach oben. */
.scrm-bahnen .scrm-vktag {
  order: -1;
  align-self: flex-start;
  margin-bottom: 7px;
  padding: 0;
  background: transparent;
  /* --ci-mut, NICHT --scrm-mut: letzteres ist #8a97a8 und
     ergibt auf Weiss nur 2,97 Kontrast. Auf den frueher farbigen
     Karten fiel das nicht auf, weil der Text dort hell auf dunkel
     stand. Auf Weiss ist es bei 11,5 Pixeln zu wenig - 4,5 ist
     die Grenze, --ci-mut (#647089) bringt 4,98. Gemessen. */
  color: var(--ci-mut, #647089);
  opacity: 1;
  font-size: 11.5px;
  font-weight: 600;
}
/* Ueberfaellig ist jetzt die EINZIGE Farbe auf der Karte - und
   deshalb sieht man sie. Auf weissem Grund das uebliche Rot,
   nicht mehr das aufgehellte, das Tannengruen gebraucht hat. */
.scrm-bahnen .scrm-vktag.rot,
.scrm-bahn.pl-hell .scrm-vktag.rot { opacity: 1; font-weight: 700; color: #b3261e; }

.scrm-bahnen .scrm-vkt {
  order: 0; font-size: 14.5px; font-weight: 650; line-height: 1.3;
  color: var(--scrm-tinte, #12233a);
}
.scrm-bahnen .scrm-vkw {
  order: 1; margin-bottom: 11px;
  font-size: 12px; font-weight: 500; opacity: 1;
  color: var(--ci-mut, #647089);   /* siehe oben: 4,98 statt 2,97 */
}
/* Der Wert ist die Zahl, um die es geht - nicht mehr so gross wie
   der Rest der Karte. */
/* Der Wert ist die Zahl, um die es geht. Auf der ruhigen Karte
   ist er der einzige grosse Ton - vorher konkurrierte er mit
   der Flaeche darunter. */
.scrm-bahnen .scrm-vkwert {
  order: 2; font-size: 19px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1;
  color: var(--scrm-tinte, #12233a);
  font-variant-numeric: tabular-nums;
}

/* Der Stift-Knopf liegt jetzt ueberall auf Weiss. */
.scrm-bahnen .scrm-vkedit,
.scrm-bahn.pl-hell .scrm-vkedit {
  background: rgba(18, 35, 58, .06); color: var(--ci-mut, #647089);
}
.scrm-bahnen .scrm-vkedit:hover,
.scrm-bahn.pl-hell .scrm-vkedit:hover {
  background: rgba(18, 35, 58, .12); color: var(--scrm-tinte, #12233a);
}

/* 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, .scrm-bahn.vor.ziel {
  background: rgba(var(--c), .16);
  box-shadow: inset 0 0 0 2px rgba(var(--c), .55);
}

/* ============================================================
   Pipelines, Phasen und die waehlbaren Angaben auf der Karte
   (web/pipelines.js)

   Gebaut aus md3-kit.css, nicht daneben: Auswahlfelder sind
   .m3-field.m3-sel, Knoepfe .m3-btn, Haken .m3-opt, Schalter
   .m3-chip. Hier steht nur, was das Kit nicht kennt — die
   kompakte Bauhoehe und die Anordnung.
   ============================================================ */

/* ---------- Ein MD3-Feld in klein ----------
   Das Kit baut 52 Pixel hoch. Das ist richtig fuer eine Maske mit
   acht Feldern untereinander; in einer Zeile mit Pfeilen, Haken
   und Zahl ist es zu viel. Dieselben Teile, 40 Pixel. */
.pipe-feldklein .m3-input { height: 40px; font-size: 13.5px; padding: 0 12px; }
.pipe-feldklein .m3-label { inset-block-start: 10px; font-size: 13px; }
.pipe-feldklein .m3-input:focus ~ .m3-label,
.pipe-feldklein .m3-input:not(:placeholder-shown) ~ .m3-label {
  inset-block-start: -8px;
  font-size: 11px;
}
.pipe-feldklein .m3-lead, .pipe-feldklein .m3-trail { inset-block-start: 10px; font-size: 19px; }
.pipe-feldklein.m3-has-lead .m3-input { padding-inline-start: 40px; }
.pipe-feldklein.m3-has-lead .m3-label { inset-inline-start: 36px; }
.pipe-feldklein.m3-has-trail .m3-input { padding-inline-end: 36px; }
.pipe-feldklein.m3-sel .m3-input { line-height: 38px; }

/* ---------- Die Leiste ueber dem Trichter ----------
   Sie steht VOR dem Trichter, weil der Trichter die Phasen
   dieser Pipeline zeigt: erst wissen, welche gemeint ist. */
.pipe-leiste {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
.pipe-leiste .pipe-feldklein { min-width: 190px; }
.pipe-leiste .m3-box { background: #fff; }
.pipe-leiste .m3-btn { height: 40px; }

/* ---------- Angaben auf der Karte ---------- */
.scrm-vk .scrm-vkw .material-symbols-rounded { font-size: 14px; flex: none; }
.scrm-vk .scrm-vkw > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrm-vk .scrm-vkw.gut { color: #0e7c6b; }
.scrm-vk .scrm-vkw.kalt { color: #b3261e; }
/* Ohne Wert steht links ein leeres span, damit die Marke rechts
   bleibt. Es darf den Platz nicht selbst beanspruchen. */
.scrm-vkf > span:empty { flex: 1; }

/* ---------- Der Dialog ---------- */
.pipe-ov {
  position: fixed;
  inset: 0;
  z-index: 4200;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(10, 22, 38, .42);
}
.pipe-kasten {
  width: min(780px, 100%);
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 64px -18px rgba(10, 22, 38, .5);
  overflow: hidden;
}
.pipe-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--ci-line, #e4eaf2);
  font-size: 16px;
}
.pipe-kopf > .material-symbols-rounded { color: var(--m3-primary); }
.pipe-zu {
  all: unset;
  cursor: pointer;
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: var(--m3-mut);
}
.pipe-zu:hover { background: var(--m3-secondary-container); color: var(--m3-primary); }
.pipe-leib { padding: 16px 18px 20px; overflow-y: auto; }

.pipe-gr {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 20px 0 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--m3-mut);
}
.pipe-gr:first-child { margin-top: 0; }
.pipe-gr em { font-style: normal; opacity: .65; }

/* ---------- Die Pipelines als Chips ---------- */
.pipe-reiter { display: flex; gap: 7px; flex-wrap: wrap; }
.pipe-k {
  font-size: 11px;
  font-weight: 800;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(18, 35, 58, .09);
}
.m3-chip.on .pipe-k { background: rgba(var(--m3-primary-rgb), .18); }
.pipe-neu { color: var(--m3-primary); }

.pipe-kopfzeile { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.pipe-kopfzeile .pipe-feldklein { flex: 1; min-width: 0; }
.pipe-hinweis { font-size: 11.5px; color: var(--m3-mut); }
.pipe-weg.m3-icon-btn { width: 34px; height: 34px; flex: none; color: var(--m3-error, #b3261e); }
.pipe-weg.m3-icon-btn .material-symbols-rounded { font-size: 19px; }
.pipe-weg.aus { cursor: default; opacity: .2; }

/* ---------- Die Phasen ----------
   Die Nummer links ist die Stellung im Trichter, der Streifen am
   Rand der Ausgang: grau offen, gruen gewonnen, rot verloren.
   Beides sagt ohne Lesen, was Sache ist — und der Streifen sitzt
   als innerer Schatten, damit die Zeile dadurch nicht um drei
   Pixel breiter wird als die daneben. */
.pipe-phasen { display: flex; flex-direction: column; gap: 7px; }
.pipe-ph {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px 7px 12px;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--ci-line, #e4eaf2), inset 3px 0 0 #c3cedd;
}
.pipe-ph[data-ende="gewonnen"] { box-shadow: inset 0 0 0 1px var(--ci-line, #e4eaf2), inset 3px 0 0 #0e7c6b; }
.pipe-ph[data-ende="verloren"] { box-shadow: inset 0 0 0 1px var(--ci-line, #e4eaf2), inset 3px 0 0 #b3261e; }
.pipe-nr {
  flex: none;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 800;
  color: var(--m3-mut);
  background: var(--ci-soft, #f4f7fb);
  font-variant-numeric: tabular-nums;
}
.pipe-phpfeile { display: flex; flex-direction: column; flex: none; }
.pipe-phpfeile button {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  width: 20px;
  height: 15px;
  border-radius: 4px;
  color: var(--m3-mut);
}
.pipe-phpfeile button:hover { color: var(--m3-primary); background: var(--m3-secondary-container); }
.pipe-phpfeile button[disabled] { cursor: default; opacity: .2; }
.pipe-phpfeile .material-symbols-rounded { font-size: 17px; }
.pipe-phname { flex: 1; min-width: 0; }
.pipe-phende { flex: none; width: 124px; }
.pipe-zaehlt { flex: none; gap: 6px; font-size: 11.5px; color: var(--m3-mut); }
.pipe-n {
  flex: none;
  min-width: 24px;
  height: 20px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ci-soft, #f4f7fb);
  font-size: 11.5px;
  font-weight: 800;
  color: var(--m3-mut);
  font-variant-numeric: tabular-nums;
}

.pipe-fussreihe {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}
.pipe-fussreihe .pipe-kurz { flex: 1; min-width: 200px; margin: 0; }

/* ---------- Die Karte: Schalter links, Ergebnis rechts ----------
   Anhaken und drei Zeilen weiter unten nachsehen, was daraus
   geworden ist, war die Haelfte der Arbeit. */
.pipe-karte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 232px;
  gap: 18px;
  align-items: start;
}
@media (max-width: 660px) {
  .pipe-karte { grid-template-columns: minmax(0, 1fr); }
}
.pipe-ul {
  margin: 0 0 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--m3-mut);
}
.pipe-felder { display: flex; flex-wrap: wrap; gap: 6px; }
.pipe-felder + .pipe-ul { margin-top: 14px; }
.pipe-vrahmen {
  padding: 12px;
  border-radius: 14px;
  background: var(--ci-soft, #f4f7fb);
  box-shadow: inset 0 0 0 1px var(--ci-line2, #eef2f8);
}
/* Die Vorschau zeigt nur. Ziehen, Anklicken und das Hervorheben
   gehoeren dem Board. */
.pipe-vrahmen .scrm-vk { pointer-events: none; margin-bottom: 0; cursor: default; }

.pipe-kurz {
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--m3-mut);
}