/* Boss Cockpit · Quick-View (Markus 16.09.2026) */

/* Kontostände als Karten. Die Summe ist die Zahl, auf die der Blick
   zuerst fallen soll -- sie steht abgesetzt und schwerer. */
.qv-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.qv-card {
  border: 1px solid var(--bd, #e7e3dc);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg, #fff);
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.qv-card.is-link { cursor: pointer; transition: border-color .12s, transform .12s; }
.qv-card.is-link:hover { border-color: var(--tx-2, #6b6560); transform: translateY(-1px); }
.qv-card.is-link:focus-visible { outline: 2px solid var(--ac-0, #1A7B52); outline-offset: 2px; }

.qv-card-k {
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--tx-2, #6b6560);
}
.qv-card-v {
  font-size: clamp(20px, 2.4vw, 27px);
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow-wrap: break-word;
}
.qv-card-v.is-neg,
.qv-card-summe .qv-card-v.is-neg { color: var(--er, #c62828); }
.qv-card-v.is-pos,
.qv-card-summe .qv-card-v.is-pos { color: var(--ok, #1A7B52); }
/* Auf der dunklen Summen-Card braucht Gruen mehr Helligkeit, sonst
   verschwindet es im Hintergrund. */
.qv-card-summe .qv-card-v.is-pos { color: #6FD6A0; }
.qv-card-summe .qv-card-v.is-neg { color: #FF8A80; }
.fz-kpi-v.is-neg { color: var(--er, #c62828); }
.fz-kpi-v.is-pos { color: var(--ok, #1A7B52); }
.qv-card-s { font-size: 12px; color: var(--tx-2, #6b6560); }

/* Summen-Karte: abgesetzt, damit sie sich von den Einzelkonten löst. */
.qv-card-summe {
  background: var(--tx, #1C1917);
  border-color: var(--tx, #1C1917);
  color: #fff;
}
.qv-card-summe .qv-card-k,
.qv-card-summe .qv-card-s { color: rgba(255,255,255,.72); }
.qv-card-summe .qv-card-v { font-size: clamp(22px, 2.8vw, 31px); font-weight: 600; }

@media (max-width: 480px) {
  .qv-cards { grid-template-columns: 1fr; }
  .qv-card { padding: 13px 15px; }
}

/* Umschalter für den Stichtag */
.qv-switch { display: flex; gap: 6px; flex-wrap: wrap; }
.qv-switch-b {
  padding: 6px 14px;
  border: 1px solid var(--bd, #e7e3dc);
  border-radius: 999px;
  background: var(--bg, #fff);
  color: var(--tx-2, #6b6560);
  font: inherit; font-size: 13px; cursor: pointer;
}
.qv-switch-b:hover { border-color: var(--tx-2, #6b6560); }
.qv-switch-b.is-on {
  background: var(--tx, #1C1917);
  border-color: var(--tx, #1C1917);
  color: #fff; font-weight: 600;
}
@media (max-width: 640px) {
  .qv-switch-b { flex: 1 1 calc(50% - 6px); text-align: center; }
}

/* Zahlen fuehren auf die Flaeche, die sie herleitet (Markus 16.09.2026):
   statt eines Erklaer-Tooltips in der Quick-View. */
.qv-zahl.is-link { cursor: pointer; }
.qv-zahl.is-link:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.qv-zahl.is-link:focus-visible { outline: 2px solid var(--ac-0, #1A7B52); outline-offset: 3px; border-radius: 4px; }