/* =========================================================
   kundenportal-zahlen.css (12.11.2026) — Seite „Geschäftszahlen“ im Kundenportal und Reiter im Kunden-Admin
   René 12.11.2026: eigene Seite mit Erklärung, warum wir die Zahlen brauchen, Privatmodus zum Zuschalten, Mitarbeiter-Rechte in den
   Einstellungen. Logik: /js/kundenportal-zahlen.js. Eigene Klassen mit Präfix gz- (Regression 17.09.2026: geteilte Stildateien
   brachen andere Seiten) — hier wird keine Regel einer anderen Seite verändert. Farben aus konto-app.css (--ld-*, --zk-*).
   ========================================================= */
.gz{ display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.gz-karte{ display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 18px 20px; border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten) }
.gz-karte h2{ margin: 0; font-family: var(--zk-titel); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ld-text) }
.gz-karte p{ margin: 0 }
.gz-klein{ margin: 0; font-size: 14px; line-height: 1.5; color: var(--ld-text-2) }

/* ---------- Kopf mit Privatmodus ---------- */
.gz-kopf .gz-schalter{ margin-left: auto; align-self: center }
.gz-admin-kopf{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px }
.gz-admin-kopf .gz-klein{ flex: 1 1 320px }

.gz-schalter{
  display: inline-flex; align-items: center; gap: 10px; min-height: 40px; box-sizing: border-box; padding: 6px 14px 6px 8px;
  border: 1px solid var(--ld-rand-stark); border-radius: 999px; background: var(--ld-flaeche); color: var(--ld-text);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.gz-schalter:hover{ border-color: #b8bdcb }
.gz-schalter:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.gz-schalter:disabled{ opacity: .55; cursor: default }
.gz-schalter-bahn{ position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: #cdd2de; transition: background-color .2s ease }
.gz-schalter-knopf{ position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(11,13,22,.25); transition: transform .2s ease }
.gz-schalter[aria-checked="true"] .gz-schalter-bahn{ background: var(--zk-akzent) }
.gz-schalter[aria-checked="true"] .gz-schalter-knopf{ transform: translateX(16px) }
.gz-schalter-text{ display: inline-flex; align-items: center; gap: 6px }
.gz-schalter--klein{ min-height: 36px; padding: 4px 12px 4px 6px; font-size: 13.5px }

.gz-privat-leiste{
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--zk-ring); background: var(--zk-akzent-hell); color: var(--ld-text); font-size: 14.5px; line-height: 1.5;
}
.gz-privat-leiste > span{ flex: 1 1 260px }
.gz-privat-leiste > svg{ width: 18px; height: 18px; color: var(--zk-akzent-h) }
.gz-privat-leiste .gz-alle{ width: auto; display: inline-flex; align-items: center; gap: 8px }

/* ---------- Warum ---------- */
.gz-gruende{ margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; counter-reset: gz }
.gz-gruende li{ position: relative; padding-left: 36px; font-size: 15px; line-height: 1.55; color: var(--ld-text-2) }
.gz-gruende li b{ color: var(--ld-text) }
.gz-gruende li::before{
  counter-increment: gz; content: counter(gz); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; background: var(--zk-akzent-hell); color: var(--zk-akzent-h); font-size: 13px; font-weight: 700;
}
.gz-info{ display: grid; gap: 8px; padding: 12px 14px; border-radius: 12px; background: var(--ld-flaeche-2); border: 1px solid var(--ld-rand) }
.gz-info p{ font-size: 14.5px; line-height: 1.55; color: var(--ld-text-2) }
.gz-info b{ color: var(--ld-text) }

/* ---------- Lohnt-sich-Grenze ---------- */
.gz-ergebnis{ background: var(--zk-akzent-hell); border-color: var(--zk-ring) }
.gz-ergebnis--leer{ background: var(--ld-flaeche) ; border-color: var(--ld-rand) }
.gz-ergebnis--rot{ background: #fdf0f0; border-color: #f1c0c0 }
.gz-ergebnis-marke{ font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--zk-akzent-h) }
.gz-ergebnis--rot .gz-ergebnis-marke{ color: #a51c1c }
.gz-ergebnis-satz{ font-size: 20px; font-weight: 600; line-height: 1.4; color: var(--ld-text) }
.gz-gross{ font-family: var(--zk-titel); font-size: 30px; font-weight: 700; line-height: 1.1; color: var(--zk-akzent-h); font-variant-numeric: tabular-nums; white-space: nowrap }
.gz-hinweis{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; line-height: 1.5; color: var(--ld-text-2) }
.gz-rechenweg{ border-top: 1px solid var(--zk-ring); padding-top: 10px }
.gz-ergebnis--rot .gz-rechenweg{ border-top-color: #f1c0c0 }
.gz-rechenweg summary{ cursor: pointer; width: fit-content; font-size: 14.5px; font-weight: 600; color: var(--ld-link) }
.gz-rechenweg summary:focus-visible{ outline: 2px solid var(--zk-akzent); outline-offset: 2px; border-radius: 4px }
.gz-rechenweg ol{ margin: 10px 0 8px; padding-left: 22px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; color: var(--ld-text) }
.gz-formel{ margin-top: 6px !important; font-size: 13.5px; line-height: 1.5; color: var(--ld-text-2); overflow-wrap: anywhere }
.gz-rechenweg .gz-klein{ margin-top: 6px }

/* ---------- Formular ---------- */
.gz-form{ display: flex; flex-direction: column; gap: 18px; min-width: 0 }
.gz-felder{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 22px }
.gz-feld{ display: flex; flex-direction: column; gap: 6px; min-width: 0 }
.gz-feld[hidden]{ display: none }
.gz-feld--text, .gz-feld--laender{ grid-column: 1 / -1 }
.gz-feld > label, .gz-laender legend{ font-size: 13.5px; font-weight: 600; color: var(--ld-text-2) }
.gz-eingabe{ position: relative; display: block; min-width: 0 }
.gz-feld input, .gz-feld select, .gz-feld textarea{
  width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px; border-radius: 12px; margin: 0;
  background: #fff; border: 1px solid var(--ld-rand-stark); color: var(--ld-text); font: inherit; font-size: 16px; line-height: 1.45;
}
.gz-feld textarea{ resize: vertical; min-height: 72px }
.gz-mit-einheit input{ padding-right: 38px }
.gz-mit-einheit--lang input{ padding-right: 54px }
.gz-einheit{ position: absolute; right: 14px; top: 0; height: 44px; display: flex; align-items: center; font-style: normal; color: var(--ld-text-3); pointer-events: none }
.gz-feld input:focus, .gz-feld select:focus, .gz-feld textarea:focus{ outline: none; border-color: var(--zk-akzent); box-shadow: 0 0 0 3px rgba(106,44,216,.18) }
.gz-feld input[readonly], .gz-feld textarea[readonly], .gz-feld select:disabled{ border-style: dashed; color: var(--ld-text-2); opacity: 1 }
.gz-hilfe{ font-size: 13px; line-height: 1.45; color: var(--ld-text-3) }
.gz-fehler{ font-size: 13px; font-weight: 600; color: #a51c1c }
.gz-feld--fehler input, .gz-feld--fehler select, .gz-feld--fehler textarea{ border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12) }

.gz-laender{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0 }
.gz-laender legend{ width: 100%; margin-bottom: 6px; padding: 0 }
.gz-wahl{ position: relative; cursor: pointer }
.gz-wahl input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer }
.gz-wahl span{ display: inline-block; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--ld-rand-stark); background: #fff; color: var(--ld-text-2); font-size: 14.5px }
.gz-wahl input:checked + span{ background: var(--zk-akzent-hell); border-color: var(--zk-akzent); color: var(--ld-text); font-weight: 600 }
.gz-wahl input:focus-visible + span{ outline: 2px solid var(--zk-akzent); outline-offset: 2px }
.gz-wahl input:disabled{ cursor: default }

.gz-fuss{
  position: sticky; bottom: 12px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px 12px 20px;
  border-radius: 14px; background: var(--ld-flaeche); border: 1px solid var(--ld-rand); box-shadow: var(--zk-schatten-hoch);
}
.gz-stand{ margin: 0; flex: 1 1 240px; font-size: 13.5px; color: var(--ld-text-2) }
.gz-meldung{ margin: 0; font-size: 14px }
.gz-meldung:empty{ display: none }
.gz-fuss .ld-neu-knopf{ margin-left: auto }

/* ---------- Admin: Verlauf ---------- */
.gz-verlauf{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.gz-verlauf li{ display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 14px; line-height: 1.45; padding-bottom: 8px; border-bottom: 1px solid var(--ld-rand) }
.gz-verlauf li:last-child{ border-bottom: 0; padding-bottom: 0 }
.gz-verlauf-wann{ color: var(--ld-text-3); font-variant-numeric: tabular-nums }
.gz-verlauf-was{ flex-basis: 100%; color: var(--ld-text-2) }

/* ---------- Einstellungen → Mitarbeiter ---------- */
.gz-einst h2{ margin: 0 }
.gz-leute{ margin: 0; padding: 0; list-style: none; display: grid; gap: 8px }
.gz-person{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--ld-rand); background: var(--ld-flaeche) }
.gz-person-name{ display: flex; flex-direction: column; min-width: 0; flex: 1 1 200px }
.gz-person-name small{ color: var(--ld-text-3); font-size: 13px; overflow-wrap: anywhere }
.gz-person--aus{ opacity: .7 }
.gz-leer{ margin: 0 }

/* ---------- Privatmodus: verdecken ----------
   Zahlen und Texte werden durchsichtig, darüber stehen Punkte. Ein angetipptes Feld (gz-offen, 10 s), ein Feld mit dem Cursor darin
   (:focus-within) oder „Alle kurz zeigen“ (gz-alle-offen) zeigt die Werte. Nur der Bildschirm — gespeichert und ausgewertet wird wie immer. */
.gz-geheim{ border-radius: 6px }
.gz-privat:not(.gz-alle-offen) .gz-geheim:not(.gz-offen){
  position: relative; display: inline-block; min-width: 3.6em; color: transparent !important; background: rgba(106,44,216,.10);
  cursor: pointer; user-select: none; -webkit-user-select: none; vertical-align: baseline;
}
.gz-privat:not(.gz-alle-offen) .gz-geheim:not(.gz-offen)::after{
  content: "••••"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ld-text-2); font-family: var(--zk-schrift); font-size: 15px; font-weight: 700; letter-spacing: .14em;
}
.gz-privat:not(.gz-alle-offen) .gz-geheim--block:not(.gz-offen){ display: block; min-height: 1.5em }
.gz-privat:not(.gz-alle-offen) .gz-geheim--block:not(.gz-offen)::after{ content: "••••  ••••  ••••"; justify-content: flex-start; padding-left: 8px }
.gz-privat:not(.gz-alle-offen) .gz-verdeckbar.gz-voll:not(.gz-offen):not(:focus-within) input,
.gz-privat:not(.gz-alle-offen) .gz-verdeckbar.gz-voll:not(.gz-offen):not(:focus-within) textarea,
.gz-privat:not(.gz-alle-offen) .gz-verdeckbar.gz-voll:not(.gz-offen):not(:focus-within) select{ color: transparent; -webkit-text-fill-color: transparent; text-shadow: none }
.gz-privat:not(.gz-alle-offen) .gz-verdeckbar.gz-voll:not(.gz-offen):not(:focus-within)::after{
  content: "••••"; position: absolute; left: 15px; top: 0; height: 44px; display: flex; align-items: center; pointer-events: none;
  color: var(--ld-text-2); font-size: 15px; font-weight: 700; letter-spacing: .16em;
}
.gz-privat:not(.gz-alle-offen) .gz-eingabe--text.gz-voll:not(.gz-offen):not(:focus-within)::after{ top: 10px; height: auto }
.gz-privat .gz-verdeckbar{ cursor: pointer }

@media (max-width: 1023px){
  .gz-fuss{ bottom: calc(76px + env(safe-area-inset-bottom)) }
}
@media (max-width: 640px){
  .gz-felder{ grid-template-columns: minmax(0, 1fr) }
  .gz-karte{ padding: 16px }
  .gz-ergebnis-satz{ font-size: 18px }
  .gz-gross{ font-size: 26px }
  .gz-kopf .gz-schalter{ margin-left: 0 }
  .gz-fuss{ padding: 12px 14px }
  .gz-fuss .ld-neu-knopf{ flex: 1 1 100%; margin-left: 0 }
}
@media (prefers-reduced-motion: reduce){
  .gz-schalter-bahn, .gz-schalter-knopf{ transition: none }
}