/* ============================================================
   Dashboard — Raster, Kacheln, Katalog.

   Die Toene kommen aus md3-kit.css (--ci-*) und die Designfarbe
   aus --accent. Nichts hier setzt eine eigene Farbe, die der
   Anwender nicht einstellen kann; die drei Zustandsfarben (gut,
   warm, kalt) sind Bedeutung und keine Gestaltung — sie bleiben
   fest, damit "ueberfaellig" in jeder Designfarbe rot bleibt.

   WARUM ABSOLUT UND NICHT GRID: die Kacheln liegen frei im
   Raster, und wer eine zieht, soll die Nachbarn weichen sehen,
   bevor er loslaesst. Ein CSS-Grid kann das nicht zeigen, weil es
   erst beim Loslassen neu rechnet. Die Zellen rechnet dashboard.js,
   der Hintergrund zeichnet sie nur nach.
   ============================================================ */

/* #crsEigen ist selbst ein Flex-Container (Zeile), und der Wrap ist
   darin ein Flex-ITEM. Ohne flex:1 schrumpft es auf Inhaltsbreite —
   gemessen 415px in einem 1190px breiten Wirt, womit schmalModus()
   mitten im grossen Fenster griff und alles einspaltig stapelte.
   min-width:0 gehoert dazu: sonst setzt der breiteste Kachelinhalt
   eine Untergrenze, die das Item wieder aus dem Wirt treibt. */
.dsh-wrap {
  display: flex; flex-direction: column; gap: 10px;
  flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%;
}

