/* =================================================================
   HELO QM Dokumentenmanagement – Komponenten im Stil des HELO-Portals
   Tokens: variables.css · Schriften: fonts.css
   Bootstrap 5.3 bleibt Grundgerüst; hier wird es auf die HELO-Optik gebracht.
   ================================================================= */

/* ---------- Grundlagen ---------- */
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: .9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
::selection { background: var(--mint); color: var(--blue); }
html[data-theme="dark"] ::selection { background: #2b5f6d; color: #ffffff; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { color: var(--link-hover); }
* { scrollbar-color: var(--line-strong) transparent; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  color: var(--heading);
  text-wrap: balance;
}
h1, .h1 { font-size: 2.125rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.5rem; }
h5, .h5 { font-size: 1.3125rem; }
h6, .h6 { font-size: 1.1875rem; }
h1 .bi, h2 .bi, h3 .bi, h4 .bi, h5 .bi, h6 .bi { font-size: .8em; vertical-align: .02em; }
small, .small { font-size: .8125rem; }
code, pre, kbd { font-family: var(--font-mono); }
.text-muted { color: var(--muted) !important; }
.text-body { color: var(--ink) !important; }
hr { border-color: var(--line); opacity: 1; }

/* Hauptbereich: Portal-Breite und -Abstände */
#main-content {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 26px 48px;
}
#flash-messages { max-width: 1320px; padding: 0 26px; margin: 0 auto; }
/* Dokumentansicht/-editor: auf breiten Monitoren so breit wie die Topbar (1240npf81m2) */
body.qm-doc-wide #main-content, body.qm-doc-wide #flash-messages { max-width: 1600px; }
#flash-messages:empty { display: none; }
#flash-messages .alert { margin: 16px 0 0; }

.skip-link {
  position: absolute; left: 12px; top: 0; transform: translateY(-120%); z-index: 2000;
  background: var(--surface); color: var(--heading); font-weight: 700;
  padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: 10px; transform: none; }

/* ---------- Kopfzeile (wie Portal .topbar) ---------- */
.qm-topbar {
  background: var(--topbar-bg);
  color: #ffffff;
  min-height: 60px;
  padding: 0;
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 1030;
}
html[data-theme="dark"] .qm-topbar { border-bottom-color: var(--line); }
.qm-topbar .container-fluid { max-width: 1600px; padding: 0 26px; min-height: 60px; gap: 8px 18px; }
/* Marke schrumpft nie: vorher min-width: 0 → „QM-Dokumente" lief bei voller Leiste unter die Navigation (1240npf76vj) */
.qm-brand { display: flex; align-items: center; gap: 14px; padding: 0; margin: 0; color: #fff; text-decoration: none; flex-shrink: 0; }
.qm-brand:hover { color: #fff; }
.qm-brand img { height: 24px; width: auto; display: block; }
.qm-brand .qm-app {
  font-family: var(--font-head); font-size: 20px; font-weight: 500; line-height: 1;
  color: var(--mint); padding: 3px 0 0 14px; border-left: 1px solid rgba(255, 255, 255, .22);
  white-space: nowrap;
}
.qm-nav { gap: 2px; }
.qm-nav .nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--topbar-ink); font-size: .875rem; font-weight: 400;
  padding: 7px 11px !important; border-radius: 6px; position: relative; white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.qm-nav .nav-link .bi { font-size: 15px; opacity: .9; }
.qm-nav .nav-link:hover, .qm-nav .nav-link:focus-visible { color: #fff; background: var(--topbar-hover); }
.qm-nav .nav-link.active, .qm-nav .nav-link[aria-current="page"] { color: #fff; font-weight: 700; }
.qm-nav .nav-link[aria-current="page"]::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -11px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--tiffany);
}
.qm-nav .nav-link:focus-visible { outline: 2px solid var(--mint); outline-offset: 1px; }

.qm-right { display: flex; align-items: center; gap: 10px; }
.qm-iconbtn, .qm-userbtn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; border-radius: 6px;
  background: transparent; color: #fff; border: 1px solid var(--topbar-control-line);
  font: inherit; font-size: .8125rem; cursor: pointer; text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.qm-iconbtn:hover, .qm-userbtn:hover, .qm-userbtn[aria-expanded="true"] { background: var(--topbar-hover); color: #fff; border-color: #ffffff; }
.qm-iconbtn:focus-visible, .qm-userbtn:focus-visible { outline: 2px solid var(--mint); outline-offset: 2px; }
.qm-iconbtn .bi { font-size: 15px; }
.qm-theme-btn .qm-theme-label { color: var(--topbar-ink); }
.qm-theme-btn .bi-sun { display: none; }
html[data-theme="dark"] .qm-theme-btn .bi-sun { display: inline-block; }
html[data-theme="dark"] .qm-theme-btn .bi-moon { display: none; }
.qm-userbtn::after { margin-left: 2px; color: var(--topbar-ink); }
.qm-userbtn .qm-user-name { white-space: nowrap; max-width: 12em; overflow: hidden; text-overflow: ellipsis; }
.dropdown-header { font-family: var(--font-body); font-size: .8125rem; font-weight: 700; color: var(--muted); letter-spacing: 0; }

/* Leiste ab 1200 px ausgeklappt (darunter Burger-Menü). Platzbedarf voll ~1480 px Inhalt,
   kompakt (ohne Nav-Symbole und Namen) ~1190 px, unter 1400 px zusätzlich ohne „Dunkel"-Text ~1130 px.
   Der Name bleibt für Screenreader, im Tooltip und im Menü erhalten. */
@media (min-width: 1200px) {
  .qm-topbar.navbar-expand-xl .navbar-collapse { order: 1; }
  .qm-topbar.navbar-expand-xl .qm-theme-btn { order: 2; }
  .qm-topbar.navbar-expand-xl .qm-login-btn { order: 3; }
  .qm-topbar.navbar-expand-xl .qm-nav { margin-left: 1.5rem; }
  .qm-topbar.navbar-expand-xl .qm-right { margin: 0 .5rem 0 1rem; }
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .qm-nav .nav-link { padding-left: 9px !important; padding-right: 9px !important; }
  .qm-nav .nav-link[aria-current="page"]::after { left: 9px; right: 9px; }
  .qm-theme-btn .qm-theme-label { display: none !important; }
}
@media (min-width: 1200px) and (max-width: 1679.98px) {
  .qm-nav .nav-link .bi { display: none; }
  .qm-userbtn .qm-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
/* Absicherung (topbar-fit.js): passt die Leiste trotzdem nicht (lange Namen, große Systemschrift),
   wird stufenweise verkleinert und zuletzt zweizeilig umgebrochen – nie überlappt. */
.qm-topbar.qm-fit-1 .qm-userbtn .qm-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.qm-topbar.qm-fit-2 .qm-nav .nav-link .bi { display: none; }
.qm-topbar.qm-fit-3 .qm-theme-btn .qm-theme-label { display: none; }
.qm-topbar.qm-fit-4 > .container-fluid { flex-wrap: wrap; padding-top: 10px; padding-bottom: 6px; }
.qm-topbar.qm-fit-4 .qm-nav .nav-link[aria-current="page"]::after { bottom: -6px; }
.qm-topbar.qm-fit-4 .qm-theme-btn { order: 0 !important; margin-left: auto; }
.qm-topbar.qm-fit-4 .navbar-collapse { order: 1 !important; flex-basis: 100%; }
.qm-topbar.qm-fit-4 .qm-nav { margin-left: -11px !important; flex-wrap: wrap; }
.qm-role {
  font-family: var(--font-head); font-size: 13px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1; padding: 4px 7px 2px; border-radius: 4px;
  color: var(--blue); background: var(--mint);
}
.qm-topbar .navbar-toggler {
  border: 1px solid var(--topbar-control-line); border-radius: 6px; padding: 6px 9px; color: #fff;
}
.qm-topbar .navbar-toggler:focus { box-shadow: none; outline: 2px solid var(--mint); outline-offset: 2px; }
.qm-topbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e");
  width: 1.25em; height: 1.25em;
}

/* Menüs */
.dropdown-menu {
  --bs-dropdown-bg: var(--surface);
  --bs-dropdown-color: var(--ink);
  --bs-dropdown-border-color: var(--line);
  --bs-dropdown-link-color: var(--ink);
  --bs-dropdown-link-hover-color: var(--heading);
  --bs-dropdown-link-hover-bg: var(--surface-sunk);
  --bs-dropdown-link-active-bg: var(--surface-sunk);
  --bs-dropdown-link-active-color: var(--heading);
  --bs-dropdown-divider-bg: var(--line);
  --bs-dropdown-header-color: var(--muted);
  border-radius: 8px; box-shadow: var(--shadow-pop); padding: 6px; font-size: .875rem;
}
.dropdown-item { border-radius: 5px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.dropdown-item.text-danger { color: var(--st-bad-fg) !important; }
.dropdown-header { padding: 6px 12px 8px; }

@media (max-width: 1199.98px) {
  .qm-topbar .container-fluid { padding: 10px 16px; }
  .qm-topbar .navbar-collapse {
    margin: 10px -16px -10px; padding: 8px 12px 14px;
    background: var(--topbar-hover); border-top: 1px solid var(--topbar-line);
  }
  .qm-nav .nav-link { padding: 11px 12px !important; font-size: .9375rem; }
  .qm-nav .nav-link[aria-current="page"] { background: rgba(255, 255, 255, .08); }
  .qm-nav .nav-link[aria-current="page"]::after { left: 0; right: auto; top: 9px; bottom: 9px; width: 3px; height: auto; border-radius: 0 3px 3px 0; }
  .qm-right { padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--topbar-line); flex-wrap: wrap; }
  .qm-right .dropdown-menu { position: static !important; transform: none !important; margin-top: 8px; width: 100%; }
}
@media (max-width: 420px) {
  .qm-topbar .container-fluid { padding: 10px 12px; column-gap: 10px; }
  .qm-topbar .navbar-collapse { margin: 10px -12px -10px; }
  .qm-brand { gap: 10px; }
  .qm-brand img { height: 18px; }
  .qm-brand .qm-app { font-size: 18px; padding-left: 10px; }
}

/* ---------- Seitenkopf ---------- */
.qm-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 24px; margin: 0 0 26px; }
.qm-pagehead h1 { font-size: 2.25rem; margin: 0; }
.qm-pagehead .qm-sub { color: var(--muted); font-size: .9375rem; margin: 4px 0 0; max-width: 68ch; }
.qm-pagehead-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: .8125rem; }
.qm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  line-height: 1; padding: 6px 10px 4px; border-radius: 5px;
  color: var(--st-qm-fg); background: var(--st-qm-bg); border: 1px solid var(--st-qm-line);
}

