/* legal-panel.css — Legal-Bereich. Nutzt die globalen CSS-Variablen (Light/Dark)
   aus index.html (:root / [data-theme="dark"]): --bg, --bg-card, --bg-hover,
   --bg-input, --ink, --ink-dim, --ink-dimmer, --accent, --accent-hover. */

.legal-panel { max-width: 1100px; margin: 0 auto; }

.legal-disclaimer {
  background: var(--accent-soft, rgba(217,119,87,.10));
  border: 1px solid var(--accent, #d97757);
  color: var(--ink, #131314);
  border-radius: 8px; padding: .7rem .9rem; font-size: .82rem; line-height: 1.45;
  margin-bottom: 1rem;
}

.legal-subnav { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.legal-subtab {
  background: var(--bg-card); color: var(--ink-dim); border: 1px solid var(--bg-hover);
  border-radius: 999px; padding: .4rem .9rem; font-size: .8rem; cursor: pointer;
  transition: all .15s;
}
.legal-subtab:hover { color: var(--ink); background: var(--bg-hover); }
.legal-subtab.active { color: #fff; background: var(--accent); border-color: var(--accent); }

.legal-grid { display: grid; grid-template-columns: minmax(320px, 1fr) 1.3fr; gap: 1rem; align-items: start; }
@media (max-width: 860px) { .legal-grid { grid-template-columns: 1fr; } }

.legal-card {
  background: var(--bg-card); border: 1px solid var(--bg-hover);
  border-radius: 10px; padding: 1rem; margin-bottom: 1rem;
}
.legal-lbl { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  color: var(--ink-dimmer); margin: .7rem 0 .25rem; }
.legal-input {
  width: 100%; box-sizing: border-box; background: var(--bg-input); color: var(--ink);
  border: 1px solid var(--bg-hover); border-radius: 7px; padding: .55rem .65rem; font-size: .85rem;
  font-family: inherit;
}
.legal-input:focus { outline: none; border-color: var(--accent); }
.legal-textarea { min-height: 220px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .8rem; }
.legal-hint { font-size: .76rem; color: var(--ink-dim); margin: .35rem 0 0; line-height: 1.4; }

.legal-actions { display: flex; align-items: center; gap: .8rem; margin-top: .9rem; }
.legal-btn { background: var(--bg-hover); color: var(--ink); border: 1px solid var(--bg-hover);
  border-radius: 7px; padding: .5rem .9rem; font-size: .82rem; cursor: pointer; font-family: inherit; }
.legal-btn:hover { background: var(--bg-input); }
.legal-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.legal-btn-primary:hover { background: var(--accent-hover); }
.legal-btn-primary:disabled { opacity: .5; cursor: not-allowed; }
.legal-btn-danger { color: #c0392b; border-color: #c0392b; background: transparent; margin-top: .5rem; }
.legal-back { margin-bottom: .8rem; }
.legal-status { font-size: .76rem; color: var(--ink-dim); }

.legal-result { min-height: 220px; }
.legal-empty { color: var(--ink-dimmer); font-size: .85rem; line-height: 1.5; }
.legal-spinner { color: var(--ink-dim); font-size: .9rem; padding: 1rem 0; }
.legal-result-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.legal-muted { color: var(--ink-dimmer); font-size: .76rem; }
.legal-output { font-size: .86rem; line-height: 1.6; color: var(--ink); }
.legal-output h3 { font-size: .92rem; margin: 1rem 0 .4rem; color: var(--accent); }
.legal-output h4 { font-size: .84rem; margin: .8rem 0 .3rem; color: var(--ink); }
.legal-output ul { margin: .3rem 0 .6rem 1.1rem; }
.legal-output code { background: var(--bg-hover); padding: .05rem .3rem; border-radius: 4px; font-size: .82em; }
.legal-foot { margin-top: 1rem; padding-top: .7rem; border-top: 1px solid var(--bg-hover);
  font-size: .72rem; color: var(--ink-dimmer); font-style: italic; }

.legal-pill { display: inline-flex; align-items: center; gap: .25rem; border-radius: 999px;
  padding: .12rem .55rem; font-size: .72rem; font-weight: 600; white-space: nowrap; }
.legal-pill-red { background: rgba(192,57,43,.14); color: #c0392b; }
.legal-pill-yellow { background: rgba(212,168,104,.18); color: #b8860b; }
.legal-pill-green { background: rgba(39,174,96,.14); color: #27ae60; }
.legal-pill-unknown { background: var(--bg-hover); color: var(--ink-dim); }
[data-theme="dark"] .legal-pill-red { background: rgba(231,76,60,.18); color: #ff8b7a; }
[data-theme="dark"] .legal-pill-yellow { background: rgba(212,168,104,.22); color: #e0c080; }
[data-theme="dark"] .legal-pill-green { background: rgba(46,204,113,.18); color: #6ee2a0; }

.legal-mlist, .legal-clist, .legal-dl-list { display: flex; flex-direction: column; gap: .5rem; margin-top: .8rem; }
.legal-mrow, .legal-dl-row { background: var(--bg-card); border: 1px solid var(--bg-hover);
  border-radius: 8px; padding: .7rem .85rem; cursor: pointer; transition: background .15s; }
.legal-mrow:hover, .legal-dl-row:hover { background: var(--bg-hover); }
.legal-mrow-main { display: flex; align-items: center; gap: .5rem; }
.legal-mrow-meta { font-size: .74rem; color: var(--ink-dimmer); margin-top: .3rem; }
.legal-dl-row { display: flex; align-items: center; gap: .6rem; }

.legal-cat-head { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .5rem; }
.legal-cat-plugin { background: var(--bg-card); border: 1px solid var(--bg-hover); border-radius: 8px;
  padding: .6rem .85rem; }
.legal-cat-plugin summary { cursor: pointer; font-weight: 600; color: var(--ink); display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.legal-install { display: inline-block; background: var(--bg-hover); color: var(--ink-dim);
  padding: .15rem .45rem; border-radius: 5px; font-size: .76rem; margin: .3rem 0; }
.legal-skill-list { margin: .5rem 0 0 1rem; font-size: .8rem; line-height: 1.6; color: var(--ink-dim); }
.legal-skill-list code { background: var(--bg-hover); padding: .03rem .3rem; border-radius: 4px; font-size: .82em; }
.legal-h3 { font-size: 1rem; margin: 0 0 .3rem; color: var(--ink); }
.legal-cat-head a { color: var(--accent); text-decoration: none; }

/* Mobile-Bodenreserve (Comet/iPhone) — BB.10.50-Pattern */
@media (max-width: 760px) {
  .legal-panel { padding-bottom: var(--cbar, 160px); }
  .legal-textarea { min-height: 160px; }
}