/* Tagwerk – Modul „Zahlen“ (Vorsilbe za-). Nur Variablen aus app.css; Kacheln nutzen .kennzahlen/.kz. */

/* ---------- Kacheln ---------- */
.kennzahlen { margin-top: 0; }
.za-kachel { cursor: default; }
.za-wert { display: flex; align-items: baseline; gap: 5px; position: relative; z-index: 1; white-space: nowrap; margin-top: 6px; }
.za-kachel .za-wert b { font-size: 38px; }
.za-wert.za-lang b { font-size: 30px; }
.za-einheit { font: 600 20px var(--zier); font-style: normal; color: var(--leise); }
.za-delta { position: relative; z-index: 1; font-size: 12.5px; font-weight: 650; min-height: 1.4em; color: var(--leise); font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.za-delta.gut { color: var(--gut); }
.za-delta.schlecht { color: var(--warn); }
.za-delta.za-ohne { font-weight: 500; }
.za-kzusatz { position: relative; z-index: 1; font-size: 12.5px; color: var(--leise); margin-bottom: 2px; }

/* ---------- 1.5: Zeitraum-Leiste (Grund-CSS; Feinschliff in gestaltung.css) ---------- */
.za-zeitraum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; min-width: 0; }
.za-zeitraum .schalterreihe { max-width: 100%; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.za-zeitraum .schalterreihe::-webkit-scrollbar { display: none; }
.za-zeitraum .schalterreihe button { flex: none; white-space: nowrap; }
.za-eigen { white-space: nowrap; max-width: 100%; }
.za-eigen.aktiv { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.za-zahlen small.za-zurueck { font-size: 11.5px; }
.za-leerzeile { margin: 4px 2px 6px; color: var(--leise); }

/* ---------- Karten ---------- */
.za-karte {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 18px 18px 16px; margin-bottom: 18px; min-width: 0;
  box-shadow: 0 1px 2px rgba(40, 28, 16, .04);
}
.za-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 12px; flex-wrap: wrap; margin-bottom: 14px; }
.za-kopf h2 { margin: 0; font: 600 20px/1.2 var(--zier); }
.za-sub { color: var(--leise); font-size: 13px; font-variant-numeric: tabular-nums; }
.za-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; align-items: start; }
@media (min-width: 900px) { .za-paar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Diagramm ---------- */
.za-diagramm { position: relative; height: 190px; margin: 6px 0 0; }
.za-zeichnung { position: absolute; inset: 0; animation: za-auf 1s cubic-bezier(.3, .7, .2, 1) both; }
@keyframes za-auf {
  from { clip-path: inset(-8px 100% -8px 0); }
  to { clip-path: inset(-8px -8px -8px 0); }
}
.za-svg { width: 100%; height: 100%; overflow: visible; }
.za-hilf { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 4; }
.za-s1 { stop-color: var(--akzent); stop-opacity: .34; }
.za-s2 { stop-color: var(--akzent); stop-opacity: 0; }
.za-linie { fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.za-spalte { fill: transparent; cursor: pointer; transition: fill .12s; outline: none; }
.za-spalte:hover, .za-spalte.aktiv { fill: color-mix(in srgb, var(--akzent) 16%, transparent); }
.za-spalte.gewaehlt { fill: color-mix(in srgb, var(--akzent) 22%, transparent); }
.za-gewaehlt { position: absolute; transform: translate(-50%, -50%); pointer-events: none; }
.za-gewaehlt i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--akzent); border: 2.5px solid var(--flaeche); box-shadow: 0 0 0 1.5px var(--akzent); }
.za-spitze { position: absolute; transform: translate(-50%, -100%); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-bottom: 2px; animation: za-erst .5s .9s both; }
.za-spitze.links { transform: translate(-8px, -100%); align-items: flex-start; }
.za-spitze.rechts { transform: translate(calc(-100% + 8px), -100%); align-items: flex-end; }
.za-spitze b { font-size: 12px; font-variant-numeric: tabular-nums; background: var(--akzent); color: var(--akzent-text); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.za-spitze i { width: 10px; height: 10px; border-radius: 50%; background: var(--flaeche); border: 2.5px solid var(--akzent); order: 2; }
@keyframes za-erst { from { opacity: 0; } }
.za-achse { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--zart); }
.za-lesung { margin-top: 10px; min-height: 1.5em; font-size: 13.5px; color: var(--leise); font-variant-numeric: tabular-nums; }

