/* =========================================================
   kunden-admin-zahlen.css (03.11.2026) — Seite „Zahlen“ /kunden/admin/zahlen/. Baut auf konto-app.css auf (ld-*, zk-*);
   hier nur, was die Diagramme, die Monatstabelle und die Details brauchen. Diagramme: Gitter als Haarlinie, Achsenschrift
   in Textfarbe (nie in Reihenfarbe), Balkenfarben kommen aus dem Skript.
   ========================================================= */

.za-stand{ font-size: 13px; color: var(--ld-text-3) }
.za-zahlen{ margin-top: 4px }
.za-zahlen--jetzt .ld-zahl-wert{ font-size: 22px }
.za-punkt{ display: inline-block; width: 10px; height: 10px; margin-right: 7px; border-radius: 3px; background: var(--f); vertical-align: -1px; flex: none }
.za-punkt--muster{ background: repeating-linear-gradient(45deg, var(--f) 0 2px, color-mix(in srgb, var(--f) 28%, #fff) 2px 4px) }

.za-hinweise{ padding: 10px 14px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand); font-size: 14px; color: var(--ld-text-2) }
.za-hinweise p{ margin: 0 }

.za-karte{ display: flex; flex-direction: column; gap: 10px; min-width: 0 }
.za-karte-kopf h2{ margin: 0; font-size: 17px; font-weight: 600; color: var(--ld-text) }
.za-karte-kopf p{ margin: 2px 0 0; font-size: 13.5px; color: var(--ld-text-3) }
.za-zwei{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }

.za-diagramm{ position: relative; min-width: 0 }
.za-legende{ display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 6px; font-size: 13px; color: var(--ld-text-2) }
.za-legende span{ display: inline-flex; align-items: center }
/* .ld-app svg (konto-app.css) macht jedes SVG zum 15-px-Symbol mit Kontur — die Diagramme davon ausnehmen */
.ld-app .za-svg{ display: block; width: 100%; height: auto; flex: none; overflow: visible; fill: none; stroke: none; stroke-width: 0 }
.za-gitter{ stroke: var(--ld-rand); stroke-width: 1 }
.za-achse{ stroke: var(--ld-rand-stark); stroke-width: 1 }
.za-wert, .za-monat-text{ font-size: 11px; fill: var(--ld-text-3); font-variant-numeric: tabular-nums }
.za-linie{ fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round }
.za-endpunkt{ stroke: var(--ld-flaeche, #fff); stroke-width: 2 }
.za-treffer{ fill: transparent; cursor: pointer; outline: none }
.za-treffer:hover, .za-treffer:focus-visible{ fill: color-mix(in srgb, var(--ld-text) 5%, transparent) }
.za-treffer:focus-visible{ stroke: var(--ld-link); stroke-width: 1.5 }

.za-tip{ position: fixed; z-index: 60; display: flex; flex-direction: column; gap: 3px; min-width: 190px; padding: 9px 12px; border-radius: 10px;
  background: var(--ld-flaeche, #fff); border: 1px solid var(--ld-rand-stark); box-shadow: 0 8px 24px rgba(11,13,22,.14); font-size: 13px;
  color: var(--ld-text); pointer-events: none }
.za-tip b{ font-weight: 600; margin-bottom: 2px }
.za-tip-zeile{ display: flex; align-items: center; gap: 0; color: var(--ld-text-2) }
.za-tip-zeile em{ margin-left: auto; padding-left: 14px; font-style: normal; font-weight: 600; color: var(--ld-text); font-variant-numeric: tabular-nums }

.za-tabelle-rahmen{ overflow-x: auto; margin: 0 -4px }
.za-tabelle{ width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums }
.za-tabelle th, .za-tabelle td{ padding: 9px 8px; border-bottom: 1px solid var(--ld-rand); text-align: left; white-space: nowrap }
.za-tabelle thead th{ font-size: 12.5px; font-weight: 600; color: var(--ld-text-3) }
.za-tabelle .za-z{ text-align: right }
.za-tabelle td small{ margin-left: 6px; font-size: 12px; color: var(--ld-text-3) }
.za-tabelle tfoot th, .za-tabelle tfoot td{ font-weight: 600; border-bottom: 0; border-top: 1px solid var(--ld-rand-stark) }
.za-tabelle tr.za-an th, .za-tabelle tr.za-an td{ background: var(--ld-flaeche-2) }
.za-monat{ padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--ld-link); cursor: pointer; text-align: left }
.za-monat:hover{ text-decoration: underline }

.za-details{ padding-top: 6px; border-top: 1px solid var(--ld-rand) }
.za-details-kopf{ display: flex; align-items: baseline; justify-content: space-between; gap: 12px }
.za-details-kopf h3{ margin: 0; font-size: 16px; font-weight: 600 }
.za-gruppen{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-top: 10px }
.za-gruppe h4{ display: flex; align-items: center; margin: 0 0 6px; font-size: 14px; font-weight: 600 }
.za-gruppe h4 span{ margin-left: auto; font-variant-numeric: tabular-nums }
.za-gruppe ul{ margin: 0; padding: 0; list-style: none }
.za-gruppe li{ display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "tag wer betrag" "tag art betrag"; gap: 0 10px;
  padding: 7px 0; border-bottom: 1px solid var(--ld-rand); font-size: 14px }
.za-gruppe li:last-child{ border-bottom: 0 }
.za-tag{ grid-area: tag; color: var(--ld-text-3); font-variant-numeric: tabular-nums }
.za-wer{ grid-area: wer; min-width: 0; overflow-wrap: anywhere }
.za-wer small{ display: block; color: var(--ld-text-3); font-size: 12.5px }
.za-art{ grid-area: art; font-size: 12.5px; color: var(--ld-text-3) }
.za-betrag{ grid-area: betrag; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right }
.za-leer{ margin: 0; font-size: 13.5px; color: var(--ld-text-3) }

.za-erklaerung{ font-size: 14px; color: var(--ld-text-2) }
.za-erklaerung summary{ cursor: pointer; font-weight: 600; color: var(--ld-text) }
.za-erklaerung ul{ margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px }

@media (max-width: 1100px){ .za-zwei{ grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 720px){
  .za-gruppen{ grid-template-columns: minmax(0, 1fr) }
  .za-tabelle{ font-size: 13px }
  .za-tabelle th, .za-tabelle td{ padding: 8px 6px }
}