/* ==========================================================================
   ACTIVE-DIRECTORY-SIMULATOR
   Nuechtern gehalten wie die echten Verwaltungswerkzeuge.
   ========================================================================== */
.vz-wrap {
  --vz-bg: #0b0b11; --vz-flaeche: #15151d; --vz-karte: #1a1a23;
  --vz-line: #282833; --vz-txt: #eef0f6; --vz-dim: #9a9ab0; --vz-faint: #6a6a80;
  --vz-blau: #4a9eff; --vz-gruen: #5cc98f; --vz-gelb: #ffb347;
  --vz-rot: #ff5c72; --vz-lila: #b07cf0;
  --mono: 'FQ Ziffern','JetBrains Mono',ui-monospace,'Consolas',monospace;
  display: block; min-height: 100vh; background: var(--vz-bg);
  color: var(--vz-txt); font-family: 'Segoe UI','Inter',system-ui,sans-serif;
}

/* ---------- Kopf ---------- */
.vz-kopf {
  display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 52px;
  background: var(--vz-flaeche); border-bottom: 1px solid var(--vz-line);
  position: sticky; top: 0; z-index: 20; flex-wrap: wrap;
}
.vz-zurueck {
  background: transparent; border: 1px solid var(--vz-line); color: var(--vz-dim);
  width: 30px; height: 30px; border-radius: 5px; cursor: pointer; font-size: 14px;
}
.vz-zurueck:hover { border-color: var(--vz-blau); color: var(--vz-blau); }
.vz-logo { display: flex; align-items: center; gap: 8px; }
.vz-logo .sym { color: var(--vz-blau); font-size: 16px; }
.vz-logo .t { font-size: 14.5px; font-weight: 600; }
.vz-bereiche { display: flex; gap: 4px; }
.vz-btab {
  padding: 7px 14px; border-radius: 5px; cursor: pointer; border: none;
  background: transparent; color: var(--vz-dim);
  font-family: inherit; font-size: 12.5px;
}
.vz-btab:hover { background: rgba(255,255,255,.05); color: var(--vz-txt); }
.vz-btab.on { background: rgba(74,158,255,.14); color: var(--vz-blau); }
.vz-kopfinfo { margin-left: auto; display: flex; flex-direction: column;
  align-items: flex-end; }
.vz-kopfinfo .dom { font-family: var(--mono); font-size: 12px; color: var(--vz-txt); }
.vz-kopfinfo .fe { font-size: 10px; color: var(--vz-faint); }

/* ---------- Aufbau ---------- */
.vz-haupt { display: flex; align-items: flex-start; min-height: calc(100vh - 52px); }
.vz-baum {
  flex: none; width: 250px; padding: 8px; background: var(--vz-flaeche);
  border-right: 1px solid var(--vz-line);
  position: sticky; top: 52px; max-height: calc(100vh - 52px); overflow-y: auto;
}
.vz-knoten {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px;
  border-radius: 4px; cursor: pointer; font-size: 12.5px; color: var(--vz-dim);
}
.vz-knoten:hover { background: rgba(255,255,255,.05); color: var(--vz-txt); }
.vz-knoten.on { background: rgba(74,158,255,.15); color: var(--vz-txt); }
.vz-knoten.wurzel { font-weight: 600; color: var(--vz-txt); padding-left: 10px; }
.vz-knoten .pf { width: 12px; font-size: 9px; color: var(--vz-faint); flex: none; }
.vz-knoten .sym { color: var(--vz-blau); font-size: 12px; flex: none; }
.vz-knoten .t { flex: 1; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.vz-knoten .mk { color: var(--vz-rot); font-size: 10px; }

.vz-inhalt { flex: 1; min-width: 0; padding: 16px 22px 60px; }
.vz-seite h1 { margin: 0; font-size: 22px; font-weight: 600; }
.vz-seite h2 { margin: 26px 0 12px; font-size: 16px; font-weight: 600; }
.vz-lead { font-size: 13px; line-height: 1.7; color: var(--vz-dim);
  margin: 6px 0 18px; max-width: 760px; }
.vz-bc { font-size: 12px; color: var(--vz-faint); margin-bottom: 12px; }
.vz-bc .sep { margin: 0 6px; }
.vz-seitenkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px; }
.vz-dn { font-family: var(--mono); font-size: 11px; color: var(--vz-faint);
  margin-bottom: 14px; word-break: break-all; }

