/* ---------------------------------------------------------------------------
   Vectral 2.0 — Verwaltung (Kunden, Nutzer, System): Detailkarte, Reiter,
   Markdown-Ansicht. T18 n: aus app.css herausgelöst.
--------------------------------------------------------------------------- */

/* --- Detailkarte unter einer Tabelle ----------------------------------- */
.detail { margin-top: 20px; border-color: var(--navy-line); }
.detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  background: var(--navy-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.detail-head h3 { font-size: 17px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-section { padding: 20px 24px; border-bottom: 1px solid var(--border); }
.detail-section:last-child { border-bottom: 0; }
.detail-section h4 { font-size: 14px; margin-bottom: 12px; }
.detail-section .table-std { font-size: 13px; }
.detail-section .table-std td { padding: 9px 12px; }
.detail-section .table-std th { padding: 8px 12px; }
.meta { font-size: 12px; color: var(--muted-2); }

/* --- Reiter innerhalb einer Karte (Screen 19) -------------------------- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.tabs button {
  padding: 7px 14px; cursor: pointer; border: 1px solid var(--border); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--muted); font-size: 12.5px; font-weight: 600;
  transition: border-color var(--dur-hover) ease, background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.tabs button:hover { border-color: var(--border-strong); color: var(--ink); }
.tabs button.is-active { background: var(--navy-fill); border-color: var(--navy-fill); color: #fff; }
.tabs button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.tab-panel { padding: 20px 24px; }
.tab-panel .refrow b { text-align: right; }

/* --- Markdown (Festlegungen, Glossar) ---------------------------------- */
.md { font-size: 14px; line-height: 1.62; max-width: 100%; }
.md h1 { font-size: 22px; margin: 0 0 14px; }
.md h2 { font-size: 18px; margin: 28px 0 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.md h3 { font-size: 15px; margin: 22px 0 8px; }
.md h4, .md h5, .md h6 { font-size: 13px; margin: 16px 0 6px; }
.md p { margin: 0 0 10px; }
.md ul, .md ol { margin: 0 0 12px; padding-left: 22px; }
.md li { margin: 3px 0; }
.md code { font-family: var(--mono); font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; }
.md pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px 14px; overflow: auto; font-size: 12px; }
.md pre code { background: none; border: 0; padding: 0; }
.md blockquote { margin: 0 0 12px; padding: 8px 14px; border-left: 3px solid var(--navy-line); color: var(--muted); }
.md .md-table { overflow-x: auto; margin: 0 0 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.md .md-table .table-std { font-size: 12.5px; }
.md .md-table td { vertical-align: top; }