/* ---------- Karten (wie Portal .card) ---------- */
.card {
  --bs-card-bg: var(--surface);
  --bs-card-color: var(--ink);
  --bs-card-border-color: var(--line);
  --bs-card-border-radius: var(--radius);
  --bs-card-inner-border-radius: calc(var(--radius) - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-color: var(--heading);
  --bs-card-spacer-x: 1.375rem;
  --bs-card-spacer-y: 1.25rem;
  --bs-card-cap-padding-y: .875rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}
.card-header {
  background: transparent; color: var(--heading);
  border-bottom: 1px solid var(--line);
  padding-top: .875rem; padding-bottom: .75rem;
}
.card-header h5, .card-header h6, .card-header .h5, .card-header .h6 {
  font-family: var(--font-head); font-size: 1.3125rem; font-weight: 600; letter-spacing: .02em;
  color: var(--heading); margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: nowrap; white-space: nowrap;
}
.card-header h5 .bi, .card-header h6 .bi { font-size: 1rem; color: var(--muted); align-self: center; }
.card-header small { font-family: var(--font-body); font-size: .8125rem; font-weight: 400; letter-spacing: 0; text-transform: none; }
.card-body { color: var(--ink); }
.card-footer { background: var(--surface-2); border-top: 1px solid var(--line); }
.card-title { font-family: var(--font-head); color: var(--heading); }

/* Bisherige Sonder-Karten neutralisieren (keine Farbbalken mehr) */
.card-helo-primary, .card-helo-secondary, .card-helo-success, .card-helo-warning,
.theme-card, .theme-card-primary, .theme-card-secondary, .theme-card-info, .theme-card-success, .theme-card-warning { border-left-width: 1px; }
.border-success, .border-warning, .border-info, .border-primary { border-color: var(--line) !important; }
.shadow-sm, .shadow, .shadow-lg { box-shadow: none !important; }

/* ---------- Kennzahlen ---------- */
.qm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 0 0 26px; }
.qm-stat {
  position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px 16px; display: flex; flex-direction: column; gap: 2px; color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
}
a.qm-stat:hover { border-color: var(--tiffany); box-shadow: var(--shadow-lift); transform: translateY(-2px); color: var(--ink); }
.qm-stat-label { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .875rem; color: var(--ink); }
.qm-stat-value { font-family: var(--font-head); font-weight: 600; font-size: 3rem; line-height: .95; color: var(--heading); font-variant-numeric: tabular-nums; margin: 6px 0 2px; }
.qm-stat-hint { font-size: .8125rem; color: var(--muted); }
.qm-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--st-neutral-fg); }
.qm-dot.st-entwurf { background: #c98a1c; }
.qm-dot.st-pruefung { background: #2f8f8a; }
.qm-dot.st-freigegeben { background: #2c8a57; }
.qm-dot.st-mine { background: var(--tiffany); }
html[data-theme="dark"] .qm-dot.st-entwurf { background: var(--st-draft-fg); }
html[data-theme="dark"] .qm-dot.st-pruefung { background: var(--st-qm-fg); }
html[data-theme="dark"] .qm-dot.st-freigegeben { background: var(--st-ok-fg); }
.qm-stat-primary { background: var(--blue); border-color: var(--blue); }
.qm-stat-primary .qm-stat-label, .qm-stat-primary .qm-stat-value { color: #fff; }
.qm-stat-primary .qm-stat-hint { color: #cfe4e6; }
html[data-theme="dark"] .qm-stat-primary { background: #0f3a4c; border-color: #1f5568; }
/* Kacheln als Link zur gefilterten Dokumentenliste (1240npf76q0) */
a.qm-stat .qm-stat-label { padding-right: 22px; }
a.qm-stat:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-color: var(--tiffany); }
.qm-stat-go { position: absolute; top: 18px; right: 18px; font-size: 15px; color: var(--muted); transition: transform .2s var(--ease-out), color .15s; }
a.qm-stat:hover .qm-stat-go, a.qm-stat:focus-visible .qm-stat-go { color: var(--heading); transform: translateX(3px); }
.qm-stat-primary .qm-stat-go, a.qm-stat-primary:hover .qm-stat-go, a.qm-stat-primary:focus-visible .qm-stat-go { color: #cfe4e6; }
a.qm-stat-primary:hover { background: var(--blue-2); border-color: var(--blue-2); }
html[data-theme="dark"] a.qm-stat-primary:hover { background: #134557; border-color: #1f5568; }
@media (max-width: 991.98px) { .qm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .qm-stats { gap: 10px; } .qm-stat { padding: 14px 14px 12px; } .qm-stat-value { font-size: 2.5rem; } .qm-stat-go { top: 14px; right: 12px; } }

/* ---------- Reiter (Prüfung: QM-Prüfung / GF-Freigabe, 1240npf76nr) ---------- */
.qm-tabs { display: flex; gap: 4px; padding: 0 calc(1.375rem - 12px); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.qm-tabs::-webkit-scrollbar { display: none; }
.qm-tab {
  appearance: none; background: none; border: 0; margin: 0; position: relative; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 14px 12px 10px;
  font-family: var(--font-head); font-size: 1.3125rem; font-weight: 600; letter-spacing: .02em; line-height: 1;
  color: var(--muted); white-space: nowrap; transition: color .15s;
}
.qm-tab .bi { font-size: 1rem; align-self: center; margin-top: -3px; }
.qm-tab:hover { color: var(--heading); }
.qm-tab[aria-selected="true"] { color: var(--heading); }
.qm-tab[aria-selected="true"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--heading);
}
.qm-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -4px; border-radius: 8px; }
.qm-tab-count {
  align-self: center; margin-top: -3px; min-width: 26px; padding: 4px 7px 3px; border-radius: 999px; text-align: center;
  font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: 0; line-height: 1; font-variant-numeric: tabular-nums;
  color: var(--st-neutral-fg); background: var(--st-neutral-bg); border: 1px solid var(--st-neutral-line);
}
.qm-tab[data-tab="qm"][aria-selected="true"] .qm-tab-count { color: var(--st-qm-fg); background: var(--st-qm-bg); border-color: var(--st-qm-line); }
.qm-tab[data-tab="gf"][aria-selected="true"] .qm-tab-count { color: var(--st-gf-fg); background: var(--st-gf-bg); border-color: var(--st-gf-line); }
.qm-tabpanel:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 575.98px) {
  .qm-tabs { padding: 0 4px; gap: 0; }
  .qm-tab { flex: 1 1 0; justify-content: center; gap: 6px; padding: 14px 6px 10px; font-size: 1.1875rem; }
  .qm-tab .bi { display: none; }
}

/* ---------- Aktions-Kacheln (wie Portal .exchange) ---------- */
.qm-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.qm-action {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink); text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out);
}
.qm-action:hover { border-color: var(--tiffany); box-shadow: var(--shadow-lift); color: var(--ink); transform: translateY(-1px); }
.qm-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qm-action-ic {
  width: 42px; height: 42px; flex: none; border-radius: 9px; display: grid; place-items: center;
  color: var(--blue); background: var(--mint); border: 1px solid var(--tiffany); font-size: 19px;
}
html[data-theme="dark"] .qm-action-ic { color: var(--mint); background: rgba(152, 206, 199, .12); border-color: rgba(152, 206, 199, .4); }
.qm-action-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.qm-action-txt strong { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; line-height: 1.1; letter-spacing: .02em; color: var(--heading); }
.qm-action-txt em { font-style: normal; font-size: .8125rem; color: var(--muted); }
.qm-action-go { color: var(--heading); font-size: 16px; transition: transform .2s var(--ease-out); }
.qm-action:hover .qm-action-go { transform: translateX(3px); }
.qm-action-primary { background: var(--blue); border-color: var(--blue); }
.qm-action-primary .qm-action-txt strong, .qm-action-primary .qm-action-go { color: #fff; }
.qm-action-primary .qm-action-txt em { color: #cfe4e6; }
.qm-action-primary .qm-action-ic { background: rgba(194, 242, 239, .14); border-color: rgba(194, 242, 239, .4); color: var(--mint); }
.qm-action-primary:hover { border-color: var(--blue-2); background: var(--blue-2); }
html[data-theme="dark"] .qm-action-primary { background: #0f3a4c; border-color: #1f5568; }
html[data-theme="dark"] .qm-action-primary:hover { background: #134557; }

/* ---------- Hinweise (wie Portal .notice) ---------- */
.alert {
  --bs-alert-border-radius: 8px;
  border: 1px solid var(--notice-line); border-radius: 8px; font-size: .875rem; padding: 12px 16px;
}
.alert h6 { font-family: var(--font-head); font-size: 1.1875rem; color: inherit; }
.alert-info, .qm-notice { background: var(--notice-bg); border-color: var(--notice-line); color: var(--notice-ink); }
.alert-success { background: var(--st-ok-bg); border-color: var(--st-ok-line); color: var(--st-ok-fg); }
.alert-warning { background: var(--st-draft-bg); border-color: var(--st-draft-line); color: var(--st-draft-fg); }
.alert-danger { background: var(--st-bad-bg); border-color: var(--st-bad-line); color: var(--st-bad-fg); }
.alert-secondary, .alert-light { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.alert .text-muted { color: inherit !important; opacity: .92; }
.alert a { color: inherit; text-decoration: underline; }
.alert a.btn { color: var(--bs-btn-color); text-decoration: none; }
.alert a.btn:hover { color: var(--bs-btn-hover-color); }
.alert .btn-close { opacity: .7; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Buttons (wie Portal .btn / .ai-btn) ---------- */
.btn {
  --bs-btn-font-family: var(--font-body);
  --bs-btn-font-weight: 700;
  --bs-btn-font-size: .875rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-border-radius: var(--radius-sm);
  --bs-btn-border-width: 1px;
  --bs-btn-focus-box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent);
  --bs-btn-disabled-opacity: .55;
  letter-spacing: .01em;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn-sm { --bs-btn-padding-x: .75rem; --bs-btn-padding-y: .3125rem; --bs-btn-font-size: .8125rem; --bs-btn-border-radius: 6px; }
.btn-lg { --bs-btn-padding-x: 1.25rem; --bs-btn-padding-y: .75rem; --bs-btn-font-size: .9375rem; --bs-btn-border-radius: var(--radius-sm); }
.btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.btn-primary, .btn-helo-primary {
  --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
  --bs-btn-disabled-color: var(--on-primary); --bs-btn-disabled-bg: var(--primary); --bs-btn-disabled-border-color: var(--primary);
}
.btn-helo-primary { color: var(--on-primary); background: var(--primary); border: 1px solid var(--primary); }
.btn-helo-primary:hover, .btn-helo-primary:focus { color: var(--on-primary); background: var(--primary-hover); border-color: var(--primary-hover); }

.btn-outline-primary, .btn-outline-secondary, .btn-outline-info, .btn-light {
  --bs-btn-color: var(--heading); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--heading); --bs-btn-hover-bg: var(--surface-sunk); --bs-btn-hover-border-color: var(--heading);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary); --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--muted); --bs-btn-disabled-bg: var(--surface); --bs-btn-disabled-border-color: var(--line-strong);
}
.btn-outline-secondary { --bs-btn-color: var(--ink-2); }
.btn-check:checked + .btn-outline-secondary, .btn-check:checked + .btn-outline-primary {
  color: var(--on-primary); background: var(--primary); border-color: var(--primary);
}

.btn-success {
  --bs-btn-color: var(--on-approve); --bs-btn-bg: var(--approve); --bs-btn-border-color: var(--approve);
  --bs-btn-hover-color: var(--on-approve); --bs-btn-hover-bg: var(--approve-hover); --bs-btn-hover-border-color: var(--approve-hover);
  --bs-btn-active-color: var(--on-approve); --bs-btn-active-bg: var(--approve-hover); --bs-btn-active-border-color: var(--approve-hover);
  --bs-btn-disabled-color: var(--on-approve); --bs-btn-disabled-bg: var(--approve); --bs-btn-disabled-border-color: var(--approve);
}
.btn-outline-success {
  --bs-btn-color: var(--st-ok-fg); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--st-ok-fg);
  --bs-btn-hover-color: var(--on-approve); --bs-btn-hover-bg: var(--approve); --bs-btn-hover-border-color: var(--approve);
  --bs-btn-active-color: var(--on-approve); --bs-btn-active-bg: var(--approve-hover); --bs-btn-active-border-color: var(--approve-hover);
}
.btn-danger {
  --bs-btn-color: var(--on-danger); --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--on-danger); --bs-btn-hover-bg: var(--danger-hover); --bs-btn-hover-border-color: var(--danger-hover);
  --bs-btn-active-color: var(--on-danger); --bs-btn-active-bg: var(--danger-hover); --bs-btn-active-border-color: var(--danger-hover);
  --bs-btn-disabled-color: var(--on-danger); --bs-btn-disabled-bg: var(--danger); --bs-btn-disabled-border-color: var(--danger);
}
.btn-outline-danger {
  --bs-btn-color: var(--st-bad-fg); --bs-btn-bg: var(--surface); --bs-btn-border-color: var(--st-bad-fg);
  --bs-btn-hover-color: var(--on-danger); --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger);
}
/* "Zur QM-Prüfung einreichen": Hauptaktion des Autors */
.btn-warning {
  --bs-btn-color: var(--on-primary); --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--on-primary); --bs-btn-hover-bg: var(--primary-hover); --bs-btn-hover-border-color: var(--primary-hover);
  --bs-btn-active-color: var(--on-primary); --bs-btn-active-bg: var(--primary-hover); --bs-btn-active-border-color: var(--primary-hover);
}
.btn-secondary {
  --bs-btn-color: var(--ink); --bs-btn-bg: var(--surface-sunk); --bs-btn-border-color: var(--line-strong);
  --bs-btn-hover-color: var(--ink); --bs-btn-hover-bg: var(--line); --bs-btn-hover-border-color: var(--ink-2);
}
.btn-link { --bs-btn-color: var(--link); --bs-btn-hover-color: var(--link-hover); font-weight: 700; }
.btn-group > .btn { gap: 6px; }

/* ---------- Status- und Info-Chips ---------- */
.badge {
  --bs-badge-font-size: .75rem;
  --bs-badge-font-weight: 700;
  --bs-badge-padding-x: .55em;
  --bs-badge-padding-y: .35em;
  --bs-badge-border-radius: 4px;
  letter-spacing: .01em;
  border: 1px solid transparent;
  vertical-align: .1em;
}
.badge-status, .badge.bg-warning, .badge.bg-info, .badge.bg-primary, .badge.bg-success,
.badge.bg-secondary, .badge.bg-danger, .badge.bg-light, .badge.bg-dark { background-image: none !important; }
.badge.st-entwurf    { color: var(--st-draft-fg) !important; background: var(--st-draft-bg) !important; border-color: var(--st-draft-line); }
.badge.st-qm_pruefung { color: var(--st-qm-fg) !important; background: var(--st-qm-bg) !important; border-color: var(--st-qm-line); }
.badge.st-gf_freigabe { color: var(--st-gf-fg) !important; background: var(--st-gf-bg) !important; border-color: var(--st-gf-line); }
.badge.st-freigegeben { color: var(--st-ok-fg) !important; background: var(--st-ok-bg) !important; border-color: var(--st-ok-line); }
.badge.st-archiviert  { color: var(--st-neutral-fg) !important; background: var(--st-neutral-bg) !important; border-color: var(--st-neutral-line); }
.badge.st-abgelehnt   { color: var(--st-bad-fg) !important; background: var(--st-bad-bg) !important; border-color: var(--st-bad-line); }
/* Generische Bootstrap-Chips: ruhig, AA in beiden Modi */
.badge.bg-success:not([class*="st-"]) { color: var(--st-ok-fg) !important; background: var(--st-ok-bg) !important; border-color: var(--st-ok-line); }
.badge.bg-warning:not([class*="st-"]) { color: var(--st-draft-fg) !important; background: var(--st-draft-bg) !important; border-color: var(--st-draft-line); }
.badge.bg-info:not([class*="st-"]) { color: var(--st-qm-fg) !important; background: var(--st-qm-bg) !important; border-color: var(--st-qm-line); }
.badge.bg-primary:not([class*="st-"]) { color: var(--st-gf-fg) !important; background: var(--st-gf-bg) !important; border-color: var(--st-gf-line); }
.badge.bg-danger:not([class*="st-"]) { color: var(--st-bad-fg) !important; background: var(--st-bad-bg) !important; border-color: var(--st-bad-line); }
.badge.bg-secondary:not([class*="st-"]), .badge.bg-light:not([class*="st-"]) { color: var(--st-neutral-fg) !important; background: var(--st-neutral-bg) !important; border-color: var(--st-neutral-line); }
/* Dokumentnummer: dunkler Stempel, im Dark-Modus invertiert */
.badge.bg-dark { color: var(--surface) !important; background: var(--ink) !important; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0; }
.badge.bg-outline-primary { color: var(--st-qm-fg) !important; background: transparent !important; border: 1px solid var(--st-qm-line) !important; }

/* ---------- Formulare (wie Portal) ---------- */
.form-label { font-size: .8125rem; font-weight: 700; color: var(--heading); margin-bottom: 5px; }
.form-control, .form-select {
  background-color: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: .9375rem; padding: .5625rem .75rem;
  transition: border-color .15s, box-shadow .15s;
}
.form-control-sm, .form-select-sm { font-size: .8125rem; padding: .3125rem .625rem; border-radius: 6px; }
.form-control-lg { font-size: 1rem; padding: .6875rem .875rem; border-radius: var(--radius-sm); }
.form-control::placeholder { color: var(--muted); opacity: 1; }
.form-control:focus, .form-select:focus {
  background-color: var(--surface); color: var(--ink);
  border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); outline: none;
}
.form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: var(--surface-2); color: var(--muted); }
.form-control-plaintext { color: var(--ink); }
.form-text { color: var(--muted); font-size: .8125rem; }
html[data-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23c9d9df' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.form-check-input { border: 1px solid var(--line-strong); background-color: var(--surface); width: 1.125em; height: 1.125em; margin-top: .2em; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }
html[data-theme="dark"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23003148' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 22%, transparent); }
.form-check-label { color: var(--ink); }
.input-group-text { background: var(--surface-2); border-color: var(--line-strong); color: var(--muted); }

/* ---------- Tabellen (wie Portal .help-table) ---------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--ink);
  --bs-table-border-color: var(--line);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-striped-color: var(--ink);
  --bs-table-hover-bg: var(--surface-sunk);
  --bs-table-hover-color: var(--ink);
  --bs-table-active-bg: var(--surface-sunk);
  color: var(--ink); font-size: .875rem; margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: .625rem .75rem; border-bottom-color: var(--line); background-color: var(--bs-table-bg); }
.table thead th, .table > thead > tr > th {
  font-family: var(--font-head); font-size: 1.0625rem; font-weight: 600; letter-spacing: .02em; color: var(--heading);
  background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap;
}
.table-sm > :not(caption) > * > * { padding: .4375rem .5rem; }
.table-borderless > :not(caption) > * > * { border-bottom-width: 0; }
.table a { font-weight: 700; color: var(--heading); text-decoration: none; }
.table a:hover { text-decoration: underline; }
.table td strong { color: var(--ink-2); }
/* position: relative hält absolut positionierte Kinder (z. B. .visually-hidden im Tabellenkopf) im
   Scroll-Container – vorher verbreiterten sie mobil die ganze Seite (/review 811 statt 390 px, 1240npf71vt) */
.table-responsive { border-radius: 8px; position: relative; }
/* Sortierbare Spaltenköpfe (Prüfung, 1240npf76q3) */
.qm-sort {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; margin: -2px -4px;
  background: none; border: 0; border-radius: 4px; cursor: pointer;
  font: inherit; letter-spacing: inherit; color: inherit; white-space: nowrap;
}
.qm-sort .bi { font-size: .8125rem; color: var(--muted); }
.qm-sort.is-active .bi { color: var(--heading); }
.qm-sort:hover { text-decoration: underline; text-underline-offset: 3px; }
.qm-sort:hover .bi { color: var(--heading); }
.qm-sort:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

/* Prüfliste mobil als gestapelte Einträge statt breiter Tabelle (1240npf71vt):
   Titel oben, darunter Typ · Autor · Datum und „Ansehen"; die Sortierknöpfe bleiben als Zeile darüber. */
@media (max-width: 575.98px) {
  .qm-review-table, .qm-review-table thead, .qm-review-table tbody, .qm-review-table th, .qm-review-table td { display: block; }
  .qm-review-table thead tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 0 0 8px; border-bottom: 1px solid var(--line); }
  .qm-review-table thead tr::before { content: "Sortieren:"; font-size: .8125rem; color: var(--muted); }
  .qm-review-table thead th { padding: 0 !important; border: 0; background: none !important; font-size: .9375rem; }
  .qm-review-table thead th:last-child { display: none; }
  .qm-review-table tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .qm-review-table tbody td { padding: 0 !important; border: 0 !important; white-space: normal; background: none !important; box-shadow: none !important; }
  .qm-review-table tbody td:nth-child(1) { flex: 0 0 auto; }
  .qm-review-table tbody td:nth-child(2) { flex: 1 1 calc(100% - 7rem); min-width: 0; margin-bottom: 4px; overflow-wrap: anywhere; }
  .qm-review-table tbody td:nth-child(4), .qm-review-table tbody td:nth-child(5) { font-size: .8125rem; color: var(--muted); }
  .qm-review-table tbody td:last-child { margin-left: auto; }
}

/* ---------- Dokumentansicht: Kopf mit Status und Aktionen (1240npf71vt) ---------- */
.qm-dochead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.qm-dochead-title { min-width: 0; }
.qm-dochead-title h1 { overflow-wrap: anywhere; }
.qm-dochead-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 1 auto; max-width: 60%; }
.qm-doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.qm-doc-actions .btn { white-space: nowrap; }
@media (max-width: 767.98px) {
  .qm-dochead { flex-direction: column; }
  .qm-dochead-side { align-items: flex-start; width: 100%; max-width: none; }
  .qm-doc-actions { width: 100%; justify-content: stretch; }
  .qm-doc-actions .btn { flex: 1 1 auto; }
}