.vz-btn {
  padding: 8px 16px; border-radius: 5px; cursor: pointer; border: none;
  background: var(--vz-blau); color: #04121f;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.vz-btn:hover:not(:disabled) { filter: brightness(1.12); }
.vz-btn.klein { padding: 6px 12px; font-size: 11.5px; }
.vz-btn.voll { width: 100%; margin-top: 8px; }
.vz-btn.geist { background: transparent; border: 1px solid var(--vz-line);
  color: var(--vz-dim); }
.vz-btn.geist:hover { border-color: var(--vz-dim); color: var(--vz-txt); }
.vz-btn.rot { background: var(--vz-rot); color: #1a0308; }
.vz-link { background: transparent; border: none; cursor: pointer; padding: 0;
  color: var(--vz-blau); font-family: inherit; font-size: 12.5px;
  text-align: left; }
.vz-link:hover { text-decoration: underline; }
.vz-loesch { background: transparent; border: none; cursor: pointer;
  color: var(--vz-faint); font-size: 12px; padding: 2px 5px; border-radius: 3px; }
.vz-loesch:hover { color: var(--vz-rot); background: rgba(255,92,114,.10); }
.vz-aktionen { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }

.vz-tag {
  font-size: 10.5px; padding: 2px 8px; border-radius: 9px;
  background: rgba(255,255,255,.07); color: var(--vz-dim);
}
.vz-tag.klein { font-size: 9.5px; padding: 1px 7px; }
.vz-tag.warn { background: rgba(255,179,71,.15); color: var(--vz-gelb); }
.vz-tag.rot { background: rgba(255,92,114,.15); color: var(--vz-rot); }

/* ---------- Tabelle ---------- */
.vz-tabelle { border: 1px solid var(--vz-line); border-radius: 6px;
  overflow: hidden; }
.vz-tz {
  display: grid; grid-template-columns: 2fr 1.5fr 1.2fr 1.6fr auto;
  gap: 12px; align-items: center; padding: 9px 13px;
  border-bottom: 1px solid var(--vz-line); font-size: 12.5px;
}
.vz-tz:last-child { border-bottom: none; }
.vz-tz:not(.vz-tk):hover { background: rgba(255,255,255,.03); }
.vz-tz.aus { opacity: .5; }
.vz-tk { background: var(--vz-flaeche); font-size: 10.5px; color: var(--vz-faint);
  text-transform: uppercase; letter-spacing: .05em; }
.vz-tz .nm { display: flex; align-items: center; gap: 8px; min-width: 0;
  flex-wrap: wrap; }
.vz-tz .sy { font-size: 13px; flex: none; color: var(--vz-blau); }
.vz-tz .sy.group { color: var(--vz-lila); }
.vz-tz .sy.computer { color: var(--vz-gruen); }
.vz-tz .ty, .vz-tz .be { color: var(--vz-dim); font-size: 11.5px; }
.vz-tz .sam { font-family: var(--mono); font-size: 11.5px; color: var(--vz-dim); }
.vz-gpo-z { grid-template-columns: 2.4fr 1fr 1fr auto; }
.vz-gpo-z .anz { font-family: var(--mono); color: var(--vz-dim); }
.vz-rsop-z { grid-template-columns: 2fr 1.1fr 1.6fr 1.2fr; }
.vz-rsop-z.standard { opacity: .6; }
.vz-rsop-z .v { font-family: var(--mono); color: var(--vz-gruen); }
.vz-rsop-z .q { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  color: var(--vz-dim); }
.vz-rsop-z .e { color: var(--vz-faint); font-size: 11.5px; }

.vz-leer { padding: 30px; text-align: center; color: var(--vz-faint);
  border: 1px dashed var(--vz-line); border-radius: 6px; font-size: 12.5px; }
.vz-leer.klein { padding: 14px; font-size: 12px; border: none; text-align: left; }

/* ---------- Hinweise ---------- */
.vz-hinweis {
  padding: 12px 15px; border-radius: 6px; margin-bottom: 14px;
  background: rgba(255,179,71,.08); border: 1px solid rgba(255,179,71,.25);
  font-size: 12.5px; line-height: 1.65; color: var(--vz-dim);
}
.vz-hinweis b { color: var(--vz-gelb); }
.vz-erklaer {
  padding: 14px 17px; border-radius: 6px; margin-bottom: 18px; max-width: 820px;
  background: rgba(74,158,255,.07); border: 1px solid rgba(74,158,255,.25);
  border-left: 3px solid var(--vz-blau);
}
.vz-erklaer .t { font-size: 13.5px; font-weight: 600; color: #9ecdff;
  margin-bottom: 7px; }
.vz-erklaer p { margin: 0; font-size: 12.5px; line-height: 1.7;
  color: var(--vz-dim); white-space: pre-line; }
.vz-warnung {
  padding: 14px 17px; border-radius: 6px; margin-bottom: 14px;
  background: rgba(255,92,114,.08); border: 1px solid rgba(255,92,114,.3);
}
.vz-warnung .wt { font-size: 13px; font-weight: 600; color: var(--vz-rot);
  margin-bottom: 6px; }
.vz-warnung p { margin: 0; font-size: 12.5px; line-height: 1.65;
  color: var(--vz-dim); }

/* ---------- Dialog ---------- */
.vz-dialog { position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.55);
  display: flex; justify-content: center; align-items: flex-start;
  padding: 30px 16px; overflow-y: auto; }
.vz-dialog-in {
  width: 100%; max-width: 540px; border-radius: 8px;
  background: var(--vz-flaeche); border: 1px solid var(--vz-line);
  box-shadow: 0 16px 50px rgba(0,0,0,.6);
}
.vz-dialog-kopf {
  display: flex; align-items: flex-start; gap: 12px; padding: 15px 18px;
  border-bottom: 1px solid var(--vz-line);
}
.vz-dialog-kopf .t { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vz-dialog-kopf b { font-size: 16px; font-weight: 600; }
.vz-dialog-kopf span { font-size: 11.5px; color: var(--vz-faint); }
.vz-dialog-zu { background: transparent; border: none; color: var(--vz-dim);
  cursor: pointer; font-size: 14px; padding: 3px 7px; border-radius: 4px; }
.vz-dialog-zu:hover { background: rgba(255,255,255,.08); color: var(--vz-txt); }
.vz-dialog-koerper { padding: 16px 18px 22px; }
.vz-dialog-fuss { display: flex; gap: 8px; margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--vz-line); flex-wrap: wrap; }

.vz-feld { margin-bottom: 14px; }
.vz-feld label { display: block; font-size: 12.5px; font-weight: 600;
  margin-bottom: 4px; }
.vz-feld .h { font-size: 11px; line-height: 1.55; color: var(--vz-faint);
  margin-bottom: 5px; }
.vz-feld input, .vz-feld select {
  width: 100%; padding: 7px 10px; border-radius: 4px;
  background: #0e0e14; border: 1px solid var(--vz-line); color: var(--vz-txt);
  font-family: inherit; font-size: 12.5px;
}
.vz-feld input { font-family: var(--mono); }
.vz-feld input:focus, .vz-feld select:focus { outline: none;
  border-color: var(--vz-blau); }
.vz-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vz-vorschau { margin-top: 5px; font-family: var(--mono); font-size: 11px;
  color: var(--vz-blau); line-height: 1.5; }
.vz-vorschau.lang { font-family: inherit; font-size: 11.5px; line-height: 1.6; }
.vz-vorschau.rot { color: var(--vz-rot); }
.vz-vorschau.gruen { color: var(--vz-gruen); }
.vz-check { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 13px;
  cursor: pointer; }
.vz-check input { flex: none; margin-top: 2px; accent-color: var(--vz-blau); }
.vz-check .tx { flex: 1; }
.vz-check .tx span { font-size: 12.5px; color: var(--vz-txt); }
.vz-check .tx .h { font-size: 11px; line-height: 1.55; color: var(--vz-faint);
  margin-top: 3px; }
.vz-fehler {
  display: none; padding: 11px 14px; border-radius: 5px; margin-bottom: 12px;
  background: rgba(255,92,114,.12); border-left: 3px solid var(--vz-rot);
  font-size: 12px; line-height: 1.6; color: #ffb8c2;
}
.vz-fehler.an { display: block; }

/* ---------- Eigenschaften ---------- */
.vz-eig { border: 1px solid var(--vz-line); border-radius: 6px; margin-bottom: 16px; }
.vz-eig .ez { display: grid; grid-template-columns: 150px 1fr; gap: 12px;
  padding: 8px 13px; border-bottom: 1px solid var(--vz-line); font-size: 12px; }
.vz-eig .ez:last-child { border-bottom: none; }
.vz-eig .l { color: var(--vz-faint); }
.vz-eig code { font-family: var(--mono); color: var(--vz-blau); font-size: 11.5px; }
.vz-block { margin-bottom: 16px; }
.vz-block .bk { display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-size: 12.5px; font-weight: 600; }
.vz-block .bk b { flex: 1; }
.vz-liste { display: flex; flex-direction: column; gap: 3px; }
.vz-liste .lz { display: flex; align-items: center; gap: 9px; padding: 7px 11px;
  border-radius: 4px; background: rgba(255,255,255,.035); font-size: 12px; }
.vz-liste .lz.mittelbar { opacity: .7; border-left: 2px solid var(--vz-line); }
.vz-liste .lz .sy { color: var(--vz-lila); flex: none; }
.vz-liste .lz .n { color: var(--vz-txt); }
.vz-liste .lz .q { margin-left: auto; font-size: 10.5px; color: var(--vz-faint); }

/* ---------- Gruppenrichtlinien ---------- */
.vz-gpo-ebene { border: 1px solid var(--vz-line); border-radius: 6px;
  margin-bottom: 11px; background: var(--vz-karte); }
.vz-gpo-ebene .ek { display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--vz-line); flex-wrap: wrap; }
.vz-gpo-ebene .ek .sy { color: var(--vz-blau); }
.vz-gpo-ebene .ek b { font-size: 13.5px; }
.vz-gpo-ebene .ek .ty { font-size: 11px; color: var(--vz-faint); }
.vz-gpo-ebene .ek .vz-btn { margin-left: auto; }
.vz-links { padding: 5px 0; }
.vz-links .lz { display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; font-size: 12.5px; }
.vz-links .lz:hover { background: rgba(255,255,255,.03); }
.vz-links .lz.aus { opacity: .45; }
.vz-links .nr { font-family: var(--mono); font-size: 11px; color: var(--vz-faint);
  width: 18px; flex: none; }
