/* KI-MARO Model Hub · Stile der ASME-Zeichnungsanalyse (SuS)
   Gehoert zu assets/zeichnungsleser.js; sitzt auf der aufgeklappten Karte des
   Werkzeugs asme_readiness. Praefix zl-; Farbregel wie ueberall: Gruen nur auf
   Gerechnetem, Blau + Raute fuer den KI-Leseschritt. */

.zl-bereich{display:flex;flex-direction:column;gap:9px;border-top:1px solid var(--rand);
  margin-top:6px;padding-top:10px}

/* Mit Vorschau nutzt die Karte die volle Rasterbreite: links Ablauf und
   Ergebnis, rechts die Original-Zeichnung — zum Kontrollieren vor der Analyse
   und zum Nebeneinander-Lesen danach. */
.wz-grid > .wz-karte:has(.zl-spalten.mit-vorschau){max-width:none}
.zl-spalten{display:flex;flex-direction:column;gap:9px}
.zl-spalten.mit-vorschau{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,46%);
  gap:14px;align-items:start}
@media (max-width:1100px){ .zl-spalten.mit-vorschau{display:flex;flex-direction:column} }
.zl-links{display:flex;flex-direction:column;gap:9px;min-width:0}
.zl-rechts{position:sticky;top:10px;display:flex;flex-direction:column;gap:6px;
  background:#fff;border:1px solid var(--rand);border-radius:10px;padding:8px}
.zl-v-kopf{font-size:12px;font-weight:700;display:flex;align-items:baseline;gap:8px;
  flex-wrap:wrap}
.zl-v-pdf{width:100%;height:72vh;border:0;border-radius:6px;background:#f4f4f4}
.zl-v-bild{width:100%;height:auto;max-height:72vh;object-fit:contain;border-radius:6px}

.zl-frage{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--goldf);border:1px solid var(--goldrand);border-radius:10px;
  padding:9px 12px;font-size:13px}
.zl-frage-knoepfe{display:flex;gap:8px;margin-left:auto}
.zl-kopfzeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.zl-label{font-size:11.5px;color:var(--mittelgrau);font-weight:600;white-space:nowrap}
.zl-ki{color:var(--dt-ki);font-size:11px}
.zl-select{font:inherit;font-size:12.5px;padding:4px 6px;border:1px solid var(--rand);
  border-radius:7px;background:#fff;max-width:220px}
.zl-hinweis{font-size:11.5px;color:var(--mittelgrau)}
.zl-lauf{font-size:12.5px;color:var(--dt-ki);background:var(--dt-ki-bg);
  border:1px solid var(--dt-ki-rand);border-radius:8px;padding:6px 10px}

.zl-ergebnis{display:flex;flex-direction:column;gap:9px;border:1px solid var(--dt-gruen-rand);
  border-radius:10px;background:var(--dt-gruen-bg);padding:10px 12px}
.zl-e-kopf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zl-titel{font-weight:800;font-size:14.5px}

.zl-balkenzeile{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--mittelgrau)}
.zl-balken{flex:1;height:8px;background:#fff;border:1px solid var(--rand);border-radius:99px;
  overflow:hidden;min-width:120px}
.zl-balken-f{height:100%;border-radius:99px}
.zl-balken-f.ok{background:var(--dt-gruen)}
.zl-balken-f.mittel{background:var(--goldd)}
.zl-balken-f.kritisch{background:var(--rot)}

.zl-kacheln{display:flex;gap:8px;flex-wrap:wrap}
.zl-kachel{background:#fff;border:1px solid var(--rand);border-radius:9px;
  padding:6px 14px;display:flex;flex-direction:column;align-items:center;min-width:88px}
.zl-kachel b{font-size:17px}
.zl-kachel span{font-size:10.5px;color:var(--mittelgrau)}
.zl-kachel.rot{border-color:var(--rot)}
.zl-kachel.rot b{color:var(--rot)}

.zl-tabelle{border-collapse:collapse;font-size:12.5px;background:#fff;width:100%}
.zl-tabelle th,.zl-tabelle td{border:1px solid var(--rand);padding:4px 8px;text-align:left}
.zl-tabelle th{font-size:11px;color:var(--mittelgrau);font-weight:700;background:var(--goldf)}
.zl-para{font-family:var(--mono, monospace);font-weight:700;white-space:nowrap}
.zl-chip{font-size:10.5px;font-weight:700;border-radius:5px;padding:2px 7px;white-space:nowrap}
.zl-chip.nach{background:var(--goldf);color:var(--goldd);border:1px solid var(--goldrand)}
.zl-chip.fem{background:var(--dt-ki-bg);color:var(--dt-ki);border:1px solid var(--dt-ki-rand)}
.zl-chip.fehlt{background:var(--rotf);color:var(--rot);border:1px solid var(--rot)}

.zl-abschnitt{display:flex;flex-direction:column;gap:3px;font-size:12.5px}
.zl-befund{color:var(--mittelgrau);padding-left:6px}
.zl-befund.fehler,.zl-befund.warnung{color:var(--rot)}
.zl-befund.hinweis{color:var(--dt-gruen-tief)}

.zl-dok{font-size:12.5px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  background:#fff;border:1px dashed var(--dt-gruen-rand);border-radius:8px;padding:7px 10px}

/* Code-Beleg-Chips: Bernstein = wörtlich belegt (zitierte Quelle) */
.zl-beleg-chip{font-family:var(--mono, monospace);font-size:10.5px;font-weight:600;
  background:var(--goldf);color:var(--goldd);border:1px solid var(--goldrand);
  border-radius:5px;padding:2px 7px;cursor:pointer;white-space:nowrap}
.zl-beleg-chip:hover{background:var(--goldrand);color:#fff}
.zl-beleg-block{border-left:3px solid var(--goldrand);background:var(--goldf);
  border-radius:0 8px 8px 0;padding:9px 12px;margin:0 0 10px}
.zl-beleg-kopf{font-size:12.5px;font-weight:700;color:var(--goldd);margin-bottom:6px}
.zl-beleg-text{font-size:12px;color:var(--nacht);white-space:pre-wrap;line-height:1.55}

.zl-details{font-size:12.5px}
.zl-details > summary{cursor:pointer;font-weight:600;color:var(--blau)}
.zl-schritt{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;
  padding:3px 0;border-bottom:1px dashed var(--hairline)}
.zl-formel{color:var(--mittelgrau);font-size:12px}
.zl-wert{margin-left:auto;font-weight:700}