/* ══ Heute am Mac: eine Monatskarte (M10, seit 25.10.2026) ══════════════════
   Gebaut von heute-monat.js. Jede Regel hängt an html.mac (mac-frueh.js): am
   iPhone, am iPad, in der klassischen Ansicht und für die Rolle buchhalter
   greift keine. Die Karte nutzt .kpi-karte, .progress-bar und .ge-split-bar,
   damit jede Farbwelt sie so zeichnet wie die Blöcke, die sie ersetzt.
   Warum so: docs/cockpit.md, „Die Startseite neu geordnet“, „Am Mac“.       */

/* Die drei Monatsblöcke weichen der Karte: „Monatliche Übersicht“ und
   „Geldeingang“ ganz (data-mac-aus), „Umsatz & Auslastung“ bis auf die Karte
   (data-mac-monat ist ihr Gastgeber). „Details“ (.mac-monat-offen) holt alles
   an seinen Platz zurück. Beim Anordnen zeigt der Gastgeber nur seinen Griff. */
html.mac #tab-uebersicht:not(.mac-monat-offen) > [data-mac-aus],
html.mac #tab-uebersicht:not(.mac-monat-offen) > [data-mac-monat] > :not(.mac-monat, .kachel-griff) { display: none !important; }
/* Anordnen zeigt sonst jede Kachel als Griffleiste; diese haben am Mac keinen Griff (kacheln.js). */
html.mac body.kacheln-anordnen #tab-uebersicht > [data-mac-aus] { display: none !important; }
html.mac #tab-uebersicht.mac-monat-offen > [data-mac-monat] > .mac-monat { margin-bottom: var(--sp-5); }

/* Bühne setzt „Dieser Monat.“ als Band vor die erste sichtbare Kachel der
   Gruppe (fwBuehne). Nur wenn das die Karte ist, wäre ihr Titel doppelt; steht
   eine andere davor (eigene Reihenfolge), behält die Karte ihren Titel. */
html.mac[data-skin="buehne"] #tab-uebersicht > .fw-band[data-band="monat"] + [data-mac-monat] > .mac-monat > .section-title { display: none; }

/* ── Karte: drei Spalten, darunter eine Zeile ─────────────────────────── */
html.mac .mac-monat-karte { gap: var(--sp-4); }
html.mac .mac-monat-spalten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
html.mac .mac-monat-spalte {
  display: flex; flex-direction: column; gap: var(--sp-1);
  min-width: 0; padding: 0 var(--sp-5);
}
html.mac .mac-monat-spalte:first-child { padding-left: 0; }
html.mac .mac-monat-spalte:last-child { padding-right: 0; }
html.mac .mac-monat-spalte + .mac-monat-spalte { border-left: 1px solid var(--border); }
html.mac .mac-monat-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
html.mac .mac-monat-wert {
  font-size: var(--fs-2xl); font-weight: var(--fw-semi); line-height: 1.15;
  letter-spacing: var(--ls-tight); font-variant-numeric: tabular-nums; color: var(--text);
}
html.mac .mac-monat-sub { font-size: var(--fs-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
html.mac .mac-monat-teil { white-space: nowrap; }
html.mac .mac-monat-balken { margin-top: var(--sp-2); }
/* Eine Füllfarbe für alle drei Balken, die des Tacho-Rings der Farbwelt: Die
   Wertung steht im Text (Prozent in Ampelfarbe, ±Punkte, Überfälliges in Rot),
   nicht in drei Farblogiken (Ampel, Marke, Grün des Geldeingangs). */
html.mac .mac-monat-karte .mac-monat-balken > .progress-bar,
html.mac .mac-monat-karte .mac-monat-balken > span { background: var(--fw-ring, var(--brand)); }
/* Der Markt als Strich auf dem Balken, wie die Marke am Tacho. Der Hof in
   Kartenfarbe hält ihn sichtbar, wenn er auf der Füllung steht. */
html.mac .mac-monat-markt { position: relative; overflow: visible; }
html.mac .mac-monat-markt::after {
  content: ''; position: absolute; left: var(--markt); top: -3px; bottom: -3px;
  width: 2px; margin-left: -1px; border-radius: var(--r-full); background: var(--text);
  box-shadow: 0 0 0 2px var(--bg-card);
}
html.mac .mac-monat-gut      { color: var(--good-ink); }
html.mac .mac-monat-mittel   { color: var(--warn-ink); }
html.mac .mac-monat-schlecht { color: var(--crit-ink); }
html.mac .mac-monat-warn { font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--crit-ink); }

html.mac .mac-monat-fuss {
  display: flex; align-items: center; gap: var(--sp-2);
  padding-top: var(--sp-3); border-top: 1px solid var(--border);
  font-size: var(--fs-sm); color: var(--text-muted);
}
html.mac .mac-monat-gewinn { margin-right: auto; font-variant-numeric: tabular-nums; }
html.mac .mac-monat-gewinn b { font-weight: var(--fw-semi); color: var(--text); }
html.mac .mac-monat-gewinn b.mac-monat-schlecht { color: var(--crit-ink); }
html.mac .mac-monat-fuss a.btn { text-decoration: none; }

/* ── Monatswahl oben in der Auswertung (aus der Übersicht umgezogen) ───── */
html.mac .mac-monat-wahl {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3);
  font-size: var(--fs-sm); color: var(--text-muted);
}