.vz-links .anz { font-size: 11px; color: var(--vz-faint); }
.vz-links .sch { margin-left: auto; display: flex; gap: 5px; align-items: center; }
.vz-chip { padding: 3px 9px; border-radius: 4px; cursor: pointer; font-size: 10.5px;
  background: rgba(255,255,255,.05); border: 1px solid var(--vz-line);
  color: var(--vz-faint); font-family: inherit; }
.vz-chip:hover { border-color: var(--vz-dim); color: var(--vz-txt); }
.vz-chip.an { background: rgba(74,158,255,.16); border-color: var(--vz-blau);
  color: var(--vz-blau); }
.vz-chip.pfeil { padding: 3px 7px; }
.vz-gpo-set { display: flex; flex-direction: column; gap: 4px; }
.vz-gpo-set .sz { display: flex; align-items: center; gap: 12px; padding: 9px 12px;
  border-radius: 5px; background: rgba(255,255,255,.03);
  border-left: 2px solid transparent; }
.vz-gpo-set .sz.gesetzt { border-left-color: var(--vz-gruen);
  background: rgba(92,201,143,.06); }
.vz-gpo-set .tx { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.vz-gpo-set .tx .n { font-size: 12.5px; }
.vz-gpo-set .tx .w { font-size: 10.5px; line-height: 1.5; color: var(--vz-faint); }
.vz-gpo-set .ein { flex: none; display: flex; align-items: center; gap: 6px; }
.vz-gpo-set .ein input, .vz-gpo-set .ein select {
  width: 130px; padding: 5px 8px; border-radius: 4px; background: #0e0e14;
  border: 1px solid var(--vz-line); color: var(--vz-txt);
  font-family: var(--mono); font-size: 11.5px;
}
.vz-gpo-set .eh { font-size: 10.5px; color: var(--vz-faint); }

/* ---------- Ergebnissatz ---------- */
.vz-kette { border: 1px solid var(--vz-line); border-radius: 6px; padding: 13px;
  margin-bottom: 16px; background: var(--vz-karte); }
.vz-kette .kt { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--vz-faint); margin-bottom: 9px; }
.vz-kette .kl { display: flex; flex-direction: column; gap: 4px; }
.vz-kette .kz { display: flex; align-items: center; gap: 10px; padding: 7px 11px;
  border-radius: 4px; background: rgba(255,255,255,.035); font-size: 12.5px; }