.dsh-kopfzeile { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.dsh-vorl { display: flex; gap: 2px; flex: 1; min-width: 0; }

/* HIER wird gescrollt, nicht am Wrap: die Kopfzeile mit
   Vorgabe/Leitung/Leeren/Anordnen und die Produktleiste stehen
   darueber und sollen stehen bleiben. Eine Werkzeugzeile, die
   beim Scrollen verschwindet, ist keine.

   min-height:0 gehoert dazu. Ohne das nimmt ein Flex-Item die
   Mindesthoehe seines Inhalts, waechst also mit dem Dashboard
   mit, und overflow haette nichts zu tun - der Wirt
   (.crs-eigen, overflow:hidden) schnitte weiter ab. */
.dsh-flaeche {
  display: flex; gap: 12px; align-items: flex-start;
  min-width: 0; min-height: 0; flex: 1 1 auto;
  overflow-y: auto; overflow-x: hidden;
  /* Am Ende des Dashboards soll nicht die Suite darunter
     weiterscrollen. */
  overscroll-behavior: contain;
  /* Der Platz fuer den Balken ist immer reserviert: sonst
     springt die Zellbreite, sobald ein Dashboard durch Leeren
     oder Filtern kurzzeitig ohne Scroll auskommt. */
  scrollbar-gutter: stable;
}
/* Ein schmaler Balken, damit er neben den Kacheln nicht wie
   eine weitere Spalte wirkt. */
.dsh-flaeche::-webkit-scrollbar { width: 9px; }
.dsh-flaeche::-webkit-scrollbar-track { background: transparent; }
.dsh-flaeche::-webkit-scrollbar-thumb {
  background: rgba(18,35,58,.16); border-radius: 999px;
  border: 2px solid transparent; background-clip: content-box;
}
.dsh-flaeche::-webkit-scrollbar-thumb:hover {
  background-color: rgba(18,35,58,.28); background-clip: content-box;
}

/* ---------- Das Netz ---------- */
.dsh-netz { position: relative; flex: 1; min-width: 0; }
/* Die Rasterpunkte erscheinen nur beim Anordnen — sonst sind sie
   Unruhe auf einer Seite, die man liest. */
.dsh-wrap.ordnen .dsh-netz {
  background-image: radial-gradient(circle at 1px 1px, var(--ci-line) 1px, transparent 0);
  background-position: -1px -1px;
}

.dsh-kachel {
  position: absolute;
  /* border-box: dashboard.js rechnet die Breite aus der
     Zellbreite und setzt sie als style.width. Ohne das kaeme
     der Rahmen mit zwei Pixeln obendrauf, und die rechte Spalte
     ragte ueber das Netz hinaus - gemessen, sobald der
     Scrollbalken Platz nimmt. */
  box-sizing: border-box;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: left .18s ease, top .18s ease, width .18s ease, height .18s ease;
}
.dsh-kachel.zieht {
  transition: none;
  z-index: 20;
  box-shadow: 0 14px 34px rgba(18, 35, 58, .18);
  border-color: var(--accent, #2f7ad6);
}
.dsh-platz {
  position: absolute;
  border: 2px dashed rgba(var(--accent-rgb, 47,122,214), .5);
  background: rgba(var(--accent-rgb, 47,122,214), .06);
  border-radius: 14px;
  pointer-events: none;
  z-index: 10;
}

/* ---------- Kopf der Kachel ----------
   Nach previews/dashboard-klar.html: Titel gross und dunkel,
   darunter die Unterzeile, rechts das Symbol in einer Pille.

   Vorher stand der Titel klein und grau NEBEN einem blassen
   Symbol - er sah aus wie eine Beschriftung, nicht wie eine
   Ueberschrift, und die Zahl darunter musste sich gegen ihn
   behaupten. */
.dsh-kt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 13px 0 15px;
  flex: 0 0 auto; min-width: 0;
}
.dsh-ktx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dsh-ktx b {
  font-size: 14.5px; font-weight: 700; color: var(--ci-ink); letter-spacing: -.012em;
  line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsh-ktx span {
  font-size: 11.5px; color: var(--ci-mut); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die Symbolpille. Sie traegt den Ton der Kachel mit: eine
   ueberfaellige Massnahme hat ein rotes Symbol, bevor man die
   Zahl gelesen hat. */
.dsh-kip {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--ci-soft); color: var(--ci-mut);
}
.dsh-kip .material-symbols-rounded { font-size: 16px; }
.dsh-kip.gut  { background: #e7f6ef; color: #0e7c6b; }
.dsh-kip.warm { background: #fdf3e3; color: #c2691a; }
.dsh-kip.kalt { background: #fdecea; color: #b3261e; }
.dsh-kt .dsh-fass { flex: none; display: none; margin-left: 2px; }
.dsh-wrap.ordnen .dsh-kt { cursor: grab; }
.dsh-wrap.ordnen .dsh-kachel:hover .dsh-fass { display: block; }
.dsh-fass button {
  border: 0; background: transparent; padding: 1px; border-radius: 6px;
  color: var(--ci-faint); cursor: pointer; display: grid; place-items: center;
}
.dsh-fass button:hover { background: #fdecea; color: #b3261e; }
.dsh-fass .material-symbols-rounded { font-size: 15px; }

/* ---------- Koerper ---------- */
.dsh-body {
  flex: 1; min-height: 0;
  padding: 8px 15px 14px;
  display: flex; flex-direction: column; gap: 9px;
  overflow: hidden;
}
/* DIE ZAHL IST DIE NACHRICHT.
   44 statt 29 Pixel - das ist der sichtbarste Unterschied zur
   alten Gestaltung. Eine Kennzahl, die so gross ist wie eine
   Ueberschrift, ist keine Kennzahl mehr, sondern eine Zeile
   unter vielen. */
.dsh-zahl {
  font-size: 40px; font-weight: 700; line-height: 1;
  color: var(--ci-ink); letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px; flex: 0 0 auto;
}
/* Flache oder schmale Kacheln: kleiner, aber immer noch die
   Hauptsache in ihrer Kachel. */
.dsh-zahl.klein { font-size: 27px; letter-spacing: -.028em; }
.dsh-zahl em {
  font-size: 13px; font-weight: 600; font-style: normal;
  color: var(--ci-faint); letter-spacing: 0;
}
.dsh-zahl.gut { color: #0e7c6b; }
.dsh-zahl.warm { color: #c2691a; }
.dsh-zahl.kalt { color: #b3261e; }
.dsh-unter { font-size: 11.5px; color: var(--ci-mut); flex: 0 0 auto; }

/* ---------- Liste in der Kachel ---------- */
.dsh-liste { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dsh-z {
  display: flex; align-items: center; gap: 8px;
  height: 29px; flex: 0 0 29px;
  border-top: 1px solid var(--ci-line2);
  font-size: 12.5px; color: var(--ci-ink);
  min-width: 0;
}
.dsh-z:first-child { border-top: 0; }
.dsh-zn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-zr { flex: none; display: flex; align-items: center; gap: 5px; }
.dsh-zr b { font-variant-numeric: tabular-nums; font-size: 12px; }
.dsh-z.klick { cursor: pointer; }
.dsh-z.klick:hover .dsh-zn { color: var(--accent-dark, var(--accent, #2f7ad6)); }
.dsh-wrap.ordnen .dsh-z.klick { cursor: inherit; }
.dsh-wrap.ordnen .dsh-z.klick:hover .dsh-zn { color: inherit; }
/* Sie steht unter JEDER gekappten Liste, auch unter einem
   Koerper - margin-top:auto wuerde sie ans Ende des Rumpfes
   schieben und eine Luecke aufreissen. */
.dsh-mehr { font-size: 11px; color: var(--ci-faint); padding-top: 4px; flex: 0 0 auto; margin-top: -4px; }

/* Eine Pille waechst nie: sie steht in Flex-Zeilen, und dort
   nimmt sich ein Kind ohne eigenen Wert sonst den Rest. */
.dsh-tag {
  flex: none;
  font-size: 10.5px; font-weight: 600;
  padding: 2px 6px; border-radius: 6px;
  background: var(--ci-soft); color: var(--ci-mut);
  white-space: nowrap;
}
.dsh-tag.gut { background: #e6f4f1; color: #0e7c6b; }
.dsh-tag.warm { background: #fdf0e3; color: #a9551a; }
.dsh-tag.kalt { background: #fdecea; color: #b3261e; }

/* ---------- Balken im Trichter ----------
   Die Zahl steht IM Balken, rechtsbuendig: daneben zwaenge sie
   das Auge zum Springen, drin liest man beides als eins.

   Die Saettigung waechst nach unten (--i traegt den Rang).
   Oben ist viel, unten steht das, worauf es ankommt - und das
   ist zugleich die kleinste Flaeche. Ohne mehr Farbe
   verschwaende sie.
   ============================================================ */
.dsh-balken { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.dsh-bz {
  display: grid; grid-template-columns: 104px 1fr auto;
  align-items: center; gap: 11px; min-width: 0;
}
.dsh-bn {
  font-size: 12px; color: var(--ci-mut);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsh-bb { min-width: 0; }
.dsh-bb i {
  display: flex; align-items: center; justify-content: flex-end;
  height: 26px; border-radius: 7px; min-width: 34px;
  background: rgba(var(--accent-rgb, 47,122,214), calc(.3 + var(--i, 0) * .16));
  transition: filter .15s ease;
}
.dsh-bz:hover .dsh-bb i { filter: brightness(1.07); }
.dsh-bb i b {
  color: #fff; font-size: 12px; font-weight: 700; padding-right: 10px;
  font-variant-numeric: tabular-nums;
}
.dsh-bw {
  font-size: 11px; font-weight: 600; color: var(--ci-faint); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* Das Vorzimmer zaehlt nicht zur Summe: ohne Farbe, damit man
   es nicht mitrechnet. */
.dsh-bz.grau .dsh-bb i { background: #cfd8e4; }
.dsh-bz.grau .dsh-bn { color: var(--ci-faint); }
/* Deals in einer Phase, die die aktive Pipeline nicht kennt.
   Kein Fehler, aber auch keine Spalte - darum SCHRAFFIERT statt
   voll. Diese Entscheidung stand schon in der alten Fassung und
   bleibt: Schraffur heisst hier wie anderswo "zaehlt noch
   nicht". */
.dsh-bz.fremd .dsh-bn { font-style: italic; color: var(--ci-faint); }
.dsh-bz.fremd .dsh-bb i {
  background: repeating-linear-gradient(135deg,
    #aab6c6 0 4px, #dde4ec 4px 8px);
}
.dsh-bz.fremd .dsh-bb i b { color: var(--ci-ink); }


/* ---------- Stimmungsband ---------- */
.dsh-stim { flex: 0 0 38%; display: flex; gap: 2px; height: 8px; }
.dsh-stim i { border-radius: 3px; min-width: 3px; }
.dsh-stim i.gut { background: #0e7c6b; }
.dsh-stim i.neutral { background: var(--ci-line); }
.dsh-stim i.kalt { background: #b3261e; }

/* ---------- Leerer Zustand ----------
   Jede Kachel hat einen: eine leere Kachel, die nur leer aussieht,
   sieht nach einem Fehler aus. */
.dsh-leer {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; padding: 4px;
}
.dsh-leer .material-symbols-rounded { font-size: 22px; color: var(--ci-line); margin-bottom: 2px; }
.dsh-leer b { font-size: 12.5px; color: var(--ci-mut); font-weight: 600; }
.dsh-leer span { font-size: 11px; color: var(--ci-faint); max-width: 230px; }

/* ---------- Griff fuer die Groesse ---------- */
.dsh-griff { display: none; }
.dsh-wrap.ordnen .dsh-griff {
  display: block;
  position: absolute; right: 0; bottom: 0; width: 18px; height: 18px;
  cursor: nwse-resize;
}
.dsh-wrap.ordnen .dsh-griff::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 7px; height: 7px;
  border-right: 2px solid var(--ci-faint); border-bottom: 2px solid var(--ci-faint);
  border-radius: 0 0 2px 0;
}
.dsh-wrap.ordnen .dsh-kachel:hover .dsh-griff::after { border-color: var(--accent, #2f7ad6); }

/* ---------- Katalog ----------
   Nur beim Anordnen zu sehen. Er nimmt Platz vom Netz, darum
   rechnet dashboard.js die Zellbreite nach dem Umschalten neu. */
.dsh-katalog { display: none; }
.dsh-wrap.ordnen .dsh-katalog {
  display: block;
  box-sizing: border-box;
  /* Bleibt beim Scrollen stehen: man zieht aus ihm Kacheln an
     eine Stelle weit unten, und ein Katalog, der dabei oben aus
     dem Bild laeuft, waere dafuer nutzlos. */
  position: sticky; top: 0;
  /* 268 statt 258: box-sizing rechnet Polster und Rahmen jetzt
     in die Breite ein, und damit fehlten dem laengsten Namen
     ("Kaufrunde unvollstaendig") genau zwei Pixel. Zehn mehr
     geben ihm Luft, ohne dem Netz spuerbar Platz zu nehmen -
     bei zwoelf Rasterspalten ist das weniger als ein Zehntel
     einer Spalte. */
  flex: 0 0 268px;
  background: #fff;
  border: 1px solid var(--ci-line);
  border-radius: 14px;
  padding: 12px;
  max-height: 72vh;
  overflow: auto;
}
.dsh-katalog h3 { margin: 0 0 2px; font-size: 13.5px; color: var(--ci-ink); }
.dsh-katalog > p { margin: 0 0 10px; font-size: 11px; color: var(--ci-faint); line-height: 1.4; }
/* ---------- Suchzeile ----------
   Bei sechzehn Eintraegen Zierde; sobald eigene Kacheln
   dazukommen, der Unterschied zwischen Finden und Scrollen. */
.dsh-ksuche {
  display: flex; align-items: center; gap: 7px; margin: 0 0 10px;
  padding: 7px 10px; border-radius: 9px; background: var(--ci-soft);
  border: 1px solid transparent;
  transition: border-color .15s ease, background .15s ease;
}
.dsh-ksuche:focus-within { background: #fff; border-color: var(--accent, #2f7ad6); }
.dsh-ksuche .material-symbols-rounded { font-size: 16px; color: var(--ci-faint); flex: none; }
.dsh-ksuche input {
  flex: 1; min-width: 0; border: 0; background: transparent; outline: 0;
  font: inherit; font-size: 12.5px; color: var(--ci-ink);
}
.dsh-ksuche input::placeholder { color: var(--ci-faint); }
/* Das X von type=search sitzt sonst zu eng am Rand. */
.dsh-ksuche input::-webkit-search-cancel-button { cursor: pointer; }

.dsh-kgruppe {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ci-faint); margin: 12px 0 3px; padding-top: 9px;
  border-top: 1px solid var(--ci-line2);
}
.dsh-kgruppe:first-of-type { border-top: 0; padding-top: 0; margin-top: 2px; }
/* Das "wozu" leiser als der Gruppenname: es erklaert ihn, es
   steht nicht neben ihm. */
.dsh-kwozu {
  font-size: 9.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; color: #aab5c4;
}

/* ---------- Ein Eintrag ----------
   Eine Zeile, EINZEILIG. Was nicht hinpasst, wird abgeschnitten
   statt umgebrochen: ein dreizeiliger Name in einer Liste aus
   sechzehn Eintraegen ist schlechter lesbar als ein gekuerzter,
   und die ganze Bezeichnung steht beim Zeigen darunter. */
.dsh-ke {
  display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; border: 0; background: transparent;
  padding: 7px 7px; border-radius: 9px; cursor: grab;
  color: var(--ci-ink);
  transition: background .14s ease;
}
.dsh-ke:hover { background: var(--ci-soft); }
.dsh-ke:focus-visible { outline: 2px solid var(--accent, #2f7ad6); outline-offset: -2px; }
.dsh-ke > .material-symbols-rounded { font-size: 17px; color: var(--ci-faint); flex: none; }
.dsh-ke:hover > .material-symbols-rounded { color: var(--accent-dark, var(--accent, #2f7ad6)); }
.dsh-knm {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Der Zaehler sagt, wie oft die Kachel schon liegt. Als runde
   Marke statt "2x": in einer Spalte aus sechzehn Zeilen liest
   man eine Form schneller als zwei Zeichen. */
.dsh-anz {
  flex: none; font-size: 9.5px; font-weight: 800; color: #fff;
  background: var(--ci-faint); min-width: 17px; height: 17px;
  border-radius: 999px; display: grid; place-items: center; padding: 0 4px;
}
.dsh-ke:hover .dsh-anz { background: var(--accent-dark, var(--accent, #2f7ad6)); }

/* ---------- Die Beschreibung klappt auf ----------
   grid-template-rows 0fr -> 1fr ist der einzige Weg, auf eine
   UNBEKANNTE Hoehe zu animieren. max-height muesste einen Wert
   raten, und ein zu kleiner schneidet ab, ein zu grosser macht
   den Uebergang zaeh. */
.dsh-kinfo {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .22s cubic-bezier(.22,.9,.25,1);
}
.dsh-kz:hover .dsh-kinfo, .dsh-kz:focus-within .dsh-kinfo { grid-template-rows: 1fr; }
.dsh-kinfo > span {
  overflow: hidden; font-size: 10.5px; color: var(--ci-faint); line-height: 1.4;
  padding: 0 7px 0 32px;
}
.dsh-kz:hover .dsh-kinfo > span, .dsh-kz:focus-within .dsh-kinfo > span { padding-bottom: 7px; }
/* Die Groesse steht HIER und nicht in der Ruhezeile: dort nahm
   sie dem Namen 32 Pixel, und vier von sechzehn Namen wurden
   dadurch abgeschnitten - darunter zwei, die mit "Deals ohne
   naechsten ..." beginnen und dann nicht mehr zu unterscheiden
   waren. */
.dsh-kgro {
  display: inline-block; margin-right: 7px; vertical-align: 1px;
  font-size: 9.5px; font-weight: 700;
  color: var(--accent-dark, var(--accent, #2f7ad6));
  background: var(--ci-soft2); padding: 1px 5px; border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.dsh-kleer { font-size: 11.5px; color: var(--ci-faint); padding: 12px 7px; }

/* Die Kachel, die am Zeiger haengt, bevor sie im Netz landet. */
.dsh-schwebt {
  position: fixed; z-index: 9000; pointer-events: none;
  background: var(--accent, #2f7ad6); color: #fff;
  font-size: 11.5px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px;
  box-shadow: 0 8px 20px rgba(18, 35, 58, .26);
}

/* Steht unter der scrollenden Flaeche und bleibt dort: flex:0 0
   auto, sonst schrumpft sie weg, sobald die Flaeche Platz
   fordert. */
.dsh-fuss { font-size: 11px; color: var(--ci-faint); flex: 0 0 auto; }

/* ---------- Schmales Fenster ----------
   Eine Spalte. Ziehen ist dort abgeschaltet (dashboard.js prueft
   schmalModus), also bleiben Griff und Raster weg. */
@media (max-width: 760px) {
  /* ALIGN-ITEMS MUSS HIER MIT UMSCHALTEN.
     .dsh-flaeche steht oben auf align-items:flex-start - in einer
     ZEILE heisst das "nicht in die Hoehe strecken", und das ist
     richtig. Sobald daraus eine SPALTE wird, meint dieselbe
     Regel aber die BREITE: jedes Kind schrumpft auf seine
     Inhaltsbreite.

     Das Netz befuellt sich absolut (dashboard.js setzt left/top/
     width/height je Kachel), hat also gar keine Inhaltsbreite.
     Gemessen bei 700 Pixeln Fenster: netz.clientWidth = 0,
     und weil anordnen() im Schmalmodus genau diesen Wert als
     Kachelbreite setzt, standen ALLE Kacheln mit width:0px da.
     Das Dashboard war unter 760 Pixeln leer. */
  .dsh-flaeche { flex-direction: column; align-items: stretch; }
  /* width:100% PLUS 12px Polster PLUS 1px Rahmen ergab 26 Pixel
     mehr als der Platz - der Katalog ragte heraus und schob die
     ganze Seite zur Seite. Mit align-items:stretch darueber
     braucht es die Breite gar nicht mehr. */
  .dsh-wrap.ordnen .dsh-katalog { flex: 1 1 auto; max-height: none; }
  .dsh-wrap.ordnen .dsh-griff { display: none; }
  .dsh-wrap.ordnen .dsh-netz { background-image: none; }
}

/* ============================================================
   Die Produktleiste

   "Alle Produkte" links, dann jedes einzeln mit seinem Anteil an
   der offenen Pipeline. Der Anteil steht dabei, weil eine Liste
   aus Namen nicht sagt, welches Produkt traegt - und genau das
   ist die Frage, wegen der man filtert.

   Sie rollt seitlich statt umzubrechen: ein Katalog mit dreissig
   Produkten wuerde das Dashboard sonst nach unten schieben, und
   die Leiste gehoert ueber die Kacheln, nicht vor sie.
   ============================================================ */
.dsh-prod {
  display: flex; align-items: flex-end; gap: 10px;
  overflow-x: auto; scrollbar-width: none;
  padding-bottom: 2px;
  /* flex:0 0 auto, seit die Flaeche darunter Platz FORDERT
     (flex:1 1 auto). Mit dem Vorgabewert 0 1 auto schrumpfte
     die Leiste - und overflow-x:auto hebt min-height:auto auf,
     also schrumpfte sie bis auf 22 Pixel und war halb
     abgeschnitten. Gemessen. */
  flex: 0 0 auto;
}
.dsh-prod::-webkit-scrollbar { display: none; }
.dsh-prod[hidden] { display: none; }

.dsh-pg { display: flex; flex-direction: column; gap: 4px; flex: none; }
.dsh-part {
  font-size: 9.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ci-faint); padding-left: 3px; white-space: nowrap;
}
.dsh-preihe { display: flex; gap: 5px; }
.dsh-ptrenn { width: 1px; align-self: stretch; background: var(--ci-line); flex: none; margin: 0 2px; }

.dsh-pk {
  display: inline-flex; align-items: center; gap: 7px; flex: none;
  padding: 7px 12px; border-radius: 10px;
  border: 1px solid var(--ci-line); background: #fff; color: var(--ci-ink);
  font: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dsh-pk:hover { border-color: rgba(var(--accent-rgb, 47,122,214), .5); }
.dsh-pk i { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ci-faint); }
/* "Alle" bekommt keinen Farbpunkt, sondern einen Ring: es ist
   keine Farbe, sondern ihre Abwesenheit. */
.dsh-pk i.alle { background: transparent; box-shadow: inset 0 0 0 2px var(--ci-faint); }
.dsh-pk b { font-size: 11.5px; font-weight: 700; color: var(--ci-mut); font-variant-numeric: tabular-nums; }
.dsh-pk.an {
  background: var(--accent, #2f7ad6); border-color: var(--accent, #2f7ad6); color: #fff;
}
.dsh-pk.an b { color: rgba(255,255,255,.75); }
.dsh-pk.an i.alle { box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); }

/* ---------- Was man beim Filtern wissen muss ----------
   Und nur dann: im Normalfall ist die Leiste still. */
.dsh-phinweis {
  display: flex; align-items: center; gap: 12px; flex: none;
  margin-left: 6px; padding-left: 12px; border-left: 1px solid var(--ci-line);
  align-self: center;
}
.dsh-pnur {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--ci-mut); white-space: nowrap; cursor: pointer;
}
.dsh-pnur input { accent-color: var(--accent, #2f7ad6); cursor: pointer; }
.dsh-pwarn {
  font-size: 11px; color: var(--ci-faint); white-space: nowrap;
  border-bottom: 1px dotted var(--ci-line2, var(--ci-line)); cursor: help;
}

/* ---------- Die Marke im Kopf einer unbeteiligten Kachel ----------
   Ein Schalter, der bei einem Teil der Kacheln nichts tut, ist
   schlimmer als keiner - man traut ihm dann nirgends mehr. Darum
   sagen diese Kacheln es selbst, und nur solange gefiltert ist. */
.dsh-alle {
  flex: none; margin-left: 4px;
  font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 1.5px 6px; border-radius: 999px;
  background: rgba(18,35,58,.06); color: var(--ci-faint);
}
/* Zurueckgenommen, nicht abgeschaltet: die Kachel stimmt
   weiterhin, sie beantwortet nur gerade eine andere Frage. */
.dsh-kachel.unbeteiligt { background: #fcfcfd; }
.dsh-kachel.unbeteiligt .dsh-kt .material-symbols-rounded { opacity: .55; }

@media (max-width: 680px) {
  .dsh-phinweis { display: none; }
  .dsh-pk { padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
   DIE DARSTELLUNGSBAUSTEINE
   aus previews/dashboard-klar.html

   Uebersetzt auf die Sprache dieses Hauses: --ci-* und --accent,
   nicht die festen Hexwerte der Vorschau. Die Designfarbe soll
   einstellbar bleiben; nur die drei Zustandsfarben (gut, warm,
   kalt) stehen fest, weil sie Bedeutung sind und keine
   Gestaltung.
   ============================================================ */

/* ---------- DIE SCHRAFFUR ----------

   Sie bedeutet immer dasselbe und nie etwas anderes:

        Vollton   = steht fest, ist erreicht, ist vorbei
        Schraffur = laeuft noch, ist offen, kommt erst

   Darum traegt sie der Rest eines Fortschrittsbalkens UND der
   laufende Monat im Saeulendiagramm - zwei Stellen, eine
   Bedeutung. Wer sie einmal gelesen hat, liest sie ueberall
   richtig.

   45 Grad und 5 Pixel Rapport: flacher wirkt es wie ein Raster,
   enger wie eine Flaeche. */
.dsh-schraff {
  background-image: repeating-linear-gradient(45deg,
    var(--sfarbe, rgba(17,17,20,.14)) 0 1.6px, transparent 1.6px 5px);
}
.dsh-schraff.akz {
  --sfarbe: rgba(var(--accent-rgb, 47,122,214),.85);
  background-color: rgba(var(--accent-rgb, 47,122,214),.1);
}
.dsh-schraff.grau { --sfarbe: rgba(17,17,20,.13); background-color: #f7f7f8; }

/* ---------- Fortschritt: erreicht voll, Rest schraffiert ---------- */
.dsh-bahn { display: flex; align-items: center; height: 10px; flex: 0 0 auto; }
.dsh-bahn > i {
  display: block; height: 10px; border-radius: 999px; flex: none;
  background: var(--accent, #2f7ad6);
  width: var(--breite, 0%);
  animation: dshBahn .62s cubic-bezier(.2,.8,.25,1) both;
}
.dsh-bahn > .rest { flex: 1; height: 10px; border-radius: 999px; margin-left: 3px; }
@keyframes dshBahn { from { width: 0; } }

/* ---------- Rangbalken in einer Listenzeile ----------
   Der Balken liegt IN der Zeile, nicht daneben: so liest man
   Name, Groesse und Zahl in einem Zug. Nur der erste traegt
   Farbe - eine Rangliste, in der alles leuchtet, hat keinen
   Rang mehr. */
.dsh-leiste { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; }
.dsh-leiste .dsh-bahn2 {
  flex: 1; min-width: 0; height: 8px; border-radius: 999px;
  background: var(--ci-soft, #f2f2f4); overflow: hidden;
}
.dsh-leiste .dsh-bahn2 i {
  display: block; height: 100%; border-radius: 999px;
  background: var(--ci-line, #dde3ea);
  width: var(--breite, 0%);
  animation: dshBahn .62s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--vz, 0ms);
}
.dsh-leiste .dsh-bahn2 i.akz { background: var(--accent, #2f7ad6); }
.dsh-leiste .dsh-bahn2 i.gut { background: #0e7c6b; }
.dsh-leiste .dsh-bahn2 i.warm { background: #c2691a; }
.dsh-leiste .dsh-bahn2 i.kalt { background: #b3261e; }
/* Ein Produkt bringt seine eigene Farbe mit (produkt.farbe). */
.dsh-ppunkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex: none;
}

/* ---------- Saeulen ----------
   Was vorbei ist, steht als Vollton; was laeuft, ist
   schraffiert - dieselbe Regel wie beim Fortschritt. */
.dsh-saeulen {
  display: flex; align-items: flex-end; gap: 8px;
  flex: 1 1 auto; min-height: 0;
}
.dsh-saeule {
  flex: 1; min-width: 0; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
}
.dsh-saeule .sb {
  width: 100%; border-radius: 7px 7px 3px 3px;
  background: var(--ci-line, #dde3ea);
  height: var(--hoehe, 8%);
  transition: filter .15s ease;
  animation: dshSaeule .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--vz, 0ms);
}
.dsh-saeule:hover .sb { filter: brightness(.94); }
.dsh-saeule .sx {
  font-size: 10.5px; color: var(--ci-faint); font-weight: 500;
  white-space: nowrap; flex: none;
}
.dsh-saeule.jetzt .sx { color: var(--accent-dark, var(--accent, #2f7ad6)); font-weight: 700; }
@keyframes dshSaeule { from { height: 0; } }

/* ---------- Zweiseitige Achse: faellig links, kuenftig rechts ----------
   Die Mittellinie ist HEUTE. Was hinter der Frist liegt, waechst
   nach links und ist rot; was ansteht, waechst nach rechts. Eine
   Liste mit Minuszeichen sagt dasselbe, aber man muss sie lesen -
   das hier sieht man. */
.dsh-zwei { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dsh-zwei-z {
  display: grid; grid-template-columns: minmax(0,1fr) 118px 46px;
  align-items: center; gap: 10px;
  height: 26px; flex: 0 0 26px; font-size: 12.5px; min-width: 0;
}
.dsh-zwei-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.dsh-zwei-n i { font-style: normal; color: var(--ci-faint); font-weight: 400; }
.dsh-zwei-bahn { position: relative; height: 8px; }
.dsh-zwei-bahn::before {
  content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px;
  width: 1px; background: var(--ci-line, #dde3ea);
}
.dsh-zwei-bahn i {
  position: absolute; top: 0; height: 8px; border-radius: 999px;
  background: var(--ci-line, #dde3ea);
  width: var(--breite, 4%);
  animation: dshBahn .55s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--vz, 0ms);
}
.dsh-zwei-bahn i.spaet { background: #b3261e; }
.dsh-zwei-bahn i.heute { background: #c2691a; width: 7px !important; }
.dsh-zwei-w {
  font-size: 11.5px; font-weight: 600; color: var(--ci-mut); text-align: right;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dsh-zwei-w.kalt { color: #b3261e; }
.dsh-zwei-w.warm { color: #c2691a; }

/* ---------- Blasen: Flaeche ist Wert ----------
   Fuer Deals ohne naechsten Schritt. Die Frage dort ist nicht
   WIE VIELE, sondern WIE GROSS - und Groesse liest man als
   Flaeche schneller als als Zahl. Wurzel, nicht linear: der
   Durchmesser soll die Flaeche treffen, nicht den Wert. */
.dsh-blasen {
  display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap;
  flex: 1 1 auto; min-height: 0; overflow: hidden; align-content: flex-start;
}
.dsh-blase-p { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dsh-blase {
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: rgba(var(--accent-rgb, 47,122,214),.12);
  color: var(--accent-dark, var(--accent, #2f7ad6));
  font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .15s ease, color .15s ease;
  animation: dshBlase .5s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--vz, 0ms);
}
.dsh-blase:hover { background: var(--accent, #2f7ad6); color: #fff; }
.dsh-blase-n {
  font-size: 11px; color: var(--ci-mut); text-align: center; max-width: 92px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@keyframes dshBlase { from { transform: scale(.4); opacity: 0; } }

/* ---------- Tagesstrahl ----------
   Acht bis achtzehn Uhr als Band. Wo Luecken sind, sieht man
   sofort - eine Terminliste zeigt das nie. */
/* Der Strahl selbst ist 44 Pixel hoch und fest; die Terminliste
   darunter steht als eigenes Kind im Rumpf und schrumpft. */
.dsh-strahl { flex: 0 0 auto; }
.dsh-strahl-bahn {
  position: relative; height: 28px; border-radius: 9px;
  background: var(--ci-soft, #f6f6f7); overflow: hidden;
}
.dsh-strahl-block {
  position: absolute; top: 0; height: 28px; border-radius: 7px;
  background: rgba(var(--accent-rgb, 47,122,214),.3);
  width: var(--breite, 4%); min-width: 4px;
  transition: filter .15s ease;
  animation: dshBahn .5s cubic-bezier(.2,.8,.25,1) both;
  animation-delay: var(--vz, 0ms);
}
.dsh-strahl-block:hover { filter: brightness(.93); }
.dsh-strahl-block.jetzt { background: var(--accent, #2f7ad6); }
.dsh-strahl-x {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-size: 10px; color: var(--ci-faint); font-weight: 500;
}

/* ---------- Ring ---------- */
/* flex:0 1 auto, NICHT none: ein Kind, das nicht schrumpft,
   treibt den Kachelrumpf ueber die Kante, und das overflow am
   Koerper greift dagegen nicht - es schneidet nur in ihm ab.
   Gemessen: 37 Pixel Ueberlauf in einer vier Zeilen hohen
   Kachel. */
.dsh-ziele { display: flex; flex-direction: column; gap: 13px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.dsh-ziel { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dsh-ziel svg { flex: none; }
.dsh-ring-bahn { fill: none; stroke: var(--ci-soft, #f0f0f2); }
.dsh-ring-an {
  fill: none; stroke: var(--accent, #2f7ad6); stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
}
.dsh-ring-z {
  font-size: 12px; font-weight: 700; fill: var(--ci-ink);
  text-anchor: middle; font-variant-numeric: tabular-nums;
}
.dsh-ziel .ztext { min-width: 0; flex: 1; }
.dsh-ziel .zn {
  font-size: 12.5px; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dsh-ziel .zw {
  font-size: 11.5px; color: var(--ci-mut); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.dsh-ziel .zw b { color: var(--ci-ink); font-weight: 600; }
/* Das Ziel wird dort geaendert, wo es steht. Gepunktet, damit
   man sieht, dass es anklickbar ist - ein Knopf daneben waere
   ein Knopf zu viel in einer Kachel, die schon drei Ringe
   traegt. */
.dsh-zielwert {
  border-bottom: 1px dotted var(--ci-faint); cursor: pointer;
  color: var(--ci-ink); font-weight: 600;
}
.dsh-zielwert:hover { color: var(--accent-dark, var(--accent, #2f7ad6)); border-bottom-color: currentColor; }
.dsh-wrap.ordnen .dsh-zielwert { cursor: inherit; border-bottom-color: var(--ci-line); }
.dsh-zieleingabe {
  width: 92px; font: inherit; font-weight: 600;
  padding: 1px 5px; border: 1px solid var(--accent, #2f7ad6); border-radius: 6px;
  background: var(--ci-card, #fff); color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
}
/* Chrome haengt an ein number-Feld Pfeilchen, die hier nur die
   Haelfte der Breite fressen. */
.dsh-zieleingabe::-webkit-outer-spin-button,
.dsh-zieleingabe::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dsh-zieleingabe { -moz-appearance: textfield; }

/* Eine leere Kachel, in der man etwas tun kann, braucht Platz
   dafuer. */
.dsh-leer .dsh-ziele { margin-top: 10px; width: 100%; }

/* ---------- Rollenpunkte der Kaufrunde ----------
   Vier Punkte, einer je Rolle. Gefuellt heisst benannt, hohl
   heisst offen. Vier Punkte liest man im Vorbeigehen, vier
   Woerter nicht. */
.dsh-rollen { display: flex; gap: 4px; flex: none; }
.dsh-rollen i {
  width: 7px; height: 7px; border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--ci-line, #dde3ea);
  animation: dshPunkt .4s ease both; animation-delay: var(--vz, 0ms);
}
.dsh-rollen i.voll { background: var(--accent, #2f7ad6); box-shadow: none; }
@keyframes dshPunkt { from { transform: scale(0); } }

/* ---------- Hakenliste ---------- */
/* Siehe .dsh-ziele: flex:none liess sie 63 Pixel ueberlaufen. */
.dsh-haken { display: flex; flex-direction: column; gap: 9px; flex: 0 1 auto; min-height: 0; overflow: hidden; }
.dsh-haken-z { display: flex; align-items: center; gap: 9px; font-size: 12.5px; min-width: 0; }
.dsh-haken-z > i {
  flex: none; width: 17px; height: 17px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #e6f4f1; color: #0e7c6b;
}
.dsh-haken-z > i .material-symbols-rounded { font-size: 11px; }
.dsh-haken-z > i.offen { background: var(--ci-soft, #f2f2f4); color: var(--ci-faint); }
/* NICHT nur "> span": die Pille am Ende ist auch ein span und
   wurde damit auf 199 statt 26 Pixel gedehnt. Gemessen. */
.dsh-haken-z > span:not(.dsh-tag) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsh-haken-z.aus > span { color: var(--ci-faint); }

/* ---------- Veraenderung ----------
   Nur dort, wo das CRM wirklich zwei Zeitpunkte kennt. Eine
   Pille, die eine erfundene Zahl traegt, ist schlimmer als
   keine. */
.dsh-deltazeile {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 0 0 auto; margin-top: -2px;
}
.dsh-delta {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.dsh-delta .material-symbols-rounded { font-size: 13px; }
.dsh-delta.auf { color: #0e7c6b; background: #e6f4f1; }
.dsh-delta.ab { color: #b3261e; background: #fdecea; }
/* .dsh-hinweis, NICHT .dsh-fuss: den Namen traegt schon die
   Zeile unter dem Netz (#dshFuss, weiter oben in dieser
   Datei). */
.dsh-hinweis { font-size: 11.5px; color: var(--ci-mut); min-width: 0; }
.dsh-hinweis b { color: var(--ci-ink); font-weight: 600; }

/* ---------- DIE eine gefuellte Kachel ----------
   Genau eine traegt die Designfarbe vollflaechig. Sie ist das,
   woran das Auge zuerst haengenbleibt, und das geht nur einmal
   je Seite. Darum steht sie fest an den laufenden Erloesen: die
   eine Zahl, die jeden Monat wiederkommt. */
.dsh-kachel.gefuellt {
  background: var(--accent, #2f7ad6);
  border-color: var(--accent, #2f7ad6);
}
.dsh-kachel.gefuellt .dsh-ktx b { color: #fff; }
.dsh-kachel.gefuellt .dsh-ktx span,
.dsh-kachel.gefuellt .dsh-unter,
.dsh-kachel.gefuellt .dsh-hinweis { color: rgba(255,255,255,.8); }
.dsh-kachel.gefuellt .dsh-hinweis b { color: #fff; }
.dsh-kachel.gefuellt .dsh-zahl,
.dsh-kachel.gefuellt .dsh-zahl.gut { color: #fff; }
.dsh-kachel.gefuellt .dsh-zahl em { color: rgba(255,255,255,.72); }
.dsh-kachel.gefuellt .dsh-kip { background: rgba(255,255,255,.2); }
.dsh-kachel.gefuellt .dsh-kip .material-symbols-rounded { color: #fff; }
.dsh-kachel.gefuellt .dsh-delta { background: rgba(255,255,255,.22); color: #fff; }
.dsh-kachel.gefuellt .dsh-bahn > i { background: #fff; }
.dsh-kachel.gefuellt .dsh-fass button { color: rgba(255,255,255,.75); }
.dsh-kachel.gefuellt .dsh-fass button:hover { background: rgba(255,255,255,.18); color: #fff; }

/* Wer die Bewegung nicht will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .dsh-bahn > i, .dsh-leiste .dsh-bahn2 i, .dsh-saeule .sb,
  .dsh-zwei-bahn i, .dsh-blase, .dsh-strahl-block, .dsh-rollen i {
    animation: none !important;
  }
}