/* ---------- Listen ---------- */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--ink);
  --bs-list-group-border-color: var(--line);
  --bs-list-group-action-hover-bg: var(--surface-sunk);
  --bs-list-group-action-hover-color: var(--ink);
  --bs-list-group-action-active-bg: var(--surface-sunk);
  --bs-list-group-action-color: var(--ink);
}
.list-group-flush > .list-group-item { padding: .75rem .25rem; }
.list-group-item-action { border-radius: 0; transition: background-color .15s; }
.list-group-item-action strong { color: var(--heading); }

/* ---------- Dokumentliste ---------- */
.document-row {
  background: var(--surface) !important; border: 1px solid var(--line) !important; border-left-width: 1px !important;
  border-radius: 8px; box-shadow: none !important; transform: none !important;
  transition: border-color .15s, background-color .15s;
}
.document-row:hover { border-color: var(--tiffany) !important; background: var(--surface) !important; }
.document-row h6, .public-document h6 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; line-height: 1.3; }
.document-row h6 a, .public-document h6 a { color: var(--heading); }
.document-row h6 a:hover, .public-document h6 a:hover { color: var(--link-hover); text-decoration: underline; }
.document-row .card-body { padding: 14px 16px; }
#documents-pagination:not([style*="none"]) { display: flex !important; }
.public-document { background: var(--surface); border: 1px solid var(--line) !important; border-radius: 8px !important; }
.public-document:hover { border-color: var(--tiffany) !important; }