.vz-kette .kz.nichts { opacity: .5; }
.vz-kette .kz.sperre { border-left: 2px solid var(--vz-rot); }
.vz-kette .kz .n { width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px;
  background: rgba(74,158,255,.2); color: var(--vz-blau); flex: none; }
.vz-kette .kz .t { flex: 1; }
.vz-kette .kz .hw { font-size: 10.5px; color: var(--vz-faint); }
.vz-kette .kz .hw.rot { color: var(--vz-rot); }
.vz-rsop-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-bottom: 16px; }
.vz-rsop-spalten .sp { border: 1px solid var(--vz-line); border-radius: 6px;
  padding: 12px; }
.vz-rsop-spalten .st { font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--vz-faint); margin-bottom: 8px; }
.vz-rsop-spalten .gz { display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 4px; margin-bottom: 4px;
  background: rgba(92,201,143,.07); font-size: 12px; flex-wrap: wrap; }
.vz-rsop-spalten .gz.erzwungen { background: rgba(74,158,255,.10); }
.vz-rsop-spalten .gz.blockiert { background: rgba(255,92,114,.07); }
.vz-rsop-spalten .gz .n { color: var(--vz-txt); }
.vz-rsop-spalten .gz .e { font-size: 10.5px; color: var(--vz-faint); }
.vz-rsop-spalten .gz .gr { width: 100%; font-size: 10.5px; color: var(--vz-rot); }