/* ---------- Ranglisten (Bestseller, Retourengründe) ---------- */
.za-rang { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.za-zeile {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border-radius: 10px; overflow: hidden;
  background: color-mix(in srgb, var(--text) 3%, transparent);
}
.za-balken {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 10px; transform-origin: left center;
  background: color-mix(in srgb, var(--akzent) 17%, transparent); animation: za-breit .7s cubic-bezier(.2, .8, .2, 1) both;
}
.za-zeile.erster .za-balken { background: color-mix(in srgb, var(--akzent) 30%, transparent); }
.za-gruende .za-balken { background: color-mix(in srgb, var(--p3) 18%, transparent); }
.za-gruende .za-zeile.erster .za-balken { background: color-mix(in srgb, var(--p3) 32%, transparent); }
@keyframes za-breit { from { transform: scaleX(0); } }
.za-platz { position: relative; z-index: 1; flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 600 14px var(--zier); background: var(--flaeche); color: var(--leise); border: 1px solid var(--linie); }
.za-zeile.erster .za-platz { background: var(--akzent); border-color: transparent; color: var(--akzent-text); }
.za-titel { position: relative; z-index: 1; flex: 1; min-width: 0; font-weight: 550; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.za-zahlen { position: relative; z-index: 1; flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-variant-numeric: tabular-nums; }
.za-zahlen b { font-size: 14px; }
.za-zahlen small { color: var(--leise); font-size: 12.5px; }
.za-satz { margin: 14px 2px 0; color: var(--leise); }
.za-satz b { color: var(--text); font-weight: 650; }

/* ---------- Lager ---------- */
.za-lagersatz { margin: -4px 2px 12px; font-weight: 550; color: var(--gut); }
.za-lagersatz.warn { color: var(--warn); }
.za-lager { list-style: none; margin: 0; padding: 0; }
.za-lzeile { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--linie); }
.za-lzeile:first-child { border-top: 0; }
.za-ltext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.za-ltext b { font-weight: 600; overflow-wrap: anywhere; }
.za-ltext b span { font-weight: 450; color: var(--leise); }
.za-ltext small { color: var(--leise); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.za-ampel {
  flex: none; display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; white-space: nowrap;
  background: color-mix(in srgb, var(--gut) 15%, transparent); color: var(--gut);
}
.za-ampel.knapp, .za-ampel.aus { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.za-ampel.aus { background: var(--warn); color: var(--akzent-text); }
.za-ampel.bald { background: color-mix(in srgb, var(--p2) 18%, transparent); color: var(--p2); }
.za-ampel.ruhend { background: color-mix(in srgb, var(--text) 7%, transparent); color: var(--leise); }
.za-alle { margin-top: 10px; }

/* ---------- Zusatz-Pille hinter dem Titel (Farbe, Damen/Herren) ---------- */
.za-zusatz {
  display: inline-block; vertical-align: 1px; margin-left: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; line-height: 1.5; white-space: nowrap;
  background: color-mix(in srgb, var(--akzent) 13%, transparent); color: color-mix(in srgb, var(--akzent) 80%, var(--text));
}
.za-zusatz.damen { background: color-mix(in srgb, #C45A9A 14%, transparent); color: #C45A9A; }
.za-zusatz.herren { background: color-mix(in srgb, #3F7FD6 14%, transparent); color: #3F7FD6; }
.za-untertitel { margin: -8px 0 12px; color: var(--leise); font-size: 13px; }
.za-titel .za-zusatz { vertical-align: 0; }

/* ---------- Offene Retouren (kompakte Karte) ---------- */
.za-retinhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.za-retzahlen { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: baseline; }
.za-retgross { color: var(--leise); }
.za-retgross b { font: 600 32px/1.1 var(--zier); color: var(--text); font-variant-numeric: tabular-nums; }
.za-rgruende { display: flex; flex-wrap: wrap; gap: 8px; flex: 1; min-width: 0; }
.za-grund {
  display: inline-flex; gap: 6px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5;
  background: color-mix(in srgb, var(--gton, var(--leise)) 15%, transparent); color: var(--gton, var(--leise));
}
.za-grund.sonst { background: color-mix(in srgb, var(--text) 7%, transparent); }
.za-grund small { font-size: inherit; opacity: .75; }
.za-zuretouren { margin-left: auto; text-decoration: none; }

/* ---------- Bild-Kachel in Bestseller- und Lager-Zeilen ---------- */
.za-bildkachel { position: relative; z-index: 1; flex: none; display: block; width: 34px; height: 34px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--text) 8%, transparent); }
.za-bild { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 480px) {
  .za-karte { padding: 16px 14px 14px; }
  .za-kachel .za-wert b { font-size: 32px; }
  .za-wert.za-lang b { font-size: 26px; }
  .za-diagramm { height: 160px; }
}