/* Leere Zustände */
.qm-empty { text-align: center; padding: 34px 16px; color: var(--muted); }
.qm-empty .bi { font-size: 2.25rem; color: var(--tiffany); }
html[data-theme="dark"] .qm-empty .bi { color: var(--line-strong); }
.qm-empty h5 { margin: 12px 0 4px; color: var(--heading); }

/* ---------- Workflow ---------- */
.qm-history-item { display: flex; gap: 10px; }
.qm-history-item + .qm-history-item { border-top: 1px solid var(--line); padding-top: 10px; margin-top: 10px; }
.qm-history-ic {
  width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 14px;
  color: var(--st-neutral-fg); background: var(--st-neutral-bg); border: 1px solid var(--st-neutral-line);
}
.qm-history-ic.is-ok { color: var(--st-ok-fg); background: var(--st-ok-bg); border-color: var(--st-ok-line); }
.qm-history-ic.is-bad { color: var(--st-bad-fg); background: var(--st-bad-bg); border-color: var(--st-bad-line); }
.qm-history-ic.is-step { color: var(--st-qm-fg); background: var(--st-qm-bg); border-color: var(--st-qm-line); }
.qm-history-title { font-weight: 700; font-size: .875rem; color: var(--ink); }
.qm-history-meta { font-size: .8125rem; color: var(--muted); }
.qm-history-comment { font-size: .875rem; color: var(--ink-2); font-style: italic; margin-top: 2px; }

