/* zeugnis.css — [NEUE-VERSION] (Fenster ZU, Auftrag 135): Fenster «Zeugnis-Übersicht» und Blatt je Kind / Klassenübersicht.
 * Nur Klassen .zg-…; die Druckhülle und ihre Regeln kommen unverändert aus css/beurteilen-druck.css und css/blatt-druck.css.
 * Ampel immer Wort + Zeichen (● ▲ ■ ◌), die Farbe ist nur Zugabe (schwarz-weiss lesbar). Tippflächen ≥ 48 px. */

.zg-fenster { box-sizing: border-box; width: min(1180px, calc(100vw - 16px)); max-width: none; height: calc(100vh - 16px); max-height: none;
  margin: 8px auto; padding: 0; border: 1px solid #999; border-radius: 10px; background: #fff; color: #111; overflow: hidden; }
.zg-fenster[open] { display: flex; flex-direction: column; }
.zg-fenster::backdrop { background: rgba(0, 0, 0, 0.35); }
.zg-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid #ddd; }
.zg-kopf h2 { margin: 0 auto 0 0; font-size: 1.15rem; min-width: 0; overflow-wrap: anywhere; }
.zg-wahl { display: inline-flex; align-items: center; gap: 6px; }
.zg-wahl[hidden] { display: none; }
.zg-wahl select, .zg-wahl input { min-height: 48px; font-size: 1rem; padding: 0 8px; box-sizing: border-box; }
.zg-knopf { min-height: 48px; min-width: 48px; padding: 0 14px; font: inherit; font-size: 1rem; border: 1px solid #888; border-radius: 8px; background: #f6f6f6; color: #111; cursor: pointer; }
.zg-knopf:disabled { opacity: 0.45; cursor: default; }
.zg-knopf:focus-visible, .zg-kind:focus-visible, .zg-m-kind:focus-visible { outline: 3px solid #1f4e8c; outline-offset: 2px; }
.zg-druck { position: relative; }
.zg-druck__menue { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; display: flex; flex-direction: column; gap: 4px; padding: 6px;
  background: #fff; border: 1px solid #999; border-radius: 8px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2); min-width: 260px; }
.zg-druck__menue[hidden] { display: none; }
.zg-druck__menue .zg-knopf { text-align: left; background: #fff; }
.zg-status { margin: 0; padding: 6px 12px; color: #444; font-size: 0.95rem; border-bottom: 1px solid #eee; }
.zg-status--fehler { color: #8b0000; font-weight: bold; }
.zg-rumpf { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); }
.zg-seite { min-height: 0; overflow: auto; border-right: 1px solid #ddd; padding: 8px; }
.zg-filter { display: flex; align-items: center; gap: 8px; min-height: 48px; font-size: 0.95rem; }
.zg-filter input { width: 22px; height: 22px; flex: none; }
.zg-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.zg-kind { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; min-height: 48px; padding: 6px 8px; box-sizing: border-box;
  font: inherit; text-align: left; border: 1px solid #ccc; border-radius: 8px; background: #fff; color: #111; cursor: pointer; }
.zg-kind[aria-current="true"] { border: 2px solid #1f4e8c; background: #eef3fa; }
.zg-kind__name { font-weight: bold; overflow-wrap: anywhere; }
.zg-reihe { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 0.85rem; }
.zg-punkt { white-space: nowrap; }
.zg-punkt__zeichen { font-size: 1rem; }
.zg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.zg-haupt { min-width: 0; min-height: 0; overflow: auto; padding: 8px 12px 16px; }
.zg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.zg-leer { color: #555; }
.zg-kindname { margin: 4px 0 8px; font-size: 1.2rem; }

/* Ampel: Zeichen und Wort tragen die Bedeutung, die Farbe ist nur Zugabe */
.zg-punkt--gruen .zg-punkt__zeichen, .zg-ampel--gruen span, .zg-m-zelle--gruen .zg-m-zeichen { color: #1b5e20; }
.zg-punkt--orange .zg-punkt__zeichen, .zg-ampel--orange span, .zg-m-zelle--orange .zg-m-zeichen { color: #a04a00; }
.zg-punkt--rot .zg-punkt__zeichen, .zg-ampel--rot span, .zg-m-zelle--rot .zg-m-zeichen { color: #8b0000; }
.zg-punkt--grau .zg-punkt__zeichen, .zg-ampel--grau span, .zg-m-zelle--grau .zg-m-zeichen { color: #555; }

.zg-tabelle, .zg-matrix { border-collapse: collapse; width: 100%; font-size: 0.95rem; }
.zg-tabelle th, .zg-tabelle td, .zg-matrix th, .zg-matrix td { border: 1px solid #bbb; padding: 4px 6px; text-align: left; vertical-align: top; }
.zg-tabelle thead th, .zg-matrix thead th { background: #f0f0f0; }
.zg-tabelle .zg-r { text-align: right; white-space: nowrap; }
.zg-tabelle .zg-gesamt th, .zg-tabelle .zg-gesamt td { font-weight: bold; border-top: 2px solid #555; }
.zg-balken { margin: 10px 0; max-width: 100%; overflow: hidden; }
.zg-balken svg { max-width: 100%; height: auto; }
.zg-saetze { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-weight: bold; }
.zg-saetze textarea { box-sizing: border-box; width: 100%; min-height: 96px; font: inherit; font-weight: normal; padding: 8px; }
.zg-hinweis, .zg-grundlage { font-size: 0.9rem; color: #444; margin: 4px 0; }
.zg-hausform { color: #8b0000; margin: 2px 0; }
.zg-hausform:empty { display: none; }
.zg-matrix .zg-m-name { min-width: 120px; }
.zg-m-kind { min-height: 48px; width: 100%; padding: 0 6px; font: inherit; font-weight: bold; text-align: left; border: 0; background: none; color: #1f4e8c; cursor: pointer; text-decoration: underline; }
.zg-m-zelle { min-width: 84px; }
.zg-m-wort { font-size: 0.85rem; }
.zg-m-zahl { display: block; font-size: 0.8rem; color: #444; white-space: nowrap; }
.zg-m-summe th, .zg-m-summe td { font-size: 0.85rem; font-weight: bold; border-top: 2px solid #555; }

@media (max-width: 900px) {
  .zg-rumpf { grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); }
}

/* Blatt je Kind und Klassenübersicht im Druck (innerhalb der Hülle #beurteilen-druck) */
.zg-blatt-druck .zg-tabelle { font-size: 9.5pt; }
.zg-blatt-druck .zg-tabelle th, .zg-blatt-druck .zg-tabelle td { padding: 1mm 1.5mm; border-color: #000; }
.zg-blatt-druck .zg-saetze-druck p { margin: 0 0 1.5mm; font-size: 10.5pt; line-height: 1.35; }
.zg-blatt-druck .zg-grundlage { font-size: 9pt; color: #000; }
.zg-blatt-druck h2 { font-size: 11pt; margin: 3mm 0 1.5mm; }
.zg-quer-druck .zg-matrix { font-size: 8.5pt; table-layout: fixed; }
.zg-quer-druck .zg-matrix th, .zg-quer-druck .zg-matrix td { padding: 0.8mm 1mm; border-color: #000; }
.zg-quer-druck .zg-m-zelle { min-width: 0; }
.zg-quer-druck .zg-matrix th.zg-m-name { width: 42mm; min-width: 0; }
.zg-quer-druck .zg-m-wort { font-size: 7.5pt; }
.zg-quer-druck .zg-m-zahl { font-size: 7.5pt; color: #000; }
.zg-quer-druck .zg-legende { font-size: 8.5pt; margin: 2mm 0; }
@media print {
  .zg-fenster { display: none !important; }
  .zg-blatt-druck .zg-ampel span, .zg-quer-druck .zg-m-zeichen { color: #000 !important; }
}