/* ---------- Nachschlagen ---------- */
.vz-thema { padding: 16px 19px; border-radius: 8px; margin-bottom: 11px;
  background: var(--vz-karte); border: 1px solid var(--vz-line);
  border-left: 3px solid var(--vz-blau); }
.vz-thema .tt { font-size: 14.5px; font-weight: 600; margin-bottom: 8px; }
.vz-thema p { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--vz-dim);
  white-space: pre-line; }
.vz-thema .tm { margin-top: 11px; padding-top: 11px;
  border-top: 1px solid rgba(255,255,255,.07); font-size: 12px; line-height: 1.6;
  color: var(--vz-dim); }
.vz-thema .tm b { color: var(--vz-gelb); }

.vz-entry .ico { background: linear-gradient(135deg, #4a9eff, #5cc98f); }

/* ---------- Handy ---------- */
@media (max-width: 900px) {
  .vz-haupt { flex-direction: column; }
  .vz-baum { width: 100%; position: static; max-height: 200px;
    border-right: none; border-bottom: 1px solid var(--vz-line); }
  .vz-inhalt { padding: 14px 12px 50px; }
  .vz-kopfinfo { display: none; }
  .vz-bereiche { width: 100%; overflow-x: auto; }
  .vz-btab { white-space: nowrap; }
  .vz-tz { grid-template-columns: 1fr auto; gap: 6px; }
  .vz-tz .ty, .vz-tz .sam, .vz-tz .be { display: none; }
  .vz-tk { display: none; }
  .vz-gpo-z, .vz-rsop-z { grid-template-columns: 1fr auto; }
  .vz-rsop-z .q, .vz-rsop-z .e { display: none; }
  .vz-rsop-spalten { grid-template-columns: 1fr; }
  .vz-reihe { grid-template-columns: 1fr; }
  .vz-eig .ez { grid-template-columns: 1fr; gap: 2px; }
  .vz-gpo-set .sz { flex-direction: column; align-items: stretch; gap: 8px; }
  .vz-gpo-set .ein input, .vz-gpo-set .ein select { width: 100%; }
  .vz-links .lz { flex-wrap: wrap; }
  .vz-links .sch { margin-left: 0; width: 100%; }
}

/* Notfallmeldung, falls der Simulator nicht startet */
.vz-notfall {
  max-width: 620px; margin: 60px auto; padding: 26px;
  border-radius: 10px; background: var(--vz-karte);
  border: 1px solid rgba(255,92,114,.35); text-align: center;
}
.vz-notfall .nt { font-size: 17px; font-weight: 600; color: var(--vz-rot);
  margin-bottom: 10px; }
.vz-notfall p { margin: 0 0 14px; font-size: 13px; line-height: 1.7;
  color: var(--vz-dim); }
.vz-notfall code { display: block; padding: 10px 13px; border-radius: 5px;
  background: rgba(0,0,0,.4); font-family: var(--mono); font-size: 11.5px;
  color: var(--vz-gelb); margin-bottom: 18px; word-break: break-word; }
.vz-notfall .nb { display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap; }