.process-step, .workflow-step {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); color: var(--ink);
}
.process-step.active, .workflow-step.active { border-color: var(--st-qm-line); background: var(--st-qm-bg); }
.process-step.completed, .workflow-step.completed { border-color: var(--st-ok-line); background: var(--st-ok-bg); }
.process-step.rejected, .workflow-step.rejected { border-color: var(--st-bad-line); background: var(--st-bad-bg); }
.process-step .step-icon { width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line); flex: none; }

/* ---------- Dokumentinhalt (gerendertes Markdown) ---------- */
/* Spalte nutzt die Kartenbreite; nur Fließtext bleibt auf lesbare Zeilenlänge begrenzt (1240npf81m2) */
.document-content, #preview-content { font-size: 1rem; line-height: 1.65; color: var(--ink); max-width: none; min-width: 0; }
.document-content > :is(p, ul, ol, dl), #preview-content > :is(p, ul, ol, dl) { max-width: 100ch; }
.document-content h1, .document-content h2, .document-content h3, .document-content h4,
#preview-content h1, #preview-content h2, #preview-content h3, #preview-content h4 { margin: 1.6em 0 .5em; }
.document-content > :first-child, #preview-content > :first-child { margin-top: 0; }
.document-content h1, #preview-content h1 { font-size: 2rem; padding-bottom: .25em; border-bottom: 1px solid var(--line); }
.document-content h2, #preview-content h2 { font-size: 1.625rem; }
.document-content h3, #preview-content h3 { font-size: 1.375rem; }
.document-content h4, .document-content h5, .document-content h6,
#preview-content h4, #preview-content h5, #preview-content h6 { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.document-content a, #preview-content a { color: var(--link); text-decoration: underline; }
.document-content code, #preview-content code { font-size: .875em; background: var(--surface-2); color: var(--st-bad-fg); border: 1px solid var(--line); border-radius: 4px; padding: .1em .35em; }
.document-content pre, #preview-content pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; }
.document-content pre code, #preview-content pre code { background: none; border: 0; padding: 0; color: var(--ink); }
.document-content blockquote, #preview-content blockquote { margin: 1em 0; padding: 10px 16px; background: var(--notice-bg); border: 1px solid var(--notice-line); border-radius: 8px; color: var(--notice-ink); }
.document-content blockquote > :last-child, #preview-content blockquote > :last-child { margin-bottom: 0; }
/* Tabelle bricht Text um, solange es geht; ist sie breiter als die Spalte, scrollt sie im eigenen Bereich statt Karte/Seite zu sprengen */
.document-content table, #preview-content table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 1em 0; font-size: .9375rem; }
/* Scroll-Bereich um die Tabelle (table-scroll.js, 1240npf81pw): per Tastatur fokussierbar, sobald die Tabelle breiter als die Spalte ist */
.document-content .qm-table-scroll, #preview-content .qm-table-scroll { max-width: 100%; overflow-x: auto; margin: 1em 0; }
.document-content .qm-table-scroll > table, #preview-content .qm-table-scroll > table { display: table; width: auto; max-width: none; overflow: visible; margin: 0; }
.qm-table-scroll:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.document-content th, .document-content td, #preview-content th, #preview-content td { border: 1px solid var(--line); padding: 8px 12px; text-align: left; vertical-align: top; }
.document-content th, #preview-content th { background: var(--surface-2); font-weight: 700; color: var(--heading); }
.document-content ul li::marker, #preview-content ul li::marker { color: var(--tiffany); }
.document-content img, .markdown-body img, .rendered-content img, #preview-content img { max-width: 100%; height: auto; display: block; border-radius: 6px; margin: .5rem 0; }
html[data-theme="dark"] .document-content img, html[data-theme="dark"] #preview-content img { background: #fff; }
/* Prozessdiagramme mit Namen als Bildunterschrift (86cae1ehq) */
.bpmn-figure { margin: .75rem 0 1.25rem; }
.bpmn-figure img { margin-bottom: .375rem; }
.bpmn-caption { font-size: .875rem; color: var(--muted); }

/* Inhaltsverzeichnis */
#table-of-contents ul { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); }
#table-of-contents li a { display: block; padding: 4px 0 4px 12px; margin-left: -1px; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; font-size: .875rem; line-height: 1.35; }
#table-of-contents li a:hover { color: var(--heading); border-left-color: var(--tiffany); }

/* ---------- Editor (EasyMDE / CodeMirror) ---------- */
.editor-toolbar {
  background: var(--surface-2) !important; border: 1px solid var(--line-strong) !important; border-bottom: 0 !important;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0; opacity: 1; padding: 6px 8px;
}
.editor-toolbar:hover { opacity: 1; }
.editor-toolbar a, .editor-toolbar button { color: var(--ink-2) !important; border-radius: 5px; border: 1px solid transparent !important; }
.editor-toolbar a:hover, .editor-toolbar a.active, .editor-toolbar button:hover, .editor-toolbar button.active { background: var(--surface-sunk) !important; border-color: var(--line) !important; color: var(--heading) !important; }
.editor-toolbar button:not(.qm-toolbar-btn) > .bi { font-size: 1.05rem; line-height: 1; vertical-align: -.1em; }
.editor-toolbar i.separator { border-left-color: var(--line) !important; border-right-color: transparent !important; }
.editor-toolbar.disabled-for-preview a:not(.no-disable), .editor-toolbar.disabled-for-preview button:not(.no-disable) { opacity: .45; }
.CodeMirror {
  background: var(--surface) !important; color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important; border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-family: var(--font-mono); font-size: 14px; line-height: 1.55; min-height: 380px;
}
.CodeMirror-focused { border-color: var(--focus) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 18%, transparent); }
.CodeMirror-cursor { border-left-color: var(--ink) !important; }
.CodeMirror-selected, .CodeMirror-focused .CodeMirror-selected, .CodeMirror-line::selection, .CodeMirror-line > span::selection { background: color-mix(in srgb, var(--tiffany) 45%, transparent) !important; }
.CodeMirror .CodeMirror-placeholder { color: var(--muted) !important; }
.CodeMirror .cm-header { color: var(--heading); }
.CodeMirror .cm-link, .CodeMirror .cm-url { color: var(--link); }
.CodeMirror .cm-comment { background: var(--surface-2); color: var(--st-bad-fg); }
.CodeMirror .cm-quote { color: var(--muted); }
.editor-statusbar { color: var(--muted) !important; font-size: .75rem; }
.editor-preview, .editor-preview-side { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important; }
.editor-toolbar.fullscreen, .CodeMirror-fullscreen, .editor-preview-side { z-index: 1040; }
.editor-toolbar .qm-toolbar-btn {
  display: inline-flex !important; align-items: center; gap: 5px; height: 26px; margin-left: 4px; padding: 0 10px !important;
  border-radius: 5px; font: 700 12px/1 var(--font-body); cursor: pointer; vertical-align: middle;
  color: var(--on-primary) !important; background: var(--primary) !important; border: 1px solid var(--primary) !important;
}
.editor-toolbar .qm-toolbar-btn:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }
.editor-toolbar .qm-toolbar-btn.is-alt { color: var(--blue) !important; background: var(--mint) !important; border-color: var(--tiffany) !important; }
html[data-theme="dark"] .editor-toolbar .qm-toolbar-btn.is-alt { color: var(--mint) !important; background: rgba(152, 206, 199, .14) !important; border-color: rgba(152, 206, 199, .45) !important; }
/* Bearbeitungsleiste bleibt beim Scrollen sichtbar (1240npf81qc): Kopfzeile mit Umschalter Texteditor/Vorschau und EasyMDE-Leiste
   haften untereinander unter der Kopfzeile der Seite. Die Höhen misst editor-sticky.js (--qm-topbar-h, --qm-editor-head-h, --qm-editor-bar-h). */
.qm-editor-head { position: sticky; top: var(--qm-topbar-h, 60px); z-index: 1020; background-color: var(--surface); padding-top: .5rem; padding-bottom: .5rem; }
/* Schmal: nur der Umschalter, die Überschrift bleibt für Screenreader erhalten (spart Höhe in der haftenden Zeile) */
@media (max-width: 575.98px) {
  .qm-editor-head h6 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.EasyMDEContainer .editor-toolbar:not(.fullscreen) { position: sticky; top: calc(var(--qm-topbar-h, 60px) + var(--qm-editor-head-h, 61px)); z-index: 1010; box-shadow: 0 -4px 0 0 var(--surface); }
/* Sprünge per Tastatur/Fokus (Cursor, Anker) landen nicht unter den haftenden Leisten */
html.qm-editor-sticky { scroll-padding-top: calc(var(--qm-topbar-h, 60px) + var(--qm-editor-head-h, 61px) + var(--qm-editor-bar-h, 40px) + 8px); }
/* Niedriges Fenster (Querformat, Bildschirmtastatur): nur die Formatierungsleiste haftet, der Platz gehört dem Text */
@media (max-height: 520px) {
  .qm-editor-head { position: static; }
  .EasyMDEContainer .editor-toolbar:not(.fullscreen) { top: var(--qm-topbar-h, 60px); }
  html.qm-editor-sticky { scroll-padding-top: calc(var(--qm-topbar-h, 60px) + var(--qm-editor-bar-h, 40px) + 8px); }
}
#autosave-status { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; font-size: .8125rem; }
.markdown-help code, .qm-mdhelp code { font-family: var(--font-mono); font-size: .8125rem; color: var(--st-bad-fg); background: transparent; }
#bpmn-container { background: #fafafa; border-radius: 8px; }

/* ---------- Modale ---------- */
.modal-content {
  --bs-modal-bg: var(--surface); --bs-modal-color: var(--ink); --bs-modal-border-color: var(--line);
  --bs-modal-header-border-color: var(--line); --bs-modal-footer-border-color: var(--line);
  border-radius: 12px; box-shadow: var(--shadow-pop);
}
.modal-title { font-family: var(--font-head); font-size: 1.5rem; color: var(--heading); }
.modal-backdrop { --bs-backdrop-bg: #001520; --bs-backdrop-opacity: .55; }

/* ---------- Spinner / Lade-Zustände ---------- */
.spinner-border { color: var(--heading); --bs-spinner-border-width: .18em; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline-block; }

/* ---------- Anmeldung (wie Portal .login-wrap / .login-card) ---------- */
body.qm-login { background: var(--blue); }
html[data-theme="dark"] body.qm-login { background: #031520; }
body.qm-login #main-content { display: flex; align-items: center; justify-content: center; padding: 40px 20px; max-width: none; }
.qm-login-card {
  background: var(--surface); color: var(--ink); border-radius: 12px; width: 100%; max-width: 400px;
  padding: 36px 34px 30px; box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
}
html[data-theme="dark"] .qm-login-card { border: 1px solid var(--line); }
.qm-login-logo { height: 30px; width: auto; display: block; margin: 0 0 22px; }
.qm-login-logo-dark { display: none; }
html[data-theme="dark"] .qm-login-logo-light { display: none; }
html[data-theme="dark"] .qm-login-logo-dark { display: block; }
.qm-login-card h1 { font-size: 1.75rem; margin: 0 0 2px; }
.qm-login-card .qm-lead { color: var(--muted); font-size: .875rem; margin: 0 0 20px; }
.qm-login-card .form-control { font-size: 1rem; }
.qm-login-card .btn { width: 100%; padding-top: .75rem; padding-bottom: .75rem; }
.qm-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--muted); font-size: .8125rem; }
.qm-divider::before, .qm-divider::after { content: ""; height: 1px; flex: 1; background: var(--line); }
.qm-login-foot { margin: 18px 0 0; font-size: .75rem; color: var(--muted); line-height: 1.5; }
.qm-login-theme { position: fixed; top: 14px; right: 16px; }

/* ---------- Fußzeile (schlank) ---------- */
.qm-footer {
  flex-shrink: 0; border-top: 1px solid var(--line); background: transparent; color: var(--muted);
  font-size: .8125rem; padding: 18px 0 22px;
}
.qm-footer .container-fluid { max-width: 1320px; padding: 0 26px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between; }
.qm-footer a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-strong); }
.qm-footer a:hover { color: var(--heading); }
body.qm-login .qm-footer { border-top-color: rgba(255, 255, 255, .14); color: #cfe4e6; }
body.qm-login .qm-footer a { color: #cfe4e6; }

/* ---------- Profil ---------- */
.qm-avatar {
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-family: var(--font-head); font-size: 28px; font-weight: 600; color: var(--blue); background: var(--mint); border: 1px solid var(--tiffany);
}

/* ---------- Altlasten neutralisieren ---------- */
.helo-tagline { color: var(--muted); font-size: .9375rem; font-weight: 400; }
.helo-brand { color: var(--heading); font-family: var(--font-head); }
.helo-highlight { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; padding: 6px 10px 4px; border-radius: 5px; color: var(--st-qm-fg); background: var(--st-qm-bg); border: 1px solid var(--st-qm-line); }
.bg-light-success { background: transparent !important; }
.bg-body { background: transparent !important; }
.kmu-tip { background: var(--notice-bg); border: 1px solid var(--notice-line); color: var(--notice-ink); border-radius: 8px; padding: 12px 16px; }

/* ---------- Mobil ---------- */
@media (max-width: 767.98px) {
  #main-content { padding: 22px 14px 36px; }
  #flash-messages { padding: 0 14px; }
  .qm-pagehead { margin-bottom: 18px; }
  .qm-pagehead h1 { font-size: 1.875rem; }
  .card { --bs-card-spacer-x: 1rem; --bs-card-spacer-y: 1rem; }
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .form-control, .form-select { min-height: 44px; font-size: 16px; }
  .table-responsive .table { white-space: nowrap; }
  .qm-login-card { padding: 28px 22px 24px; }
  .document-row .badge { white-space: normal; }
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .qm-stat:hover, .qm-action:hover { transform: none; }
}

/* ---------- Druck ---------- */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  .qm-topbar, .qm-footer, #flash-messages, .btn, .dropdown, #autosave-status, #workflow-actions { display: none !important; }
  .card { border: 1px solid #ccc !important; break-inside: avoid; }
  #main-content { max-width: none; padding: 0; }
  .document-content table, #preview-content table { display: table; width: 100%; overflow: visible; }  /* Papier scrollt nicht */
  .document-content .qm-table-scroll, #preview-content .qm-table-scroll { overflow: visible; }
  .document-content .qm-table-scroll > table, #preview-content .qm-table-scroll > table { width: 100%; }
}

/* ---------- Kleinteile ---------- */
.qm-h-note { font-family: var(--font-body); font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: 6px; }
.qm-error-ic { width: 52px; height: 52px; font-size: 22px; }
.qm-folder-ic { font-size: 1.75rem; color: var(--heading); }

/* ---------- Rollen-Ansicht für Admins (1240npf71v6) ----------
   Gelber Balken unter der Kopfzeile, solange eine Vorschau aktiv ist; gesperrte
   Schaltflächen bleiben sichtbar (so sieht die Rolle sie), sind aber deaktiviert. */
.qm-role.qm-role-preview { background: var(--st-draft-bg); color: var(--st-draft-fg); box-shadow: inset 0 0 0 1px var(--st-draft-line); }
.qm-preview-bar {
  background: var(--st-draft-bg);
  border-bottom: 1px solid var(--st-draft-line);
  color: var(--st-draft-fg);
}
.qm-preview-inner {
  max-width: 1600px; margin: 0 auto; padding: 9px 26px;
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
}
.qm-preview-inner > .bi { font-size: 1.15rem; }
.qm-preview-inner > span { flex: 1 1 22rem; }
.qm-preview-back {
  border: 1px solid currentColor; background: transparent; color: inherit;
  border-radius: var(--radius-sm); padding: 4px 12px; font-weight: 700; white-space: nowrap;
}
.qm-preview-back:hover { background: var(--st-draft-fg); color: var(--surface); }
.qm-preview-back:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qm-preview [data-qm-locked] { opacity: .55; cursor: not-allowed; }
.qm-preview a[data-qm-locked] { pointer-events: auto; }

/* ---------- Diagramme, aufklappbare Abschnitte, Statusmarker im Dokumentinhalt (1240npf8axy) ---------- */
/* Gilt in Dokumentansicht, Editor-Vorschau (Seitenansicht und Vollbild) und Druck. */
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram { margin: 1rem 0 1.25rem; max-width: 100%; overflow-x: auto; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-img { display: block; max-width: 100%; height: auto; background: #fafbfc; border-radius: 6px; }
@media (max-width: 575.98px) {
  /* schmale Bildschirme: breite Diagramme scrollen im eigenen Kasten, nicht die Seite */
  :is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-img { max-width: none; }
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-error {
  margin: 1rem 0; padding: .75rem 1rem; border: 1px solid var(--st-draft-line); border-left-width: 4px; border-radius: 8px;
  background: var(--st-draft-bg); color: var(--ink);
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-error p { margin: 0 0 .5rem; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-error strong { color: var(--st-draft-fg); }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .qm-diagram-error pre { margin: 0; max-height: 18rem; overflow: auto; }

:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details {
  margin: .75rem 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details > summary {
  cursor: pointer; padding: .6rem .9rem; font-weight: 600; color: var(--heading); border-radius: 8px;
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details[open] > summary { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details > :not(summary) { margin-left: .9rem; margin-right: .9rem; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) details > :not(summary):last-child { margin-bottom: .9rem; }

/* Statusmarker: feste Klassen, Aussage steht im Text; Symbol (voll / halb / leer) und Rahmen kommen zur Farbe dazu */
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) :is(.status-auto, .status-vorbereitet, .status-manuell) {
  border: 1px solid; border-radius: 999px; padding: .05em .65em .05em .55em; font-size: .875em; font-weight: 600; line-height: 1.55;
  display: inline-block; white-space: nowrap;
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) div:is(.status-auto, .status-vorbereitet, .status-manuell) {
  display: block; border-radius: 8px; padding: .5rem .8rem; white-space: normal; margin: .75rem 0;
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) :is(.status-auto, .status-vorbereitet, .status-manuell)::before {
  content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .45em; border: 1.5px solid currentColor; border-radius: 50%; vertical-align: -.05em; box-sizing: border-box;
}
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .status-auto { color: var(--st-ok-fg); background: var(--st-ok-bg); border-color: var(--st-ok-line); }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .status-auto::before { background: currentColor; }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .status-vorbereitet { color: var(--st-draft-fg); background: var(--st-draft-bg); border-color: var(--st-draft-line); }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .status-vorbereitet::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
:is(.document-content, #preview-content, .editor-preview, .editor-preview-side) .status-manuell { color: var(--st-neutral-fg); background: var(--st-neutral-bg); border-color: var(--st-neutral-line); }

@media print {
  .qm-diagram { overflow: visible; break-inside: avoid; }
  .qm-diagram-img { max-width: 100% !important; max-height: 230mm; width: auto; }
  :is(.document-content, #preview-content) details > summary { list-style: none; }
}

/* Dokument verlinken (1240npf987x): Suche im Editor, automatisch verlinkte Dokumentnummern */
.qm-doc-link { text-decoration-style: dotted; text-decoration-thickness: 1px; }
.qm-doc-link:hover, .qm-doc-link:focus-visible { text-decoration-style: solid; }
.qm-doclink-status { margin-top: 12px; color: var(--muted); font-size: .875rem; min-height: 1.25rem; }
.qm-doclink-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.qm-doclink-item {
  display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr auto; align-items: baseline; gap: 4px 12px; width: 100%;
  min-height: 48px; padding: 10px 12px; text-align: left; cursor: pointer;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.qm-doclink-item:hover { border-color: var(--tiffany); background: var(--surface-2); }
.qm-doclink-item:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qm-doclink-num { font-weight: 700; color: var(--heading); white-space: nowrap; }
.qm-doclink-title { overflow-wrap: anywhere; }
.qm-doclink-ver { color: var(--muted); font-size: .8125rem; white-space: nowrap; }
@media (max-width: 575.98px) {
  .qm-doclink-item { grid-template-columns: 1fr auto; }
  .qm-doclink-title { grid-column: 1 / -1; grid-row: 2; }
}