/* Complass — compliance portal. CI „Navigator“: Tiefsee (deep sea), Messing (brass), Lagune (lagoon), Nebelblau (mist blue) (Segeltuch (sailcloth) as text colour on Tiefsee); Marcellus + Work Sans.
Light and dark theme: follows the system setting, can be overridden by the switch (data-theme on <html>). */

@font-face { font-family: "Marcellus"; font-weight: 400; font-display: swap; src: url("fonts/marcellus-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 400; font-display: swap; src: url("fonts/work-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 500; font-display: swap; src: url("fonts/work-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Work Sans"; font-weight: 600 700; font-display: swap; src: url("fonts/work-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #eef2f7;            /* Nebelblau (since 26.09.2026 instead of Segeltuch) */
  --bg-alt: #e3e9f1;
  --surface: #ffffff;
  --inset: #f3f6fa;         /* Surfaces inside boxes */
  --inset-alt: #e6ecf3;
  --dark: #13233f;          /* Tiefsee */
  --dark-2: #0c1830;
  --dark-3: #1c3560;
  --on-dark: #f7f3ea;
  --on-dark-soft: #d3dae6;
  --on-dark-faint: #a9b6ca;
  --on-dark-line: rgba(247, 243, 234, .18);
  --ink: #1b2638;
  --ink-soft: #3a4558;
  --ink-faint: #5d687a;
  --line: #d9e0ea;
  --line-strong: #c5cfdc;
  --accent: #a8761a;        /* Messing dark: lines, icons, large text on a light background */
  --accent-dark: #8a5f12;   /* Links, buttons (white text) */
  --accent-darker: #734e0e;
  --accent-tint: #e8eef7;
  --accent-bright: #e0a93b; /* Messing: accents on Tiefsee */
  --on-accent: #ffffff;
  --btn-bg: #e0a93b; --btn-ink: #13233f; --btn-bg-hover: #d49a2a;   /* Main button Messing with Tiefsee text (7.4 : 1) */
  --focus-ring: rgba(168, 118, 26, .28);
  --ok-bg: #e4f1ee; --ok-ink: #1f5f58; --ok-line: #c3dfd9; --ok-fill: #2f7f77;   /* Lagune */
  --warn-bg: #fbf1dc; --warn-ink: #7a5310; --warn-line: #efd9a8;
  --err-bg: #fae9e6; --err-ink: #9a2f24; --err-line: #efcbc4; --danger-fill: #9a2f24;
  --info-bg: #e7ecf4; --info-ink: #13233f; --info-line: #cad5e6;
  --ref-hover: #e0e7f1;
  --font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --font-sans: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --radius: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(19, 35, 63, .06), 0 1px 1px rgba(19, 35, 63, .04);
  --shadow-md: 0 8px 24px rgba(19, 35, 63, .10);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, .25);
  --t: 160ms ease;
}

/* Dark theme — identical tokens, once for the system setting, once for the switch */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #1c1d20; --bg-alt: #232428; --surface: #132440;   /* charcoal background, boxes in Tiefsee */
    --inset: #0f1d36; --inset-alt: #1a2c4d;
    --dark: #13233f; --dark-2: #0c1830; --dark-3: #1c3560;
    --ink: #ede8dc; --ink-soft: #c5ccd8; --ink-faint: #9aa5b7;
    --line: #22365a; --line-strong: #2e4570;
    --accent: #e0a93b; --accent-dark: #e0a93b; --accent-darker: #edbb55; --accent-tint: #2b2a23;
    --on-accent: #13233f; --focus-ring: rgba(224, 169, 59, .32); --btn-bg: #e0a93b; --btn-ink: #13233f; --btn-bg-hover: #edbb55;
    --ok-bg: #12302e; --ok-ink: #7fd3cb; --ok-line: #1e4a46;
    --warn-bg: #33290f; --warn-ink: #f0c66b; --warn-line: #4d3d15;
    --err-bg: #3a1a18; --err-ink: #f2a196; --err-line: #5a2622; --danger-fill: #b83a2d;
    --info-bg: #16264a; --info-ink: #b9cae8; --info-line: #26406e;
    --ref-hover: #1c3156;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1c1d20; --bg-alt: #232428; --surface: #132440;   /* charcoal background, boxes in Tiefsee */
    --inset: #0f1d36; --inset-alt: #1a2c4d;
  --dark: #13233f; --dark-2: #0c1830; --dark-3: #1c3560;
  --ink: #ede8dc; --ink-soft: #c5ccd8; --ink-faint: #9aa5b7;
  --line: #22365a; --line-strong: #2e4570;
  --accent: #e0a93b; --accent-dark: #e0a93b; --accent-darker: #edbb55; --accent-tint: #2b2a23;
  --on-accent: #13233f; --focus-ring: rgba(224, 169, 59, .32); --btn-bg: #e0a93b; --btn-ink: #13233f; --btn-bg-hover: #edbb55;
  --ok-bg: #12302e; --ok-ink: #7fd3cb; --ok-line: #1e4a46;
  --warn-bg: #33290f; --warn-ink: #f0c66b; --warn-line: #4d3d15;
  --err-bg: #3a1a18; --err-ink: #f2a196; --err-line: #5a2622; --danger-fill: #b83a2d;
  --info-bg: #16264a; --info-ink: #b9cae8; --info-line: #26406e;
  --ref-hover: #1c3156;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 8px 24px rgba(0, 0, 0, .35); --shadow-lg: 0 20px 60px rgba(0, 0, 0, .5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--ink); text-decoration: none; font-weight: 500; }
a:hover { color: var(--accent-dark); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; color: var(--ink); }
h1, h2 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; }
h1 { font-size: clamp(1.6rem, 3vw, 2.1rem); }
h2 { font-size: 1.35rem; }
h3, .h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; }
.h4 { font-size: .98rem; font-weight: 700; }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; background: var(--inset-alt); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.icon { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; flex-shrink: 0; }
.muted { color: var(--ink-faint); }
.small { font-size: .87rem; }
.lead { font-size: 1.05rem; max-width: 760px; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1 1 auto; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eyebrow { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 6px; }
.clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--accent-dark); color: var(--on-accent); padding: 8px 14px; border-radius: var(--radius); z-index: 100; }
.skip-link:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 10px 18px; border-radius: var(--radius); font: inherit; font-weight: 700; font-size: .92rem; border: 1px solid transparent; cursor: pointer; transition: background var(--t), border-color var(--t), color var(--t); white-space: nowrap; text-decoration: none !important; line-height: 1.2; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--btn-bg-hover); color: var(--btn-ink); } /* Link hover (a:hover) must not recolour the text, otherwise Messing on Messing in dark mode */
.btn-ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn-danger { background: var(--danger-fill); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 13px; font-size: .86rem; }
.btn-xs { padding: 4px 9px; font-size: .8rem; font-weight: 400; }
details > summary.btn { list-style: none; }
details > summary.btn::-webkit-details-marker { display: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent-dark); cursor: pointer; font: inherit; }
.linklike:hover { text-decoration: underline; }
.icon-btn { background: none; border: 0; color: var(--ink-faint); font-size: 1.2rem; cursor: pointer; padding: 2px 6px; border-radius: 4px; }
.icon-btn:hover { color: var(--err-ink); background: var(--err-bg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.inline-form { display: inline; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 14px; margin: 0 0 1em; }
/* Collapsed forms (data-toggle, e.g. document control: withdraw, edit control details) stay hidden despite display: grid */
.form[hidden], .import-box[hidden] { display: none; }
.form label, .cat-fields label, .filter-bar label { display: grid; gap: 5px; font-weight: 700; font-size: .88rem; }
/* Own display/gap so a nested <div class="form-grid"> inside a .form lays out in columns too, not only form.form.form-grid */
.form-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); align-items: end; }
.form-grid .span-2 { grid-column: 1 / -1; }
/* Field with its own label: label, hint, control stacked. The hint sits directly under the label in normal weight and is
   tied to the control with aria-describedby, so the accessible name stays short (risk form). */
.form-field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.form-field > label { font-weight: 700; font-size: .88rem; }
.form-field > .hint { display: block; margin: -2px 0 2px; line-height: 1.4; }
.form-field > input + .hint, .form-field > select + .hint, .form-field > textarea + .hint { margin: 2px 0 0; }
/* Grid whose fields start at the same top line instead of the default bottom alignment */
.form-grid.form-grid-top { align-items: start; }
.rk-form textarea { min-height: 5.6em; }
.form-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.form-inline input[type=text], .form-inline input[type=url], .form-inline input[type=password] { flex: 1 1 200px; }
.align-end { align-self: end; }
input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url], input[type=date], input[type=datetime-local], input[type=number], input[type=search], select, textarea {
  font: inherit; font-weight: 400; font-size: .94rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 9px 11px; width: 100%; min-width: 0;
  transition: border-color var(--t), box-shadow var(--t);
}
textarea { resize: vertical; line-height: 1.5; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
input[readonly], textarea[readonly], select:disabled { background: var(--inset-alt); }
/* Field rejected by the server (kt-f60): thicker border in the error colour; the message names the field */
[aria-invalid="true"] { border-color: var(--err-ink); box-shadow: 0 0 0 1px var(--err-ink); }
/* max-width/min-width: a file input's intrinsic width (button plus file name) must never widen the page at 320 px
   (WCAG 1.4.10, risk and vulnerability pages, 13.10.2026) */
input[type=file] { font: inherit; font-size: .88rem; max-width: 100%; min-width: 0; }
/* Password fields with show/hide button (app.js wraps the input) */
.pw-wrap { position: relative; display: block; min-width: 0; }
.form-inline .pw-wrap { flex: 1 1 200px; }
/* Visible label wrapping an inline field (a11y S16): label grows like the field, button aligns with the input */
.form-inline .form-inline-field { flex: 1 1 200px; }
.form-inline:has(> .form-inline-field) { align-items: end; }
.pw-wrap input { padding-right: 44px; }
.pw-wrap input::-ms-reveal { display: none; }
.pw-toggle { position: absolute; top: 50%; right: 5px; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 4px; background: none; color: var(--ink-faint); cursor: pointer; }
.pw-toggle:hover { color: var(--ink); background: var(--inset); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; color: var(--ink); }
.hint { font-weight: 400; font-size: .82rem; color: var(--ink-faint); }
.upload-original-hint { display: block; margin-top: 4px; line-height: 1.4; }
.check { display: flex !important; grid-template-columns: none; gap: 10px; align-items: flex-start; font-weight: 400 !important; cursor: pointer; }
/* Checkboxes and radio buttons at least 24 x 24 px (WCAG 2.5.8, a11y S19), also standalone ones in tables and lists */
.check input { width: 24px; height: 24px; margin: 0; accent-color: var(--accent-dark); flex-shrink: 0; }
td > input[type=checkbox], th > input[type=checkbox], .notif-pick input[type=checkbox] { width: 24px; height: 24px; margin: 0; vertical-align: middle; }
.code-input { font-size: 1.35rem !important; letter-spacing: .25em; text-align: center; font-family: ui-monospace, Menlo, monospace !important; }

/* ---------- Alerts / badges / status ---------- */
.alert { padding: 12px 16px; border-radius: var(--radius); margin: 0 0 16px; border: 1px solid transparent; font-size: .93rem; }
.alert-success { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.alert-error { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.alert-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.alert-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px; background: var(--inset-alt); color: var(--ink-soft); white-space: nowrap; vertical-align: middle; }
.badge-module { background: var(--dark-3); color: var(--on-dark); }
.badge-ok { background: var(--ok-bg); color: var(--ok-ink); }
.badge-warn { background: var(--warn-bg); color: var(--warn-ink); }
.badge-muted { background: var(--inset-alt); color: var(--ink-faint); }
.status { display: inline-block; font-size: .78rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--inset-alt); color: var(--ink-faint); white-space: nowrap; }
.status-entwurf { background: var(--accent-tint); color: var(--accent-darker); }
.status-in_pruefung { background: var(--warn-bg); color: var(--warn-ink); }
.status-freigegeben { background: var(--ok-bg); color: var(--ok-ink); }
.ref { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--info-ink); background: var(--info-bg); padding: 2px 8px; border-radius: 4px; max-width: 100%; overflow-wrap: anywhere; }
a.ref:hover { background: var(--ref-hover); text-decoration: none; }
.refs { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }

progress.progress { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 8px; border: 0; border-radius: 999px; background: var(--inset-alt); overflow: hidden; margin: 10px 0 6px; color: var(--accent); }
progress.progress::-webkit-progress-bar { background: var(--inset-alt); border-radius: 999px; }
progress.progress::-webkit-progress-value { background: var(--accent); border-radius: 999px; }
progress.progress::-moz-progress-bar { background: var(--accent); border-radius: 999px; }
progress.progress-sm { height: 5px; margin: 6px 0 4px; }

/* ---------- Auth ---------- */
.auth-body { min-height: 100vh; background: radial-gradient(1200px 600px at 20% -10%, var(--dark-3) 0%, transparent 60%), var(--dark); }
.auth-wrap { max-width: 460px; margin: 0 auto; padding: 48px 16px 32px; }
.auth-brand { text-align: center; margin-bottom: 24px; }
.auth-logo { width: 230px; margin: 0 auto; }
.auth-tag { color: var(--accent-bright); font-family: var(--font-display); font-weight: 300; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; margin: 10px 0 0; }
.auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-lg); }
.auth-card h1 { font-size: 1.6rem; overflow-wrap: break-word; hyphens: auto; } /* long German compounds at 320 px (1.4.10) */
.auth-foot { text-align: center; color: var(--on-dark-faint); font-size: .8rem; margin-top: 20px; }
.auth-foot a { color: var(--on-dark-soft); }
.setup-steps { padding-left: 1.2em; }
.setup-steps li { margin-bottom: 12px; }
.qr { width: 196px; height: 196px; margin: 12px 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.qr svg, .qr canvas, .qr img { width: 100%; height: 100%; }
.secret { display: inline-block; font-size: 1rem; letter-spacing: .08em; padding: 6px 10px; word-break: break-all; }
.codes { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.codes code { display: block; text-align: center; font-size: 1rem; padding: 8px; letter-spacing: .06em; }
/* A single recovery key (28 characters since ASVS A1) spans both columns and may wrap at its hyphens on narrow screens */
.codes li:only-child { grid-column: 1 / -1; }
.codes li:only-child code { overflow-wrap: anywhere; }
details > summary { cursor: pointer; }
details { margin: 0 0 10px; }

/* ---------- App-Layout ---------- */
.topbar { background: var(--dark); color: var(--on-dark); position: sticky; top: 0; z-index: 20; box-shadow: 0 1px 0 var(--on-dark-line); }
.topbar-inner { max-width: 1840px; margin: 0 auto; padding: 0 20px; height: 62px; display: flex; align-items: center; gap: 20px; }
.topbar-brand { display: flex; align-items: center; gap: 12px; color: var(--on-dark); text-decoration: none !important; }
.topbar-brand img { height: 20px; width: auto; }
.topbar-brand span { font-family: var(--font-display); font-weight: 300; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-faint); border-left: 1px solid var(--on-dark-line); padding-left: 12px; }
.page { max-width: 1320px; margin: 0 auto; padding: 28px 20px 48px; min-height: calc(100vh - 62px - 70px); }
.page-narrow { max-width: 760px; margin: 0 auto; }
.page-narrow.wide { max-width: 1040px; }
.site-foot { max-width: 1320px; margin: 0 auto; padding: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--ink-faint); border-top: 1px solid var(--line); }
.site-foot a { color: var(--ink-faint); }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; }
.crumbs { font-size: .85rem; color: var(--ink-faint); margin-bottom: 12px; }
.crumbs a { color: var(--ink-soft); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.panel > :last-child { margin-bottom: 0; }
.subpanel { background: var(--inset); border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.danger-zone { border-color: var(--err-line); }
.empty { text-align: center; max-width: 560px; margin: 40px auto; }
.empty > .icon { width: 44px; height: 44px; color: var(--accent); margin: 0 auto 12px; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 26px; }
.cards-2 { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 22px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; color: inherit; }
a.card { text-decoration: none !important; transition: box-shadow var(--t), border-color var(--t), transform var(--t); }
a.card:hover { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-1px); }
.card h3, .card h2.h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.card-top { display: flex; flex-wrap: wrap; gap: 6px; }
.card-foot { margin-top: auto; padding-top: 14px; }
.module-card h2 { margin-top: 12px; }
.module-card.is-active { border-color: var(--ok-line); }
.tagline { font-weight: 700; color: var(--ink-soft); }
.facts { list-style: none; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--ink-soft); }
.facts .icon { color: var(--accent); margin-right: 4px; }
.price { font-weight: 700; }

.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); font-weight: 700; padding: 8px 10px; border-bottom: 1px solid var(--line-strong); }
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table tr.is-muted td { color: var(--ink-faint); }
.linklist { list-style: none; padding: 0; display: grid; gap: 8px; }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 16px; margin: 0; }
.kv dt { color: var(--ink-faint); font-size: .9rem; }
.kv dd { margin: 0; }
.copy-row { display: flex; gap: 8px; margin-top: 8px; }
.copy-row input { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; }

/* ---------- Projekt ---------- */
.with-sidebar { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.stepnav { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm); }
.stepnav-head { display: block; color: inherit; padding: 6px 6px 12px; border-bottom: 1px solid var(--line); margin-bottom: 8px; text-decoration: none !important; }
.stepnav-head strong { display: block; margin-top: 8px; line-height: 1.3; }
.stepnav-phases { list-style: none; padding: 0; margin: 0; }
.stepnav-phases details { margin: 0; }
.stepnav-phases summary { display: flex; align-items: center; gap: 8px; padding: 8px 6px; border-radius: var(--radius); font-size: .88rem; font-weight: 700; list-style: none; }
.stepnav-phases summary::-webkit-details-marker { display: none; }
.stepnav-phases summary:hover { background: var(--inset); }
.phase-no { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--dark-3); color: var(--on-dark); font-size: .76rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.phase-title { flex: 1; line-height: 1.3; }
.phase-pct { flex-shrink: 0; white-space: nowrap; font-size: .74rem; color: var(--ink-faint); font-weight: 400; }
.stepnav-steps { list-style: none; padding: 0 0 6px 16px; margin: 0; }
.stepnav-steps a { display: flex; gap: 8px; align-items: flex-start; padding: 6px 8px; border-radius: var(--radius); color: var(--ink-soft); font-size: .86rem; line-height: 1.35; text-decoration: none !important; }
.stepnav-steps a:hover { background: var(--inset); color: var(--ink); }
.stepnav-steps a[aria-current] { background: var(--accent-tint); color: var(--accent-darker); font-weight: 700; }
.dot { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; }
.dot .icon { width: 10px; height: 10px; stroke-width: 3; }
.is-done .dot { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.is-current .dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }

.hero-progress { display: flex; gap: 26px; align-items: center; background: linear-gradient(135deg, var(--dark) 0%, var(--dark-3) 100%); color: var(--on-dark); border: 0; }
.hero-progress h2, .hero-progress .eyebrow { color: var(--on-dark); }
.hero-progress .eyebrow { color: var(--accent-bright); }
.hero-progress .muted { color: var(--on-dark-soft); }
.ring { --p: 0; flex-shrink: 0; width: 112px; height: 112px; border-radius: 50%; background: conic-gradient(var(--accent-bright) calc(var(--p) * 1%), var(--on-dark-line) 0); display: flex; align-items: center; justify-content: center; }
.ring span { width: 88px; height: 88px; border-radius: 50%; background: var(--dark); display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-weight: 600; font-size: 1.45rem; font-variant-numeric: tabular-nums lining-nums; }
.phase-list { list-style: none; padding: 0; margin: 0; }
.phase-row, .catalog-row { display: flex; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.phase-list li:last-child .phase-row, .catalog-row:last-child { border-bottom: 0; }
.phase-intro { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius-lg); padding: 20px 24px; margin-bottom: 18px; }
.phase-intro > :last-child { margin-bottom: 0; }
.step-head { margin-bottom: 14px; }
.step-head h1 { margin-bottom: 10px; }
.prose { max-width: 820px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose li { margin-bottom: 4px; }
.tips { background: var(--info-bg); border-radius: var(--radius); padding: 14px 18px; margin-top: 18px; max-width: 820px; }
.tips h3 { color: var(--info-ink); display: flex; gap: 6px; align-items: center; }
.tips ul { margin: 0; }
.tips li { margin-bottom: 4px; color: var(--ink-soft); }
.doc-links { display: grid; gap: 8px; }
.doc-link { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none !important; transition: border-color var(--t), background var(--t); }
.doc-link:hover { border-color: var(--accent); background: var(--inset); }
.doc-link > .icon { color: var(--accent); width: 22px; height: 22px; }
.checklist { list-style: none; padding: 0; margin: 0 0 12px; }
.checklist li { padding: 12px 0; border-bottom: 1px solid var(--line); }
/* Completed items in Lagune instead of struck through: they stay easy to read (e.g. when looking them up in an audit); the tick additionally shows the status */
.checklist li.is-done > .check span { color: var(--ok-ink); }
.check-meta { margin: 6px 0 0 28px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: flex-start; }
.check-meta details { flex: 1 1 260px; margin: 0; }
.check-meta textarea { margin-top: 6px; }
.step-actions { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

.purpose { background: var(--inset-alt); box-shadow: none; }
.doc-section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.help { font-size: .88rem; color: var(--ink-faint); margin-bottom: 10px; max-width: 860px; }
.help p { margin-bottom: .5em; }
.help ul { margin-bottom: .5em; }
.table-edit th { white-space: nowrap; background: var(--inset); }
.table-edit td { padding: 4px; min-width: 140px; }
.table-edit td.col-del, .table-edit th.col-del { min-width: 0; width: 34px; text-align: center; vertical-align: middle; }
.table-edit textarea { border-color: transparent; background: transparent; padding: 7px 8px; min-height: 36px; resize: vertical; }
.table-edit textarea:hover { border-color: var(--line); }
.table-edit textarea:focus { background: var(--surface); border-color: var(--accent); }
.table-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.import-box { margin-top: 12px; padding: 14px 16px; background: var(--inset); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.sticky-actions { position: sticky; bottom: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; box-shadow: var(--shadow-md); }

.filter-bar { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 14px; }
.filter-bar label { min-width: 220px; }
.filter-bar input[type=search] { max-width: 320px; }
.cat-item { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cat-item:last-child { border-bottom: 0; }
.cat-item-head { display: flex; gap: 12px; align-items: flex-start; }
.cat-item-head .small p { margin: 2px 0 0; }
.cat-ref { flex-shrink: 0; min-width: 62px; font-weight: 700; font-size: .82rem; color: var(--info-ink); background: var(--info-bg); padding: 3px 8px; border-radius: 4px; text-align: center; }
.cat-fields { display: grid; grid-template-columns: 110px 170px 1fr 1fr; gap: 10px; margin: 10px 0 0 74px; }
.cat-fields label { font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.cat-fields select, .cat-fields textarea { padding: 6px 8px; font-size: .88rem; }
.cat-control { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin: 8px 0 0 74px; }
.cat-control label { display: grid; gap: 5px; font-weight: 700; font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.cat-control select { padding: 5px 8px; font-size: .86rem; max-width: 240px; }
.cat-review-info { flex: 1 1 200px; }
.cat-release-actions { align-items: flex-end; flex-wrap: wrap; }
.cat-approve { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.cat-approve .doc-reason { display: grid; gap: 4px; min-width: 260px; }
/* Catalogue (SoA package 1, 1.50): collapsible introduction, context line under the title, fields follow "Anwendbar".
   Without JavaScript nothing is hidden: app.js sets data-fields on each entry ("" open, "nein", "ja"). */
.cat-intro > summary { font-weight: 700; color: var(--ink); }
/* t10 (1.91-D): the bulk edit and own-control summaries are 44 px touch targets on phones (the help tip moved out of the summary) */
@media (pointer: coarse) { .cat-bulk > summary, .cat-custom > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; } }
.cat-intro[open] > summary { margin-bottom: 10px; }
.cat-intro .cat-intro-purpose { padding: 12px 14px; border-radius: var(--radius); margin-bottom: 10px; }
.cat-intro > p { margin: 0; }
.cat-context { margin-top: 6px; max-width: 820px; }
.cat-context > summary { font-size: .85rem; color: var(--ink-soft); }
.cat-context-label { font-weight: 700; color: var(--info-ink); }
.cat-context-parts { color: var(--ink-faint); }
.cat-context-parts > span { white-space: nowrap; }
/* Controls keep their natural height instead of stretching to the tallest field of the row */
.cat-item .cat-fields > label { align-content: start; }
/* Below 600 px the head is a column: the flex basis of the title block must not act as a minimum height */
@media (max-width: 600px) { .cat-item .cat-item-head > .grow { flex-basis: auto; } }
.cat-context-body { display: grid; gap: 6px; justify-items: start; padding: 6px 0 2px 16px; border-left: 2px solid var(--line); margin: 6px 0 0 5px; }
.cat-context-body details.original { margin-top: 0; }
.cat-context-body .xref { margin-top: 0; }
.cat-reason-hint { display: none; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--warn-ink); }
.cat-item[data-fields="nein"] .cat-reason-hint { display: block; }
.cat-item[data-fields=""] [data-cat-f="status"], .cat-item[data-fields=""] [data-cat-f="evidence"], .cat-item[data-fields=""] [data-cat-f="review"],
.cat-item[data-fields=""] [data-cat-f="task"], .cat-item[data-fields=""] [data-cat-f="upload"],
.cat-item[data-fields="nein"] [data-cat-f="status"], .cat-item[data-fields="nein"] [data-cat-f="evidence"], .cat-item[data-fields="nein"] [data-cat-f="review"],
.cat-item[data-fields="nein"] [data-cat-f="task"], .cat-item[data-fields="nein"] [data-cat-f="upload"],
.cat-item[data-fields=""] [data-cat-f="sources"], .cat-item[data-fields="nein"] [data-cat-f="sources"] { display: none; }
/* M-G2: kind of a dispensable entry only for applicable entries (shown only with status "Entbehrlich" by app.js) */
.cat-item[data-fields=""] [data-cat-f="dispensable"], .cat-item[data-fields="nein"] [data-cat-f="dispensable"] { display: none; }
/* M-B (ADR 0142): sources of the reason for inclusion, one full row below the fields */
.cat-sources { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cat-sources > legend { float: left; margin-right: 6px; padding: 0; font-weight: 700; font-size: .76rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.cat-sources label.check { display: inline-flex; gap: 6px; align-items: center; font-weight: 400; font-size: .86rem; color: var(--ink); text-transform: none; letter-spacing: 0; }
@media (min-width: 1081px) {
  .cat-item[data-fields=""] .cat-fields, .cat-item[data-fields="nein"] .cat-fields { grid-template-columns: 110px minmax(0, 1fr); }
  .cat-item[data-fields=""] .cat-fields > .ai-suggest, .cat-item[data-fields="nein"] .cat-fields > .ai-suggest { grid-column: 2; }
  /* VDA ISA catalogues (TX1.2): the extra field Ist-Reifegrad gets its own column, so evidence stays wide */
  .cat-fields.has-maturity { grid-template-columns: 110px 170px 170px minmax(0, 1fr) minmax(0, 1fr); }
}

/* ---------- Responsiv ---------- */
@media (max-width: 1080px) {
  .with-sidebar { grid-template-columns: 1fr; }
  .stepnav { position: static; max-height: none; order: 2; }
  .with-sidebar > .content { order: 1; }
  .cat-fields { grid-template-columns: 1fr 1fr; margin-left: 0; }
  .cat-control { margin-left: 0; }
}
/* Light/dark switch sits in the header next to the menu button, not in the menu */
.topbar-inner > .theme-toggle { order: 2; }
/* With 9 navigation items the menu collapses already below 1180 px */
@media (max-width: 1180px) {
  .topbar-inner > .theme-toggle { margin-left: auto; }
  .topbar-brand span { display: none; }
}
@media (max-width: 860px) {
  .cards-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  body { font-size: 14.5px; }
  .page { padding: 20px 16px 40px; }
  .panel { padding: 16px; }
  .auth-card { padding: 24px 18px; }
  /* Same for sign-in cards: "Wiederherstellungsschlüssel" in the ?r=recovery-codes heading widened the page to 351 px at 320 px (WCAG 1.4.10) */
  .auth-card { overflow-wrap: anywhere; hyphens: auto; }
  .auth-card :is(input, textarea, select, code) { hyphens: manual; }
  .hero-progress { flex-direction: column; align-items: flex-start; }
  .cat-fields { grid-template-columns: 1fr; }
  .kv { grid-template-columns: 1fr; }
  .codes { grid-template-columns: 1fr; }
  .cards { grid-template-columns: minmax(0, 1fr); }
  .step-actions { flex-direction: column-reverse; }
  /* Break long compounds instead of widening the page; tables keep scrolling in .table-wrap */
  .page { overflow-wrap: anywhere; hyphens: auto; }
  .page .table { overflow-wrap: normal; hyphens: manual; }
  .page :is(input, textarea, select) { hyphens: manual; }
  .cat-item-head { flex-wrap: wrap; }
  .cat-item-head > .grow { flex: 1 1 180px; }
  .cat-ref { max-width: 100%; }
  /* File and password fields shrink to the form column instead of widening it; long button labels wrap */
  .form, .form label { grid-template-columns: minmax(0, 1fr); }
  .page .btn { white-space: normal; max-width: 100%; }
  .page .inline-form, .page .form-inline { max-width: 100%; min-width: 0; }
  .page .form-inline input[type=file] { max-width: 100%; min-width: 0; }
  .catalog-row { flex-wrap: wrap; }
  .catalog-row > .nowrap { white-space: normal; }
  .lp-btn-lg { white-space: normal; max-width: 100%; text-align: center; }
  .page .badge { white-space: normal; max-width: 100%; }
}

@media print {
  .topbar, .site-foot, .stepnav, .sticky-actions, .row-actions, .table-tools, .import-box, .auth-foot, .btn { display: none !important; }
  body, .auth-body { background: #fff; }
  .with-sidebar { display: block; }
  .panel, .auth-card { box-shadow: none; border: 0; padding: 0; }
}

/* Stichtage (z. B. CRA) */
.dates { list-style: none; padding: 0; margin: 0; }
.dates li { display: flex; gap: 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.dates li:last-child { border-bottom: 0; }
.dates .date { font-weight: 700; min-width: 90px; color: var(--info-ink); }

/* ---------- Rollen und Bereiche ---------- */
.form-inline input.input-narrow { flex: 0 0 110px; max-width: 110px; }

/* Original wording (contextual excerpts from legal acts or licensed standards) */
details.original { margin: 12px 0 0; max-width: 820px; }
details.original > summary { display: inline-flex; gap: 6px; align-items: center; font-size: .85rem; font-weight: 700; color: var(--info-ink); }
.check-meta details.original { flex: 1 1 100%; margin-top: 4px; }
.original-text { margin: 8px 0 0; padding: 12px 16px; background: var(--inset); border-left: 3px solid var(--dark); border-radius: 0 var(--radius) var(--radius) 0; font-family: Georgia, "Times New Roman", serif; font-size: .93rem; color: var(--ink-soft); }
.original-text p { margin: 0 0 .6em; }
.original-text footer { font-family: var(--font-sans); font-size: .78rem; color: var(--ink-faint); margin-top: 6px; }

/* ---------- Papierkorb ---------- */
.inline-details { display: inline-block; vertical-align: top; text-align: left; }
.inline-details[open] > form { margin-top: 8px; min-width: 220px; }

/* ---------- Earlier states (checklist) ---------- */
.history-list { list-style: none; margin: 12px 0 0; padding: 0; }
.history-list > li { border-top: 1px solid var(--line); padding: 10px 0; }
.history-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.history-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.history-items li { display: block; }
.history-items .icon { width: 14px; height: 14px; color: var(--ok-ink); vertical-align: -2px; }
.history-open { display: inline-block; width: 14px; text-align: center; color: var(--ink-faint); }

/* ---------- Mapping: Querverweise und Nachweis-Übernahme ---------- */
.xref { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.xref-chip { font-size: .76rem; background: var(--inset-alt); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; color: var(--ink-soft, var(--ink)); }
.xref-chip strong { color: var(--accent-dark); font-weight: 700; }
.reuse { margin-top: 8px; border-left: 3px solid var(--ok-ink); background: var(--ok-bg); border-radius: 0 var(--radius) var(--radius) 0; padding: 6px 10px; display: grid; gap: 4px; }
.cat-proposal { margin-top: 8px; border: 1px solid var(--info-line); background: var(--info-bg); color: var(--info-ink); border-radius: var(--radius); padding: 8px 12px; display: grid; gap: 6px; }
.cat-proposal .row-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cat-proposal select, .cat-proposal textarea { max-width: 100%; }
.cat-proposal details textarea { width: 100%; margin-top: 4px; }
.reuse-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reuse .icon { width: 14px; height: 14px; color: var(--ok-ink); vertical-align: -2px; }
.cat-item:target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }

/* ---------- Frameworks overview ---------- */
.cov-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cov-stats .panel { margin: 0; display: grid; gap: 2px; }
.cov-stats strong { font-size: 1.6rem; font-family: var(--font-sans); font-weight: 600; line-height: 1.2; }
.cov-stats span { font-size: .85rem; color: var(--ink-faint); }
.cov-table th.cov-col { min-width: 130px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.cov-control { min-width: 280px; max-width: 420px; }
.cov-cell { text-align: center; white-space: nowrap; font-size: .85rem; }
.cov-cell a { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; color: inherit; text-decoration: none; padding: 4px 8px; border-radius: var(--radius); }
.cov-cell a:hover { background: var(--inset-alt); }
.cov-icon { font-size: 1.1rem; line-height: 1; }
.cov-umgesetzt .cov-icon { color: var(--ok-ink); }
.cov-teilweise .cov-icon { color: var(--accent-dark); }
.cov-offen .cov-icon { color: var(--err-ink); }
.cov-unbewertet, .cov-na, .cov-none { color: var(--ink-faint); }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }

/* Gesamttexte (Rechtsakte) */
.law-toc { list-style: none; padding: 0; margin: 0; font-size: .84rem; }
.law-toc li a { display: block; padding: 4px 8px; border-radius: var(--radius); color: var(--ink-soft); text-decoration: none; }
.law-toc li a:hover { background: var(--inset); }
.law-toc-group { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); padding: 10px 8px 4px; }
.law .stepnav-head input { margin-top: 10px; }
.law-section { scroll-margin-top: 80px; }
.law-section:target { box-shadow: 0 0 0 3px var(--focus-ring); }
.law-text { border-left-color: var(--accent); }
.excerpt-edit { display: inline-flex; gap: 4px; align-items: center; margin-top: 6px; }

/* ---------- Gap-Analyse und Maßnahmenplan ---------- */
.gap-scale { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.gap-scale li { display: grid; gap: 1px; }
.gap-item { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); }
.gap-item:first-of-type { border-top: 0; }
.gap-item:target { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.gap-fields { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-start; }
.gap-fields label { display: grid; gap: 4px; font-weight: 700; font-size: .82rem; }
.gap-fields label:first-child { flex: 1 1 200px; }
.gap-fields label:nth-child(2) { flex: 0 0 70px; }
.gap-fields label.grow { flex: 1 1 100%; }
@media (max-width: 760px) { .gap-item { grid-template-columns: 1fr; } }
.gap-bars { display: grid; gap: 12px; margin-bottom: 8px; }
.gap-bar-row { display: grid; grid-template-columns: 190px 1fr 120px; gap: 12px; align-items: center; }
@media (max-width: 640px) { .gap-bar-row { grid-template-columns: 1fr; gap: 4px; } }
.gap-bar-label { font-size: .9rem; font-weight: 700; }
.gap-bar { position: relative; height: 14px; background: var(--inset-alt); border-radius: 999px; overflow: visible; }
.gap-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent-dark); border-radius: 999px; }
.gap-bar-target { position: absolute; top: -4px; bottom: -4px; width: 3px; background: var(--ink); border-radius: 2px; margin-left: -1px; }
.gap-bar-value { font-size: .9rem; font-variant-numeric: tabular-nums; }

/* Stacked distribution bar (supplier cockpit: criticality / latest assessment result) */
/* Supplier cockpit distribution bars: SVG with geometry attributes and colour classes, because the CSP
   (style-src 'self') blocks style attributes. Colours reach at least 3 : 1 against the track and the panel in both
   themes (WCAG 1.4.11; light 4.7-7.5 : 1, dark 5.6-8.9 : 1); the legend carries every value as text. */
.dist-seg-kritisch, .dist-seg-rot { --seg: var(--err-ink); }
.dist-seg-hoch, .dist-seg-gelb { --seg: var(--accent-dark); }
.dist-seg-mittel, .dist-seg-gruen { --seg: var(--ok-ink); }
.dist-seg-niedrig, .dist-seg-ohne { --seg: var(--ink-faint); }
/* Scorecard maturity levels in the supplier cockpit (WV-B1, Scorecard::LEVELS; class = key reduced to [a-z]) */
.dist-seg-mature { --seg: var(--ok-ink); }
.dist-seg-developed { --seg: var(--accent-dark); }
.dist-seg-basic { --seg: var(--err-ink); }
.dist-seg-notassessable { --seg: var(--line-strong); }
.dist-bar { display: block; width: 100%; height: 14px; border-radius: 999px; overflow: hidden; background: var(--inset-alt); }
.dist-bar rect { fill: var(--seg); stroke: var(--surface); stroke-width: 2px; vector-effect: non-scaling-stroke; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 8px; font-size: .84rem; color: var(--ink-soft); }
.dist-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: var(--seg); }
/* Supplier scorecard card (WV-B1, templates/suppliers/_scorecard.php) */
.scorecard-head { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 6px 0 10px; }
.scorecard-value { font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.scorecard-domains { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; }
.scorecard-domains li { display: grid; grid-template-columns: minmax(10rem, 16rem) 1fr 3.5rem; gap: 10px; align-items: center; }
.scorecard-domains li > .small.muted { grid-column: 2 / 4; }
.scorecard-bar { display: block; width: 100%; height: 10px; border-radius: 999px; background: var(--inset-alt); overflow: hidden; }
.scorecard-bar .is-ok { fill: var(--ok-ink); }
.scorecard-bar .is-warn { fill: var(--accent-dark); }
.scorecard-bar .is-err { fill: var(--err-ink); }
.scorecard-num { font-size: .9rem; font-variant-numeric: tabular-nums; text-align: right; }
.scorecard-compact .scorecard-domains li { grid-template-columns: 1fr 3rem; }
.scorecard-compact .scorecard-label, .scorecard-compact .scorecard-domains li > .small.muted { grid-column: 1 / 3; }
.scorecard-compact .scorecard-label { font-size: .84rem; }
@media (max-width: 560px) {
  .scorecard-domains li { grid-template-columns: 1fr 3rem; }
  .scorecard-label, .scorecard-domains li > .small.muted { grid-column: 1 / 3; }
}
.prio { display: inline-block; font-size: .76rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.prio-hoch { background: var(--err-bg); color: var(--err-ink); }
.prio-mittel { background: var(--warn-bg); color: var(--warn-ink); }
.prio-niedrig { background: var(--inset-alt); color: var(--ink-faint); }
.is-overdue { color: var(--err-ink); font-weight: 700; }
.cov-stats .panel.is-alert strong { color: var(--err-ink); }
.js .js-hide { display: none; }
html:not(.js) .js-only { display: none; }
html.js .nojs-only { display: none; }   /* hints only for the plain fields without JavaScript (e.g. Ctrl/Cmd in multi-selects) */
/* Bar widths without inline styles (Content-Security-Policy) */
.gap-w-0 { width: 0%; } .gap-l-0 { left: 0%; }
.gap-w-1 { width: 1%; } .gap-l-1 { left: 1%; }
.gap-w-2 { width: 2%; } .gap-l-2 { left: 2%; }
.gap-w-3 { width: 3%; } .gap-l-3 { left: 3%; }
.gap-w-4 { width: 4%; } .gap-l-4 { left: 4%; }
.gap-w-5 { width: 5%; } .gap-l-5 { left: 5%; }
.gap-w-6 { width: 6%; } .gap-l-6 { left: 6%; }
.gap-w-7 { width: 7%; } .gap-l-7 { left: 7%; }
.gap-w-8 { width: 8%; } .gap-l-8 { left: 8%; }
.gap-w-9 { width: 9%; } .gap-l-9 { left: 9%; }
.gap-w-10 { width: 10%; } .gap-l-10 { left: 10%; }
.gap-w-11 { width: 11%; } .gap-l-11 { left: 11%; }
.gap-w-12 { width: 12%; } .gap-l-12 { left: 12%; }
.gap-w-13 { width: 13%; } .gap-l-13 { left: 13%; }
.gap-w-14 { width: 14%; } .gap-l-14 { left: 14%; }
.gap-w-15 { width: 15%; } .gap-l-15 { left: 15%; }
.gap-w-16 { width: 16%; } .gap-l-16 { left: 16%; }
.gap-w-17 { width: 17%; } .gap-l-17 { left: 17%; }
.gap-w-18 { width: 18%; } .gap-l-18 { left: 18%; }
.gap-w-19 { width: 19%; } .gap-l-19 { left: 19%; }
.gap-w-20 { width: 20%; } .gap-l-20 { left: 20%; }
.gap-w-21 { width: 21%; } .gap-l-21 { left: 21%; }
.gap-w-22 { width: 22%; } .gap-l-22 { left: 22%; }
.gap-w-23 { width: 23%; } .gap-l-23 { left: 23%; }
.gap-w-24 { width: 24%; } .gap-l-24 { left: 24%; }
.gap-w-25 { width: 25%; } .gap-l-25 { left: 25%; }
.gap-w-26 { width: 26%; } .gap-l-26 { left: 26%; }
.gap-w-27 { width: 27%; } .gap-l-27 { left: 27%; }
.gap-w-28 { width: 28%; } .gap-l-28 { left: 28%; }
.gap-w-29 { width: 29%; } .gap-l-29 { left: 29%; }
.gap-w-30 { width: 30%; } .gap-l-30 { left: 30%; }
.gap-w-31 { width: 31%; } .gap-l-31 { left: 31%; }
.gap-w-32 { width: 32%; } .gap-l-32 { left: 32%; }
.gap-w-33 { width: 33%; } .gap-l-33 { left: 33%; }
.gap-w-34 { width: 34%; } .gap-l-34 { left: 34%; }
.gap-w-35 { width: 35%; } .gap-l-35 { left: 35%; }
.gap-w-36 { width: 36%; } .gap-l-36 { left: 36%; }
.gap-w-37 { width: 37%; } .gap-l-37 { left: 37%; }
.gap-w-38 { width: 38%; } .gap-l-38 { left: 38%; }
.gap-w-39 { width: 39%; } .gap-l-39 { left: 39%; }
.gap-w-40 { width: 40%; } .gap-l-40 { left: 40%; }
.gap-w-41 { width: 41%; } .gap-l-41 { left: 41%; }
.gap-w-42 { width: 42%; } .gap-l-42 { left: 42%; }
.gap-w-43 { width: 43%; } .gap-l-43 { left: 43%; }
.gap-w-44 { width: 44%; } .gap-l-44 { left: 44%; }
.gap-w-45 { width: 45%; } .gap-l-45 { left: 45%; }
.gap-w-46 { width: 46%; } .gap-l-46 { left: 46%; }
.gap-w-47 { width: 47%; } .gap-l-47 { left: 47%; }
.gap-w-48 { width: 48%; } .gap-l-48 { left: 48%; }
.gap-w-49 { width: 49%; } .gap-l-49 { left: 49%; }
.gap-w-50 { width: 50%; } .gap-l-50 { left: 50%; }
.gap-w-51 { width: 51%; } .gap-l-51 { left: 51%; }
.gap-w-52 { width: 52%; } .gap-l-52 { left: 52%; }
.gap-w-53 { width: 53%; } .gap-l-53 { left: 53%; }
.gap-w-54 { width: 54%; } .gap-l-54 { left: 54%; }
.gap-w-55 { width: 55%; } .gap-l-55 { left: 55%; }
.gap-w-56 { width: 56%; } .gap-l-56 { left: 56%; }
.gap-w-57 { width: 57%; } .gap-l-57 { left: 57%; }
.gap-w-58 { width: 58%; } .gap-l-58 { left: 58%; }
.gap-w-59 { width: 59%; } .gap-l-59 { left: 59%; }
.gap-w-60 { width: 60%; } .gap-l-60 { left: 60%; }
.gap-w-61 { width: 61%; } .gap-l-61 { left: 61%; }
.gap-w-62 { width: 62%; } .gap-l-62 { left: 62%; }
.gap-w-63 { width: 63%; } .gap-l-63 { left: 63%; }
.gap-w-64 { width: 64%; } .gap-l-64 { left: 64%; }
.gap-w-65 { width: 65%; } .gap-l-65 { left: 65%; }
.gap-w-66 { width: 66%; } .gap-l-66 { left: 66%; }
.gap-w-67 { width: 67%; } .gap-l-67 { left: 67%; }
.gap-w-68 { width: 68%; } .gap-l-68 { left: 68%; }
.gap-w-69 { width: 69%; } .gap-l-69 { left: 69%; }
.gap-w-70 { width: 70%; } .gap-l-70 { left: 70%; }
.gap-w-71 { width: 71%; } .gap-l-71 { left: 71%; }
.gap-w-72 { width: 72%; } .gap-l-72 { left: 72%; }
.gap-w-73 { width: 73%; } .gap-l-73 { left: 73%; }
.gap-w-74 { width: 74%; } .gap-l-74 { left: 74%; }
.gap-w-75 { width: 75%; } .gap-l-75 { left: 75%; }
.gap-w-76 { width: 76%; } .gap-l-76 { left: 76%; }
.gap-w-77 { width: 77%; } .gap-l-77 { left: 77%; }
.gap-w-78 { width: 78%; } .gap-l-78 { left: 78%; }
.gap-w-79 { width: 79%; } .gap-l-79 { left: 79%; }
.gap-w-80 { width: 80%; } .gap-l-80 { left: 80%; }
.gap-w-81 { width: 81%; } .gap-l-81 { left: 81%; }
.gap-w-82 { width: 82%; } .gap-l-82 { left: 82%; }
.gap-w-83 { width: 83%; } .gap-l-83 { left: 83%; }
.gap-w-84 { width: 84%; } .gap-l-84 { left: 84%; }
.gap-w-85 { width: 85%; } .gap-l-85 { left: 85%; }
.gap-w-86 { width: 86%; } .gap-l-86 { left: 86%; }
.gap-w-87 { width: 87%; } .gap-l-87 { left: 87%; }
.gap-w-88 { width: 88%; } .gap-l-88 { left: 88%; }
.gap-w-89 { width: 89%; } .gap-l-89 { left: 89%; }
.gap-w-90 { width: 90%; } .gap-l-90 { left: 90%; }
.gap-w-91 { width: 91%; } .gap-l-91 { left: 91%; }
.gap-w-92 { width: 92%; } .gap-l-92 { left: 92%; }
.gap-w-93 { width: 93%; } .gap-l-93 { left: 93%; }
.gap-w-94 { width: 94%; } .gap-l-94 { left: 94%; }
.gap-w-95 { width: 95%; } .gap-l-95 { left: 95%; }
.gap-w-96 { width: 96%; } .gap-l-96 { left: 96%; }
.gap-w-97 { width: 97%; } .gap-l-97 { left: 97%; }
.gap-w-98 { width: 98%; } .gap-l-98 { left: 98%; }
.gap-w-99 { width: 99%; } .gap-l-99 { left: 99%; }
.gap-w-100 { width: 100%; } .gap-l-100 { left: 100%; }

/* ---------- Dashboard, Projektplan, Kommentare ---------- */
.cov-stats a.panel { color: inherit; text-decoration: none; }
.cov-stats a.panel:hover { border-color: var(--accent); }
.cov-stats .panel .progress { margin-top: 6px; }
#liste { scroll-margin-top: 80px; }
.rk-appetite-tile .icon { width: 14px; height: 14px; vertical-align: -2px; }
.track { display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.track-ok, strong.track-ok { color: var(--ok-ink); }
.track.track-ok { background: var(--ok-bg); }
.track-knapp, strong.track-knapp { color: var(--warn-ink); }
.track.track-knapp { background: var(--warn-bg); }
.track-verzug, strong.track-verzug { color: var(--err-ink); }
.track.track-verzug { background: var(--err-bg); }
.plan-pct .progress { width: 90px; display: inline-block; vertical-align: middle; margin: 0 6px 0 0; }
.plan-table td { vertical-align: top; }
.plan-table input[type=text], .plan-table input[type=date], .plan-table select { font-size: .85rem; padding: 6px 8px; }
.plan-table .owner-free { margin-top: 4px; }
.plan-table tr.is-done td:first-child strong { color: var(--ink-faint); }
.audit-row input[type=text] { flex: 1 1 140px; }
.audit-row input[type=date], .audit-row select { width: auto; }
.dash-project { border-top: 1px solid var(--line); padding: 10px 0; }
.dash-project:first-of-type { border-top: 0; }
.dash-project > summary { cursor: pointer; }
.thread { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.thread li { background: var(--inset-alt); border-radius: var(--radius); padding: 10px 12px; }
.thread-meta { margin-bottom: 4px; }
.thread-body { white-space: normal; overflow-wrap: anywhere; }
@media print {
  .topbar, .site-foot, .row-actions, form button, .skip-link { display: none !important; }
  details { display: block; }
  details > summary { list-style: none; }
  .panel { break-inside: avoid; box-shadow: none; }
}

/* Navigation with many items: do not wrap, more compact; hide the brand suffix earlier */
.topbar-brand span { white-space: nowrap; }
@media (max-width: 1400px) {
  .topbar-brand span { display: none; }
}
.plan-table input[list] { min-width: 140px; }

/* Brand: logo or text wordmark (fallback when no logo is stored in config.php) */
.brand-word { font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--on-dark); }
.brand-word.auth-logo { display: block; width: auto; font-size: 2.6rem; text-align: center; }
.topbar-brand img.brand-logo { height: 26px; }
.auth-logo.brand-logo { width: 250px; }

/* Theme-Umschalter */
.theme-toggle { flex-shrink: 0; margin-left: 4px; background: none; border: 1px solid var(--on-dark-line); color: var(--on-dark-soft); border-radius: var(--radius); padding: 6px 8px; cursor: pointer; display: inline-flex; align-items: center; }
.theme-toggle:hover { color: var(--on-dark); background: var(--dark-2); }
.theme-toggle .icon { width: 16px; height: 16px; display: block; }
.theme-toggle span { display: block; }
.theme-toggle .when-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .when-dark { display: inline; }
:root[data-theme="dark"] .theme-toggle .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .when-dark { display: inline; }
  :root:not([data-theme="light"]) .theme-toggle .when-light { display: none; }
}

/* At narrower desktop widths the logo is enough; the label would otherwise run into the menu */
@media (max-width: 1700px) { .topbar-brand span { display: none; } }
.phase-title { min-width: 0; overflow-wrap: anywhere; hyphens: auto; hyphenate-limit-chars: 14 6 6; }

/* Light theme: airy with white and Nebelblau; Tiefsee only as an accent (header, main buttons,
   progress area, module badges). Decision Marc, 26.09.2026. */
/* Public pages (prospect form): light and calm, dark in the dark theme */
.public-body { min-height: 100vh; background: var(--bg); }
.public-body .auth-wrap { max-width: 680px; padding-top: 56px; }
.public-body .auth-card { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.public-body .auth-tag { color: var(--accent-dark); }
.public-body .auth-foot { color: var(--ink-faint); }
.public-body .auth-foot a { color: var(--ink-soft); }
.public-body .theme-toggle { border-color: var(--line-strong); color: var(--ink-soft); }
.public-body .theme-toggle:hover { background: var(--inset); color: var(--ink); }
.brand-logo.logo-on-dark { display: none; }
:root[data-theme="dark"] .public-body .brand-logo.logo-on-light { display: none; }
:root[data-theme="dark"] .public-body .brand-logo.logo-on-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .public-body .brand-logo.logo-on-light { display: none; }
  :root:not([data-theme="light"]) .public-body .brand-logo.logo-on-dark { display: block; }
}
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
fieldset.choice { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
fieldset.choice legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px 16px; }
.field-error { display: block; color: var(--err-ink); font-size: .82rem; font-weight: 400; margin-top: 4px; }
.consent span { font-size: .86rem; color: var(--ink-soft); }
.lead-form { display: grid; gap: 6px; min-width: 220px; }
.lead-actions { display: flex; gap: 6px; }
/* Prospect form (short form) and „Gespräch vorbereiten“ (prepare a conversation): checkboxes/radios as chips, operable by keyboard */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip, .form label.chip { position: relative; display: inline-flex; font-weight: 400 !important; cursor: pointer; min-width: 0; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 7px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .9rem; line-height: 1.3; overflow-wrap: anywhere; transition: background var(--t), border-color var(--t); }
.chip:hover span { border-color: var(--accent); }
.chip input:checked + span { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; font-weight: 600; }
.chip input:checked + span::before { content: "✓ "; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.lead-short .consent span { font-size: .82rem; }
.lead-booking { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 20px; }
.lead-prep { border-top: 1px solid var(--line); padding-top: 18px; margin-top: 8px; gap: 16px; }
.lead-prep h2 { font-size: 1.15rem; margin: 0; }
.lead-summary { white-space: pre-wrap; font: inherit; font-size: .82rem; margin: 8px 0 0; max-height: 220px; overflow: auto; }
/* Admin „Interessenten“ (prospects): deadline within the next 3 months, rough assessment */
.table tr.lead-soon > td { background: var(--warn-bg); }
.table tr.lead-soon > td:first-child { box-shadow: inset 4px 0 0 var(--warn-line); }
.lead-assess { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.lead-assess li { font-size: .8rem; white-space: nowrap; }
.lead-profile-list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 1px 8px; font-size: .8rem; }
.lead-profile-list dt { color: var(--ink-soft); }
.lead-profile-list dd { margin: 0; }
/* In the dark progress area the main button stands out in Messing */
.hero-progress .btn-primary { background: var(--accent-bright); color: #13233f; }
.hero-progress .btn-primary:hover { background: #edbb55; }
/* Messing #E0A93B as accent for icons, ticks and progress (decision Marc, 26.09.2026) */
:is(.panel, .card, .stepnav, .table, .phase-intro, .filter-bar) .icon:not(.btn .icon):not(.badge .icon):not(.dot .icon) { color: var(--accent-bright); }
.is-done .dot { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; }
.check input, input[type=checkbox], input[type=radio] { accent-color: var(--accent-bright); }
.stepnav .is-done .dot .icon, .is-done .dot .icon { color: #13233f; }
progress.progress::-webkit-progress-value { background: var(--accent-bright); }
progress.progress::-moz-progress-bar { background: var(--accent-bright); }
.gap-bar-fill { background: var(--accent-bright); }
a.btn:hover, a.badge:hover, a.ref:hover { text-decoration: none; }
/* Quoted framework and statute texts: very light, neutral grey (light only; the rest stays light blue) */
:root:not([data-theme="dark"]) .original-text { background: #f7f7f8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .original-text { background: var(--inset); } }

/* ================= Product page complass.de (not signed in) ================= */
.lp-body { background: var(--bg); color: var(--ink); }
.lp-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.lp-narrow { max-width: 820px; }
.lp-head { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); }
.lp-head-inner { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.lp-brand { display: flex; align-items: center; }
.lp-brand img { height: 46px; width: auto; }
.lp-nav { display: flex; gap: 4px; margin-left: auto; }
.lp-nav a { color: var(--ink-soft); font-weight: 500; font-size: .95rem; padding: 8px 12px; border-radius: var(--radius); }
.lp-nav a:hover { color: var(--ink); background: var(--inset); text-decoration: none; }
.lp-actions { display: flex; align-items: center; gap: 10px; }
.lp-head .theme-toggle { border-color: var(--line-strong); color: var(--ink-soft); }
.lp-head .theme-toggle:hover { background: var(--inset); color: var(--ink); }
.lp-login .icon { width: 15px; height: 15px; }
.logo-on-dark, .shot-dark { display: none; }
:root[data-theme="dark"] .logo-on-light, :root[data-theme="dark"] .shot-light { display: none; }
:root[data-theme="dark"] .logo-on-dark, :root[data-theme="dark"] .shot-dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo-on-light, :root:not([data-theme="light"]) .shot-light { display: none; }
  :root:not([data-theme="light"]) .logo-on-dark, :root:not([data-theme="light"]) .shot-dark { display: block; }
}
.lp-sec { padding: 84px 0; }
.lp-sec-white { background: var(--surface); }
.lp-sec-blue { background: var(--bg); }
.lp-hero { padding: 72px 0 88px; }
.lp-hero-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 48px; align-items: center; }
.lp-h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 4.2vw, 3.4rem); line-height: 1.12; margin: 0 0 22px; color: var(--ink); }
.lp-h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.7rem, 2.8vw, 2.3rem); line-height: 1.2; margin: 0 0 14px; color: var(--ink); }
/* Second heading inside one section (e.g. asset page "Verträge und Lizenzen" below CMDB light, LV1.8): space and anchor offset */
.lp-points + .lp-h2 { margin-top: 56px; scroll-margin-top: 96px; }
.lp-lead { font-size: 1.12rem; color: var(--ink-soft); max-width: 560px; margin: 0 0 18px; }
.lp-intro { color: var(--ink-soft); max-width: 680px; margin: 0 0 40px; }
.lp-chips { font-size: .88rem; color: var(--ink-faint); max-width: 560px; margin: 0 0 28px; line-height: 1.7; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.lp-cta-center { justify-content: center; }
.lp-btn-lg { padding: 13px 24px; font-size: 1rem; }
.lp-btn-lg .icon { width: 16px; height: 16px; }
.lp-btn-outline { background: transparent; border: 1px solid var(--dark); color: var(--dark); }
.lp-btn-outline:hover { background: var(--dark); color: #fff; }
:root[data-theme="dark"] .lp-btn-outline { border-color: var(--ink-soft); color: var(--ink); }
:root[data-theme="dark"] .lp-btn-outline:hover { background: var(--ink); color: var(--dark); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lp-btn-outline { border-color: var(--ink-soft); color: var(--ink); }
  :root:not([data-theme="light"]) .lp-btn-outline:hover { background: var(--ink); color: var(--dark); }
}
.lp-small { margin-top: 22px; font-size: .86rem; color: var(--ink-faint); }
.lp-shot { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-md); }
.lp-shot img { width: 100%; height: auto; }
.lp-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.lp-grid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.lp-grid-gap { gap: 56px; }
.lp-grid3 h3, .lp-grid2 h3, .lp-steps h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 10px 0 6px; color: var(--ink); }
.lp-grid3 p, .lp-grid2 p, .lp-steps p { color: var(--ink-soft); font-size: .93rem; margin: 0; }
.lp-icon { color: var(--accent-bright); display: inline-flex; }
.lp-icon .icon { width: 26px; height: 26px; }
.lp-box { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.lp-box:hover { transform: scale(1.02); border-color: var(--accent-bright); box-shadow: var(--shadow-md); }
.lp-sec-white .lp-box { background: var(--surface); }
.lp-box-title { font-family: var(--font-display) !important; font-weight: 400 !important; font-size: 1.3rem !important; margin-top: 0 !important; }
.lp-box-row { display: flex; gap: 14px; align-items: flex-start; }
.lp-box-row h3 { margin-top: 0; }
.lp-note { margin-top: 32px; font-size: .9rem; color: var(--ink-faint); }
.lp-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 22px; }
.lp-steps li { display: flex; gap: 16px; }
.lp-steps h3 { margin-top: 2px; }
.lp-step-no { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--dark); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; }
.lp-checks { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.lp-checks li { display: flex; gap: 12px; align-items: flex-start; }
.lp-checks .icon { color: var(--accent-bright); width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.lp-center { text-align: center; }
.lp-center .lp-intro { margin-left: auto; margin-right: auto; }
.lp-faq details { border-top: 1px solid var(--line); padding: 18px 0; }
.lp-faq details:last-child { border-bottom: 1px solid var(--line); }
.lp-faq summary { display: flex; justify-content: space-between; gap: 16px; cursor: pointer; font-weight: 600; list-style: none; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary span { color: var(--accent-dark); transition: transform .2s; }
.lp-faq details[open] summary span { transform: rotate(45deg); }
.lp-faq p { margin: 12px 0 0; color: var(--ink-soft); font-size: .93rem; }
.lp-band { background: var(--dark); color: #f7f3ea; padding: 64px 0; }
.lp-band .lp-h2 { color: #f7f3ea; }
.lp-band p { color: rgba(247, 243, 234, .8); max-width: 640px; margin: 0; }
.lp-band-inner { display: flex; gap: 32px; align-items: center; justify-content: space-between; }
.lp-band-btn { flex-shrink: 0; }
.lp-foot { background: var(--surface); border-top: 1px solid var(--line); padding: 40px 0 24px; font-size: .9rem; color: var(--ink-soft); }
.lp-foot-inner { display: flex; gap: 32px; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; }
.lp-foot-logo { height: 38px; width: auto; margin-bottom: 10px; }
.lp-foot nav { display: flex; gap: 18px; flex-wrap: wrap; }
.lp-foot nav a { color: var(--ink-soft); font-weight: 400; }
.lp-copy { margin-top: 24px; font-size: .8rem; color: var(--ink-faint); }
/* Karussell */
.lp-sec-carousel { overflow: hidden; }
.lp-carousel { position: relative; max-width: 1400px; margin: 0 auto; }
.lp-track { display: flex; gap: 40px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 16% 8px; scrollbar-width: none; outline: none; }
.lp-track::-webkit-scrollbar { display: none; }
.lp-track:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp-slide { flex: 0 0 68%; scroll-snap-align: center; margin: 0; }
.lp-slide-fig { margin: 0; }
.lp-slide figcaption { text-align: center; margin-top: 18px; }
.lp-slide figcaption strong { display: block; font-size: 1.05rem; }
.lp-slide figcaption span { display: block; color: var(--ink-soft); font-size: .92rem; max-width: 560px; margin: 4px auto 0; }
.lp-carousel.is-ready .lp-slide { transition: opacity .4s ease, transform .4s ease; }
.lp-carousel.is-ready .lp-slide:not([data-active]) { opacity: .35; transform: scale(.94); cursor: pointer; }
.lp-arrow { position: absolute; top: 34%; z-index: 5; width: 48px; height: 48px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent-bright) 50%, transparent); background: var(--dark); color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.lp-arrow:not([hidden]) { display: flex; }
.lp-arrow[hidden] { display: none; }
.lp-arrow:disabled { opacity: .3; cursor: default; }
.lp-arrow .icon { width: 22px; height: 22px; }
.lp-arrow-prev { left: 7%; }
.lp-arrow-next { right: 7%; }
.lp-counter { text-align: center; color: var(--ink-faint); font-size: .88rem; margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .lp-box, .lp-carousel.is-ready .lp-slide { transition: none; } .lp-box:hover { transform: none; } }
@media (max-width: 1000px) {
  .lp-nav { display: none; }
  .lp-hero-grid, .lp-grid2 { grid-template-columns: 1fr; }
  .lp-grid3 { grid-template-columns: 1fr 1fr; }
  .lp-band-inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .lp-grid3 { grid-template-columns: 1fr; }
  .lp-brand img { height: 36px; }
  .lp-demo { display: none; }
  .lp-slide { flex-basis: 86%; }
  .lp-track { padding: 0 7% 8px; gap: 20px; }
  .lp-arrow-prev { left: 8px; } .lp-arrow-next { right: 8px; }
  .lp-sec { padding: 60px 0; }
}
/* Impressum / Datenschutz */
.lp-legal-head { background: var(--bg); padding: 64px 0 40px; }
.lp-legal-head .lp-h1 { margin-bottom: 14px; }
.lp-crumb { font-size: .88rem; color: var(--ink-faint); margin: 0 0 10px; }
.lp-crumb a { color: var(--ink-soft); }
.lp-legal { padding-top: 56px; }
.lp-legal h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ink); margin: 40px 0 10px; scroll-margin-top: 96px; }
.lp-legal h2:first-child { margin-top: 0; }
.lp-legal p { color: var(--ink-soft); margin: 0 0 12px; line-height: 1.7; }
.lp-legal .lp-toc { background: var(--bg); border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); border-radius: var(--radius-lg); padding: 22px 26px; margin-bottom: 48px; }
.lp-toc-title { font-size: .78rem !important; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint) !important; margin: 0 0 12px !important; }
.lp-toc ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
.lp-toc a { font-size: .92rem; }
.lp-legal-meta { font-size: .9rem; color: var(--ink-faint) !important; }
.lp-legal-list { padding-left: 22px; margin: 0; color: var(--ink-soft); line-height: 1.7; }
.lp-legal-list li { margin-bottom: 12px; padding-left: 4px; }
@media (max-width: 640px) { .lp-toc ol { grid-template-columns: 1fr; } }
.lp-lang { display: flex; gap: 2px; font-size: .82rem; font-weight: 600; letter-spacing: .03em; }
.lp-lang a { color: var(--ink-faint); padding: 6px 7px; border-radius: var(--radius); }
.lp-lang a:hover { color: var(--ink); text-decoration: none; background: var(--inset); }
.lp-lang a[aria-current] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent-bright); border-radius: 0; }
.lp-legal-note { font-size: .86rem; color: var(--ink-faint); margin: 0; }
/* Sicherheit und Datenschutz (?r=sicherheit, Abschnitt auf der Produktseite) */
.sec-lead { max-width: 760px; }
.sec-more { margin: 36px 0 0; }
.sec-layers { display: grid; grid-template-columns: 5fr 6fr; gap: 56px; align-items: center; }
.sec-figure { margin: 0; }
.sec-svg { width: 100%; height: auto; max-width: 520px; margin: 0 auto; }
.sec-l { stroke: rgba(224, 169, 59, .55); stroke-width: 1.5; }
.sec-l0 { fill: #0c1830; } .sec-l1 { fill: #13233f; } .sec-l2 { fill: #1c3560; } .sec-l3 { fill: #2f7f77; } .sec-l4 { fill: #e0a93b; stroke: #f7f3ea; }
.sec-t { font-family: var(--font-sans); font-size: 17px; font-weight: 600; fill: #f7f3ea; }
.sec-t3 { fill: #ffffff; }
.sec-t4 { fill: #13233f; }
.sec-t-sub { font-size: 15px; font-weight: 500; }
.sec-no-t { fill: #e0a93b; font-weight: 700; }
.sec-t3 .sec-no-t { fill: #13233f; }
.sec-t4 .sec-no-t { fill: #13233f; }
.sec-lock { fill: none; stroke: #13233f; stroke-width: 6; stroke-linecap: round; }
.sec-lock-body { fill: #13233f; }
.sec-figcap { text-align: center; color: var(--ink-faint); font-size: .88rem; margin: 14px auto 0; max-width: 460px; }
.sec-list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 20px; }
.sec-list li { display: flex; gap: 16px; }
.sec-list h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; margin: 3px 0 4px; color: var(--ink); }
.sec-list p { color: var(--ink-soft); font-size: .93rem; margin: 0; }
.sec-num { flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #f7f3ea; border: 1px solid rgba(224, 169, 59, .6); }
.sec-num0 { background: #0c1830; } .sec-num1 { background: #13233f; } .sec-num2 { background: #1c3560; } .sec-num3 { background: #2f7f77; color: #fff; } .sec-num4 { background: #e0a93b; color: #13233f; }
.sec-matrix-wrap { border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.sec-matrix th, .sec-matrix td { text-align: center; vertical-align: middle; padding: 12px 10px; }
.sec-matrix thead th { background: var(--inset); font-size: .72rem; }
.sec-matrix tbody th { text-align: left; font-weight: 600; color: var(--ink); font-size: .95rem; text-transform: none; letter-spacing: 0; }
.sec-matrix td:first-of-type { font-size: .88rem; color: var(--ink-soft); }
.sec-sub { display: block; font-weight: 400; font-size: .8rem; color: var(--ink-faint); }
.sec-yes { color: var(--ok-fill, #2f7f77); display: inline-flex; align-items: flex-start; }
:root[data-theme="dark"] .sec-yes { color: var(--ok-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sec-yes { color: var(--ok-ink); } }
.sec-yes .icon { width: 20px; height: 20px; }
.sec-matrix sup { font-size: .7rem; color: var(--ink-faint); margin-left: 2px; }
.sec-no { color: var(--ink-faint); }
.sec-val { display: inline-flex; align-items: flex-start; }
.sec-foot { margin: 18px 0 0; padding-left: 20px; font-size: .86rem; color: var(--ink-faint); }
.sec-foot li { margin-bottom: 4px; }
.sec-note { margin-top: 14px; }
.sec-dl { margin: 12px 0 0; padding-left: 20px; color: var(--ink-soft); font-size: .93rem; line-height: 1.65; }
.sec-dl li { margin-bottom: 8px; overflow-wrap: anywhere; }
@media (max-width: 1000px) {
  .sec-layers { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 900px) {
  /* Rights matrix as cards: one card per role, column name before each value. 900 px, not 760 px: the table needs
     up to 820 px in the longer translations (es, pl) and its last column was clipped below that (WCAG 1.4.10). */
  .sec-matrix-wrap { border: 0; background: transparent; overflow: visible; }
  .sec-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sec-matrix, .sec-matrix tbody, .sec-matrix tr, .sec-matrix th, .sec-matrix td { display: block; width: 100%; }
  .sec-matrix tr { background: var(--surface); border: 1px solid color-mix(in srgb, var(--accent-bright) 45%, transparent); border-radius: var(--radius-lg); margin-bottom: 14px; padding: 6px 14px; }
  .sec-matrix tbody th { padding: 10px 0 8px; border-bottom: 1px solid var(--line-strong); }
  .sec-matrix td { display: flex; justify-content: space-between; align-items: center; gap: 12px; text-align: right; padding: 8px 0; }
  .sec-matrix td::before { content: attr(data-label); text-align: left; color: var(--ink-soft); font-size: .88rem; }
  .sec-matrix tr td:last-child { border-bottom: 0; }
}
.auth-foot .lp-lang { display: inline-flex; vertical-align: middle; margin: 0; }
/* Language and light/dark centred in one line under the copyright line */
.auth-foot-tools { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 10px 0; }
.auth-foot-tools .theme-toggle { margin: 0; }
.auth-foot .lp-lang a { color: var(--on-dark-soft); }
.auth-foot .lp-lang a[aria-current] { color: inherit; }
.lp-foot-brand { display: inline-block; }
.auth-logo.auth-logo-slogan { width: 280px; }
/* Logo mit Slogan in der Kopfzeile: etwas höher, damit der Slogan lesbar bleibt */
.topbar-brand img.brand-logo { height: 38px; }
/* Mobile navigation of the product page */
.lp-menu-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.lp-menu-toggle { text-decoration: none; }
.lp-menu-toggle:hover { background: var(--inset); text-decoration: none; }
.lp-mobile-nav { display: none; }
@media (max-width: 1000px) {
  .lp-menu-toggle { display: inline-flex; }
  .lp-login, .lp-demo { display: none !important; }
  .lp-mobile-nav:not([hidden]) { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); }
  .lp-mobile-nav a:not(.btn) { display: flex; align-items: center; gap: 8px; padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; text-decoration: none; }
  .lp-mobile-nav a:not(.btn):hover { background: var(--inset); }
  .lp-mobile-nav a .icon { width: 16px; height: 16px; color: var(--ink-soft); }
  .lp-mobile-demo { margin: 16px 24px 20px; justify-content: center; }
  .lp-actions { margin-left: auto; }
}
/* Larger logo in the header of the product page */
.lp-head-inner { min-height: 88px; }
.lp-brand img { height: 60px; }
@media (max-width: 640px) { .lp-brand img { height: 46px; } .lp-head-inner { min-height: 76px; } }
.lp-brand { flex-shrink: 0; }
.lp-brand img { width: auto; max-width: none; }
/* Header wider than the content (1440 px since the header fit, Marc 13.10.2026, so pt, fr and es show the full menu from
   about 1400 px on), menu items tighter; below 1221 px there is not enough room: menu button (as on mobile) */
.lp-head .lp-wrap { max-width: 1440px; }
.lp-head-inner { gap: 16px; }
.lp-nav a { padding: 8px 10px; }
@media (max-width: 1220px) {
  .lp-nav { display: none; }
  .lp-menu-toggle { display: inline-flex; }
  .lp-login, .lp-demo { display: none !important; }
  .lp-mobile-nav:not([hidden]) { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); }
  .lp-mobile-nav a:not(.btn) { display: flex; align-items: center; gap: 8px; padding: 15px 24px; border-bottom: 1px solid var(--line); color: var(--ink); font-size: 1rem; text-decoration: none; }
  .lp-mobile-nav a:not(.btn):hover { background: var(--inset); }
  .lp-mobile-nav a .icon { width: 16px; height: 16px; color: var(--ink-soft); }
  .lp-mobile-demo { margin: 16px 24px 20px; justify-content: center; }
  .lp-actions { margin-left: auto; }
  /* Without JavaScript (no html.js) the menu link "#lp-mobile-nav" opens the panel through :target, "#" closes it again;
     the submenus are listed open because their buttons need JavaScript */
  :root:not(.js) .lp-mobile-nav[hidden]:target { display: flex; flex-direction: column; border-top: 1px solid var(--line); background: var(--surface); max-height: calc(100vh - 76px); overflow-y: auto; }
  :root:not(.js) .lp-mobile-nav .lp-sub { display: block; }
  :root:not(.js) .lp-mobile-nav .lp-group-btn { pointer-events: none; }
  :root:not(.js) .lp-mobile-nav .lp-group-btn .icon { display: none; }
}
/* Vorschau Normtext-Import */
.excerpt-preview td { vertical-align: top; }
.excerpt-preview .w-check { width: 36px; }
.excerpt-preview .excerpt-meta { width: 32%; }
.excerpt-preview textarea { width: 100%; min-height: 110px; font-size: .88rem; line-height: 1.5; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--inset); font-size: .8rem; margin-right: 4px; }

/* Evidence links (e.g. OneDrive, SharePoint) below the evidence field */
.evidence-links { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; font-size: .82rem; min-width: 0; max-width: 100%; text-transform: none; letter-spacing: normal; font-weight: 500; }
.evidence-links a { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-links a .icon { vertical-align: -2px; margin-right: 4px; }
.cat-fields > label { min-width: 0; }
.cat-fields textarea { max-width: 100%; overflow-wrap: anywhere; }
.evidence-links .icon { width: 13px; height: 13px; flex-shrink: 0; }

/* ---------- Live demo in the header area of the product page (templates/landing/_demo.php, assets/cxdemo.js) ----------
   The stage (.cxd-stage) has real screen dimensions of 1280 × 800 px and portal proportions; cxdemo.js scales it
   down to the width of the monitor. The demo always stays light, like the screenshots in the light scheme. */
.cxd {
  --t: #13233f; --t2: #1c3560; --m: #e0a93b; --md: #a8761a; --mt: #8a5f12; --nb: #eef2f7; --in: #f3f6fa;
  --ink: #1b2638; --soft: #4f5a6c; --faint: #7a8496; --line: #dfe5ee; --okdot: #1f6b63; --okbg: #e4f1ee; --okink: #1f5f58;
  --warnbg: #fbf1dc; --warnink: #7a5310; --due: #b3261e;
  font-family: "Work Sans", system-ui, sans-serif; color: var(--ink);
}
.cxd *, .cxd *::before, .cxd *::after { box-sizing: border-box; }
/* Monitor */
.cxd-monitor { position: relative; background: #0f1a2e; border-radius: 14px; padding: 10px; box-shadow: 0 30px 60px -30px rgba(19, 35, 63, .55), 0 10px 20px -12px rgba(19, 35, 63, .3); }
.cxd-stand { width: 18%; height: 30px; margin: 0 auto; background: linear-gradient(#cfd6e0, #b9c2cf); clip-path: polygon(18% 0, 82% 0, 100% 100%, 0 100%); }
.cxd-foot { width: 36%; height: 7px; margin: 0 auto; border-radius: 6px; background: #b9c2cf; }
.cxd-screen { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 4px; background: var(--nb); }
.cxd-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; transform-origin: 0 0; transform: scale(.45); font-size: 14px; line-height: 1.5; background: var(--nb); }
/* App header as in the portal (light, short names, icons 32 × 32 with 6 px spacing) */
.cxd-top { height: 56px; background: #fff; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 6px; padding: 0 20px 0 24px; }
.cxd-top img { height: 30px; margin-right: 34px; }
.cxd-nav { display: flex; gap: 22px; }
.cxd-nav span { color: var(--soft); font-size: 14.5px; font-weight: 500; line-height: 54px; border-bottom: 2px solid transparent; white-space: nowrap; transition: color .2s, border-color .2s; }
.cxd-nav span.on { color: var(--ink); border-color: var(--m); }
.cxd-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px 0 auto; }
.cxd-ic { width: 32px; height: 32px; border: 1px solid #cfd6e0; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--soft); font-weight: 700; font-size: 15px; flex-shrink: 0; }
.cxd-ic-q { color: var(--ink); }
.cxd-top .icon { width: 15px; height: 15px; }
/* Szenen */
.cxd-scene { position: absolute; inset: 56px 0 0 0; padding: 26px 72px 0; opacity: 0; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease; pointer-events: none; }
.cxd-scene.on { opacity: 1; transform: none; }
.cxd-eyebrow { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mt); }
.cxd-h { font-family: "Marcellus", Georgia, serif; font-size: 32px; line-height: 1.2; color: var(--t); margin: 6px 0 18px; }
.cxd-h3 { font-family: "Marcellus", Georgia, serif; font-size: 21px; color: var(--t); margin-bottom: 4px; }
.cxd-h4 { font-weight: 600; font-size: 15px; color: var(--t); margin-bottom: 10px; }
.cxd-lead { color: var(--soft); max-width: 920px; margin: -6px 0 16px; }
.cxd-crumb { font-size: 13px; color: var(--soft); margin-bottom: 6px; }
.cxd-small { font-size: 13px; color: var(--soft); }
.cxd-desc { font-size: 13px; color: var(--soft); line-height: 1.45; }
.cxd-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 20px 22px; box-shadow: 0 1px 2px rgba(19, 35, 63, .04); }
.cxd-g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cxd-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 16px; }
.cxd-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.cxd-big { font-size: 18px; font-weight: 600; margin: 8px 0 12px; }
.cxd-stat b { display: block; font-family: "Marcellus", Georgia, serif; font-size: 26px; font-weight: 400; color: var(--t); }
.cxd-stat span { font-size: 13px; color: var(--soft); }
.cxd-stat { padding: 16px 22px; }
.cxd-pill { display: inline-block; padding: 2px 9px; border-radius: 999px; background: var(--t2); color: #fff; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.cxd-ref { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e8edf4; color: var(--ink); font-size: 11.5px; font-weight: 600; margin-right: 5px; }
.cxd-refs { margin-top: 6px; }
.cxd-nm { font-weight: 600; font-size: 16px; margin: 10px 0 4px; }
.cxd-proj .cxd-desc { min-height: 38px; margin-bottom: 14px; }
.cxd-bar { height: 7px; border-radius: 4px; background: #e6ecf3; overflow: hidden; margin-bottom: 8px; }
.cxd-bar i { display: block; height: 100%; width: 0; background: var(--m); border-radius: 4px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cxd-task-l { margin-top: 8px; font-weight: 500; transition: color .2s; }
.cxd-task-l.hl { color: var(--md); }
.cxd-due { color: var(--due); font-weight: 600; font-size: 13px; }
.cxd-li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cxd-li:last-of-type { border-bottom: 0; }
.cxd-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--in); color: var(--soft); white-space: nowrap; transition: background .25s, color .25s; }
.cxd-tag.ok { background: var(--okbg); color: var(--okink); }
.cxd-tag.warn { background: var(--warnbg); color: var(--warnink); }
.cxd-btns { display: flex; gap: 8px; }
.cxd-mb { margin-bottom: 16px; }
.cxd-mt { margin-top: 14px; }
.cxd-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 6px; font-weight: 600; font-size: 13.5px; background: var(--m); color: var(--t); border: 1px solid var(--m); white-space: nowrap; transition: transform .12s, box-shadow .12s; }
.cxd-btn.ghost { background: #fff; border-color: #cfd7e3; color: var(--ink); }
.cxd-btn .icon { width: 14px; height: 14px; }
.cxd-btn.press { transform: scale(.96); box-shadow: 0 0 0 4px rgba(224, 169, 59, .35); }
/* Regelwerke-Matrix */
.cxd-tablecard { padding: 6px 22px; }
.cxd-matrix { width: 100%; border-collapse: collapse; }
.cxd-matrix th, .cxd-matrix td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cxd-matrix tr:last-child td { border-bottom: 0; }
.cxd-matrix th { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.cxd-matrix th .cxd-small { text-transform: none; letter-spacing: 0; font-size: 12px; }
.cxd-matrix td:first-child { width: 46%; }
.cxd-matrix .c { text-align: center; }
.cxd-matrix tr { transition: background .25s; }
.cxd-matrix tr.hl { background: #fdf6e6; }
.cxd-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--okdot); transition: transform .25s, box-shadow .25s; }
.cxd-dot.part { background: var(--m); }
.cxd-dot.gap { background: #fff; border: 2px solid #c0714f; }
.cxd-matrix tr.hl .cxd-dot { transform: scale(1.35); box-shadow: 0 0 0 4px rgba(224, 169, 59, .25); }
.cxd-note { position: absolute; right: 72px; top: 30px; display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #f0dcaa; border-radius: 8px; padding: 10px 14px; box-shadow: 0 8px 22px -10px rgba(19, 35, 63, .35); opacity: 0; transform: translateY(-6px); transition: opacity .3s, transform .3s; }
.cxd-note.on { opacity: 1; transform: none; }
/* Gap-Analyse */
.cxd-gap { margin-bottom: 16px; }
.cxd-gaprow { display: grid; grid-template-columns: 200px 1fr 130px; align-items: center; gap: 16px; font-size: 13.5px; margin-bottom: 8px; }
.cxd-gapbar { position: relative; height: 10px; border-radius: 6px; background: #e6ecf3; }
.cxd-gapbar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: var(--m); transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.cxd-gapbar em { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--t); }
.cxd-gaphead { display: flex; justify-content: space-between; align-items: flex-start; }
/* Dokument */
.cxd-dochead { display: flex; justify-content: space-between; align-items: flex-start; }
.cxd-dochead .cxd-h { margin-bottom: 10px; }
.cxd-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cxd-meta .cxd-ref { margin: 0; }
.cxd-info { background: #e8eef6; border: 1px solid #d6e0ec; border-radius: 8px; padding: 14px 22px; margin-bottom: 16px; color: var(--ink); }
.cxd-textarea { border: 1px solid #cfd7e3; border-radius: 6px; padding: 10px 12px; min-height: 92px; background: #fff; }
.cxd-caret::after { content: ""; display: inline-block; width: 1px; height: 1em; background: var(--t); margin-left: 1px; vertical-align: -2px; animation: cxdblink 1s steps(1) infinite; }
@keyframes cxdblink { 50% { opacity: 0; } }
.cxd-savebar { position: absolute; left: 72px; right: 72px; bottom: 18px; display: flex; justify-content: space-between; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 22px; box-shadow: 0 10px 30px -12px rgba(19, 35, 63, .3); }
/* Export */
.cxd-file { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin-top: 16px; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.cxd-file.on { opacity: 1; transform: none; }
.cxd-file .ic { width: 34px; height: 42px; border-radius: 4px; background: var(--t); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 11px; flex-shrink: 0; }
/* Toast */
.cxd-toast { position: absolute; right: 72px; bottom: 96px; transform: translateY(-8px); background: var(--t); color: #fff; padding: 11px 18px; border-radius: 8px; font-size: 14px; display: flex; gap: 10px; align-items: center; opacity: 0; transition: opacity .25s, transform .25s; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .45); }
.cxd-toast.on { opacity: 1; transform: none; }
.cxd-toast::before { content: "✓"; color: var(--m); font-weight: 700; }
/* Mouse pointer (outside the stage, so it keeps the same size regardless of scaling) */
.cxd-cursor { position: absolute; left: 0; top: 0; width: 16px; height: 16px; z-index: 5; transition: transform .6s cubic-bezier(.45, .05, .25, 1); transform: translate(60%, 60%); pointer-events: none; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25)); }
.cxd-cursor svg { width: 100%; height: 100%; }
.cxd-cursor.click::after { content: ""; position: absolute; left: -8px; top: -8px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--m); animation: cxdclick .45s ease-out forwards; }
@keyframes cxdclick { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }
/* Controls below the monitor */
.cxd-ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 12px; margin-top: 16px; color: var(--ink); }
.cxd-chip { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mt); background: #fdf6e6; border: 1px solid #f0dcaa; padding: 3px 8px; border-radius: 4px; white-space: nowrap; }
.cxd-cap { font-size: 1rem; flex: 1 1 120px; min-width: 0; }   /* 120 px: the pause button stays in the row even with a narrow demo column */
.cxd-dots { display: flex; gap: 6px; }
.cxd-dots button { width: 22px; height: 4px; border: 0; border-radius: 3px; background: #d9e0ea; cursor: pointer; padding: 0; position: relative; overflow: hidden; }
.cxd-dots button.on::after { content: ""; position: absolute; inset: 0; background: var(--m); transform-origin: left; animation: cxdfill var(--dur, 5s) linear forwards; }
.cxd.paused .cxd-dots button.on::after { animation-play-state: paused; }
@keyframes cxdfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.cxd-pause { width: 30px; height: 30px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--ink); }
.cxd-pause .icon { width: 14px; height: 14px; }
.cxd-pause .i-play, .cxd.paused .cxd-pause .i-pause { display: none; }
.cxd.paused .cxd-pause .i-play { display: inline-flex; }
@media (max-width: 640px) {
  .cxd-monitor { padding: 6px; border-radius: 10px; }
  .cxd-cap { order: 3; flex-basis: 100%; font-size: .92rem; }
  .cxd-dots { margin-left: auto; }
}
/* Touch devices: the scene dots keep their look (22 x 4 px bar) but get a 44 x 44 px hit area; the bar moves to ::before,
   the progress fill (::after) is laid over it. Same for the pause button. */
@media (pointer: coarse) {
  .cxd-dots { gap: 0; }
  .cxd-dots button { width: 44px; height: 44px; background: transparent; overflow: visible; }
  .cxd-dots button::before { content: ""; position: absolute; left: 11px; right: 11px; top: 20px; height: 4px; border-radius: 3px; background: #d9e0ea; }
  .cxd-dots button.on::after { inset: 20px 11px; border-radius: 3px; }
  .cxd-pause { width: 44px; height: 44px; }
  :root[data-theme="dark"] .cxd-dots button::before { background: #2a3d63; }
}
@media (pointer: coarse) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cxd-dots button::before { background: #2a3d63; }
}
@media (prefers-reduced-motion: reduce) {
  .cxd-scene, .cxd-bar i, .cxd-gapbar i, .cxd-cursor, .cxd-file, .cxd-toast, .cxd-note { transition: none; }
  .cxd-cursor { display: none; }
}
:root[data-theme="dark"] .cxd-chip { background: #2b2410; border-color: #5a4515; color: #e0a93b; }
:root[data-theme="dark"] .cxd-cap { color: #ede8dc; }
:root[data-theme="dark"] .cxd-pause { background: #1b2b4a; border-color: #2a3d63; color: #ede8dc; }
:root[data-theme="dark"] .cxd-dots button { background: #2a3d63; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cxd-chip { background: #2b2410; border-color: #5a4515; color: #e0a93b; }
  :root:not([data-theme="light"]) .cxd-cap { color: #ede8dc; }
  :root:not([data-theme="light"]) .cxd-pause { background: #1b2b4a; border-color: #2a3d63; color: #ede8dc; }
  :root:not([data-theme="light"]) .cxd-dots button { background: #2a3d63; }
}

/* ---------- Flow demo „Vom Termin zum Nachweis“ (from appointment to evidence) (templates/landing/_flow.php, assets/cxflow.js) ----------
   Base state (without JS or with „reduce motion“): all five stations one below the other in their final state.
   html.cf-anim (set in theme-init.js, only without reduced motion): step bar on the left, all surfaces
   stacked in the same grid cell (height = tallest station, no layout jumps); only .is-active is visible
   and plays its fade-in animations. The animation of .cf-timer i sets the pace (animationend). */
.cf { margin-top: 72px; }
.cf-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px 40px; align-items: start; }
.cf-step-1 { grid-row: 1; } .cf-step-2 { grid-row: 2; } .cf-step-3 { grid-row: 3; } .cf-step-4 { grid-row: 4; } .cf-step-5 { grid-row: 5; }
.cf-step { grid-column: 1; position: relative; display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radius-lg); border: 1px solid transparent; overflow: hidden; }
.cf-step strong { display: block; font-weight: 600; color: var(--ink); }
.cf-step-desc { display: block; font-size: .9rem; color: var(--ink-soft); }
.cf-no { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: .9rem; background: var(--dark); color: #fff; border: 1px solid var(--dark); transition: background var(--t), color var(--t), border-color var(--t); }
.cf-timer, .cf-caps, .cf-ctrl { display: none; }
.cf-panel { grid-column: 2; min-width: 0; }
.cf-panel-1 { grid-row: 1; } .cf-panel-2 { grid-row: 2; } .cf-panel-3 { grid-row: 3; } .cf-panel-4 { grid-row: 4; } .cf-panel-5 { grid-row: 5; }

/* Reproduced interface */
.cf-win { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; font-size: .88rem; line-height: 1.45; }
.cf-bar { display: flex; align-items: center; gap: 12px; min-width: 0; background: var(--dark); color: var(--on-dark-soft); padding: 9px 14px; font-size: .8rem; border-bottom: 1px solid var(--on-dark-line); }
.cf-bar img { height: 18px; width: auto; flex-shrink: 0; }
.cf-bar > span:not(.cf-bar-user) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cf-bar-user { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; color: var(--on-dark-faint); }
.cf-bar-mail .icon { color: var(--accent-bright); }
.cf-body { background: var(--inset); padding: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; align-content: start; }
.cf-eyebrow { display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); }
.cf-small { font-size: .8rem; color: var(--ink-faint); }
.cf-mt { margin-top: 6px; } .cf-mb { margin-bottom: 4px; }
.cf-title { font-weight: 600; font-size: .95rem; color: var(--ink); }
.cf-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.cf-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.cf-row-main { display: flex; flex-direction: column; min-width: 0; }
.cf-row-main b { font-weight: 600; color: var(--ink); }
.cf-hl { border-color: var(--accent-bright); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-bright) 22%, transparent); }
.cf-next { background: transparent; border-style: dashed; }
.cf-win .badge .icon { width: 12px; height: 12px; }
.cf-mail { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.cf-mail p { margin: 0 0 6px; color: var(--ink-soft); }
.cf-mail-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.cf-mail-head .cf-row-main { flex: 1; }
.cf-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--dark); color: var(--accent-bright); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cf-mail-subj { font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.cf-mail .cf-mail-item { font-weight: 500; color: var(--ink); }
.cf-btn { display: inline-block; margin-top: 4px; background: var(--btn-bg); color: var(--btn-ink); font-weight: 700; font-size: .8rem; padding: 6px 12px; border-radius: var(--radius); }
.cf-check { display: flex; align-items: flex-start; gap: 9px; color: var(--ink-soft); }
.cf-box { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; border-radius: 4px; border: 1px solid var(--ok-fill); background: var(--ok-fill); color: #fff; display: inline-flex; align-items: center; justify-content: center; }
.cf-box .icon { width: 12px; height: 12px; }
.cf-meter { display: block; height: 6px; border-radius: 3px; background: var(--inset-alt); overflow: hidden; }
.cf-meter i { display: block; height: 100%; border-radius: 3px; background: var(--ok-fill); }
.cf-meter-steps i, .cf-meter-up i { width: 100%; }
.cf-meter-proj i { width: 64%; }
.cf-swap { display: inline-grid; vertical-align: bottom; }
.cf-swap > * { grid-area: 1 / 1; }
.cf-swap-a { opacity: 0; }
.cf-drop { display: flex; align-items: center; justify-content: center; gap: 8px; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 10px; color: var(--ink-faint); font-size: .82rem; }
.cf-file { position: relative; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; }
.cf-file .cf-row-main { flex: 1; }
.cf-file .cf-row-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-file-ic { flex-shrink: 0; font-size: .66rem; font-weight: 700; letter-spacing: .04em; color: #fff; background: var(--danger-fill); border-radius: 4px; padding: 6px 5px; }
.cf-meter-up { position: absolute; left: 12px; right: 12px; bottom: 4px; height: 3px; opacity: 0; }
.cf-fws { display: flex; flex-wrap: wrap; gap: 6px; }
.cf-fw { display: inline-flex; align-items: center; gap: 4px; font-size: .76rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); }
.cf-fw .icon { width: 12px; height: 12px; }

/* Animierte Fassung */
.cf-anim .cf-step { cursor: pointer; transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.cf-anim .cf-step:hover { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.cf-anim .cf-step:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 0; }
.cf-anim .cf-step:not(.is-active) .cf-no { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.cf-anim .cf-step:not(.is-active) .cf-step-desc { color: var(--ink-faint); }
.cf-anim .cf-step.is-active { background: var(--surface); border-color: color-mix(in srgb, var(--accent-bright) 55%, transparent); box-shadow: var(--shadow-sm); }
:root[data-theme="dark"] .cf-no { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cf-no { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; } }
.cf-anim .cf-timer { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
.cf-anim .cf-timer i { display: block; height: 100%; background: var(--accent-bright); transform: scaleX(0); transform-origin: left; }
.cf-anim .cf-step.is-active .cf-timer i { animation: cf-timer 6.5s linear forwards; }
.cf-anim .cf.is-paused .cf-step.is-active .cf-timer i { animation-play-state: paused; }
.cf-anim .cf-grid { grid-template-rows: repeat(5, auto) 1fr; row-gap: 8px; }
.cf-anim .cf-panel { grid-row: 1 / 7; visibility: hidden; opacity: 0; }
.cf-anim .cf-panel.is-active { visibility: visible; opacity: 1; animation: cf-show .45s ease both; }
.cf-anim .cf-ctrl { display: flex; justify-content: flex-end; margin-top: 16px; }
.cf-pause { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-size: .86rem; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.cf-pause:hover { color: var(--ink); border-color: var(--line-strong); }
.cf-pause .icon { width: 13px; height: 13px; }
.cf-pause .i-play, .cf.is-stopped .cf-pause .i-pause { display: none; }
.cf.is-stopped .cf-pause .i-play { display: inline-flex; }
/* Fade-ins per station (only in the visible station) */
.cf-anim .is-active .cf-row { animation: cf-rise .45s ease both; }
.cf-anim .is-active .cf-row + .cf-row { animation-delay: .15s; }
.cf-anim .is-active .cf-row + .cf-row + .cf-row { animation-delay: .3s; }
.cf-anim .cf-panel-1.is-active .cf-hl { animation: cf-rise .45s ease both, cf-hl .5s ease 1.3s both; }
.cf-anim .is-active .cf-pop { animation: cf-pop .4s cubic-bezier(.3, 1.6, .6, 1) 1.6s both; }
.cf-anim .cf-panel-2.is-active .cf-mail { animation: cf-drop .6s ease .5s both; }
.cf-anim .cf-panel-2.is-active .cf-btn { animation: cf-pulse 1s ease 2.6s 2; }
.cf-anim .cf-panel-3.is-active .cf-head .cf-swap-a { animation: cf-hide .25s ease .8s both; }
.cf-anim .cf-panel-3.is-active .cf-head .cf-swap-b { animation: cf-unhide .25s ease .8s both; }
.cf-anim .cf-panel-3.is-active .cf-small .cf-swap-a { animation: cf-hide .25s ease 4.2s both; }
.cf-anim .cf-panel-3.is-active .cf-small .cf-swap-b { animation: cf-unhide .25s ease 4.2s both; }
.cf-anim .cf-panel-3.is-active .cf-box { animation: cf-tick .3s ease both; }
.cf-anim .cf-panel-3.is-active .cf-check-1 .cf-box { animation-delay: 1.4s; }
.cf-anim .cf-panel-3.is-active .cf-check-2 .cf-box { animation-delay: 2.2s; }
.cf-anim .cf-panel-3.is-active .cf-check-3 .cf-box { animation-delay: 3s; }
.cf-anim .cf-panel-3.is-active .cf-check-4 .cf-box { animation-delay: 3.8s; }
.cf-anim .cf-panel-3.is-active .cf-meter-steps i { animation: cf-steps 2.8s linear 1.4s both; }
.cf-anim .cf-panel-4.is-active .cf-drop { animation: cf-droparea 1.2s ease .2s both; }
.cf-anim .cf-panel-4.is-active .cf-file { animation: cf-rise .45s ease 1.2s both; }
.cf-anim .cf-panel-4.is-active .cf-meter-up { animation: cf-uptrack 1.9s linear 1.3s both; }
.cf-anim .cf-panel-4.is-active .cf-meter-up i { animation: cf-upfill 1.5s ease-in-out 1.3s both; }
.cf-anim .cf-panel-4.is-active .cf-lock { animation: cf-pop .4s cubic-bezier(.3, 1.6, .6, 1) 3.2s both; }
.cf-anim .cf-panel-5.is-active .cf-meter-proj i { animation: cf-proj 1.2s ease .6s both; }
.cf-anim .cf-panel-5.is-active .cf-swap-a { animation: cf-hide .25s ease 1.2s both; }
.cf-anim .cf-panel-5.is-active .cf-swap-b { animation: cf-unhide .25s ease 1.2s both; }
.cf-anim .cf-panel-5.is-active .cf-fw { animation: cf-fw .45s ease both; }
.cf-anim .cf-panel-5.is-active .cf-fw-1 { animation-delay: 2.2s; }
.cf-anim .cf-panel-5.is-active .cf-fw-2 { animation-delay: 2.5s; }
.cf-anim .cf-panel-5.is-active .cf-fw-3 { animation-delay: 2.8s; }
@keyframes cf-timer { to { transform: scaleX(1); } }
@keyframes cf-show { from { opacity: 0; transform: translateY(8px); } }
@keyframes cf-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes cf-hl { from { border-color: var(--line); box-shadow: 0 0 0 0 transparent; } }
@keyframes cf-pop { from { opacity: 0; transform: scale(.6); } }
@keyframes cf-drop { from { opacity: 0; transform: translateY(-18px); } }
@keyframes cf-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-bright) 30%, transparent); } }
@keyframes cf-hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes cf-unhide { from { opacity: 0; } to { opacity: 1; } }
@keyframes cf-tick { from { background: var(--surface); border-color: var(--line-strong); color: transparent; } }
@keyframes cf-steps { from { width: 0; } }
@keyframes cf-droparea { 0%, 100% { border-color: var(--line-strong); background: transparent; } 40%, 70% { border-color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 10%, transparent); } }
@keyframes cf-uptrack { 0%, 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes cf-upfill { from { width: 0; } }
@keyframes cf-proj { from { width: 60%; } }
@keyframes cf-fw { from { background: var(--inset-alt); border-color: var(--line); color: var(--ink-faint); } }
@media (max-width: 900px) {
  .cf { margin-top: 56px; }
  .cf-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cf-step, .cf-panel { grid-column: 1; }
  .cf-step-1 { grid-row: 1; } .cf-panel-1 { grid-row: 2; } .cf-step-2 { grid-row: 3; } .cf-panel-2 { grid-row: 4; }
  .cf-step-3 { grid-row: 5; } .cf-panel-3 { grid-row: 6; } .cf-step-4 { grid-row: 7; } .cf-panel-4 { grid-row: 8; }
  .cf-step-5 { grid-row: 9; } .cf-panel-5 { grid-row: 10; }
  .cf-panel { margin-bottom: 20px; }
  /* Animated: numbered step bar on top, below it the text of the active station and the interface */
  .cf-anim .cf-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
  .cf-anim .cf-step { grid-row: 1; justify-content: center; padding: 10px 4px 12px; }
  .cf-anim .cf-step-1 { grid-column: 1; } .cf-anim .cf-step-2 { grid-column: 2; } .cf-anim .cf-step-3 { grid-column: 3; }
  .cf-anim .cf-step-4 { grid-column: 4; } .cf-anim .cf-step-5 { grid-column: 5; }
  .cf-anim .cf-step-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cf-anim .cf-caps { display: grid; grid-column: 1 / -1; grid-row: 2; }
  .cf-anim .cf-cap { grid-area: 1 / 1; margin: 4px 0 6px; color: var(--ink-soft); font-size: .93rem; visibility: hidden; }
  .cf-anim .cf-cap strong { display: block; color: var(--ink); font-weight: 600; }
  .cf-anim .cf-cap.is-active { visibility: visible; }
  .cf-anim .cf-panel { grid-column: 1 / -1; grid-row: 3; margin-bottom: 0; }
}
@media (max-width: 480px) {
  .cf-body { padding: 12px; }
  .cf-bar-user { display: none; }
  .cf-row, .cf-file { flex-wrap: wrap; }
}

/* Evidence files on catalogue entries, steps and tasks */
.cat-files { margin: 8px 0 0 74px; }
.step-files { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 14px; }
.step-files .h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.ev-list { list-style: none; margin: 0 0 6px; padding: 0; }
.ev-list > li { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); padding: 6px 10px; margin-bottom: 5px; }
.ev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.ev-name { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: .9rem; min-width: 0; max-width: 100%; }
.ev-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-name .icon, .ev-upload summary .icon, .step-files .h3 .icon { width: 14px; height: 14px; flex-shrink: 0; }
.ev-actions { margin-left: auto; display: inline-flex; gap: 6px; }
.ev-older { margin-top: 4px; }
.ev-older ul { margin: 4px 0 0; padding-left: 18px; }
.ev-upload summary { cursor: pointer; color: var(--accent-dark); display: inline-flex; align-items: center; gap: 4px; }
.ev-upload-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 4px; }
.ev-upload-row input[type=file] { font-size: .85rem; max-width: 100%; }
/* Validity of evidence files (1.27, Reminders) */
.ev-validity { white-space: nowrap; }
.ev-valid-edit { margin-top: 4px; }
.ev-valid-edit summary { cursor: pointer; color: var(--accent-dark); }
.ev-valid-form { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 6px 0 2px; }
.ev-valid-form label, .ev-valid-in { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; }
.ev-valid-form input[type=date], .ev-valid-in input[type=date] { padding: 3px 6px; font-size: .85rem; }
/* 320 px (WCAG 1.4.10): the label with its date field may wrap instead of pushing the page 1 px wider than the screen */
.aw-period-filter label { flex-wrap: wrap; white-space: normal; max-width: 100%; }
.aw-period-filter input[type=date] { min-width: 0; max-width: 100%; }
/* t10 (1.91-D): the period filter of the audit workspace wraps at 320 px instead of pushing the page sideways */
.aw-period-filter label { flex-wrap: wrap; white-space: normal; max-width: 100%; }
.aw-period-filter input[type=date] { min-width: 0; max-width: 100%; }
@media (max-width: 640px) { .ev-valid-in { white-space: normal; flex-wrap: wrap; max-width: 100%; } } /* 320 px reflow (1.4.10) */
.ev-valid-hint { margin: 4px 0 0; }
/* Deep check 3 N-A: description, owner, period and source below the file line; edit fields wrap at 375 px */
.ev-meta { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 2px 10px; min-width: 0; overflow-wrap: anywhere; }
.ev-meta-form .ev-meta-desc { flex: 1 1 260px; min-width: 0; }
.ev-meta-form .ev-meta-desc input { flex: 1 1 auto; min-width: 0; width: 100%; padding: 3px 6px; font-size: .85rem; }
.ev-meta-form select { max-width: 100%; padding: 3px 6px; font-size: .85rem; }
@media (max-width: 640px) { .ev-meta-form label { white-space: normal; flex-wrap: wrap; max-width: 100%; } .ev-meta-form .ev-meta-desc { flex-basis: 100%; } }
.badge-recur { white-space: nowrap; }
.cat-item-head .badge .icon { width: 12px; height: 12px; }
/* Image previews of document file sections (e.g. scope drawings) */
.doc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 4px 0 10px; }
.doc-gallery figure { margin: 0; min-width: 0; }
.doc-gallery a { display: block; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); overflow: hidden; }
.doc-gallery img { display: block; width: 100%; height: 170px; object-fit: contain; background: #fff; }
.doc-gallery figcaption { margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1080px) {
  .cat-files { margin-left: 0; }
}
@media (max-width: 600px) {
  .ev-actions { margin-left: 0; flex-wrap: wrap; max-width: 100%; }
}

/* Vorfälle und Meldungen */
.badge-err { background: var(--err-bg); color: var(--err-ink); }
.badge-info { background: var(--info-bg); color: var(--info-ink); }
.badge .icon { width: 12px; height: 12px; }
.inc-alert { border-left: 4px solid var(--danger-fill); }
.inc-alert.is-soon { border-left-color: var(--accent-bright); }
.inc-alert ul { margin: 6px 0 0; padding-left: 18px; }
.inc-stages { list-style: none; margin: 0; padding: 0; }
.inc-stage { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); background: var(--inset); padding: 10px 14px; margin-bottom: 10px; }
.inc-stage.is-over { border-left-color: var(--danger-fill); }
.inc-stage.is-soon { border-left-color: var(--accent-bright); }
.inc-stage.is-ok { border-left-color: var(--info-line); }
.inc-stage.is-done { border-left-color: var(--ok-fill, var(--ok-line)); }
/* Stage without a deadline of its own (e.g. only on request): dashed border instead of dimming, because opacity
   pushed the muted texts below 4.5:1 in the light theme (kt-f70, WCAG 1.4.3) */
.inc-stage.is-na { border-style: dashed; border-left-style: solid; }
.inc-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.inc-stage-head h3 { margin: 0; font-size: 1rem; }
.inc-stage-due { margin-left: auto; text-align: right; }
.inc-stage > details { margin: 8px 0 0; }
.inc-stage > details > summary { font-size: .88rem; font-weight: 600; color: var(--accent-dark); }
.inc-contents { margin: 6px 0 10px; padding-left: 18px; font-size: .9rem; }
.inc-contents li { margin-bottom: 3px; }
.inc-q { border-bottom: 1px solid var(--line); padding: 8px 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; }
.inc-q fieldset { border: 0; margin: 0; padding: 0; display: inline-flex; gap: 12px; white-space: nowrap; }
.inc-q fieldset label { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; margin: 0; }
.inc-timeline { list-style: none; margin: 0; padding: 0; }
.inc-timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 4px 14px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.inc-timeline .is-comment .inc-tl-text { white-space: pre-line; }
.inc-tl-type { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); margin-right: 6px; }
@media (max-width: 700px) {
  .inc-q { grid-template-columns: 1fr; }
  .inc-timeline li { grid-template-columns: 1fr; }
  .inc-stage-due { margin-left: 0; text-align: left; }
}

/* Main navigation with package groups (defined in src/Nav.php; disclosure pattern, behaviour in app.js) */

/* Tools in the header (e.g. search), next to the light/dark switch */
.header-tool { order: 2; flex-shrink: 0; margin-left: 4px; border: 1px solid var(--on-dark-line); color: var(--on-dark-soft); border-radius: var(--radius); padding: 6px 8px; display: inline-flex; align-items: center; text-decoration: none !important; }
.header-tool:hover, .header-tool[aria-current] { color: var(--on-dark); background: var(--dark-2); }
.header-tool .icon { width: 16px; height: 16px; display: block; }
@media (max-width: 1180px) {
  .topbar-inner > .header-tool ~ .theme-toggle { margin-left: 4px; }
}

/* Kundenprotokoll */
.log-filter label { min-width: 0; flex: 1 1 170px; }
.log-filter label > input, .log-filter label > select { width: 100%; max-width: none; }
.log-filter label:first-of-type { flex-basis: 240px; }
.log-detail { overflow-wrap: anywhere; min-width: 200px; }
/* Security events: event, place, user name, account not too narrow (table scrolls horizontally in .table-wrap) */
.sec-events td:nth-child(3) { min-width: 200px; }
.sec-events td:nth-child(5), .sec-events td:nth-child(6), .sec-events td:nth-child(7) { min-width: 150px; }
.pager { display: flex; gap: 12px; align-items: center; justify-content: center; margin-top: 14px; }
/* ---------- Help: ?-button, help panel, help page, first steps, jump bar ---------- */
.help-btn { flex-shrink: 0; margin-left: 4px; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--on-dark-line); border-radius: 999px; color: var(--on-dark) !important; font-weight: 700; font-size: 1.05rem; line-height: 1; text-decoration: none !important; }
.help-btn:hover { background: var(--dark-2); border-color: var(--accent-bright); }
.help-btn:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@media (max-width: 1180px) { .help-btn { margin-left: 0; } .topbar-inner { gap: 10px; } }

html.has-dialog { overflow: hidden; }
dialog.help-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(440px, 100vw); height: 100%; max-height: 100%; max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--line); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.help-panel::backdrop { background: rgba(12, 24, 48, .45); }
dialog.help-panel[open] { animation: help-in 180ms ease-out; }
@keyframes help-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { dialog.help-panel[open] { animation: none; } }
.help-panel-inner { display: flex; flex-direction: column; height: 100%; }
.help-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--line); }
.help-panel-head h2 { margin: 0; font-size: 1.3rem; }
.help-panel-head h2:focus { outline: none; }
.help-panel-close { background: none; border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); width: 36px; height: 36px; font-size: 1.4rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.help-panel-close:hover { border-color: var(--accent); color: var(--accent-dark); }
.help-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 16px 22px; }
.help-panel-body h3 { font-size: .95rem; margin: 18px 0 6px; color: var(--accent-dark); }
.help-panel-body h3:first-child { margin-top: 0; }
.help-steps { padding-left: 1.3em; }
.help-steps li { margin-bottom: 8px; }
.help-panel-foot { padding: 14px 22px 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; justify-items: start; }
.help-panel-foot .btn { white-space: normal; text-align: left; }

.help-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 24px; align-items: start; }
.help-toc { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: 16px 18px; }
.help-toc .linklist { gap: 4px; font-size: .92rem; margin: 0; }
.help-search input { margin-top: 6px; max-width: 520px; }
.help-panel-body a, .help-entry a:not(.ref), .onboarding a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.help-search .h3 { display: block; margin: 0; }
.help-search p { margin: 6px 0 0; min-height: 1.2em; }
.help-entry + .help-entry { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 14px; }
.help-entry h3 { margin-bottom: 6px; }
.help-entry p:last-child, .help-entry ul:last-child { margin-bottom: 0; }
.help-chapter { scroll-margin-top: 80px; max-width: 900px; }
.help-glossary { margin: 0; }
.help-glossary dt { font-weight: 700; }
.help-glossary dd { margin: 4px 0 0; }
.help-glossary .ref { margin-left: 4px; }
@media (max-width: 860px) {
  .help-layout { grid-template-columns: minmax(0, 1fr); }
  .help-toc { position: static; max-height: none; overflow: visible; }
  .help-toc .linklist { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

.onboarding { border-color: var(--accent); }
.onboarding-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.onboarding-head h2 { margin-bottom: 2px; }
.onboarding-head p { margin: 0; }
.onboarding-list { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 10px 20px; }
.onboarding-list li { display: flex; gap: 10px; align-items: flex-start; }
.onboarding-mark { width: 22px; height: 22px; border-radius: 999px; border: 2px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; }
.onboarding-list li.is-done .onboarding-mark { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.onboarding-list li.is-done .onboarding-label { color: var(--ink-faint); }
.onboarding-mark .icon { width: 14px; height: 14px; }
@media (max-width: 600px) { .onboarding-list { grid-template-columns: 1fr; } }

.jumpbar { position: sticky; top: 62px; z-index: 8; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; margin: 0 0 18px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.jumpbar a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 6px 12px; border-radius: var(--radius); font-size: .88rem; color: var(--ink-soft); text-decoration: none !important; }
.jumpbar a:hover { background: var(--inset-alt); color: var(--accent-dark); }
.jump-target { scroll-margin-top: 130px; }
/* Single column (tablet/smartphone): the column may become narrower than wide tables/bars, which then scroll inside themselves */
@media (max-width: 1080px) { .with-sidebar { grid-template-columns: minmax(0, 1fr); } }

.auth-help { margin: 18px 0 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); }
.auth-help > summary { padding: 10px 14px; font-weight: 700; font-size: .9rem; display: flex; gap: 8px; align-items: center; }
.auth-help[open] > summary { border-bottom: 1px solid var(--line); }
.auth-help dl { margin: 0; padding: 4px 14px 12px; font-size: .88rem; }
.auth-help dt { font-weight: 700; margin-top: 10px; }
.auth-help dd { margin: 2px 0 0; color: var(--ink-soft); }

/* „?“-Hinweise (help_tip) */
.help-tip { position: relative; display: inline-block; vertical-align: middle; margin-left: 4px; font-family: var(--font-sans); font-size: .85rem; font-weight: 400; letter-spacing: 0; text-transform: none; line-height: 1.45; }
.help-tip-btn { width: 20px; height: 20px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-dark); font: inherit; font-size: .75rem; font-weight: 700; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.help-tip-btn:hover, .help-tip.is-open .help-tip-btn { border-color: var(--accent); background: var(--accent-tint); }
.help-tip-text { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: calc(-8px + var(--tip-shift, 0px)); width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 10px 12px; border-radius: var(--radius); background: var(--dark); color: var(--on-dark); border: 1px solid var(--accent-bright); box-shadow: var(--shadow-md); text-align: left; white-space: normal; }
.help-tip-text strong { color: var(--on-dark); }
.help-tip-text a { display: inline-block; margin-top: 4px; color: var(--accent-bright); text-decoration: underline; }
.help-tip:hover::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 8px; }
.help-tip:hover .help-tip-text, .help-tip:focus-within .help-tip-text, .help-tip.is-open .help-tip-text { display: block; }
.help-tip.is-dismissed .help-tip-text { display: none !important; }

/* Result lists, direct links, entries jumped to */
.help-tools { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 18px; align-items: start; }
@media (max-width: 860px) { .help-tools { grid-template-columns: minmax(0, 1fr); } }
.help-results, .refjump-results { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.help-results li, .refjump-results li { line-height: 1.4; }
.help-results a, .refjump-results a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.help-anchor { opacity: 0; margin-left: 4px; color: var(--ink-faint) !important; font-weight: 400; text-decoration: none !important; }
.help-entry:hover .help-anchor, .help-anchor:focus { opacity: 1; }
.help-entry { scroll-margin-top: 80px; }
.help-entry.is-target { border-radius: var(--radius); box-shadow: 0 0 0 2px var(--accent); background: var(--accent-tint); padding: 10px 12px; }
.help-entry:focus { outline: none; }
.help-panel-tools { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 16px; }
.help-panel-tools .h3, .refjump .h3 { display: flex; gap: 6px; align-items: center; margin: 0 0 6px; font-size: .95rem; }
.help-panel-tools .form-inline input { flex: 1 1 160px; }
.refjump-inline { margin: 0; }
.refjump p { margin: 6px 0 0; }
.law-jump { margin-bottom: 16px; }
.law-jump > summary { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.law-jump[open] .refjump { margin-top: 10px; max-width: 560px; }
[data-law-section]:target, .cat-item:target { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
.refjump-list li + li { border-top: 1px solid var(--line); padding-top: 8px; }

/* Technical terms with explanation (Glossary: term(), glossary_mark()); without JS absolutely positioned below the term, with JS fixed in view (help.js) */
.gl { position: relative; }
.gl-term { text-decoration: underline dotted var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: help; border-radius: 2px; }
.gl-term:hover, .gl.is-open .gl-term { text-decoration-style: solid; }
.gl-term:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.gl-tip { display: none; position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: max-content; max-width: min(320px, calc(100vw - 32px)); padding: 10px 12px; border-radius: var(--radius); background: var(--dark); color: var(--on-dark); border: 1px solid var(--accent-bright); box-shadow: var(--shadow-md); font-family: var(--font-sans); font-size: .85rem; font-weight: 400; font-style: normal; line-height: 1.45; letter-spacing: 0; text-transform: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
.gl-tip::before { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 9px; }
.gl-tip.is-above::before { top: auto; bottom: -9px; }
.gl-tip-head { display: block; margin-bottom: 3px; }
.gl-tip-head strong { color: var(--on-dark); }
.gl-tip-long { color: var(--on-dark-soft); }
.gl-tip-text { display: block; }
.gl-tip-links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 6px; }
.gl-tip a { color: var(--accent-bright); text-decoration: underline; }
.gl:hover > .gl-tip, .gl:focus-within > .gl-tip, .gl.is-open > .gl-tip { display: block; }
.gl.is-dismissed > .gl-tip { display: none !important; }
.gl-js .gl-tip { position: fixed; top: var(--gl-y, 0); left: var(--gl-x, 0); }
/* Glossary on the help page */
.gl-tools { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 10px 0 4px; }
.gl-filter input { min-width: min(280px, 100%); }
.gl-letters { display: flex; flex-wrap: wrap; gap: 2px; }
.gl-letters a { display: inline-block; min-width: 26px; padding: 3px 5px; text-align: center; border-radius: var(--radius); font-weight: 600; font-size: .88rem; text-decoration: none; }
.gl-letters a:hover { background: var(--inset-alt); }
.gl-long { font-weight: 400; color: var(--ink-faint); }
@media print { .help-tip, .help-btn, .jumpbar, dialog.help-panel, .onboarding, .help-toc, .help-search, .gl-tip { display: none !important; } .gl-term { text-decoration: none; } }

/* Header tools (search, help, light/dark) to the right of the menu, before the menu button */
.topbar-inner > .header-tool, .topbar-inner > .help-btn { order: 2; }
@media (max-width: 1180px) {
  .topbar-inner > .help-btn ~ .theme-toggle { margin-left: 4px; }
}
/* Asset-Management (Funktionsmodul) */
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84em; }
.asset-filter label { min-width: 150px; }
.asset-filter input[type=search] { min-width: 220px; }
.asset-table td:first-child input[type=checkbox] { margin-top: 3px; }
.pcap-progress { margin: 10px 0; }
.pcap-progress .progress { width: 100%; }
.pcap-table { max-height: 520px; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.pcap-table thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
.pcap-table .badge { display: inline-block; margin: 2px 4px 0 0; white-space: normal; }
/* Zonenplan nach Purdue-Ebenen (src/ZoneMap.php, b5/ZC Teil B): Farben aus den Tokens, folgen hell/dunkel */
.zmap-wrap { overflow-x: auto; --zmap-band: var(--inset); --zmap-box: var(--surface); --zmap-box-border: var(--line-strong); --zmap-text: var(--ink);
  --zmap-conduit: var(--ink-soft); --zmap-ok: var(--ok-ink); --zmap-warn: var(--warn-ink); --zmap-bad: var(--err-ink); --zmap-exc: var(--ink-faint); --zmap-asset: var(--accent); }
.zmap { width: 100%; min-width: 640px; height: auto; display: block; }
.zmap text { font-family: var(--font-sans); }
.zmap .zmap-conduit { stroke-width: 2; }
.zmap .zmap-flow { stroke-width: 2.5; }
/* Plan elements (same rules as ZoneMap::style() for the standalone file) */
.zmap-band-bg{fill:var(--zmap-band,#f3f4f6);}
.zmap-band-label{font:600 12px sans-serif;fill:var(--zmap-text,#374151);}
.zmap-zone-box{fill:var(--zmap-box,#fff);stroke:var(--zmap-box-border,#9ca3af);stroke-width:1.5;}
.zmap-zone-name{font:600 12px sans-serif;fill:var(--zmap-text,#1f2937);}
.zmap-asset circle{fill:var(--zmap-asset,#a8761a);}
.zmap-wrap:has(#zmap-l-gap:checked) .zmap-asset-open circle,svg.zmap-standalone .zmap-asset-open circle{fill:none;stroke:var(--zmap-exc,#5d687a);stroke-dasharray:2,2;}
.zmap-gap{fill:none;stroke-width:3;}
.zmap-gap-ok{stroke:var(--zmap-ok,#2f7f77);}.zmap-gap-warn{stroke:var(--zmap-warn,#9a6a12);}
.zmap-gap-err{stroke:var(--zmap-bad,#9a2f24);stroke-width:4;}.zmap-gap-open{stroke:var(--zmap-exc,#5d687a);stroke-dasharray:4,3;}
.zmap-gap-text{font:600 11px sans-serif;}
.zmap-gap-text-ok{fill:var(--zmap-ok,#2f7f77);}.zmap-gap-text-warn{fill:var(--zmap-warn,#9a6a12);}
.zmap-gap-text-err{fill:var(--zmap-bad,#9a2f24);}.zmap-gap-text-open{fill:var(--zmap-exc,#5d687a);}
.zmap-asset-more{font:11px sans-serif;fill:var(--zmap-text,#374151);}
.zmap-conduit{stroke:var(--zmap-conduit,#6b7280);stroke-width:1.5;fill:none;}
.zmap-flow{stroke-width:2;fill:none;}
.zmap-flow-allowed{stroke:var(--zmap-ok,#16a34a);}
.zmap-flow-deviation{stroke:var(--zmap-warn,#d97706);}
.zmap-flow-violation{stroke:var(--zmap-bad,#dc2626);}
.zmap-flow-exception{stroke:var(--zmap-exc,#9ca3af);}
.zmap-legend-label{font:11px sans-serif;fill:var(--zmap-text,#374151);}
.zmap-title{font:600 16px sans-serif;fill:var(--zmap-text,#1f2937);}
.zmap-sub{font:12px sans-serif;fill:var(--zmap-text,#6b7280);}
.zmap-wrap:has(#zmap-l-conduits:not(:checked)) .layer-conduits,
.zmap-wrap:has(#zmap-l-flows:not(:checked)) .layer-flows,
.zmap-wrap:has(#zmap-l-assets:not(:checked)) .layer-assets,
.zmap-wrap:has(#zmap-l-gap:not(:checked)) .layer-gap{display:none;}
.zmap-legend-html line { stroke-width: 2.5; }
.zmap text { font-family: var(--font-sans); }
.zmap-layers { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 8px; font-size: .9rem; }
.zmap-layers label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.zmap-legend-html { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 8px 0 0; }
.zmap-legend-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zmap-legend-html svg { vertical-align: middle; }
.zmap-key-gap { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 3px solid var(--line-strong); vertical-align: -2px; }
.zmap-key-ok { border-color: var(--ok-ink); } .zmap-key-warn { border-color: var(--warn-ink); } .zmap-key-err { border-color: var(--err-ink); } .zmap-key-open { border-style: dashed; border-color: var(--ink-faint); }
.zmatrix th, .zmatrix td { text-align: left; min-width: 110px; }
/* tc3-zones (ADR 0147): ZCR 6 block and partitioning hints inside a zone; cards stack at phone width */
.zone-req { margin-top: 12px; }
.zone-hints .zone-hint { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin: 0 0 8px; overflow-wrap: anywhere; }
.zone-hints .zone-hint .inline-form { margin-top: 6px; }
.zmatrix td.is-conduit, .zmatrix td.is-allowed { background: var(--ok-bg); }
.zmatrix td.is-violation { background: var(--err-bg); }
.zmatrix td.is-deviation { background: var(--warn-bg); }
.zmatrix td.is-exception { background: var(--inset); }
.cov-stats .panel.is-warn strong { color: var(--warn-ink); }
.plain-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.plain-list .inline-form { display: inline; }
/* SL-Lücke je Zone und FR (templates/assets/_zones_sl.php) */
.sl-table th.sl-fr, .sl-table td.sl-fr, td.sl-fr, th.sl-fr { text-align: center; }
.sl-table th.sl-fr small { display: block; font-weight: 400; color: var(--ink-faint); }
.sl-cell { display: inline-grid; gap: 1px; min-width: 64px; padding: 3px 6px; border: 1px solid; border-radius: 4px; font-size: .78rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.sl-cell b { font-size: .92rem; }
.sl-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.sl-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.sl-err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.sl-open { background: var(--inset); color: var(--ink-faint); border-color: var(--line-strong); border-style: dashed; }
.sl-legend .sl-cell { min-width: 0; display: inline-block; }
.sl-ov { color: var(--accent-dark); font-weight: 600; }
td.sl-missing { color: var(--ink-faint); background: var(--inset); }
td.sl-low { color: var(--warn-ink); font-weight: 600; }
tr.sl-sum th, tr.sl-sum td { border-top: 2px solid var(--line-strong); font-weight: 600; }
.sl-grid { display: grid; grid-template-columns: repeat(7, minmax(64px, 1fr)); gap: 6px; border: 0; padding: 0; margin: 0 0 10px; }
.sl-grid legend { font-weight: 600; font-size: .9rem; margin-bottom: 4px; }
.sl-grid label { display: grid; gap: 2px; font-size: .8rem; text-align: center; min-width: 0; }
.sl-grid select { min-width: 0; width: 100%; padding: 4px 6px; font-size: .85rem; }
@media (max-width: 640px) { .sl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.zmatrix td.zmatrix-self { background: var(--inset-alt); color: var(--ink-faint); text-align: center; }

/* Preview pages: band at the top of the page */
.preview-band { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; background: var(--warn-bg); color: var(--warn-ink); border-bottom: 1px solid var(--warn-line); font-weight: 600; font-size: .92rem; text-align: center; }
.preview-band .icon { width: 16px; height: 16px; flex-shrink: 0; }

/* Preise und Konfigurator */
.pr-note { margin: 0; font-size: .9rem; color: var(--ink-faint); }
.pr-plans-sec { padding-top: 56px; }
.pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pr-plan { min-width: 0; overflow-wrap: break-word; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px 22px; box-shadow: var(--shadow-sm); }
.pr-plan.is-featured { border: 2px solid var(--accent-bright); box-shadow: var(--shadow-md); }
.pr-plan-enterprise { background: var(--inset); }
.pr-plan-name { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 0 0 8px; }
.pr-plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.pr-amount { font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1.1; }
.pr-amount-text { font-size: 1.5rem; }
.pr-per { color: var(--ink-faint); font-size: .92rem; }
.pr-plan-sub { margin: 4px 0 16px; font-size: .84rem; color: var(--ink-faint); }
.pr-checks { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 8px; font-size: .92rem; color: var(--ink-soft); }
.pr-checks li { display: flex; gap: 8px; align-items: flex-start; }
.pr-check { color: var(--ok-fill); flex-shrink: 0; display: inline-flex; margin-top: 3px; }
.pr-check .icon { width: 16px; height: 16px; }
/* PR2: price per size tier on the package cards */
.pr-tier-prices { width: 100%; border-collapse: collapse; margin: 4px 0 2px; font-size: .9rem; }
.pr-tier-prices th { text-align: left; font-weight: 400; color: var(--ink-soft); padding: 7px 8px 7px 0; }
.pr-tier-prices td { text-align: right; white-space: nowrap; padding: 7px 0; font-weight: 700; color: var(--ink); }
.pr-tier-prices td .pr-per { font-weight: 400; font-size: .8rem; }
.pr-tier-prices tr + tr th, .pr-tier-prices tr + tr td { border-top: 1px solid var(--line); }
.pr-option[hidden], .pr-module[hidden], .pr-wz-foot .btn[hidden], .pr-actions [hidden] { display: none; }
/* PR2: size switch above the package cards (links, aria-current marks the chosen size) */
.pr-size-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pr-size-btn { display: inline-flex; flex-direction: column; min-width: 0; min-height: 44px; justify-content: center; padding: 8px 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; font-size: .86rem; }
.pr-size-btn strong { font-size: 1.05rem; }
.pr-size-btn span { color: var(--ink-faint); }
.pr-size-btn[aria-current="true"] { border: 2px solid var(--accent-bright); box-shadow: var(--shadow-sm); }
.pr-size-btn:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.pr-size-block[hidden] { display: none; }
@media (max-width: 600px) { .pr-size-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .pr-size-btn { padding: 8px; overflow-wrap: anywhere; } }
.pr-options-tiers { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pr-addon-check { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; margin-top: 14px; }
:root[data-theme="dark"] .pr-check { color: var(--ok-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pr-check { color: var(--ok-ink); } }
.pr-plan-btn { margin-top: auto; }
.pr-bundle { margin-top: 22px; display: flex; gap: 24px; align-items: center; justify-content: space-between; background: var(--dark); color: var(--on-dark); border-radius: var(--radius-lg); padding: 24px 26px; }
.pr-bundle .pr-plan-name, .pr-bundle .pr-amount { color: var(--on-dark); }
.pr-bundle .pr-per { color: var(--on-dark-faint); }
/* Pilot price notice below the complete package (pr1): space before the bundles heading */
.lp-hint.pr-pilot { margin: 22px 0 32px; }
.pr-bundle .pr-checks { color: var(--on-dark-soft); margin: 10px 0 0; }
.pr-bundle .pr-check { color: var(--accent-bright); }
.pr-bundle-kicker { margin: 0 0 4px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-bright); font-weight: 600; }
.pr-checks-inline { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.pr-bundle .btn { flex-shrink: 0; }
/* Industry presets (PR3 QB2): chips that only preselect frameworks and building blocks; they wrap, never scroll sideways */
.pr-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.pr-presets > p { flex-basis: 100%; margin: 0; }
.pr-chip { display: inline-flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 8px 14px; border: 1px solid var(--border, #cfd8e3); border-radius: 999px; background: var(--surface, #fff); color: inherit; text-decoration: none; max-width: 100%; }
.pr-chip:hover, .pr-chip:focus-visible { border-color: var(--accent, #2b6cb0); }
.pr-chip .small { white-space: normal; overflow-wrap: anywhere; }
/* The pricing model in five steps above the package cards (PR3 text pass) */
.pr-model { margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--border, #cfd8e3); border-radius: 10px; background: var(--surface, #fff); }
.pr-model-h { margin: 0 0 6px; }
.pr-model ol { margin: 0; padding-left: 1.3em; }
.pr-model li { margin: 6px 0; overflow-wrap: anywhere; }


.pr-conf { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 28px; align-items: start; }
.pr-steps { display: grid; gap: 18px; min-width: 0; }
.pr-step { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 18px 20px 20px; min-width: 0; box-shadow: var(--shadow-sm); }
.pr-step legend { font-weight: 700; font-size: 1.05rem; padding: 0 6px; margin-left: -6px; display: flex; align-items: center; gap: 8px; }
.pr-step-no { width: 26px; height: 26px; border-radius: 50%; background: var(--dark); color: var(--on-dark); display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; }
.pr-legend-note { font-weight: 400; color: var(--ink-faint); font-size: .9rem; }
/* Nested single-choice group inside a step (implementation support S/M/L): plain, no second card frame */
.pr-step .pr-subgroup { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.pr-step .pr-options-sizes { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.pr-step .pr-subgroup legend { font-size: .95rem; font-weight: 600; padding: 0; margin: 0; flex-wrap: wrap; }
.pr-sub { margin: 16px 0 8px; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.pr-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 10px; }
.pr-options-plans, .pr-options-billing { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pr-options-plans { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.pr-option { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; transition: border-color var(--t), background var(--t); }
.pr-option:hover { border-color: var(--accent); }
.pr-option:has(input:checked) { border-color: var(--accent); background: var(--accent-tint); }
.pr-option:has(input:disabled) { cursor: default; }
/* Locked options (premium, tier L, bundle components, baseline and included modules): same white card as an unselected
   option, no fill and no fading (light blue is reserved for what the user chose). The checkbox is replaced by an icon:
   check = included, lock = not selectable. Cursor default, no hover highlight. */
.pr-option:has(input:disabled), .pr-option:has(input:disabled):hover { background: var(--surface); border-color: var(--line-strong); }
.pr-option input:disabled { appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; background: var(--ink-faint); opacity: 1;
  -webkit-mask: var(--pr-lock) center / 16px no-repeat; mask: var(--pr-lock) center / 16px no-repeat; }
.pr-option input:disabled:checked { background: var(--ok-ink); -webkit-mask-image: var(--pr-tick); mask-image: var(--pr-tick); }
.pr-option { --pr-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");
  --pr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.pr-wz-fixed { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: var(--radius); background: var(--inset); color: var(--ink-soft); font-size: .9rem; }
.pr-wz-fixed[hidden], .pr-step[hidden] { display: none; }
.pr-wz-fixed .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.pr-option input { margin: 4px 0 0; flex-shrink: 0; accent-color: var(--accent); width: 16px; height: 16px; }
.pr-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pr-option-body strong { font-weight: 600; }
.pr-option-body .badge { align-self: flex-start; }
.pr-option-meta { font-size: .84rem; color: var(--ink-faint); font-weight: 400; }
.pr-option-wait { background: var(--inset); }
.pr-module { display: flex; flex-direction: column; gap: 6px; }
.pr-module-info .pr-option { cursor: default; background: var(--inset); border-style: dashed; }
.pr-qty { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--ink-soft); padding-left: 4px; }
.pr-qty input { width: 110px; }
.pr-addons { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; margin-top: 10px; }
.pr-addons label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; }
.pr-qty input[type="number"] { padding: 6px 9px; }

/* Sticky summary. Without JavaScript the box scrolls inside (max-height); pricing.js adds .is-follow and moves the box
   with the page via --pr-sum-top instead, so nothing is hidden behind a scrollbar macOS does not show. */
.pr-summary { position: sticky; top: var(--pr-sum-top, 108px); }
.pr-summary.is-follow .pr-summary-inner { max-height: none; overflow: visible; }
.pr-summary-inner { max-height: calc(100vh - 124px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; background: var(--surface); border: 2px solid var(--accent-bright); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow-md); }
.pr-sum-title { margin: 0 0 10px; font-size: 1.1rem; }
.pr-lines { width: 100%; border-collapse: collapse; font-size: .88rem; }
.pr-lines th { text-align: left; font-weight: 600; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.pr-lines td { padding: 7px 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: top; }
.pr-lines tr.is-included td { color: var(--ok-ink); }
.pr-lines tbody[data-pr-once] tr:first-child th, .pr-lines tbody[data-pr-once] tr:first-child td { border-top: 2px solid var(--line-strong); }
.pr-line-detail { display: block; font-weight: 400; color: var(--ink-faint); font-size: .8rem; }
.pr-totals { margin: 14px 0 8px; display: grid; gap: 4px; }
.pr-totals > div { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.pr-totals dt { color: var(--ink-soft); }
.pr-totals dd { margin: 0; font-weight: 700; }
.pr-total-main dt { font-weight: 700; color: var(--ink); }
.pr-total-main dd { font-size: 1.5rem; color: var(--ink); }
.pr-scope { margin: 0 0 6px; }
.pr-actions { display: grid; gap: 8px; margin-top: 14px; }
.pr-actions [hidden] { display: none; }
.pr-sticky { display: none; }
#konfigurator, #pr-summary { scroll-margin-top: 96px; }

@media (max-width: 1100px) { .pr-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .pr-conf { grid-template-columns: 1fr; }
  .pr-summary { position: static; }
  .pr-summary-inner { max-height: none; overflow: visible; }
  .pr-bundle { flex-direction: column; align-items: flex-start; }
  /* Mobile: monthly total as a bar at the bottom edge */
  .pr-sticky { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; align-items: center; gap: 8px; padding: 12px 16px; background: var(--dark); color: var(--on-dark); text-decoration: none; box-shadow: 0 -4px 16px rgba(0, 0, 0, .18); font-size: .92rem; }
  .pr-sticky strong { font-size: 1.1rem; }
  .pr-sticky-go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--accent-bright); font-weight: 600; }
  .pr-sticky-go .icon { width: 14px; height: 14px; }
  #konfigurator { padding-bottom: 96px; }
}
@media (max-width: 600px) {
  .pr-plans { grid-template-columns: minmax(0, 1fr); }   /* minmax: long words in FR/ES cards must not widen the page at 320 px */
  .pr-step { padding: 14px 14px 16px; }
  .pr-options, .pr-options-plans, .pr-options-billing, .pr-options-tiers, .pr-addons { grid-template-columns: 1fr; }
}
@media print { .preview-band { border: 1px solid #999; } .pr-sticky, .pr-actions { display: none !important; } }

/* Preispflege (Administration) */
.pricing-admin input, .pricing-admin select { width: 100%; min-width: 90px; }
.pricing-admin td.pa-default { color: var(--ink-faint); white-space: nowrap; }
.pricing-admin tr.is-changed td:first-child { box-shadow: inset 3px 0 0 var(--accent-bright); }
.pricing-admin th.pa-group { background: var(--inset); text-transform: none; letter-spacing: 0; font-size: .86rem; color: var(--ink); }

/* ---------- Key figures: large numbers in Work Sans with equal-width digits (Marcellus: „1“ looks like „I“) ---------- */
.num, .cov-stats strong, .ring span, .pr-amount, .pr-totals dd, .gap-bar-value, .stat-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums lining-nums; }

/* ---------- Dialogs: safety prompt and upload errors (app.js) ---------- */
dialog.modal { width: min(460px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 22px 24px 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.modal::backdrop { background: rgba(12, 24, 48, .5); }
dialog.modal[open] { animation: modal-in 140ms ease-out; }
@keyframes modal-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.modal[open] { animation: none; } }
.modal-title { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; }
.modal-confirm .modal-title::before, .modal-upload .modal-title::before, .modal-error .modal-title::before { content: "!"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--err-bg); color: var(--err-ink); font-size: .85rem; vertical-align: 2px; }
.modal-text { margin: 0 0 6px; overflow-wrap: anywhere; }
.modal-list { margin: 0 0 10px; padding-left: 18px; overflow-wrap: anywhere; }
.modal-list li { margin: 0 0 4px; }
.modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 18px; }
@media (max-width: 480px) { .modal-actions .btn { flex: 1 1 auto; } }
.confirm-page .panel { max-width: 560px; }
/* ASVS V3.7.3 notice before an external link: long addresses wrap instead of widening the page (375 px) */
.outbound-url code { overflow-wrap: anywhere; word-break: break-all; white-space: normal; }

/* ---------- Linked catalogue entries ---------- */
.link-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--info-bg); color: var(--info-ink); border: 1px solid var(--info-line); font-size: .82rem; }
.link-badge a { color: inherit; font-weight: 600; }
.link-badge .icon { width: 14px; height: 14px; }
.cat-item.is-linked .cat-fields .is-inherited textarea, .cat-item.is-linked .cat-fields .is-inherited select { background: var(--inset); }
.link-hint { margin: 6px 0 0; }
.cat-history { margin: 6px 0 0 74px; }
@media (max-width: 1080px) { .cat-history { margin-left: 0; } }
.cat-history ul { margin: 4px 0 0; padding-left: 18px; }
.ev-inherited { margin: 0 0 6px; }

/* ---------- Admin board (overview for Complass administrators) ---------- */
.board-h { margin: 18px 0 8px; }
.board-stats { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 10px; }
.board-stats .panel { padding: 12px 14px; }
.board-stats strong { font-size: 1.4rem; }
.board-period label { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: .88rem; }
.board-charts { margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.board-charts .panel { margin: 0; min-width: 0; }
.board-chart { width: 100%; height: auto; margin: 6px 0; }
.board-chart a:hover rect { opacity: .8; }
.chart-axis { stroke: var(--line-strong); stroke-width: 1; }
.chart-label { fill: var(--ink-faint); font-size: 11px; font-family: var(--font-sans); }
.chart-label-lg { font-size: 13px; fill: var(--ink-soft); }
.chart-s1 { fill: var(--ink-soft); }
.chart-s2 { fill: var(--err-ink); }
.chart-s3 { fill: var(--accent); }
.chart-s4 { fill: var(--ok-ink); }
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 6px; }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.chart-key.chart-s1 { background: var(--ink-soft); } .chart-key.chart-s2 { background: var(--err-ink); }
.chart-key.chart-s3 { background: var(--accent); } .chart-key.chart-s4 { background: var(--ok-ink); }
.board-main { margin-top: 18px; scroll-margin-top: 80px; }
.board-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin: -4px 0 14px; }
.board-tabs a { padding: 8px 12px; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-soft); font-weight: 600; }
.board-tabs a:hover { background: var(--inset); text-decoration: none; }
.board-tabs a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--accent); }
.board-subtabs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin: 0 0 12px; }
.board-subtabs a[aria-current] { font-weight: 700; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.board-filter { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 12px; align-items: end; margin-bottom: 12px; }
.board-filter label { display: grid; gap: 4px; font-weight: 700; font-size: .84rem; min-width: 0; }
.board-filter input, .board-filter select { width: 100%; min-width: 0; }
.board-filter .board-q { grid-column: span 2; }
.board-multi { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 12px 8px; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.board-multi legend, .board-radio legend { font-weight: 700; font-size: .84rem; padding: 0 4px; }
.board-filter .check-inline, .check-inline { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; font-size: .9rem; }
.check-inline input { width: auto; }
.board-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; grid-column: 1 / -1; }
.board-result { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-bottom: 8px; }
.board-result p { margin: 0; }
.board-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.board-chips a { white-space: normal; text-align: left; }
.board-chips a:hover { text-decoration: none; filter: brightness(.96); }
.board-tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-start; margin-bottom: 10px; }
.board-tools details { flex: 1 1 320px; min-width: 0; }
.board-tools summary { cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; }
.board-tools .subpanel { margin-top: 6px; }
.board-view-list { list-style: none; padding: 0; margin: 0 0 10px; display: grid; gap: 4px; }
.board-view-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.board-view-save { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; }
.board-view-save label { display: grid; gap: 4px; font-weight: 700; font-size: .84rem; flex: 1 1 220px; }
.board-radio { border: 0; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.board-radio legend { padding: 0; margin-bottom: 2px; width: 100%; }
.code-inline { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--inset-alt); padding: 1px 5px; border-radius: 4px; word-break: break-all; }
.sort-link { color: inherit; font-weight: 700; white-space: nowrap; }
/* Positioned frame: hidden labels (sr-only) in wide tables would otherwise widen the page */
.board-main .table-wrap, .board-charts .table-wrap { position: relative; }
.board-table td { vertical-align: top; }
.board-table tr.is-overdue td { background: var(--err-bg); }
.board-actions a { font-size: .85rem; }
@media (max-width: 600px) {
  .board-filter { grid-template-columns: 1fr 1fr; }
  .board-filter .board-q { grid-column: 1 / -1; }
  .board-stats { grid-template-columns: 1fr 1fr; }
  .board-period { width: 100%; }
}

/* ---------- Anpassbares Dashboard (Kacheln, Ansichten, Bearbeiten-Modus) ---------- */
.print-only { display: none; }
.dash-actions { align-items: center; }
/* UX1: menu "Mehr" in the dashboard head */
.dash-more { position: relative; display: inline-flex; margin: 0; }
.dash-more > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; min-width: 200px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; display: grid; gap: 2px; }
.dash-more-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; text-decoration: none; cursor: pointer; }
.dash-more-row:hover, .dash-more-row:focus-visible { background: var(--inset); }
.dash-more-row .icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.dash-edit-wrap { display: inline-flex; align-items: center; gap: 2px; }
.dash-edit-btn .icon { width: 16px; height: 16px; }
.dash-tabs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; border-bottom: 1px solid var(--line-strong); margin: 0 0 18px; }
.dash-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-soft); margin-bottom: -1px; font-size: .92rem; }
.dash-tab:hover { text-decoration: none; color: var(--accent-dark); background: var(--surface); }
.dash-tab[aria-current="page"] { background: var(--surface); border-color: var(--line-strong); color: var(--ink); font-weight: 700; }
.dash-tab .icon { width: 14px; height: 14px; color: var(--accent); }
.dash-tab-new { color: var(--accent-dark); }
.dash-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 18px; }
.dash-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); min-width: 0; }
.dash-s { grid-column: span 1; }
.dash-m { grid-column: span 2; }
.dash-l { grid-column: 1 / -1; }
.dash-tile-title { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 8px; }
.dash-tile-title a { color: inherit; }
.dash-tile-body > :last-child { margin-bottom: 0; }
.dash-figure { font-family: var(--font-sans); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; font-size: 1.9rem; line-height: 1.1; margin: 0 0 4px; color: var(--ink); }
.dash-figure.is-overdue { color: var(--err-ink); }
.dash-figure.is-warn { color: var(--warn-ink); }
.dash-mini, .dash-feed, .dash-projects, .dash-bars { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; font-size: .87rem; }
.dash-mini li { line-height: 1.4; }
.dash-mini .icon { color: var(--ink-faint); }
.dash-feed li { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 8px; line-height: 1.4; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.dash-feed li:last-child { border-bottom: 0; }
.dash-projects li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; align-items: center; }
.dash-projects-bar { display: flex; align-items: center; gap: 6px; }
.dash-projects-bar .progress { flex: 1 1 auto; margin: 0; }
.dash-s .dash-projects li { grid-template-columns: 1fr; gap: 0; }
.dash-bars li { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) auto; gap: 10px; align-items: center; }
.dash-bars-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-bars .progress { margin: 0; }
.dash-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px; margin-bottom: 8px; }
.dash-figs div { display: grid; }
.dash-figs strong { font-size: 1.3rem; }
.dash-empty { margin: 20px auto 30px; }
.dash-unavailable { padding-left: 1.1em; }
.dash-form-table td { vertical-align: middle; }
/* Bearbeiten-Modus */
.dash-toolbar { border-color: var(--accent); }
.dash-toolbar[hidden], .dash-tile-edit[hidden], .dash-dialog [hidden], .dash-catalog li[hidden], .dash-empty[hidden], .dash-edit-btn[hidden], .dash-edit-wrap[hidden] { display: none !important; }
.dash-toolbar-main { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.dash-toolbar-title { margin: 0; }
.dash-manage-box { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.dash-manage-box > summary { cursor: pointer; font-weight: 700; font-size: .9rem; }
.dash-manage { display: grid; gap: 10px; margin-top: 10px; }
.dash-manage .form-inline input[type=text] { max-width: 320px; }
.dash-manage .row-actions .icon { width: 14px; height: 14px; }
.dash-publish > summary { cursor: pointer; font-size: .9rem; font-weight: 700; display: inline-flex; gap: 6px; align-items: center; }
.dash-publish[open] > form { margin-top: 10px; }
.dash-danger { color: var(--err-ink) !important; }
.dash.is-editing .dash-tile { border-style: dashed; border-color: var(--line-strong); }
/* UX1: tiles without open items collapse into one line; in edit mode they show so they can be moved or removed */
.dash:not(.is-editing) .dash-tile[data-quiet] { display: none; }
.dash.is-editing .dash-quiet-line { display: none; }
.dash-quiet-line { margin: 0 0 12px; }
/* UX1 B5: start box of a company without a project */
.dash-start { margin: 0 0 16px; border-left: 3px solid var(--accent-bright); }
.dash-start p { max-width: 70ch; }
.dash.is-editing .dash-start { display: none; }
/* UX1 B3: tile "Heute zu tun" */
.today-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; }
.today-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--line); }
.today-row:first-child { border-top: 0; }
.today-sev { align-self: stretch; border-radius: 2px; background: var(--line-strong); }
.today-err .today-sev { background: var(--err-ink); }
.today-warn .today-sev { background: var(--warn-ink); }
.today-main { min-width: 0; overflow-wrap: anywhere; }
.today-main a { font-weight: 600; }
.today-sub { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dash.is-editing .dash-tile[draggable="true"] { cursor: grab; }
.dash-tile.is-dragging { opacity: .45; }
.dash-tile.is-new { border-color: var(--accent); }
.dash-tile-edit { display: flex; align-items: center; gap: 4px; margin: -6px -6px 10px; padding: 4px; background: var(--inset); border-radius: var(--radius); flex-wrap: wrap; }
.dash-tile-edit select { font: inherit; font-size: .8rem; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); max-width: 110px; }
.dash-tile-edit .badge .icon { width: 11px; height: 11px; }
.dash-grip { color: var(--ink-faint); display: inline-flex; padding: 0 2px; }
.dash-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; }
.dash-icon-btn:hover { border-color: var(--accent); color: var(--accent-dark); text-decoration: none; }
.dash-icon-btn:focus-visible, .dash-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-icon-btn .icon { width: 15px; height: 15px; }
/* Directly on the dashboard: handle for dragging and X for removing, appear on hover or with keyboard focus */
.dash-tile { position: relative; }
.dash-tile-quick { position: absolute; top: 8px; right: 8px; display: flex; gap: 2px; align-items: center; opacity: 0; transition: opacity .12s; background: var(--surface); border-radius: var(--radius); }
.dash-tile:hover > .dash-tile-quick, .dash-tile:focus-within > .dash-tile-quick { opacity: 1; }
.dash.is-editing .dash-tile-quick { display: none; }
.dash-quick-grip, .dash-quick-x, .dash-quick-lock { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink-faint); padding: 0; }
.dash-quick-grip { cursor: grab; }
.dash-quick-grip:active { cursor: grabbing; }
.dash-quick-x { cursor: pointer; }
.dash-quick-grip:hover { color: var(--accent-dark); background: var(--inset); }
.dash-quick-x:hover { color: var(--err-ink); background: var(--err-bg); }
.dash-quick-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.dash-tile-quick .icon { width: 14px; height: 14px; }
.dash-tile-title { padding-right: 56px; }
.dash-tile.is-removing { opacity: .4; pointer-events: none; }
.dash-tile[draggable="true"] { cursor: grabbing; }
.dash-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; margin: 0; padding: 10px 16px; max-width: min(560px, calc(100vw - 32px)); border-radius: var(--radius); background: var(--dark-3); color: var(--on-dark); box-shadow: var(--shadow-lg); font-size: .9rem; }
.dash-toast.is-error { background: var(--err-bg); color: var(--err-ink); border: 1px solid var(--err-line); }
.dash-toast[hidden] { display: none; }
/* Touch devices: X always visible, dragging there via „Anpassen“ (customise; arrows) */
@media (hover: none) {
  .dash-tile-quick { opacity: 1; }
  .dash-quick-grip { display: none; }
  .dash-tile-title { padding-right: 30px; }
}
/* Dialogs: catalogue, new view, export (open via URL without JavaScript, then as a box on the page) */
dialog.dash-dialog { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); }
dialog.dash-dialog::backdrop { background: rgba(12, 24, 48, .45); }
dialog.dash-dialog[open]:not(:modal) { position: static; margin: 0 0 18px; width: auto; max-height: none; box-shadow: var(--shadow-sm); }
.dash-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.dash-dialog-head h2 { margin: 0; }
.dash-dialog > form, .dash-dialog > .dash-filter, .dash-dialog > .dash-catalog { padding: 14px 18px; margin: 0; }
.dash-filter { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 0 !important; }
.dash-filter [aria-pressed="true"] { background: var(--dark-3); color: var(--on-dark); border-color: var(--dark-3); }
.dash-catalog { list-style: none; display: grid; gap: 0; }
.dash-catalog li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.dash-catalog li:last-child { border-bottom: 0; }
dialog.dash-dialog-wide { width: min(760px, calc(100vw - 32px)); }
.dash-dialog > p { padding: 14px 18px 0; margin: 0; }
.rg-body { padding: 14px 18px 18px; }
.rg-body h3 { margin: 18px 0 6px; }
.rg-body ol, .rg-body ul { padding-left: 1.3em; }
.rg-body li { margin-bottom: 6px; }
.rg-note { margin: 4px 0 0; }
pre.rg-cmd { margin: 6px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); font-size: .85rem; white-space: pre-wrap; overflow-wrap: break-word; }
/* U4 release preview (templates/supply_chain/_preview.php, SF-710): whole file readable, scrolls inside, keyboard focusable */
pre.sc-preview { margin: 6px 0; padding: 8px 10px; max-height: 28rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; }
.sc-preview-kv dd { min-width: 0; overflow-wrap: anywhere; }
.dash-tpl-list { list-style: none; margin: 0; padding: 6px 18px; display: grid; }
.dash-tpl-list li, .dash-factory-row { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); line-height: 1.4; }
.dash-tpl-list li:last-child, .dash-factory-row:last-child { border-bottom: 0; }
.dash-tpl-list .row-actions { flex-wrap: nowrap; }
.dash-tpl-list .badge .icon { width: 11px; height: 11px; }
.dash-factory { margin: 0 18px 16px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--inset); }
.dash-factory h3 { margin: 10px 0 0; }
.dash-choice { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.dash-choice legend { font-weight: 700; font-size: .88rem; margin-bottom: 6px; }
.dash-choice-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.dash-choice .check { font-size: .92rem; }
@media (max-width: 1100px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-m { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .dash-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .dash-s, .dash-m, .dash-l { grid-column: 1 / -1; }
  .dash-head { margin-bottom: 14px; }
  .dash-edit-label, .dash-more-label { display: none; }
  .dash-tab { padding: 6px 10px; font-size: .86rem; }
  .dash-projects li, .dash-feed li { grid-template-columns: 1fr; gap: 2px; }
  .dash-catalog li, .dash-tpl-list li, .dash-factory-row { flex-wrap: wrap; }
  /* UX1 B6: key figures two per row; the project table keeps project, progress and indicator */
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-s { grid-column: span 1; }
  .dash-tile[data-id="projects"] .tt-bar, .dash-tile[data-id="projects"] p.small.muted { display: none; }
  .dash-tile[data-id="projects"] :is(th, td):is(:nth-child(3), :nth-child(5), :nth-child(6)) { display: none; }
}
@media print {
  .print-only { display: inline; }
  .no-print, .dash-tabs, .dash-toolbar, .dash-tile-edit, .dash-tile-quick, .dash-toast, dialog.dash-dialog, .dash-edit-wrap { display: none !important; }
  .dash-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .dash-m { grid-column: span 2; }
  .dash-tile { break-inside: avoid; box-shadow: none; border-color: #ccc; }
}

/* Dashboard: mark people/departments with overdue items only through red text (no surface colour) */
.table tr.row-overdue > td:first-child summary strong { color: var(--err-ink); }
.linklist li.is-overdue, .linklist li.is-overdue a { color: var(--err-ink); }
/* Place long references (e.g. „Art. 21 Abs. 2 lit. a NIS2; § 30 …“) above the title on the smartphone */
@media (max-width: 600px) { .cat-item-head { flex-direction: column; gap: 6px; } .cat-ref { text-align: left; } .cat-item-head > .grow { width: 100%; min-width: 0; } }

/* Schwachstellenmanagement */
.vuln-kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.vuln-views { padding-top: 10px; padding-bottom: 10px; }
.vuln-views .filter-bar { margin-bottom: 0; gap: 8px; align-items: center; }
.vuln-view { display: inline-flex; align-items: center; gap: 2px; }
.vuln-view-save { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.vuln-view-save input[type=text] { min-width: 220px; }
.vuln-filter .filter-bar label { min-width: 170px; }
.vuln-filter input[type=number] { max-width: 120px; }
.vuln-exp { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; min-width: 100%; }
.vuln-exp label.check { min-width: 0; font-weight: 400; }
.vuln-table td { vertical-align: top; }
.vuln-table .badge { margin: 1px 2px 1px 0; }
.vuln-sum { max-width: 46ch; overflow-wrap: anywhere; }
.vuln-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.vuln-grid > .panel, .vuln-grid > .form { margin: 0; min-width: 0; }
.vuln-grid .kv dd { min-width: 0; overflow-wrap: anywhere; }
.vuln-cra { display: grid; gap: 8px; }
.vuln-cra p { margin: 0; }
.mono-head { overflow-wrap: anywhere; }
.vuln-crit { font-size: .85rem; }
.vuln-crit td { overflow-wrap: anywhere; }
.vuln-cpe-list { display: grid; gap: 6px; margin: 6px 0 0; padding: 0; list-style: none; }
.vuln-cpe-list li { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vuln-cpe-list code, .vuln-crit code { overflow-wrap: anywhere; word-break: break-all; }
.vuln-help pre { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; overflow-x: auto; font-size: .85rem; white-space: pre-wrap; overflow-wrap: break-word; }
.vuln-plan td { vertical-align: top; }
.vuln-advice { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.vuln-advice > li { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 10px; }
.vuln-advice a { overflow-wrap: anywhere; }
.vuln-adopt { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.vuln-adopt select { font-size: .82rem; padding: 3px 6px; max-width: 100%; }
.vuln-plan select { max-width: 280px; }
@media (max-width: 860px) {
  .vuln-grid { grid-template-columns: minmax(0, 1fr); }
  .vuln-filter .filter-bar label { min-width: 0; flex: 1 1 140px; }
  .vuln-view-save input[type=text] { min-width: 0; width: 100%; }
  .vuln-plan select { max-width: 100%; }
}
/* Permissions: rights matrix person × area (first column fixed), deviations and time limits marked */
.rights-filter .filter-bar label { min-width: 170px; flex: 1 1 170px; }
.rights-filter .filter-bar label.check { flex: 0 0 auto; min-width: 0; }
.rights-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.rights-wrap { max-height: 70vh; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.rights-matrix { font-size: .84rem; }
.rights-matrix th, .rights-matrix td { padding: 6px 8px; border-left: 1px solid var(--line); }
.rights-matrix thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; text-transform: none; letter-spacing: 0; font-size: .78rem; color: var(--ink-soft); }
.rights-matrix thead tr:nth-child(2) th { top: 30px; }
.rights-matrix .rights-group { text-align: center; background: var(--inset); color: var(--ink); }
.rights-matrix .rights-col { min-width: 96px; vertical-align: bottom; }
.rights-matrix .rights-col.is-focus { box-shadow: inset 0 -3px 0 var(--accent); }
/* Column head links (area name, "nicht gebucht", "vorbereitet") stack via <br>: 24 px high each, so stacked targets
   are 24 px apart (WCAG 2.5.8); only the head row grows, the column width stays the same. */
.rights-matrix .rights-col a.filter-link { display: inline-flex; align-items: center; min-height: 24px; }
.rights-matrix .rights-person { position: sticky; left: 0; z-index: 1; background: var(--surface); min-width: 190px; max-width: 240px; text-align: left; font-weight: 400; border-left: 0; }
.rights-matrix thead .rights-person { z-index: 3; }
.rights-matrix .rights-person .small { display: block; }
.rights-matrix select { font-size: .8rem; padding: 4px 6px; min-width: 138px; }
.rights-matrix tbody th { text-transform: none; letter-spacing: 0; font-size: .84rem; color: var(--ink); }
.rights-cell.is-dev { background: var(--warn-bg); }
.rights-cell.is-until { box-shadow: inset 3px 0 0 var(--ok-fill); }
.rights-cell.is-none .rights-val { color: var(--ink-faint); }
.rights-until { display: block; font-size: .72rem; color: var(--ok-ink); white-space: nowrap; }
.rights-legend { margin-top: 8px; }
.rights-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--line-strong); }
.rights-swatch.is-dev { background: var(--warn-bg); }
.rights-swatch.is-until { background: var(--ok-fill); }
.rights-person-table tr.is-dev td { background: var(--warn-bg); }
.rights-person-table select { min-width: 110px; }
.rights-bulk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px 18px; margin: 10px 0; }
.rights-bulk-grid .check > span { display: grid; gap: 6px; }
.rights-defined summary{cursor:pointer;min-height:24px}
.rights-defined-list{margin:.5rem 0 0}
.rights-defined-list dt{font-weight:600;margin-top:.4rem}
.rights-defined-list dd{margin:0;overflow-wrap:anywhere}
.rights-templates { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.rights-template { display: grid; gap: 6px; align-content: start; padding: 14px; }
.rights-template .btn { justify-self: start; }
@media (max-width: 600px) {
  .rights-matrix .rights-person { min-width: 140px; max-width: 160px; }
  .rights-wrap { max-height: none; }
  .rights-bulk-grid { grid-template-columns: 1fr; }
}

/* Mitwirkende an einem Objekt */
.collab-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.collab-list li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; padding: 8px 10px; background: var(--inset); border-radius: var(--radius); }
.collab-msg { flex-basis: 100%; color: var(--ink-soft); }
.collab-invite summary { cursor: pointer; margin: 6px 0; }
.collab-invite select[multiple] { min-height: 96px; }

/* ---------- Global search (?r=search) and search window from the header ---------- */
.search-form .form-inline input[type="search"] { flex: 1 1 260px; min-width: 0; font-size: 1rem; }
.search-scope { margin: 10px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.search-scope .badge .icon { width: 12px; height: 12px; }
.search-summary { margin: 0 0 10px; }
.search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; }
.search-chips a.badge { text-decoration: none; font-weight: 600; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.search-chips a.badge:hover { border-color: var(--accent); }
.search-chip-n { color: var(--ink-faint); font-weight: 400; }
.search-group h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.search-hits { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.search-hits li { min-width: 0; overflow-wrap: anywhere; }
.search-hit-title { font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.search-snippet { margin: 2px 0 0; font-size: .9rem; color: var(--ink-soft); }
.search-where { color: var(--ok-ink); margin-top: 2px; }
.search-more { margin: 14px 0 0; }
.search-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.search-more .icon { width: 14px; height: 14px; }
.search-examples { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 0; margin: 0 0 10px; list-style: none; }
.search-hits mark, .search-dialog mark { background: var(--warn-bg); color: inherit; border-radius: 2px; padding: 0 1px; box-shadow: 0 0 0 1px var(--warn-line); }
kbd { font: inherit; font-size: .8em; padding: 1px 5px; border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--inset); color: var(--ink); white-space: nowrap; }

dialog.search-dialog { position: fixed; top: 8vh; left: 0; right: 0; margin: 0 auto; width: min(680px, calc(100vw - 32px)); max-height: 80vh; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.search-dialog[open] { display: flex; flex-direction: column; animation: search-in 140ms ease-out; }
dialog.search-dialog::backdrop { background: rgba(12, 24, 48, .45); }
@keyframes search-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { dialog.search-dialog[open] { animation: none; } }
.search-dialog-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 16px; border-bottom: 1px solid var(--line); margin: 0; }
.search-dialog-bar:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.search-dialog-bar > .icon { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.search-dialog-bar input[type="search"] { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1.05rem; padding: 8px 2px; box-shadow: none; }
.search-dialog-bar input[type="search"]:focus { outline: none; box-shadow: none; }
.search-dialog-bar input[type="search"]::-webkit-search-cancel-button { display: none; }
.search-dialog-close { background: none; border: 1px solid var(--line-strong); color: var(--ink); border-radius: var(--radius); width: 34px; height: 34px; font-size: 1.3rem; line-height: 1; cursor: pointer; flex-shrink: 0; }
.search-dialog-close:hover { border-color: var(--accent); color: var(--accent-dark); }
.search-dialog-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.search-dialog-status { margin: 6px 8px; }
.search-group-box { padding: 2px 0 6px; }
.search-group-box + .search-group-box { border-top: 1px solid var(--line); }
.search-group-head { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px 2px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark); }
.search-group-n { color: var(--ink-faint); letter-spacing: 0; }
.search-opt { display: grid; gap: 1px; padding: 7px 10px; border-radius: var(--radius); color: var(--ink); text-decoration: none !important; min-width: 0; overflow-wrap: anywhere; }
.search-opt:hover, .search-opt.is-active { background: var(--accent-tint); }
.search-opt.is-active { box-shadow: inset 3px 0 0 var(--accent); }
.search-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.search-opt-title { font-weight: 600; line-height: 1.35; }
.search-opt-meta, .search-opt-where { font-size: .8rem; color: var(--ink-faint); line-height: 1.35; }
.search-opt-where { color: var(--ok-ink); }
.search-opt-snip { font-size: .84rem; color: var(--ink-soft); line-height: 1.4; }
.search-opt-more { font-size: .86rem; font-weight: 600; color: var(--accent-dark); }
.search-opt-all { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.search-recent { padding: 4px 10px 8px; }
.search-recent .eyebrow { margin: 6px 0 4px; }
.search-recent-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.search-recent-item { font: inherit; font-size: .86rem; background: var(--inset); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 3px 10px; cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-recent-item:hover { border-color: var(--accent); }
.search-dialog-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 9px 14px; border-top: 1px solid var(--line); background: var(--inset); }
.search-dialog-foot a { margin-left: auto; }
@media (max-width: 600px) {
  dialog.search-dialog { top: 8px; width: calc(100vw - 16px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); }
  .search-dialog-foot span { display: none; }
}
/* Jump targets of the search: checklist item, document section, audits, catalogue entry, zone (below the fixed header) */
.checklist > li[id], .doc-section[id], #audits, .cat-item[id], details[id^="zone-"] { scroll-margin-top: 90px; }
.checklist > li:target, .doc-section:target, #audits:target { box-shadow: 0 0 0 2px var(--accent); border-radius: var(--radius); }
@media print { dialog.search-dialog { display: none !important; } }

/* ---------- Introduction: tour (coach marks), short-film player, „Was ist neu“ (what is new) (public/assets/tour.js, src/Tour.php) ---------- */
:root { --tour-dim: rgba(12, 24, 48, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tour-dim: rgba(0, 0, 0, .66); } }
:root[data-theme="dark"] { --tour-dim: rgba(0, 0, 0, .66); }
/* Button „Kurze Tour“ (short tour) (templates/tour/_page.php): without a page header right-aligned above the content, otherwise in the page header */
.page-tour { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.page-tour.is-in-head { margin: 0; }
.page-tour-btn { white-space: nowrap; }
.page-tour-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 24px; }
.page-tour-groups h4 { margin: 12px 0 4px; }
dialog.tour-layer { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink); overflow: hidden; }
dialog.tour-layer::backdrop { background: transparent; }
dialog.tour-layer:not(.has-target) { background: var(--tour-dim); }
.tour-spot { position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 8px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent-bright), 0 0 0 9999px var(--tour-dim); transition: left 260ms ease, top 260ms ease, width 260ms ease, height 260ms ease; }
.tour-spot::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(224, 169, 59, .55); animation: tour-pulse 1.8s ease-out infinite; }
@keyframes tour-pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 169, 59, .55); } 70% { box-shadow: 0 0 0 12px rgba(224, 169, 59, 0); } 100% { box-shadow: 0 0 0 0 rgba(224, 169, 59, 0); } }
.tour-pop { position: fixed; left: 50%; top: 50%; width: min(380px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; padding: 14px 18px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent-bright); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: left 220ms ease, top 220ms ease; animation: tour-in 200ms ease-out; }
.tour-pop.is-wide { width: min(460px, calc(100vw - 24px)); }
.tour-layer.is-scrolling .tour-spot, .tour-layer.is-scrolling .tour-pop { transition: none; }
.tour-pop.is-center { transform: translate(-50%, -50%); }
@keyframes tour-in { from { opacity: 0; } to { opacity: 1; } }
/* Arrow to the highlighted spot */
.tour-pop.is-below::before, .tour-pop.is-above::before, .tour-pop.is-right::before, .tour-pop.is-left::before { content: ""; position: absolute; width: 12px; height: 12px; background: var(--surface); border: 1px solid var(--line); transform: rotate(45deg); }
.tour-pop.is-below, .tour-pop.is-above, .tour-pop.is-right, .tour-pop.is-left { overflow: visible; }
.tour-pop.is-below::before { top: -9px; left: calc(var(--arrow-x, 30px) - 6px); border-right: 0; border-bottom: 0; background: var(--accent-bright); border-color: var(--accent-bright); }
.tour-pop.is-above::before { bottom: -7px; left: calc(var(--arrow-x, 30px) - 6px); border-left: 0; border-top: 0; }
.tour-pop.is-right::before { left: -7px; top: calc(var(--arrow-y, 30px) - 6px); border-right: 0; border-top: 0; }
.tour-pop.is-left::before { right: -7px; top: calc(var(--arrow-y, 30px) - 6px); border-left: 0; border-bottom: 0; }
.tour-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.tour-count { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark); white-space: nowrap; }
.tour-dots { display: flex; gap: 4px; flex-wrap: wrap; margin-right: auto; }
.tour-dots span { width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong); transition: width 200ms ease, background 200ms ease; }
.tour-dots span.is-done { background: var(--accent); }
.tour-dots span.is-current { width: 18px; background: var(--accent-bright); }
.tour-x { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: -4px -8px 0 0; border: 0; border-radius: var(--radius); background: none; color: var(--ink-faint); cursor: pointer; }
.tour-x:hover { background: var(--inset); color: var(--ink); }
.tour-x .icon { width: 18px; height: 18px; }
.tour-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; margin: 0 0 6px; }
.tour-text p { margin: 0 0 8px; line-height: 1.5; }
.tour-text a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.tour-media { margin: 8px 0 4px; }
.tour-media:empty { display: none; }
.tour-clip-open { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.tour-clip-open:hover { border-color: var(--accent); }
.tour-clip-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tour-clip-open img { width: 96px; height: auto; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--line); }
.tour-clip-open .icon { width: 16px; height: 16px; fill: currentColor; color: var(--accent); vertical-align: -3px; margin-right: 4px; }
.tour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.tour-foot-left { display: flex; gap: 14px; margin-right: auto; }
.tour-link { font-size: .88rem; color: var(--ink-soft); }
.tour-foot .btn:focus-visible, .tour-link:focus-visible, .tour-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Smartphone: speech bubble as a sheet at the bottom edge, target stays visible above it */
.tour-pop.is-sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; max-height: 58vh; max-height: 58dvh; overflow: auto; transform: none; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); animation: tour-up 220ms ease-out; }
.tour-pop.is-sheet::before { display: none; }
@keyframes tour-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.tour-toast { position: fixed; left: 16px; bottom: 16px; z-index: 90; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px; border-radius: var(--radius-lg); background: var(--dark); color: var(--on-dark); border-left: 3px solid var(--accent-bright); box-shadow: var(--shadow-md); font-size: .9rem; transition: opacity 600ms ease; }
.tour-toast.is-gone { opacity: 0; }
.empty .row-actions { justify-content: center; flex-wrap: wrap; }
.tour-topics { margin: 6px 0 10px; padding-left: 18px; }
.tour-topics li { margin: 0 0 6px; }
.tour-topics a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.help-panel-tour { margin-top: 18px; }
.help-panel-tour .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.help-panel-tour .clip + .clip { margin-top: 14px; }

/* What is new */
.news-panel { margin: 0 0 18px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent-bright); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.news-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.news-head h2 { display: flex; gap: 8px; align-items: center; margin: 0; }
.news-head .icon { color: var(--accent); }
.news-close { display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center; border: 0; border-radius: var(--radius); background: none; color: var(--ink-faint); cursor: pointer; }
.news-close:hover { background: var(--inset); color: var(--ink); }
.news-list { margin: 8px 0 6px; padding-left: 20px; }
.news-list li { margin: 0 0 4px; }
.news-panel a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.news-panel p { margin: 0; }
.news-teaser { margin: 2px 0 0 !important; color: var(--ink-soft); }
.news-details > summary { cursor: pointer; margin-top: 4px; color: var(--ink-soft); width: max-content; }
.news-details[open] > summary { margin-bottom: 4px; }

/* Kurzfilm-Player */
.clip { margin: 0; }
.clip [hidden], .tour-pop [hidden] { display: none !important; }
.clip-stage { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--inset); }
.clip-poster { display: block; width: 100%; height: auto; }
.clip-view { position: relative; transform-origin: var(--clip-ox, 50%) var(--clip-oy, 50%); transform: scale(1); }
.clip-view.is-zoom { transform: scale(1.07); transition: transform var(--clip-ms, 2800ms) linear; }
.clip-frame { display: block; width: 100%; height: auto; opacity: 0; transition: opacity 380ms ease; }
.clip-frame + .clip-frame { position: absolute; inset: 0; }
.clip-frame.is-on { opacity: 1; }
.clip-focus { position: absolute; border: 2px solid var(--accent-bright); border-radius: 6px; box-shadow: 0 0 0 4px rgba(224, 169, 59, .28); transition: left 500ms ease, top 500ms ease, width 500ms ease, height 500ms ease; pointer-events: none; }
.clip-pointer { position: absolute; width: 18px; height: 18px; margin: -2px 0 0 -2px; pointer-events: none; transition: left 700ms cubic-bezier(.45, .05, .25, 1), top 700ms cubic-bezier(.45, .05, .25, 1); }
.clip-pointer::before { content: ""; position: absolute; inset: 0; background: #13233f; clip-path: polygon(0 0, 100% 62%, 58% 66%, 80% 100%, 64% 100%, 44% 70%, 0 92%); filter: drop-shadow(0 0 1px #fff); }
.clip-pointer::after { content: ""; position: absolute; left: -6px; top: -6px; width: 14px; height: 14px; border-radius: 50%; }
.clip-pointer.is-click::after { animation: clip-click 700ms ease-out 500ms; }
@keyframes clip-click { 0% { box-shadow: 0 0 0 0 rgba(224, 169, 59, .85); } 100% { box-shadow: 0 0 0 18px rgba(224, 169, 59, 0); } }
.clip-bigplay { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--accent-bright); border-radius: 50%; background: rgba(19, 35, 63, .88); color: var(--accent-bright); cursor: pointer; box-shadow: var(--shadow-md); }
.clip-bigplay .icon { width: 26px; height: 26px; margin-left: 3px; fill: currentColor; }
.clip-bigplay:hover { background: #13233f; }
.clip-sub { margin: 8px 0 4px; min-height: 2.8em; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.clip-controls { display: flex; align-items: center; gap: 4px; }
.clip-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer; }
.clip-btn:hover { border-color: var(--accent); }
.clip-btn .icon { width: 18px; height: 18px; }
.clip-play .icon { fill: currentColor; }
.clip-play[aria-pressed="true"] .icon { fill: none; }
.clip-progress { display: flex; gap: 3px; flex: 1 1 auto; min-width: 60px; margin: 0 4px; }
/* Target size at least 24 × 24 px (WCAG 2.2 2.5.8); on narrow screens the steps wrap instead of shrinking */
.clip-seg { flex: 1 1 24px; min-width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.clip-seg::before { content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 4px; border-radius: 2px; background: var(--line-strong); }
.clip-seg-fill { position: absolute; left: 0; top: 10px; height: 4px; width: 0; border-radius: 2px; background: var(--accent); }
.clip-progress { flex-wrap: wrap; row-gap: 0; }
.clip-seg:focus-visible, .clip-btn:focus-visible, .clip-bigplay:focus-visible, .clip-list-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.clip-count { min-width: 3.2em; text-align: right; }
.clip-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.clip-list-item { display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; text-align: left; cursor: pointer; }
.clip-list-item:hover { border-color: var(--accent); }
.clip-list-item img { width: 120px; height: auto; flex-shrink: 0; border-radius: 4px; border: 1px solid var(--line); }
.clip-caption { margin-top: 6px; display: grid; gap: 2px; }
.clip.is-ready .clip-caption strong { font-size: .95rem; }
.clip-compact .clip-sub { font-size: .86rem; min-height: 2.6em; }
.clip-compact .clip-btn { width: 30px; height: 30px; }
.tour-media .clip-caption { display: none; }
.clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 18px 22px; margin-top: 10px; }
.clip-grid .help-entry { margin: 0; }
.clip.is-loading .clip-stage { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .tour-spot, .tour-pop, .tour-dots span, .clip-frame, .clip-focus, .clip-pointer, .tour-toast { transition: none; }
  .tour-spot::after, .clip-pointer.is-click::after { animation: none; }
  .tour-pop, .tour-pop.is-sheet { animation: none; }
  .clip-view.is-zoom { transform: none; transition: none; }
}
@media print { dialog.tour-layer, .news-panel, .tour-toast, .clip-controls, .clip-bigplay { display: none !important; } }
/* Dashboard: manage views (set default, delete) without edit mode */
.dash-views-manage { margin: -8px 0 18px; }
.dash-views-manage > summary { cursor: pointer; font-size: .9rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.dash-views-manage > summary .icon { width: 14px; height: 14px; }
.dash-views-manage[open] { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
/* 320 px: the manage table (name, favourite, delete) must fit without sideways scroll (WCAG 1.4.10, accept-185 F2) */
@media (max-width: 480px) {
  .dash-views-manage[open] { padding: 8px; }
  .dash-views-manage th, .dash-views-manage td { padding-left: 4px; padding-right: 4px; overflow-wrap: anywhere; }
  .dash-views-manage .btn { white-space: normal; padding-left: 8px; padding-right: 8px; }
}
/* Dashboard-Reiter: Favorit-Stern und Verschieben per Drag-and-drop */
.dash-tab-wrap { display: inline-flex; align-items: center; gap: 0; }
.dash-tab-wrap[draggable="true"] { cursor: grab; }
.dash-tab-wrap.is-dragging { opacity: .5; }
.dash-fav-form { display: inline; }
.dash-fav { background: none; border: 0; padding: 4px; min-width: 24px; min-height: 24px; justify-content: center; box-sizing: border-box; margin-left: -8px; margin-right: 4px; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; }
.dash-fav .icon { width: 14px; height: 14px; }
.dash-fav:hover, .dash-fav:focus-visible { color: var(--accent); }
.dash-fav.is-fav { color: var(--accent); cursor: default; }
.dash-fav.is-fav .icon { fill: currentColor; }
/* ---------- Bookmarks: star menu in the header, stars at places, management (?r=bookmarks) ---------- */
.bm-menu { order: 2; position: relative; flex-shrink: 0; display: inline-flex; }
.bm-menu > .header-tool { margin-left: 4px; }
.bm-opener.is-on .icon, .bm-star[aria-pressed="true"] .icon { fill: currentColor; }
.bm-opener.is-on { color: var(--accent-bright); }
.bm-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 340px; max-width: calc(100vw - 24px); max-height: min(70vh, 560px); overflow: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px; }
.bm-pop[hidden] { display: none; }
.bm-pop-head { display: grid; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.bm-page-toggle { justify-content: flex-start; }
.bm-page-toggle[aria-pressed="true"] .icon { fill: currentColor; }
.bm-rename { display: grid; gap: 4px; }
.bm-rename[hidden] { display: none; }
.bm-rename-row { display: flex; gap: 6px; }
.bm-rename-row input { flex: 1 1 auto; min-width: 0; padding: 5px 8px; font-size: .88rem; }
.bm-pop-status { margin: 0; color: var(--ok-ink); }
.bm-pop-status:empty { display: none; }
.bm-filter { width: 100%; margin: 10px 0 2px; padding: 6px 9px; font-size: .9rem; }
.bm-filter[hidden] { display: none; }
.bm-pop-list { padding-top: 6px; }
.bm-pop-group { margin: 10px 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-dark); }
.bm-pop-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.bm-pop-items a, .bm-pop-items li.is-gone { display: block; padding: 6px 8px; border-radius: var(--radius); color: var(--ink); text-decoration: none !important; overflow-wrap: anywhere; line-height: 1.35; font-size: .92rem; }
.bm-pop-items a:hover, .bm-pop-items a:focus-visible { background: var(--accent-tint); outline: none; box-shadow: inset 3px 0 0 var(--accent); }
.bm-pop-foot { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); }
.is-gone, .is-gone a { color: var(--ink-faint) !important; }
.bm-pop-items li.is-gone span[aria-disabled] { text-decoration: line-through; }
.bm-star { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 26px; height: 26px; padding: 0; margin: 0 2px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-faint); cursor: pointer; }
.bm-star[hidden] { display: none; }
.bm-star .icon { width: 15px; height: 15px; }
.bm-star:hover, .bm-star:focus-visible { color: var(--accent-dark); border-color: var(--line-strong); }
.bm-star:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.bm-star[aria-pressed="true"] { color: var(--accent); }
.bm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.bm-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.bm-row.is-dragging { opacity: .5; border-style: dashed; }
.bm-row.is-gone { background: var(--inset); }
.bm-row.is-gone .bm-title { text-decoration: line-through; }
.bm-grip { cursor: grab; color: var(--ink-faint); padding-top: 2px; }
.bm-grip[hidden] { display: none; }
.bm-grip .icon { width: 16px; height: 16px; display: block; }
.bm-main { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.bm-title { font-weight: 600; overflow-wrap: anywhere; }
.bm-actions { flex-shrink: 0; gap: 4px; align-items: flex-start; }
.bm-actions .icon { width: 14px; height: 14px; }
.bm-edit > summary { list-style: none; }
.bm-edit > summary::-webkit-details-marker { display: none; }
.bm-edit-form { margin-top: 8px; display: grid; gap: 8px; min-width: min(300px, 70vw); }
.bm-group .h3 .badge { vertical-align: middle; }
@media (max-width: 600px) {
  .bm-row { flex-wrap: wrap; }
  .bm-actions { width: 100%; justify-content: flex-end; }
  .bm-pop { position: fixed; top: 62px; left: 8px; right: 8px; width: auto; max-width: none; }
}
@media print { .bm-menu, .bm-star, .bm-actions, .bm-grip { display: none !important; } }

/* ---------- Neuigkeiten: Versionsverlauf (?r=whats-new, templates/help/news.php) ---------- */
.changelog { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.changelog-entry h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 2px; }
.changelog-sub { margin: 0 0 10px; }
.changelog-items { margin: 0; padding-left: 20px; }
.changelog-items li { margin: 0 0 6px; line-height: 1.5; }
.changelog-items a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
/* Release notes in the administration (admin-releases) */
.release-status .kv { margin-bottom: 12px; }
.release-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.release-filter a[aria-current="page"] { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; font-weight: 600; }
.release-facts { margin: 0 0 12px; padding: 10px 12px; background: var(--inset-alt); border-radius: 8px; grid-template-columns: 110px 1fr; }
.release-facts code { overflow-wrap: anywhere; hyphens: none; }
.release-steps { margin: 0; padding-left: 18px; }
.release-steps li { margin: 0 0 4px; }
.changelog-items .badge { vertical-align: 1px; }
@media (max-width: 560px) { .release-facts { grid-template-columns: 1fr; gap: 2px; } .release-facts dd { margin-bottom: 6px; } }
/* Dashboard: overdue topic blocks in the drop-down list in red text (text only, no background) */
.dash-project tr.is-late td, .dash-project tr.is-late a { color: var(--err-ink); }
.dash-project tr.is-late a { font-weight: 600; }

/* ---------- Lizenz und Nutzung (?r=licence, templates/license.php) ---------- */
.license-cards { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.license-cards .card { padding: 16px 18px; }
.license-cards .eyebrow { margin: 0 0 4px; }
.license-of { font-size: .9rem; font-weight: 400; color: var(--ink-soft); }
.license-hint ul { margin: 4px 0 8px; padding-left: 20px; }
.license-hint p { margin: 0; }
.license-more-title { margin: 14px 0 4px; font-weight: 600; }
.license-names { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.license-add { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.license-add-item { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); }
.license-add-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* ---------- Kommentare (templates/comments, public/assets/comments.js) ---------- */
.cmt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cmt-head .h3 { margin: 0; }
.cmt-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.cmt-tools [aria-pressed="true"] { border-color: var(--accent); background: var(--accent-tint); }
.cmt-list, .cmt-replies, .cmt-versions { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.cmt-item { background: var(--inset-alt); border-radius: var(--radius); padding: 10px 12px; border-left: 3px solid transparent; min-width: 0; }
.cmt-item.is-new { border-left-color: var(--accent); }
.cmt-item.is-open-question { border-left-color: var(--warn-ink); }
.cmt-item.is-withdrawn > .cmt-meta, .cmt-item.is-withdrawn > .cmt-note { opacity: .8; }
.cmt-item.is-target { outline: 2px solid var(--accent); outline-offset: 2px; }
.cmt-replies { margin: 10px 0 4px; padding-left: 12px; border-left: 2px solid var(--line-strong); }
.cmt-replies .cmt-item { background: var(--surface); }
.cmt-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 4px; }
.cmt-body { overflow-wrap: anywhere; word-break: break-word; }
.cmt-body a { text-decoration: underline; text-decoration-color: var(--accent); }
.cmt-note { margin: 0 0 4px; }
.cmt-old { margin: 4px 0; }
.cmt-old > summary { cursor: pointer; color: var(--ink-soft); }
.cmt-old .cmt-body { margin-top: 4px; padding: 6px 8px; border-radius: var(--radius); background: var(--inset); }
.cmt-file { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mention { font-weight: 600; color: var(--accent-dark); background: var(--accent-tint); border-radius: 4px; padding: 0 3px; }
.cmt-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 8px; }
.cmt-actions .inline-form { margin: 0; }
.cmt-inline > summary { list-style: none; display: inline-flex; cursor: pointer; }
.cmt-inline > summary::-webkit-details-marker { display: none; }
.cmt-inline[open] { flex-basis: 100%; }
.cmt-inline[open] > summary { margin-bottom: 6px; }
.cmt-reply { margin-top: 8px; }
.cmt-form { position: relative; margin-top: 8px; }
.cmt-form textarea { width: 100%; }
.cmt-hint { margin: -4px 0 8px; }
.cmt-form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.cmt-form-row .btn { margin-left: auto; }
.cmt-file-input { display: flex; flex-direction: column; gap: 2px; min-width: 0; max-width: 100%; }
.cmt-file-input input { max-width: 100%; }
.cmt-mention-list { position: absolute; z-index: 40; list-style: none; margin: 0; padding: 4px; min-width: 220px; max-width: calc(100% - 8px); max-height: 240px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.cmt-mention-list li { padding: 6px 8px; border-radius: 4px; cursor: pointer; overflow-wrap: anywhere; }
.cmt-mention-list li.is-active, .cmt-mention-list li:hover { background: var(--ref-hover); }
.cmt-nosee { color: var(--warn-ink); }
.cmt-count { display: inline-flex; align-items: center; gap: 3px; font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.cmt-count .icon { width: 13px; height: 13px; }
.cmt-new-dot { font-size: .72rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--info-bg); color: var(--info-ink); }
.cmt-count.has-new { color: var(--ink); font-weight: 600; }
.cmt-pick { margin-left: 6px; white-space: nowrap; }
.cmt-compact { padding-top: 12px; padding-bottom: 12px; }
.bell { position: relative; }
.bell-count { position: absolute; top: -6px; right: -7px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-ink);
  font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-list li { padding: 10px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.notif-list li:last-child { border-bottom: 0; }
.notif-list li.is-read strong { font-weight: 500; }
@media (max-width: 560px) {
  .cmt-replies { padding-left: 8px; }
  .cmt-item { padding: 8px 10px; }
  .cmt-form-row .btn { margin-left: 0; }
}

/* Legal bases: preview on hover (LawTexts::refHtml, same mechanics as the glossary) */
.law-tip { max-width: min(420px, calc(100vw - 32px)); }
.law-tip .gl-tip-text { display: block; margin-top: 4px; }
.law-tip-meta { display: block; margin-top: 6px; font-size: .78rem; opacity: .8; }
.law-gl .gl-term.ref { text-decoration: none; border-bottom: 0; }
.law-gl .gl-term { cursor: pointer; }

/* ---------- Abo und Buchung (Billing) ---------- */
.table td.num, .table th.num { text-align: right; white-space: nowrap; }
.checkout-intervals { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.checkout-option { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 14px; background: var(--inset); }
.checkout-option:has(input:checked) { border-color: var(--accent); background: var(--surface); }
.checkout-sum .kv dd strong { font-size: 1.1rem; }
.abo-actions { margin-top: 14px; }
#abo h3 { margin-top: 20px; }
.abo-band { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.wish-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.wish-item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.wish-item:last-child { border-bottom: 0; }
.wish-ask { margin-top: 6px; }
.wish-ask[open] > form { min-width: min(280px, 100%); }
.agb-draft { border: 2px dashed var(--accent); border-radius: var(--radius-lg); padding: 16px 20px; margin-top: 28px; }
.agb-draft-flag { display: inline-block; font-weight: 700; color: var(--accent-dark); text-transform: uppercase; letter-spacing: .04em; font-size: .8rem; }
@media (max-width: 600px) {
  .checkout-sum .kv, #abo .kv, .billing-kv { grid-template-columns: 1fr; gap: 2px 0; }
  .checkout-sum .kv dd, #abo .kv dd, .billing-kv dd { margin-bottom: 8px; }
  .wish-item .row-actions { width: 100%; }
}
/* Feedback und Support (Tickets, Posteingang) */
.tk-kinds { border: 0; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.tk-kinds legend { margin-bottom: 6px; }
.tk-kinds .check span span { display: block; }
.tk-bug { border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0 12px; padding: 10px 14px; display: grid; gap: 10px; min-width: 0; }
.tk-bug[hidden] { display: none; }
.tk-text { overflow-wrap: anywhere; margin-bottom: 12px; }
.tk-action { margin: 0 0 10px; }
.tk-action > summary { list-style: none; display: inline-flex; }
.tk-action > summary::-webkit-details-marker { display: none; }
.tk-action[open] > form { margin-top: 10px; padding: 12px; background: var(--inset); border-radius: var(--radius); }
.tk-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-events li { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 10px; min-width: 0; overflow-wrap: anywhere; }
.tk-events li.is-internal { border-left-color: var(--accent); }
.help-panel-support { margin-top: 8px; }
@media (max-width: 600px) {
  .tk-bug { padding: 8px 10px; }
}

/* System status (operations monitoring, templates/admin/system.php) and public status page */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 18px; }
.sys-grid .panel { margin: 0; min-width: 0; }
.sys-area { border-left: 4px solid var(--line-strong); }
.sys-area.is-gruen { border-left-color: var(--ok-fill); }
.sys-area.is-gelb { border-left-color: var(--accent-bright); }
.sys-more { margin: 10px 0 0; }
.sys-more a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
#cronjobs, #sicherheit, #speicher-verlauf, #antwortzeit-verlauf, #sicherung-details, #schwachstellen-details, #email-fehler, #php-datenbank { scroll-margin-top: 90px; }
.sys-area.is-rot { border-left-color: var(--danger-fill); }
.sys-area h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sys-area p { margin: 6px 0 0; overflow-wrap: anywhere; }
.sys-action { color: var(--ink-soft); }
.sys-light { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--line-strong); vertical-align: middle; }
.sys-light.is-gruen { background: var(--ok-fill); }
.sys-light.is-gelb { background: var(--accent-bright); }
.sys-light.is-rot { background: var(--danger-fill); }
.sys-light-lg { width: 18px; height: 18px; margin-right: 6px; vertical-align: 0.1em; }
.sys-line { fill: none; stroke: var(--accent); stroke-width: 2; }
.sys-point { fill: var(--accent); }
.sys-quota { width: 100%; }
.sys-jobs { min-width: 880px; }   /* scroll horizontally on mobile instead of very tall rows */
.sys-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 4px 14px; margin: 0 0 10px; font-size: .9rem; }
.sys-dl dt { color: var(--ink-faint); }
.sys-dl dd { margin: 0; overflow-wrap: anywhere; }
.sys-wrap { overflow-wrap: anywhere; }
.sys-col { min-width: 0; }
.sys-log { max-height: 280px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .78rem; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; }
.sys-notices { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.sys-notices li { border-left: 3px solid var(--line-strong); padding: 2px 0 2px 12px; }
@media (max-width: 600px) {
  .sys-dl { grid-template-columns: 1fr; }
  .sys-dl dd { margin-bottom: 6px; }
}
/* Unternehmen und Daten löschen (OrgDeletion) */
.od-state { border-left: 4px solid var(--line-strong); }
.od-scheduled { border-left-color: var(--danger-fill); }
.od-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 8px 24px; }
.od-list { margin: 0 0 12px; padding-left: 18px; display: grid; gap: 4px; }
.od-name { overflow-wrap: anywhere; user-select: all; }
.od-jobs { margin-top: 12px; }
/* Audit-Export (templates/auditexport) */
.ae-period { max-width: 460px; margin: 0; }
.ae-hint { margin: 0; }
.ae-hint-tight { margin-top: -8px; }
.ae-scope li { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
.od-band { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
/* Support approval (SupportAccess): band at the top, list of approvals, code */
.support-band { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; border-left-width: 4px; }
.support-band > span { flex: 1 1 260px; }
/* Practice company band (block 7a TR3, PracticeSession): same layout as the support band, always visible while acting as the shadow user */
.practice-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; border-left-width: 4px; }
.practice-band > form { grid-column: 2; grid-row: 1; }
.practice-band:has(.practice-band-task) > form { grid-row: 1 / span 2; }
.practice-band-task { grid-column: 1; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* The practice band travels with the page (below the 62px sticky topbar), so people always see that they are in the
   practice company, what the exercise asks and how to get back to it, also on long pages. app.js measures its height
   into --practice-band-h; the other sticky helpers and anchor jumps move down by that amount instead of hiding under
   it. Height budget: at most about 1/8 of the screen (Marc, 07.10.2026), hence the tighter layout on narrow and low
   screens (reassurance sentence hidden there, the strong label already says it; exercise clamped). */
.practice-band { position: sticky; top: 62px; z-index: 15; box-shadow: var(--shadow-sm); }
html:has(.practice-band) .jumpbar { top: calc(62px + var(--practice-band-h, 0px)); }
html:has(.practice-band) .stepnav, html:has(.practice-band) .help-toc { top: calc(80px + var(--practice-band-h, 0px)); max-height: calc(100vh - 100px - var(--practice-band-h, 0px)); }
html:has(.practice-band) { scroll-padding-top: var(--practice-band-h, 0px); }
@media (max-width: 900px) {
  .practice-band { padding: 6px 10px; gap: 4px 10px; font-size: .84rem; line-height: 1.35; }
  .practice-band:has(.practice-band-task) > form { grid-row: 1; }
  .practice-band-task { grid-column: 1 / -1; }
  .practice-band-note { display: none; }
}
@media (max-width: 420px) {
  .practice-band-label { hyphens: manual; }
  .practice-band .btn { padding: 5px 9px; font-size: .8rem; white-space: nowrap; }
}
@media (max-height: 640px) { .practice-band-task { -webkit-line-clamp: 1; } }
@media print { .practice-band { position: static; box-shadow: none; } }
.sp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.sp-item { padding: 10px 0; border-bottom: 1px solid var(--line); }
.sp-item:last-child { border-bottom: 0; }
.sp-item.is-active { border-left: 3px solid var(--warn-line); padding-left: 10px; }
.sp-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.sp-code-row { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin: 8px 0; }
.sp-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.05rem; letter-spacing: .04em; overflow-wrap: anywhere; max-width: 100%; background: var(--inset); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px 10px; }
.sp-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; width: 100%; max-width: 32ch; }   /* case-sensitive code (ShortCode): never upper-case it */
.sp-rights { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0; display: grid; gap: 6px; min-width: 0; }
.sp-start { margin: 8px 0; }
.sp-log { margin-top: 6px; }
/* Risk management: class colours (fixed keys, see RiskMethod::COLORS), heat map, rating */
:root {
  --rk-green: #cfe8d8; --rk-green-ink: #1d5234; --rk-yellow: #f6e7a8; --rk-yellow-ink: #5c4a08; --rk-orange: #f6c99a; --rk-orange-ink: #6b3708;
  --rk-red: #f0b3aa; --rk-red-ink: #7a1f15; --rk-darkred: #a8352a; --rk-darkred-ink: #ffffff; --rk-blue: #c9d8f0; --rk-blue-ink: #13335f; --rk-gray: #dfe3ea; --rk-gray-ink: #3a4558;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rk-green: #1f4a35; --rk-green-ink: #b9e6c9; --rk-yellow: #54470f; --rk-yellow-ink: #f5e39a; --rk-orange: #5e3712; --rk-orange-ink: #f8cc9e;
    --rk-red: #5c211b; --rk-red-ink: #f6b5ab; --rk-darkred: #8e2a20; --rk-darkred-ink: #ffffff; --rk-blue: #1d355e; --rk-blue-ink: #c3d4f2; --rk-gray: #2b3446; --rk-gray-ink: #c5ccd8;
  }
}
:root[data-theme="dark"] {
  --rk-green: #1f4a35; --rk-green-ink: #b9e6c9; --rk-yellow: #54470f; --rk-yellow-ink: #f5e39a; --rk-orange: #5e3712; --rk-orange-ink: #f8cc9e;
  --rk-red: #5c211b; --rk-red-ink: #f6b5ab; --rk-darkred: #8e2a20; --rk-darkred-ink: #ffffff; --rk-blue: #1d355e; --rk-blue-ink: #c3d4f2; --rk-gray: #2b3446; --rk-gray-ink: #c5ccd8;
}
.rk-c-green { background: var(--rk-green); color: var(--rk-green-ink); }
.rk-c-yellow { background: var(--rk-yellow); color: var(--rk-yellow-ink); }
.rk-c-orange { background: var(--rk-orange); color: var(--rk-orange-ink); }
.rk-c-red { background: var(--rk-red); color: var(--rk-red-ink); }
.rk-c-darkred { background: var(--rk-darkred); color: var(--rk-darkred-ink); }
.rk-c-blue { background: var(--rk-blue); color: var(--rk-blue-ink); }
.rk-c-gray { background: var(--rk-gray); color: var(--rk-gray-ink); }
.rk-badge { font-weight: 600; }
.rk-dot { display: inline-block; width: .8em; height: .8em; border-radius: 50%; vertical-align: -.05em; border: 1px solid var(--line-strong); }
.rk-heat { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 6px; max-width: 100%; }
.rk-heat-y { grid-row: 1; grid-column: 1; writing-mode: vertical-rl; transform: rotate(180deg); font-size: .8rem; color: var(--ink-faint); text-align: center; }
.rk-heat-grid { grid-row: 1; grid-column: 2; border-collapse: separate; border-spacing: 3px; width: 100%; table-layout: fixed; }
.rk-heat-x { grid-row: 2; grid-column: 2; text-align: center; }
.rk-heat-lab { font-weight: 500; font-size: .8rem; color: var(--ink-soft); padding: 2px 2px; text-align: center; line-height: 1.2; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: normal; }
th.rk-heat-lab[scope="col"] .small { font-size: .7rem; }
/* Axis labels link to the list filtered by that one level: dotted underline so they read as links */
.rk-heat-lab a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
.rk-heat-lab a:hover { color: var(--ink); text-decoration-style: solid; }
th.rk-heat-lab[scope="row"] { text-align: right; width: 7.5rem; }
.rk-cell { height: 3.2rem; text-align: center; vertical-align: middle; border-radius: 4px; font-weight: 600; font-size: 1.05rem; opacity: .55; }
.rk-cell.has-n { opacity: 1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.rk-cell a { display: block; color: inherit; text-decoration: none; padding: .8rem 0; }
.rk-cell a:hover, .rk-cell a:focus-visible { text-decoration: underline; }
.rk-cell a:focus-visible { outline: 2px solid #13233f; outline-offset: 0; border-radius: 4px; box-shadow: inset 0 0 0 2px #fff; }
.rk-heat.is-small .rk-cell { height: 1.9rem; font-size: .9rem; }
.rk-heat.is-small .rk-cell a { padding: .3rem 0; }
.rk-heat.is-small th.rk-heat-lab[scope="row"] { width: 1.6rem; }
.rk-legend { list-style: none; padding: 0; margin: 0 0 8px; display: grid; gap: 4px; }
.rk-suggest { background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); padding: 10px 14px; margin: 0 0 12px; }
.rk-suggest ul { margin: 4px 0 6px; padding-left: 1.2rem; }
/* RN-5 target risk: text next to a small matrix with the letters I/R/Z (not colour alone), effect per measure */
.rk-target { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; align-items: start; margin-bottom: 12px; }
.rk-trio { margin: 0; }
.rk-trio-grid { border-collapse: separate; border-spacing: 2px; }
.rk-trio-grid caption { caption-side: bottom; text-align: left; padding-top: 4px; max-width: 16rem; }
.rk-trio-grid th { font-weight: 500; color: var(--ink-soft); padding: 0 4px; text-align: center; }
.rk-trio-grid .rk-cell { width: 2.2rem; height: 2rem; font-size: .8rem; letter-spacing: .02em; }
.rk-trio figcaption { margin-top: 2px; }
.rk-effect { display: inline-block; margin-left: 4px; }
.rk-effect > summary { cursor: pointer; color: var(--ink-soft); }
.rk-effect form { display: flex; align-items: center; margin-top: 4px; gap: 6px 8px; flex-wrap: wrap; }
.rk-effect form label { display: inline; margin: 0; font-weight: 500; }
.rk-effect select, .rk-effect input[type="number"] { width: auto; min-width: 4.5rem; margin: 0; }
.rk-heat-switch { margin-bottom: 6px; }
@media (max-width: 760px) { .rk-target { grid-template-columns: minmax(0, 1fr); } }
.rk-assess fieldset, .rk-method fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 10px; margin: 8px 0; min-width: 0; }
.rk-span { display: grid; grid-template-columns: minmax(9rem, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; margin: 6px 0 2px; }
.rk-span input { min-width: 0; }
.rk-linkform { margin: 4px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rk-linkform select { max-width: 100%; min-width: 0; flex: 1 1 14rem; }
.rk-status { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rk-rosi { background: var(--inset); border-radius: var(--radius); padding: 8px 12px; }
.rk-zone h2 { overflow-wrap: anywhere; }
.rk-report { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 8px; }
.rk-report .row-actions { flex-wrap: wrap; }
.rk-appetite strong { font-size: 1.6rem; }
/* Key figures over time (1.29, templates/widgets/kpi_trend.php): direction by colour and text */
.kpi-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.kpi-head p { margin: 0; }
.kpi-head .seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.kpi-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
@media (min-width: 1100px) { .dash-l .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.kpi-card { background: var(--inset); border-radius: var(--radius); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-label { font-size: .82rem; color: var(--ink-soft); line-height: 1.3; min-height: 2.6em; }
.kpi-value { font-size: 1.35rem; line-height: 1.2; }
.kpi-delta { align-self: flex-start; font-size: .78rem; padding: 1px 6px; border-radius: 4px; border: 1px solid transparent; }
.kpi-good { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.kpi-bad { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.kpi-same { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.kpi-spark { width: 100%; height: 28px; display: block; margin-top: 4px; }
.kpi-spark polyline { fill: none; stroke: var(--accent); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.kpi-table { margin-top: 8px; }
.kpi-table table { margin-top: 6px; }
@media print { .kpi-head .seg { display: none; } }
/* Deep check 3 C-D/C-E/C-F: drill-down links, site filter and export of the tile; at 375 px the select takes the full row */
.kpi-label a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kpi-site { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.kpi-site select { max-width: 100%; }
.kpi-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin-top: 8px; }
.kpi-foot p { margin: 0; }
@media (max-width: 480px) { .kpi-site, .kpi-site select { width: 100%; } }
@media (pointer: coarse) { .kpi-site select, .kpi-site .btn, .kpi-foot .btn { min-height: 44px; } }
@media print { .kpi-site, .kpi-foot form { display: none; } }
.mr-form { max-width: 820px; display: grid; gap: 18px; }
.mr-periods { display: grid; gap: 8px; }
.mr-custom { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: flex-end; margin-top: 6px; }
.mr-custom p { flex-basis: 100%; margin: 0; }
.mr-form textarea { width: 100%; }
/* MR-PPTX: PDF and PowerPoint download side by side; on a phone stacked, full width, 44 px high */
@media (max-width: 600px) { .mr-form .row-actions { flex-direction: column; align-items: stretch; } .mr-form .row-actions .btn { width: 100%; min-height: 44px; justify-content: center; } }
.rk-appetite.rk-ap-yellow strong { color: var(--warn-ink); }
.rk-appetite.rk-ap-red strong { color: var(--err-ink); }
.rk-appetite.rk-ap-green strong { color: var(--ok-ink); }
.rk-attack { white-space: nowrap; margin-right: 6px; }
.rk-levels input { width: 100%; min-width: 4rem; }
.risk-table td { overflow-wrap: break-word; }
.risk-table .rk-title { min-width: 15rem; }
.risk-table td.small { min-width: 6rem; }
@media (max-width: 600px) {
  .rk-span { grid-template-columns: 1fr 1fr 1fr; }
  .rk-span > span { grid-column: 1 / -1; }
  th.rk-heat-lab[scope="row"] { width: 3.2rem; }
  th.rk-heat-lab .small { display: none; }
  .rk-cell { height: 2.4rem; }
  .rk-cell a { padding: .5rem 0; }
}
/* Dokumentenlenkung (DocControl): Lenkungsangaben, Klassifizierung, Register, Kenntnisnahme */
.status-zurueckgezogen { background: var(--err-bg); color: var(--err-ink); }
.doc-control-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; }
.doc-control-kv { grid-template-columns: 170px 1fr; }
.doc-control-actions { margin-top: 12px; }
.doc-control-form { margin-top: 12px; }
.doc-control-log { margin-top: 10px; }
/* Dokumentenpyramide (DH1, docs/features/DOCUMENT-HIERARCHY.md): Einordnung, Abgleich-Banner, berechnete Abschnitte */
.doc-hier-banner { margin: 10px 0; }
.doc-hier-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.doc-hier-chain ol { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 8px; }
.doc-hier-chain li + li::before { content: "›"; margin-right: 8px; color: var(--ink-faint); }
.doc-hier-up { display: none; }
.doc-hier-children { margin-top: 10px; }
.doc-hier-children ul { margin: 6px 0 0; padding-left: 18px; }
.doc-hier-children li { padding: 4px 0; overflow-wrap: anywhere; }
.doc-hier-computed { margin-bottom: 10px; }
.doc-hier-lines { white-space: pre-wrap; font: inherit; margin: 0; overflow-wrap: anywhere; }
.doc-hier-indent { color: var(--ink-faint); }
/* Nachweise aus dem Betrieb (DH1 Lane D) und Rückseite "Beschrieben in" */
.doc-evidence-list { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 6px; }
.doc-evidence-list li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.doc-evidence-list li.is-gone { color: var(--ink-faint); text-decoration: line-through; }
.doc-evidence-pick { margin-top: 12px; }
.doc-evidence-choices { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; max-height: 320px; overflow: auto; min-width: 0; }
.doc-evidence-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.doc-refs { margin: 8px 0; }
/* Register: Baumansicht der Dokumentenpyramide (DH1 Lane B) */
.doc-view-toggle { display: inline-flex; gap: 0; margin-left: auto; }
.doc-view-toggle .btn { border-radius: 0; }
.doc-view-toggle .btn[aria-current="true"] { background: var(--inset); border-color: var(--accent); font-weight: 700; }
.doc-tree-open { margin: 0 0 4px; }
.doc-tree-open a { display: inline-block; min-height: 44px; line-height: 44px; }
.doc-tree-list { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 2px solid var(--line); }
.doc-tree-root { padding-left: 0; border-left: 0; }
.doc-tree-node { margin: 4px 0; }
.doc-tree-row { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 6px 0; overflow-wrap: anywhere; }
.doc-tree summary.doc-tree-row { cursor: pointer; min-height: 44px; align-items: center; }
.doc-tree-main { flex: 1 1 260px; min-width: 0; }
.doc-tree-meta { flex: 0 1 auto; }
@media (max-width: 640px) {
  .doc-view-toggle { display: flex; width: 100%; margin-left: 0; }
  .doc-view-toggle .btn { flex: 1; min-height: 44px; justify-content: center; }
  .doc-tree-list { padding-left: 12px; }
  .doc-tree-row { display: block; }
  .doc-tree-main a { display: block; line-height: 1.3; }
}
@media (max-width: 640px) {
  .doc-evidence-bar { position: sticky; bottom: 56px; background: var(--surface); padding: 8px 0; display: grid; gap: 8px; }
  .doc-evidence-bar .btn { width: 100%; min-height: 44px; justify-content: center; }
  .doc-evidence-list .btn-xs { min-height: 44px; }
}
@media (max-width: 640px) {
  /* Brotkrumen: nur das übergeordnete Dokument als eine antippbare Zeile ("↑ …") */
  .doc-hier-chain ol { display: block; }
  .doc-hier-chain li { display: none; }
  .doc-hier-chain li:nth-last-child(2) { display: block; }
  .doc-hier-chain li:nth-last-child(2)::before { content: none; }
  .doc-hier-chain li:nth-last-child(2) a { display: block; min-height: 44px; padding: 10px 0; box-sizing: border-box; }
  .doc-hier-up { display: inline; }
  .doc-hier-chain li:nth-last-child(2) .muted { display: none; }
  .doc-hier-actions .btn { width: 100%; justify-content: center; min-height: 44px; }
  .doc-hier-children summary { min-height: 44px; display: flex; align-items: center; gap: 6px; }
}
.doc-dist { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0; min-width: 0; }
.doc-dist-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 20px; }
.doc-dist-cols > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.doc-class-oeffentlich { background: var(--ok-bg); color: var(--ok-ink); }
.doc-class-intern { background: var(--info-bg); color: var(--info-ink); }
.doc-class-vertraulich { background: var(--warn-bg); color: var(--warn-ink); }
.doc-class-streng { background: var(--err-bg); color: var(--err-ink); }
.doc-ack-banner { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; }
.doc-ack-banner > div { flex: 1 1 280px; }
.doc-reason { display: grid; gap: 4px; flex: 1 1 280px; font-weight: 700; }
.doc-register td { vertical-align: top; }
.doc-loc { overflow-wrap: anywhere; max-width: 220px; }
.doc-sha { overflow-wrap: anywhere; font-size: .8rem; }
.doc-read-text { overflow-wrap: anywhere; }
.doc-export { gap: 6px 12px; }
.doc-export .check { gap: 4px; }
.doc-filter label { min-width: 150px; flex: 1 1 150px; }
@media (max-width: 600px) {
  .doc-control-kv { grid-template-columns: 1fr; }
  .doc-control-kv dd { margin-bottom: 6px; }
  .doc-filter label { min-width: 0; flex: 1 1 100%; }
}

/* ---------- MITRE ATT&CK (templates/attack/*): heat map tactic × technique, status dots, selection with search ---------- */
.ak-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.ak-grid2 > .panel { margin: 0 0 16px; }
.ak-num { text-align: right; font-variant-numeric: tabular-nums; }
.ak-desc { max-width: 75ch; }
.ak-dot { display: inline-block; width: .75em; height: .75em; border-radius: 3px; vertical-align: -1px; border: 1px solid var(--line-strong); }
.ak-covered { --ak-bg: var(--ok-bg); --ak-ink: var(--ok-ink); --ak-bd: var(--ok-line); }
.ak-partial { --ak-bg: var(--warn-bg); --ak-ink: var(--warn-ink); --ak-bd: var(--warn-line); }
.ak-gap { --ak-bg: var(--err-bg); --ak-ink: var(--err-ink); --ak-bd: var(--err-line); }
.ak-na { --ak-bg: var(--inset-alt); --ak-ink: var(--ink-faint); --ak-bd: var(--line); }
.ak-none { --ak-bg: var(--surface); --ak-ink: var(--ink-soft); --ak-bd: var(--line-strong); }
.ak-dot.ak-covered, .ak-dot.ak-partial, .ak-dot.ak-gap, .ak-dot.ak-na, .ak-dot.ak-none { background: var(--ak-bg); border-color: var(--ak-bd); }
.ak-dot.ak-covered { background: var(--ok-fill); }
.ak-dot.ak-gap { background: var(--danger-fill); }
.ak-sym { font-weight: 700; font-style: normal; color: var(--ak-ink); }
.ak-dot.ak-sym { width: 1.35em; height: 1.35em; line-height: 1.2; text-align: center; font-size: .8em; border-radius: 4px; color: var(--ak-ink); vertical-align: middle; }
.ak-dot.ak-covered, .ak-dot.ak-gap { color: #fff; }
.ak-cell:focus-visible { outline-width: 3px; }
.ak-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; }
.ak-matrix-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); padding: 8px; margin-bottom: 12px; }
.ak-matrix-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ak-matrix { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(140px, 1fr); gap: 6px; align-items: start; }
.ak-col { display: grid; gap: 4px; min-width: 0; }
.ak-tac { font-size: .82rem; margin: 0 0 4px; padding: 6px 6px 8px; border-bottom: 2px solid var(--accent); display: flex; justify-content: space-between; gap: 6px; line-height: 1.25; background: var(--surface); }
.ak-tac a { color: var(--ink); text-decoration: none; }
.ak-tech { display: grid; gap: 2px; }
.ak-cell { display: grid; gap: 1px; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--ak-bd); background: var(--ak-bg); color: var(--ak-ink); text-decoration: none; font-size: .76rem; line-height: 1.25; }
.ak-none.ak-cell { border-style: dashed; }
.ak-cell:hover, .ak-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; }
.ak-cell.ak-dim { opacity: .55; }
.ak-cell.ak-sub { margin-left: 8px; font-size: .72rem; }
.ak-cell.ak-vuln { box-shadow: inset 3px 0 0 var(--danger-fill); }
.ak-id { font-weight: 600; font-variant-numeric: tabular-nums; }
.ak-name { overflow-wrap: anywhere; }
.ak-chg { font-weight: 400; font-size: .68rem; padding: 0 4px; border-radius: 4px; background: var(--info-bg); color: var(--info-ink); }
.ak-vmark svg { width: .9em; height: .9em; vertical-align: -1px; color: var(--err-ink); }
.ak-subs summary { font-size: .7rem; color: var(--ink-faint); cursor: pointer; padding: 1px 6px; }
.ak-subs[open] { display: grid; gap: 2px; }
/* Selection of techniques with search (public/assets/attack.js) */
.ak-pick { position: relative; display: grid; gap: 6px; }
.ak-pick-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); max-height: 260px; overflow-y: auto; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.ak-pick-list li { padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.ak-pick-list li[aria-selected="true"], .ak-pick-list li:hover { background: var(--accent-tint); }
.ak-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ak-chip { display: inline-flex; gap: 4px; align-items: center; font-size: .8rem; padding: 2px 4px 2px 8px; border-radius: 999px; background: var(--inset-alt); border: 1px solid var(--line); }
.ak-chip a { color: var(--ink); }
.ak-chip button { border: 0; background: none; cursor: pointer; color: var(--ink-faint); padding: 0 4px; font-size: 1rem; line-height: 1; }
@media (max-width: 600px) {
  .ak-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .ak-kpis strong { font-size: 1.3rem; }
  .ak-matrix { grid-auto-columns: minmax(128px, 1fr); }
  .ak-grid2 { grid-template-columns: 1fr; }
}

/* ---------- TF4 detection heatmap: split cell and phone accordion (templates/attack/matrix.php) ---------- */
.ak-cell.ak-split { box-shadow: inset 0 -3px 0 var(--line-strong); }
.ak-acc { display: none; }
.ak-lvl { display: inline-block; background: var(--ak-bg); color: var(--ak-ink); border: 1px solid var(--ak-bd); white-space: nowrap; }
@media (max-width: 640px) {
  /* 375 px: no 14-column grid, tactics as an accordion, techniques as a list with a level chip, 44 px touch rows */
  .ak-acc { display: block; margin-bottom: 12px; }
  .ak-matrix-wrap.ak-has-acc { display: none; }
  .ak-acc-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); margin-bottom: 8px; }
  .ak-acc-item > summary { list-style: none; cursor: pointer; min-height: 44px; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
  .ak-acc-item > summary::-webkit-details-marker { display: none; }
  .ak-acc-list { list-style: none; margin: 0; padding: 0 12px 8px; }
  .ak-acc-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 8px; min-height: 44px; padding: 6px 0; border-top: 1px solid var(--line); }
  .ak-acc-list a { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
}

/* ---------- Shared session (src/CoSession.php, cosession.js): header menu, bar, notices, locks ---------- */
:root { --cs-0: #2f7f77; --cs-1: #8a5f12; --cs-2: #3b5ea8; --cs-3: #9a2f24; --cs-4: #6b4c9a; --cs-5: #1f6e8c; --cs-on: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --cs-0: #7fd3cb; --cs-1: #e0a93b; --cs-2: #9db8ef; --cs-3: #f2a196; --cs-4: #c7a9f0; --cs-5: #7cc6e3; --cs-on: #13233f; } }
:root[data-theme="dark"] { --cs-0: #7fd3cb; --cs-1: #e0a93b; --cs-2: #9db8ef; --cs-3: #f2a196; --cs-4: #c7a9f0; --cs-5: #7cc6e3; --cs-on: #13233f; }
.cs-menu { order: 2; position: relative; flex-shrink: 0; display: inline-flex; }
.cs-menu > summary { list-style: none; cursor: pointer; position: relative; }
.cs-menu > summary::-webkit-details-marker { display: none; }
.cs-menu > summary::marker { content: ""; }
.cs-opener.is-on { color: var(--accent-bright); border-color: var(--accent-bright); }
.cs-dot { position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ok-fill); box-shadow: 0 0 0 2px var(--dark); }
.cs-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 320px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px; font-size: .92rem; }
.cs-pop p { margin: 0 0 10px; }
.cs-pop .form { gap: 10px; margin-bottom: 12px; }
.cs-pop .form input, .cs-pop .form select { width: 100%; }
.cs-pop-join { margin-bottom: 8px; }
.cs-pop-join input { flex: 1 1 140px; min-width: 0; text-transform: uppercase; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.cs-pop-join input::placeholder { text-transform: none; font-family: var(--font-sans); }
.cs-pop-join-label { flex: 1 0 100%; font-weight: 700; font-size: .85rem; }
.cs-pop-foot { margin: 6px 0 0 !important; color: var(--ink-faint); }
@media (max-width: 480px) { .cs-pop { position: fixed; top: 58px; left: 12px; right: 12px; width: auto; max-width: none; } }
@media (max-width: 400px) { .topbar-inner .header-tool { padding: 5px 6px; margin-left: 2px; } }

body[data-cs-on] { padding-bottom: 96px; }
.cs-bar { position: fixed; z-index: 55; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(960px, calc(100vw - 24px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-top: 3px solid var(--ok-fill); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 8px 12px; }
.cs-bar.is-ending { border-top-color: var(--accent-bright); }
.cs-bar.is-ended { border-top-color: var(--line-strong); opacity: .96; }
.cs-bar[hidden] { display: none; }
.cs-bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.cs-live { width: 10px; height: 10px; border-radius: 50%; background: var(--ok-fill); flex-shrink: 0; animation: cs-pulse 2s ease-in-out infinite; }
.cs-bar.is-ended .cs-live { animation: none; background: var(--line-strong); }
@keyframes cs-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(47, 127, 119, .45); } 50% { box-shadow: 0 0 0 6px rgba(47, 127, 119, 0); } }
.cs-bar-title { margin: 0; display: flex; flex-direction: column; line-height: 1.25; font-size: .9rem; min-width: 0; }
.cs-bar-sub { font-size: .8rem; color: var(--ink-faint); }
.cs-people { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; }
.cs-av { width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--cs-on); border: 2px solid var(--surface); margin-left: -6px; position: relative; flex-shrink: 0; }
.cs-people .cs-av:first-child { margin-left: 0; }
.cs-av.is-here { box-shadow: 0 0 0 2px var(--ok-fill); z-index: 1; }
.cs-av.is-idle { opacity: .45; }
.cs-av.is-self::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-bright); border: 2px solid var(--surface); }
.cs-av.is-support { font-size: .58rem; border-radius: 8px; }
.cs-av-inline { width: 24px; height: 24px; margin: 0 4px 0 0; font-size: .64rem; vertical-align: middle; }
.cs-c0 { background: var(--cs-0); } .cs-c1 { background: var(--cs-1); } .cs-c2 { background: var(--cs-2); } .cs-c3 { background: var(--cs-3); } .cs-c4 { background: var(--cs-4); } .cs-c5 { background: var(--cs-5); }
.cs-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.cs-actions [aria-pressed="true"] { background: var(--ok-bg); border-color: var(--ok-fill); color: var(--ok-ink); font-weight: 700; }
.cs-actions [hidden] { display: none; }
.cs-code .mono { font-weight: 700; letter-spacing: .06em; }
.cs-note { margin: 6px 0 0; font-size: .85rem; color: var(--ink-soft); }
.cs-note:empty { display: none; }
.cs-note .btn { margin-left: 4px; }
.cs-support-note { margin: 6px 0 0; padding: 6px 8px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-size: .85rem; }
.cs-support-note[hidden] { display: none; }
/* Gate H8b: a waiting support request in the starter's bar (admit or decline); wraps at 375 px, 44 px targets on touch */
.cs-request { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0 0; padding: 6px 8px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); font-size: .85rem; }
.cs-request .inline-form { display: inline; }
@media (pointer: coarse) { .cs-request .btn { min-height: 44px; } }
.cs-support-note a { color: inherit; text-decoration: underline; }
@media (max-width: 640px) {
  body[data-cs-on] { padding-bottom: 150px; }
  .cs-bar { bottom: 8px; width: calc(100vw - 16px); padding: 8px 10px; }
  .cs-actions { margin-left: 0; width: 100%; }
  .cs-bar-title { flex: 1 1 auto; }
}
@media print { .cs-bar, .cs-menu, .cs-hl, .cs-lock-note { display: none !important; } }

/* Gezeigte Stelle, Zeigen-Modus, gesperrtes Formular, verdeckte Eingaben (Support) */
.cs-hl { position: absolute; z-index: 54; pointer-events: none; border: 3px solid var(--accent-bright); border-radius: var(--radius); background: rgba(224, 169, 59, .12); box-shadow: 0 0 0 4px rgba(224, 169, 59, .25); animation: cs-hl-in .25s ease-out; transition: opacity .5s ease; }
.cs-hl.is-own { border-color: var(--ok-fill); background: rgba(47, 127, 119, .1); box-shadow: 0 0 0 4px rgba(47, 127, 119, .2); }
.cs-hl.is-out { opacity: 0; }
.cs-hl-who { position: absolute; top: -26px; left: -3px; background: var(--dark); color: var(--on-dark); font-size: .75rem; font-weight: 700; padding: 2px 8px; border-radius: var(--radius); white-space: nowrap; }
@keyframes cs-hl-in { from { transform: scale(1.04); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cs-hl, .cs-live { animation: none; } .cs-hl { transition: none; } }
html.cs-pointing, html.cs-pointing * { cursor: crosshair !important; }
html.cs-pointing main :is(a, button, input, select, textarea, tr, li, p, h1, h2, h3, section, .panel):hover { outline: 2px dashed var(--accent); outline-offset: 2px; }
html.cs-pointing .cs-bar, html.cs-pointing .cs-bar * { cursor: auto !important; }
.cs-lock-note { margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--accent-bright); background: var(--warn-bg); color: var(--warn-ink); border-radius: 0 var(--radius) var(--radius) 0; font-size: .86rem; font-weight: 600; }
form.cs-locked { opacity: .55; }

/* Overview ?r=joint-session */
.cs-invite { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; padding: 14px 16px; margin: 0 0 12px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cs-invite p { margin: 0 0 6px; }
.cs-bigcode { font-size: 1.1rem !important; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; color: var(--ink); }
.cs-link { width: 100%; margin: 4px 0 8px; font-size: .85rem; }
.cs-hub-actions { margin-top: 14px; }
.cs-hub h3 { margin-top: 18px; }

/* ATT&CK-Techniken am Schwachstellen-Fund (automatisch/manuell zugeordnet) */
.ak-assigned li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.ak-row-actions { gap: 6px; }
.ak-row-actions select { max-width: 220px; font-size: .85rem; padding: 3px 6px; }
.ak-vmark.is-assigned svg { color: var(--accent-bright); }
.ak-add { max-width: 520px; margin-top: 10px; }

/* Trial phase (src/TrialLock.php): locked exports visible but disabled; watermark and print lock */
.btn.is-locked, .btn.is-locked:hover, .btn.is-locked:focus-visible { opacity: .6; cursor: not-allowed; background: var(--surface); border-color: var(--line); color: var(--ink-faint); }
.export-lock-note { margin: 8px 0; color: var(--ink-faint); }
.export-lock-note a { margin-left: 4px; }
.export-lock-note svg, .abo-band svg { width: 14px; height: 14px; vertical-align: -2px; }
.trial-watermark { position: fixed; inset: 0; z-index: 5; pointer-events: none; user-select: none; overflow: hidden; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around; justify-items: center; opacity: .07; }
.trial-watermark span { transform: rotate(-24deg); font-size: 1.35rem; font-weight: 700; white-space: nowrap; color: var(--ink); padding: 40px 0; }
@media print {
  body.trial-mode .topbar, body.trial-mode .site-foot, body.trial-mode .trial-watermark, body.trial-mode main.page > * { display: none !important; }
  body.trial-mode main.page::before { content: attr(data-trial-print); display: block; padding: 40px 0; font-size: 14pt; }
}

/* ---------- SBOM (templates/sbom/*, Reiter am Asset) ---------- */
.asset-tabs { margin: 0 0 16px; }
.panel-head-row { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.panel-head-row > h2, .panel-head-row > .h3 { margin: 0; }
.sbom-ways .panel { gap: 6px; }
.sbom-ways .panel strong { font-size: 1rem; display: flex; gap: 6px; align-items: center; }
.sbom-ids { overflow-wrap: anywhere; word-break: break-word; min-width: 12em; }
.sbom-table td:first-child { min-width: 12em; }
.sbom-depth-1 td:first-child { padding-left: 1.6em; }
.sbom-depth-2 td:first-child { padding-left: 2.8em; }
.sbom-depth-3 td:first-child, .sbom-depth-4 td:first-child { padding-left: 4em; }
.sbom-branch { color: var(--ink-faint); }
.sbom-purl { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 4px; min-width: 0; }
.sbom-purl legend { padding: 0 6px; font-weight: 600; }
.sbom-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; margin: 0 0 12px; }
.sbom-meta dt { color: var(--ink-faint); }
.sbom-meta dd { margin: 0; overflow-wrap: anywhere; }
.sbom-old { color: var(--ink-faint); text-decoration: line-through; }
@media (max-width: 600px) {
  .sbom-meta { grid-template-columns: 1fr; }
  .sbom-meta dd { margin-bottom: 6px; }
}
.sbom-export { min-width: 0; max-width: 100%; }
.sbom-export select { flex: 1 1 auto; width: auto; min-width: 0; max-width: 100%; }
/* The export select is as wide as its longest option; inside the head row it must be allowed to shrink, else /asset-sbom/<id> scrolls sideways at 320 px (WCAG 1.4.10) */
.panel-head-row > .row-actions { min-width: 0; max-width: 100%; }
.sbom-purl-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); }

/* Collector script: wrap checksums, button as a link */
.break { overflow-wrap: anywhere; word-break: break-all; }
.btn-link { background: none; border: 0; padding: 0; color: var(--accent-dark); text-decoration: underline; cursor: pointer; font: inherit; }

.import-progress { width: 100%; height: 14px; }

/* Technische Details am Asset */
.tech-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 24px; }
.tech-grid .kv { margin: 0; grid-template-columns: 110px 1fr; }
.tech-grid dd { overflow-wrap: anywhere; }
#technik .h4, #sammelskript .h4 { margin-top: 18px; }

/* ---------- CMDB light (1.3): tabs of the asset page, tags, relationship map, location tree, history ---------- */
.asset-sections { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 16px; }
.asset-sections .btn { gap: 6px; }
.tab-count { display: inline-block; min-width: 1.4em; padding: 0 5px; border-radius: 999px; background: var(--inset-alt); color: var(--ink-soft); font-size: .72rem; font-weight: 700; line-height: 1.5; text-align: center; }
.btn-primary .tab-count { background: rgba(255, 255, 255, .35); color: inherit; }
.tab-count.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.asset-panel[hidden] { display: none; }
.asset-head-tags { margin: 6px 0 0; }
.cmdb-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 12px; min-width: 0; margin: 0; }
.cmdb-fieldset legend { padding: 0 6px; }
.cmdb-gaps { margin: 4px 0 10px; padding-left: 20px; }
.history-filter label { min-width: 130px; }
.history-filter .grow { flex: 1 1 180px; }
.asset-history .hist-old { color: var(--ink-faint); }
.asset-history .hist-new { font-weight: 600; }
.col-chooser .check { margin: 2px 12px 2px 0; }
.col-chooser-list { display: flex; flex-wrap: wrap; gap: 4px 0; }
/* Tags: fixed palette (no inline styles because of CSP), light and dark with sufficient contrast */
.tag { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: .76rem; font-weight: 600; line-height: 1.5; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; vertical-align: middle; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
a.tag:hover, a.tag:focus-visible { text-decoration: underline; }
.tag-c1 { background: #f6ead0; color: #6e4a0c; border-color: #e8d3a4; }
.tag-c2 { background: #dcefeb; color: #1f5f58; border-color: #b9ddd6; }
.tag-c3 { background: #dfe6f2; color: #13233f; border-color: #c2cfe4; }
.tag-c4 { background: #f8e1dd; color: #8e2a1f; border-color: #eec3bc; }
.tag-c5 { background: #e2f0d9; color: #2f5d1b; border-color: #c6e1b5; }
.tag-c6 { background: #ece3f5; color: #52307a; border-color: #d8c7ea; }
.tag-c7 { background: var(--inset-alt); color: var(--ink-soft); border-color: var(--line); }
.tag-c8 { background: #fbe6d4; color: #87420d; border-color: #f1caa8; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag-c1 { background: #3a2f16; color: #f0c66b; border-color: #54431c; }
  :root:not([data-theme="light"]) .tag-c2 { background: #12302e; color: #7fd3cb; border-color: #1e4a46; }
  :root:not([data-theme="light"]) .tag-c3 { background: #1c3156; color: #c9d7ef; border-color: #2e4570; }
  :root:not([data-theme="light"]) .tag-c4 { background: #3a1a18; color: #f2a196; border-color: #5a2622; }
  :root:not([data-theme="light"]) .tag-c5 { background: #1d3418; color: #a9d98f; border-color: #2d4d25; }
  :root:not([data-theme="light"]) .tag-c6 { background: #2e2240; color: #d2bdf0; border-color: #45335f; }
  :root:not([data-theme="light"]) .tag-c8 { background: #3b2512; color: #f3b684; border-color: #5a381a; }
}
:root[data-theme="dark"] .tag-c1 { background: #3a2f16; color: #f0c66b; border-color: #54431c; }
:root[data-theme="dark"] .tag-c2 { background: #12302e; color: #7fd3cb; border-color: #1e4a46; }
:root[data-theme="dark"] .tag-c3 { background: #1c3156; color: #c9d7ef; border-color: #2e4570; }
:root[data-theme="dark"] .tag-c4 { background: #3a1a18; color: #f2a196; border-color: #5a2622; }
:root[data-theme="dark"] .tag-c5 { background: #1d3418; color: #a9d98f; border-color: #2d4d25; }
:root[data-theme="dark"] .tag-c6 { background: #2e2240; color: #d2bdf0; border-color: #45335f; }
:root[data-theme="dark"] .tag-c8 { background: #3b2512; color: #f3b684; border-color: #5a381a; }
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 2px 0 10px; }
.tag-pick { display: inline-flex; align-items: center; gap: 4px; font-weight: 400; margin: 0; }
.tag-list .tag { margin: 0 4px 4px 0; }
/* Beziehungskarte (serverseitiges SVG) */
.rmap-wrap { margin: 0 0 12px; overflow-x: auto; max-width: 100%; }
@media (max-width: 600px) { .rmap { min-width: 560px; } } /* readable on the smartphone: map can be scrolled inside the box, page without horizontal overflow */
.rmap { width: 100%; max-width: 860px; height: auto; display: block; margin: 0 auto; }
.rmap .rmap-edge { stroke: var(--line-strong); stroke-width: 2; }
.rmap .rmap-depends_on { stroke: var(--accent); }
.rmap .rmap-runs_on { stroke: var(--ok-ink); }
.rmap .rmap-connected { stroke: var(--ink-faint); stroke-dasharray: 5 4; }
.rmap .rmap-part_of { stroke: var(--info-ink); }
.rmap .rmap-protects { stroke: var(--warn-ink); stroke-dasharray: 2 3; }
.rmap .rmap-arrow { fill: var(--ink-soft); }
.rmap .rmap-elabel { fill: var(--ink-faint); font-size: 10px; font-family: var(--font-sans); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.rmap-node rect { fill: var(--inset); stroke: var(--line-strong); stroke-width: 1.5; }
.rmap-node text { fill: var(--ink); font-size: 12.5px; font-weight: 600; font-family: var(--font-sans); }
.rmap-node .rmap-sub { fill: var(--ink-faint); font-size: 10.5px; font-weight: 400; }
.rmap-node.is-center rect { fill: var(--accent-tint); stroke: var(--accent); stroke-width: 2.5; }
a.rmap-node:hover rect, a.rmap-node:focus rect { stroke: var(--accent); stroke-width: 2.5; }
a.rmap-node:focus { outline: none; }
a.rmap-node:focus-visible rect { stroke-width: 3.5; }
/* Standortbaum */
.loc-tree, .loc-tree ul { list-style: none; margin: 0; padding: 0; }
.loc-tree ul { padding-left: 22px; border-left: 1px dashed var(--line-strong); margin-left: 8px; }
.loc-tree li { margin: 6px 0; }
.loc-node { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.loc-node .loc-kind { font-size: .72rem; }
.loc-migrate td input[type=text] { min-width: 12em; width: 100%; }
.proc-crit { white-space: nowrap; }
@media (max-width: 600px) {
  .asset-sections { gap: 4px; }
  .asset-sections .btn { padding: 4px 8px; }
  .history-filter label { min-width: 0; flex: 1 1 45%; }
  .loc-tree ul { padding-left: 12px; }
}
/* Notices from the collector script */
.hint-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hint-list > li { border-top: 1px solid var(--line); padding-top: 10px; }
.hint-list > li:first-child { border-top: 0; padding-top: 0; }
.inline-details { display: inline-block; }
.inline-details > summary { list-style: none; cursor: pointer; }
.inline-details > summary::-webkit-details-marker { display: none; }
.inline-details[open] form { margin-top: 6px; }
/* Vendor support (EOL) and vendor advisories (CSAF) */
.pre-wrap { white-space: pre-wrap; overflow-wrap: break-word; }
.eol-row + .eol-row { margin-top: .6rem; }
.eol-row p { margin: .25rem 0; }

/* ---------- Header in the portal as on the website (templates/layout.php) ----------
   Follows light/dark mode: the „on-dark“ colours of the header point inside .topbar to the normal surface and
   text colours (light: white with dark text, dark: Tiefsee with light text). Also applies to the expanded mobile menu. */
.topbar {
  --dark: var(--surface); --dark-2: var(--inset); --on-dark: var(--ink); --on-dark-soft: var(--ink-soft);
  --on-dark-faint: var(--ink-faint); --on-dark-line: var(--line-strong);
  background: var(--surface); color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--line);
}
.topbar-brand img.brand-logo { height: 40px; }
/* Desktop: menu starts flush with the boxes in the content (.page, max. 1320 px, 20 px padding; text of the first item
   on the box edge), the icons stay at the far right, air in between. If the space on the left is too tight, the menu sits directly
   behind the logo. 50 % − 669 px = (header width − 1320) / 2 + 20 − 9 (menu item padding) − 20 (margin) − 20 (spacing). */
/* Short names (Compliance, Assets, Schwachstellen …) on desktop and in the mobile menu; full module name as a tooltip */
@media (max-width: 640px) { .topbar-brand img.brand-logo { height: 34px; } }
.topbar-brand { flex-shrink: 0; }
.topbar-brand .brand-mark-sm { display: none; }
@media (max-width: 640px) {
  .topbar-brand .brand-logo { display: none !important; }
  .topbar-brand .brand-mark-sm { display: block; height: 34px; width: 34px; }
}
/* Header icons uniform: 34 × 34, same frame and radius, one height, 6 px spacing
   (account, sign out, search, watch list, work together, notifications, help, light/dark) */
.topbar-inner { gap: 6px; }
.topbar-brand { margin-right: 14px; }
.topbar-inner > .header-tool, .topbar-inner > .bm-menu > a, .topbar-inner > .cs-menu > summary, .topbar-inner > .help-btn, .topbar-inner > .theme-toggle {
  box-sizing: border-box; width: 34px; height: 34px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink-soft); font-size: 1rem; line-height: 1;
}
.topbar-inner > .header-tool:hover, .topbar-inner > .bm-menu > a:hover, .topbar-inner > .cs-menu > summary:hover, .topbar-inner > .help-btn:hover,
.topbar-inner > .theme-toggle:hover { background: var(--inset); color: var(--ink); border-color: var(--line-strong); }
.topbar-inner > .bm-menu, .topbar-inner > .cs-menu { margin: 0; display: inline-flex; align-items: center; }
.topbar-inner > .header-tool .icon, .topbar-inner > .bm-menu > a .icon, .topbar-inner > .cs-menu > summary .icon, .topbar-inner > .theme-toggle .icon { width: 16px; height: 16px; }
/* States in Messing, filled: „Gemeinsam arbeiten“ (work together) during a running session (pulses subtly) and watch list with entries
   (after the uniform icon design above, so the colour is not overwritten). The bell shows unread
   notifications only through the number. */
.topbar-inner > .cs-menu > summary.cs-opener.is-on, .topbar-inner > .bm-menu > a.bm-opener.is-on,
.topbar-inner > .cs-menu > summary.cs-opener.is-on:hover, .topbar-inner > .bm-menu > a.bm-opener.is-on:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.topbar-inner > .cs-menu > summary.cs-opener.is-on .icon, .topbar-inner > .bm-menu > a.bm-opener.is-on .icon { fill: currentColor; }
@keyframes cs-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-bright) 45%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-bright) 0%, transparent); }
}
@keyframes cs-pulse-icon { 0%, 100% { opacity: 1; } 50% { opacity: .72; } }
.topbar-inner > .cs-menu > summary.cs-opener.is-on { animation: cs-pulse 2.6s ease-in-out infinite; }
.topbar-inner > .cs-menu > summary.cs-opener.is-on .icon { animation: cs-pulse-icon 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .topbar-inner > .cs-menu > summary.cs-opener.is-on, .topbar-inner > .cs-menu > summary.cs-opener.is-on .icon { animation: none; }
}
.cs-dot { box-shadow: 0 0 0 2px var(--surface); }
/* Website header: menu centred between logo and language/buttons (equal air left and right) */
@media (min-width: 1221px) { .lp-head .lp-nav { margin-left: auto; margin-right: auto; } }
/* Sign-in pages: short link below the form (e.g. „Passwort vergessen?“) */
.auth-alt { margin: 14px 0 0; text-align: center; font-size: .92rem; }
/* „Passwort vergessen“: Abschnitt „Authenticator-App verloren?“ */
.auth-section { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.auth-section h2 { margin: 0 0 8px; }
.auth-section .small { margin: 0 0 10px; }
/* Team und Zugänge: offene Anfragen „Zwei-Faktor zurücksetzen“ */
#zwei-faktor-anfragen { border-left: 4px solid var(--accent-bright); }
#zwei-faktor-anfragen ul { list-style: none; margin: 8px 0 0; padding: 0; }
#zwei-faktor-anfragen li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
/* Login: button „Mit Firmenkonto anmelden“ (sign in with company account) below the form */
.auth-sso { margin-top: 10px; justify-content: center; gap: 8px; }
/* Mein Konto: list of passkeys */
.pk-list { list-style: none; margin: 8px 0 14px; padding: 0; }
.pk-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; padding: 8px 0; border-top: 1px solid var(--line); }

/* Mobile menu in the portal as on the website (templates/landing/_header: .lp-mobile-nav): full rows with dividers,
   accordion with shaded sub-items, active item with a Messing bar on the left (below 1180 px or collapsed) */
/* Help window: button „Zur ausführlichen Hilfe“ (to the detailed help) next to the close cross */
.help-panel-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
@media (max-width: 480px) { .help-panel-head-actions .btn { padding: 6px 8px; font-size: .82rem; } }
/* Dashboard: clickable key figures and numbers in tiles (open the matching list with a filter) */
.dash-figs > a.dash-fig-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; border-radius: var(--radius); padding: 2px 4px; margin: -2px -4px; }
.dash-figs > a.dash-fig-link:hover, .dash-figs > a.dash-fig-link:focus-visible { background: var(--inset); }
.dash-figs > a.dash-fig-link:hover strong { text-decoration: underline; text-underline-offset: 3px; }
a.dash-num { color: inherit; text-decoration: none; }
a.dash-num:hover, a.dash-num:focus-visible { text-decoration: underline; text-underline-offset: 4px; }
.dash-figure a.dash-num { display: inline-block; }
/* Target size 24 px (WCAG 2.5.8, a11y S19): number and filter links in tables are not inline text links */
td a.dash-num, td a.filter-link, .dash-tile a.dash-num { display: inline-flex; align-items: center; min-height: 24px; }
/* WCAG 2.5.8 target size: "Hinweise je Anbieter" on the SSO settings page (security package P4 a11y check) */
.sso-hints > summary { min-height: 24px; line-height: 24px; }
.vuln-table td.small > a:first-child { display: inline-block; min-height: 24px; line-height: 24px; }
/* WCAG 2.5.8: in the dashboard tile "Projektstand" a project name that wraps around the module badge link would cover it
   (axe target-size, 06.10.2026); as one inline block it sits next to the badge or moves below it as a whole */
td a.proj-name { display: inline-block; min-height: 24px; line-height: 24px; vertical-align: middle; }

/* ---------- Handbuch (templates/manual/index.php, src/Manual.php) ---------- */
.hb-version { margin: 8px 0 0; font-size: .9rem; color: var(--ink-soft); }
.hb-actions { align-self: flex-start; }
.hb-toc .linklist { counter-reset: none; }
.hb-toc-part { margin-top: 10px; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.hb-no { color: var(--accent-dark); font-variant-numeric: tabular-nums; margin-right: 2px; }
.hb-part { margin: 26px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.hb-part:first-of-type { margin-top: 0; }
.hb-chapter + .hb-chapter, .hb-chapter + .hb-part { margin-top: 18px; }
.hb-glance { margin: 12px 0 16px; padding: 14px 16px; background: var(--inset); border: 1px solid var(--line); border-left: 3px solid var(--accent-bright); border-radius: var(--radius); }
.hb-glance-title { margin: 0 0 8px; font-weight: 700; color: var(--info-ink); }
.hb-glance dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.hb-glance dt { font-weight: 700; font-size: .9rem; }
.hb-glance dd { margin: 0; }
.hb-glance ol { margin: 0; padding-left: 1.2em; }
.hb-where { margin: 8px 0 12px; padding: 8px 12px; background: var(--info-bg); border: 1px solid var(--info-line); border-radius: var(--radius); font-size: .92rem; }
.hb-where span { font-weight: 700; color: var(--info-ink); margin-right: 4px; }
.hb-callout { margin: 10px 0 12px; padding: 10px 14px; border-radius: var(--radius); border-left: 3px solid var(--info-ink); background: var(--info-bg); }
.hb-callout strong:first-child { display: block; margin-bottom: 2px; }
.hb-tip { background: var(--ok-bg); border-left-color: var(--ok-fill); }
.hb-tip strong:first-child { color: var(--ok-ink); }
.hb-important { background: var(--warn-bg); border-left-color: var(--accent-bright); }
.hb-important strong:first-child { color: var(--warn-ink); }
.hb-warning { background: var(--err-bg); border-left-color: var(--danger-fill); }
.hb-warning strong:first-child { color: var(--err-ink); }
ol.hb-steps { padding-left: 0; list-style: none; counter-reset: hbstep; margin: 10px 0 12px; }
ol.hb-steps > li { counter-increment: hbstep; position: relative; padding-left: 34px; margin: 0 0 8px; min-height: 24px; }
ol.hb-steps > li::before { content: counter(hbstep); position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--dark); color: var(--on-dark); font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.hb-table { width: 100%; border-collapse: collapse; margin: 8px 0 14px; font-size: .9rem; }
.hb-table th, .hb-table td { text-align: left; vertical-align: top; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.hb-table th { background: var(--inset); font-weight: 700; }
.hb-shot { margin: 12px 0 16px; }
.hb-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--radius); }
.hb-shot figcaption { margin-top: 6px; font-size: .85rem; color: var(--ink-faint); }
.hb-page { margin: 10px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.hb-page h4 { margin: 0 0 4px; }
.hb-imprint p { font-size: .9rem; color: var(--ink-soft); }
/* Table of contents and manual text scroll in their own bounded areas; the page itself only scrolls outside them */
.hb-main { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 8px; border-radius: var(--radius); }
.hb-main:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-main .help-chapter, .hb-main .help-entry { scroll-margin-top: 12px; }
.hb-toc { margin-bottom: 0; }
.hb-toc-toggle { display: none; }
@media (min-width: 861px) {
  .hb-layout { align-items: stretch; height: max(420px, calc(100vh - 100px)); height: max(420px, calc(100dvh - 100px)); }
  .hb-toc { position: static; max-height: none; }
  /* Jumps to a chapter also scroll the page; keep the box below the sticky top bar */
  html:has(.hb-layout) { scroll-padding-top: 80px; }
}
/* Mobile: collapsible contents bar above the text box */
@media (max-width: 860px) {
  .hb-layout { display: flex; flex-direction: column; align-items: stretch; gap: 12px; height: max(360px, calc(100vh - 84px)); height: max(360px, calc(100dvh - 84px)); }
  .hb-toc { flex: 0 1 auto; max-height: 50%; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
  .hb-toc .linklist { grid-template-columns: minmax(0, 1fr); }
  .hb-toc.has-toggle .hb-toc-label { display: none; }
  .hb-toc.has-toggle .hb-toc-toggle { display: flex; width: 100%; justify-content: space-between; align-items: center; min-height: 44px; }
  .hb-toc-toggle svg { transition: transform .15s; }
  .hb-toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .hb-toc.is-collapsed .linklist { display: none; }
  .hb-toc.has-toggle .linklist { margin-top: 8px; } /* keeps the first link clear of the toggle (target size, WCAG 2.5.8) */
  .hb-main { flex: 1 1 0; min-height: 0; padding-right: 4px; }
  html:has(.hb-layout) { scroll-padding-top: 72px; }
}
@media (prefers-reduced-motion: reduce) { .hb-toc-toggle svg { transition: none; } }
@media (max-width: 640px) {
  .hb-glance dl { grid-template-columns: 1fr; }
  .hb-glance dd { margin-bottom: 6px; }
  .hb-table { display: block; overflow-x: auto; }
}
@media print {
  .hb-tabs, .hb-actions, .hb-toc, .hb-search, .help-anchor { display: none !important; }
  .hb-layout { display: block; height: auto; }
  .hb-main { overflow: visible; padding-right: 0; }
  .hb-chapter { break-before: page; max-width: none; }
  .hb-chapter#hb-front { break-before: auto; }
  .hb-part { break-after: avoid; }
  .hb-shot, .hb-glance, .hb-callout, .hb-where, .hb-table tr { break-inside: avoid; }
  .hb-callout, .hb-glance, .hb-where, .hb-table th { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
.hb-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 24px; margin: 0; }
.hb-index dt { font-weight: 700; margin-top: 6px; }
.hb-index dd { margin: 0; font-size: .9rem; }
.hb-index dd a { font-variant-numeric: tabular-nums; }

/* ---------- Sprachwahl (templates/account/_lang_menu.php) ---------- */
.lang-menu { order: 2; position: relative; flex-shrink: 0; display: inline-flex; }
.lang-menu > summary { list-style: none; cursor: pointer; gap: 4px; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-code { font-size: .68rem; font-weight: 700; letter-spacing: .04em; line-height: 16px; }
.lang-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 260px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 8px; }
.lang-head { margin: 6px 8px 4px; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.lang-item { margin: 0; }
.lang-btn { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: var(--radius); padding: 7px 8px; color: var(--ink); font: inherit; cursor: pointer; }
.lang-btn:hover, .lang-btn:focus-visible { background: var(--inset); }
.lang-btn.is-on { font-weight: 700; }
.lang-btn .icon, .lang-gap { width: 14px; height: 14px; flex-shrink: 0; color: var(--accent); }
.lang-gap { display: inline-block; }
.lang-flag { width: 21px; height: 15px; flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: -2px; }
.check .lang-flag { margin-right: 2px; }
.lang-exp { margin-left: auto; font-size: .7rem; color: var(--ink-faint); font-weight: 400; }
@media print { .lang-menu { display: none !important; } }
/* Globe menu on website and sign-in page (lang_switch) */
.lp-langmenu > summary { display: inline-flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: var(--radius); color: var(--ink-faint); border: 1px solid var(--line); }
.lp-langmenu > summary:hover, .lp-langmenu[open] > summary { color: var(--ink); background: var(--inset); }
.lp-langmenu > summary .icon { width: 16px; height: 16px; }
.lp-langmenu .lang-btn { text-decoration: none; }
.auth-foot .lp-langmenu > summary { color: var(--on-dark-soft); border-color: var(--on-dark-line); }
.auth-foot .lp-langmenu > summary:hover, .auth-foot .lp-langmenu[open] > summary { color: var(--on-dark); background: var(--dark-2); }
.public-body .auth-foot .lp-langmenu > summary { color: var(--ink-soft); border-color: var(--line-strong); }
.public-body .auth-foot .lp-langmenu > summary:hover, .public-body .auth-foot .lp-langmenu[open] > summary { color: var(--ink); background: var(--inset); }
.auth-foot .lp-langmenu .lang-pop { top: auto; bottom: calc(100% + 8px); left: 0; right: auto; }
.auth-foot .lp-langmenu { vertical-align: middle; }
/* Closed menu: no box for the pop-up. Chrome lays out the content of a closed <details> (::details-content), so the
   260 px pop-up widened ?r=recovery-codes to 351 px at 320 px (WCAG 1.4.10, finding 10.10.2026). */
.lang-menu:not([open]) > .lang-pop { display: none; }
/* Narrow sign-in footer: the globe sits mid-page, so a pop-up anchored at its left edge ran to 416 px at 320 px.
   Below 600 px the pop-up is centred on the footer tool row (and thus the viewport) instead (WCAG 1.4.10). */
@media (max-width: 599.98px) {
  .auth-foot-tools { position: relative; }
  .auth-foot .lp-langmenu { position: static; }
  .auth-foot .lp-langmenu .lang-pop { left: 0; right: 0; margin-inline: auto; width: min(260px, calc(100vw - 24px)); }
}

/* ---------- User card in the header (templates/account/_user_menu.php) ---------- */
.user-menu { order: 3; position: relative; flex-shrink: 0; display: inline-flex; margin-left: 4px; }
.user-menu > summary { list-style: none; cursor: pointer; padding: 3px; }
.user-menu > summary::-webkit-details-marker, .user-sub > summary::-webkit-details-marker { display: none; }
.user-avatar { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-bright); color: #13233f; font-size: .72rem; font-weight: 700; letter-spacing: .02em; }
.user-avatar-lg { width: 42px; height: 42px; font-size: .95rem; flex-shrink: 0; }
.user-pop { position: absolute; top: calc(100% + 10px); right: 0; z-index: 60; width: 300px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 14px; display: grid; gap: 8px; }
.user-head { display: flex; gap: 12px; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.user-name { margin: 0; font-weight: 700; }
.user-meta { margin: 2px 0 0; font-size: .82rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.user-account { justify-content: center; }
.user-row, .user-sub > summary { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink); font: inherit; font-size: .92rem; text-align: left; cursor: pointer; }
.user-row:hover, .user-row:focus-visible, .user-sub > summary:hover { background: var(--inset); }
.user-row .icon, .user-sub > summary .icon { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; }
.user-row .when-light, .user-row .when-dark { display: inline-flex; align-items: center; gap: 10px; }
.user-row .when-dark { display: none; }
:root[data-theme="dark"] .user-row .when-dark { display: inline-flex; }
:root[data-theme="dark"] .user-row .when-light { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .user-row .when-dark { display: inline-flex; }
  :root:not([data-theme="light"]) .user-row .when-light { display: none; }
}
.user-sub { border-top: 1px solid var(--line); padding-top: 6px; }
.user-sub > summary { list-style: none; }
.user-sub-val { margin-left: auto; padding-left: 12px; font-size: .82rem; color: var(--ink-faint); white-space: nowrap; flex-shrink: 0; }
.user-sub-body { padding: 2px 0 4px 22px; }
.user-logout { margin: 0; border-top: 1px solid var(--line); padding-top: 6px; }
@media print { .user-menu { display: none !important; } }

/* Help window: links at the top one below the other, footer with a row of buttons */
.help-panel-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 14px; border-bottom: 1px solid var(--line); }
.help-panel-links .btn { flex: 1 1 180px; justify-content: center; }
.help-panel-foot { gap: 6px; }
.help-panel-foot p { margin: 0; }
.help-panel-foot-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Notifications as an inbox */
.notif-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.notif-bar .notif-all { margin-right: auto; }
.notif-mailbox > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; }
.notif-pick { padding-top: 2px; }
.notif-toggle { background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 5px 7px; color: var(--ink-faint); cursor: pointer; display: inline-flex; }
.notif-toggle:hover { color: var(--ink); background: var(--inset); }
.notif-toggle .icon { width: 15px; height: 15px; }

/* Tabellenwerkzeuge (public/assets/table-tools.js) */
.tt-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 10px; }
.tt-search { max-width: 280px; flex: 1 1 200px; padding: 6px 10px; font-size: .88rem; }
.tt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tt-chip { border: 1px solid var(--accent); background: var(--accent-tint); color: var(--ink); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: .8rem; cursor: pointer; }
.tt-chip:hover { background: var(--inset); }
.tt-count { margin-left: auto; }
th.tt-sortable { white-space: nowrap; }
.tt-sort-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; cursor: pointer; user-select: none; font: inherit; color: inherit; border-radius: 4px; }
.tt-sort-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
th.tt-sortable .tt-sort-btn::after { content: "\00a0↕"; color: var(--ink-faint); font-weight: 400; opacity: .6; }
th.tt-sortable[aria-sort="ascending"] .tt-sort-btn::after { content: "\00a0↑"; opacity: 1; color: var(--accent); }
th.tt-sortable[aria-sort="descending"] .tt-sort-btn::after { content: "\00a0↓"; opacity: 1; color: var(--accent); }
td.tt-pick { cursor: pointer; }
td.tt-pick:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
@media print { .tt-bar { display: none !important; } th.tt-sortable .tt-sort-btn::after { content: none; } }

/* ---------- Uniform buttons (29.09.2026): same height in a row, same spacing, one line ---------- */
.btn { min-height: 40px; }
.btn-sm { min-height: 34px; }
.btn-xs { min-height: 26px; }
.row-actions, .form-inline, .filter-bar, .tt-bar, .notif-bar, .help-panel-foot-row, .help-panel-links { gap: 8px; align-items: center; }
/* Row with a labelled field (label above the input) and a button: button aligns with the input, not the label */
.row-actions.row-actions-end { align-items: end; }
/* Action bars in the page header and in toolbars: all buttons in the same (small) size */
.page-head .row-actions .btn:not(.btn-xs), .row-actions .btn-sm ~ .btn:not(.btn-xs), .row-actions .btn ~ .btn-sm,
.tt-bar .btn, .notif-bar .btn, .filter-bar .btn:not(.btn-xs) { padding: 7px 13px; font-size: .86rem; min-height: 34px; }
.page-head .row-actions form, .row-actions form { margin: 0; display: inline-flex; }
.page-head .row-actions .check, .row-actions .check { min-height: 34px; display: inline-flex; align-items: center; }
/* Header: all tools 34 px high */
.header-tool, .help-btn, .user-opener { min-height: 34px; box-sizing: border-box; }
/* Do not cut off select fields in tables (e.g. status „In Arbeit“) */
table select { min-width: 8.5em; }
/* Header (29.09.2026): help as an icon and user card in the same 34 px grid as the other tools */
.topbar-inner > .help-btn .icon { width: 16px; height: 16px; display: block; }
.topbar-inner > .user-menu { margin: 0; display: inline-flex; align-items: center; }
.topbar-inner > .user-menu > summary {
  box-sizing: border-box; width: 34px; height: 34px; min-height: 34px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent;
}
.topbar-inner > .user-menu > summary:hover, .topbar-inner > .user-menu > summary[aria-current] { background: var(--inset); }
.topbar-inner > .user-menu .user-opener .user-avatar { width: 24px; height: 24px; font-size: .66rem; }

/* ---------- Button grid (button audit 29.09.2026): one family, four sizes, equal spacing ----------
   lg 46 px (website calls to action) · md 40 px · sm 34 px (toolbars, portal header) · xs 26 px (table rows).
   All sizes bold, same radius; buttons in a row share one height with 8 px (portal) or 12 px (website) gaps. */
.btn-xs { font-weight: 700; }
.btn-danger:hover, .btn-danger:focus-visible { background: color-mix(in srgb, var(--danger-fill) 84%, #000); color: #fff; }
.icon-btn { border-radius: var(--radius); }
/* Single-button forms next to links: same line */
.inline-form { display: inline-flex; vertical-align: middle; align-items: center; margin: 0; }
/* Mixed rows: xs grows to the neighbours' size (sm) as soon as a larger button sits in the same row */
.row-actions:has(> .btn:not(.btn-xs), > form > .btn:not(.btn-xs), > details > summary.btn:not(.btn-xs)) .btn-xs,
.filter-bar .btn-xs, .form-inline:has(> .btn:not(.btn-xs), input, select) .btn-xs { padding: 7px 13px; font-size: .86rem; min-height: 34px; }
.modal-actions, .step-actions { gap: 8px; align-items: center; }
/* Website: one large size for all calls to action (Complass sections and LetMeSecure teaser) */
.lp-btn-lg { padding: 12px 22px; font-size: 1rem; min-height: 46px; gap: 8px; box-sizing: border-box; justify-content: center; line-height: 1.2; }
.lp-cta, .l-cta { gap: 12px; align-items: center; }
/* Website header: language, light/dark, login, demo and menu in one 40 px row */
.lp-actions { gap: 6px; }
.lp-head .theme-toggle, .lp-head .lang-menu > summary { box-sizing: border-box; min-height: 40px; min-width: 40px; justify-content: center; }
/* Portal header: help uses the same square grid as the other tools */
.help-btn, .theme-toggle { border-radius: var(--radius); min-height: 34px; box-sizing: border-box; }
.lang-menu { margin: 0; }
.lp-langmenu > summary { border-color: var(--line-strong); }
.lp-langmenu > summary { min-height: 34px; box-sizing: border-box; }
/* Links and form buttons side by side (e.g. table rows): same centre line */
.btn, .inline-form { vertical-align: middle; }
/* Clickable figures and labels (filter_link): open the filtered list */
a.filter-link { color: inherit; text-decoration: none; border-radius: var(--radius); }
a.filter-link:hover, a.filter-link:focus-visible { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a.filter-link:hover > .badge, a.filter-link:focus-visible > .badge, a.filter-link:hover > .status, a.filter-link:focus-visible > .status { box-shadow: 0 0 0 1px var(--accent); text-decoration: none; }
a.filter-link > .badge, a.filter-link > .status { cursor: pointer; }
@media print { a.filter-link { text-decoration: none; } }
/* Website header (30.09.2026): theme toggle and language globe as tall as the Login/Demo buttons, on one line; width stays */
.lp-actions > .theme-toggle, .lp-actions > .lp-langmenu > summary { box-sizing: border-box; height: 40px; min-height: 40px; padding: 0 12px; align-items: center; justify-content: center; }
.lp-actions > .lp-langmenu { align-self: center; margin: 0; }
.lp-actions > .lp-langmenu > summary { border-color: var(--line-strong); color: var(--ink-soft); }
/* Very narrow phones (320 px): smaller logo and gaps so the language globe does not stick out past the right edge */
@media (max-width: 400px) {
  .lp-head-inner { gap: 10px; }
  .lp-brand img { height: 36px; }
  .lp-actions { gap: 6px; }
  .lp-actions > .theme-toggle, .lp-actions > .lp-langmenu > summary { padding: 0 8px; }
}
/* Dashboard project cards: the title link covers the whole card (stretched link); the module badge filter stays clickable on top */
.project-card { position: relative; transition: box-shadow var(--t), border-color var(--t), transform var(--t); }
.project-card h3 a, .project-card h2 a { color: inherit; text-decoration: none; }
.project-card h3 a::after, .project-card h2 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.project-card .card-top a.filter-link { position: relative; z-index: 1; }
.project-card:has(h3 a:hover), .project-card:has(h3 a:focus-visible) { box-shadow: var(--shadow-md); border-color: var(--line-strong); transform: translateY(-1px); }
/* Framework introduction (1.16, templates/module_intro.php) */
.intro-facts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); grid-template-columns: 200px 1fr; }
.intro-pitfalls { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.intro-pitfall { border: 1px solid var(--line); border-left: 3px solid var(--warn-ink); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); }
.intro-pitfall h3 { margin: 0 0 6px; font-size: 1rem; }
.intro-pitfall .prose p:last-child { margin-bottom: 0; }
.intro-checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.intro-checks li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-soft); }
.intro-checks .icon { color: var(--ok-ink, var(--accent)); flex: none; margin-top: 3px; }
.intro-where { margin-bottom: 0; }
.intro-where .card h3 { margin-top: 0; }
@media (max-width: 640px) { .intro-facts { grid-template-columns: 1fr; } .intro-facts dd { margin-bottom: 8px; } }
.stepnav-intro { display: flex; align-items: center; gap: 6px; padding: 4px 6px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); color: var(--accent-dark); }
/* "What's new" over several versions (1.17): the list scrolls instead of growing the panel */
.news-body.is-multi { max-height: 320px; overflow-y: auto; margin: 8px 0; padding-right: 6px; overscroll-behavior: contain; }
.news-body.is-multi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.news-version { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 2px; font-size: .95rem; }
.news-version:first-child { margin-top: 0; }
.news-more a { color: var(--ink-soft); }
/* Portal header on very narrow phones (320 px): 32 px tools, smaller gaps and padding, so all header tools fit without sideways scrolling */
@media (max-width: 359px) {
  .topbar-inner { padding-left: 10px; padding-right: 10px; gap: 4px; }
  .topbar-inner > .header-tool, .topbar-inner > .bm-menu > a, .topbar-inner > .cs-menu > summary, .topbar-inner > .help-btn, .topbar-inner > .theme-toggle, .topbar-inner > .user-menu > summary, .topbar-inner > .help-menu > summary, .topbar-inner > .bell-menu > summary { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
}

/* 1.21: Team und Zugänge full width, row action menu ("…"), company logo, profile edit */
.page-full { max-width: none; }
.page-full .form-inline select { width: auto; max-width: 100%; }
.row-menu { position: relative; display: inline-block; }
.row-menu > summary { list-style: none; min-width: 32px; justify-content: center; font-weight: 700; letter-spacing: .08em; }
.row-menu > summary::-webkit-details-marker { display: none; }
.row-menu-pop { position: absolute; right: 0; top: calc(100% + 4px); z-index: 70; min-width: 220px; max-width: calc(100vw - 24px); background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; display: grid; gap: 2px; text-align: left; }
.row-menu-pop form { margin: 0; }
.row-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: 0; border-radius: var(--radius); background: none; color: var(--ink);
  font: inherit; font-size: .9rem; text-align: left; text-decoration: none; cursor: pointer; white-space: nowrap; }
.row-menu-item:hover, .row-menu-item:focus-visible { background: var(--inset); color: var(--ink); }
.row-menu-item.is-danger { color: var(--err-ink); }
.row-menu-item.is-danger:hover, .row-menu-item.is-danger:focus-visible { background: var(--err-bg); }
.row-menu-sep { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; }
.company-logo-preview img { max-width: 240px; max-height: 80px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
/* CI1 company settings, section "Erscheinungsbild": colour picker next to the hex field, report header preview (SVG) */
.brand-field { display: flex; gap: 10px; align-items: center; }
.brand-field input[type="color"] { flex: 0 0 56px; width: 56px; height: 44px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.brand-field input[type="text"] { flex: 1 1 auto; min-width: 0; min-height: 44px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.brand-preview { display: block; width: 100%; max-width: 360px; height: auto; border-radius: var(--radius); }
.brand-preview text { font-family: Arial, Helvetica, sans-serif; }
@media (max-width: 600px) { .brand-form .btn { width: 100%; min-height: 44px; } .brand-preview { max-width: 100%; } }
.user-org-logo { margin: 6px 0 0; }
.user-org-logo img { max-width: 140px; max-height: 32px; padding: 3px 5px; background: #fff; border-radius: 4px; }
.profile-edit { margin-top: 8px; }
@media print { .row-menu { display: none !important; } }

/* 1.22: free-text search in list filter bars (templates/_list_search.php) */
.list-search { display: flex; gap: 6px; align-items: center; margin-left: auto; flex-wrap: nowrap; }
.list-search input[type=search] { width: 260px; max-width: 100%; }
.filter-bar .list-search { align-self: center; }
@media (max-width: 640px) {
  .list-search { margin-left: 0; width: 100%; }
  .list-search input[type=search] { flex: 1; width: auto; min-width: 0; }
}
/* 1.22: Mein Konto › Benachrichtigungen (templates/account/_notifications.php) */
.notify-form { display: grid; gap: 16px; }
.notify-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; margin: 0; display: grid; gap: 10px; }
.notify-group legend { font-weight: 700; padding: 0 6px; }
.notify-group > p { margin: 0; }
.notify-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 300px); gap: 4px 16px; align-items: center; }
.notify-row p { grid-column: 1 / -1; margin: 0; }
.notify-choices { display: grid; gap: 6px; }
.notify-always { margin: 0; }
@media (max-width: 640px) { .notify-row { grid-template-columns: 1fr; } }
/* Forms with longer text fields (audit findings, lessons learned, 1.23): wider columns.
   min(320px, 100%): this rule comes after the mobile ".form { minmax(0, 1fr) }" override, so a fixed 320 px
   minimum would make the column wider than the card on narrow screens (WCAG 1.4.10 Reflow, 320 px). */
.form-roomy { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Deadlines page (1.28): grouped list, filters and calendar subscription */
.deadline-filters { align-items: center; gap: 10px; }
.deadline-filters label { display: inline-flex; align-items: center; gap: 6px; }
.deadline-filters .seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.deadlines-table .group-row th { background: var(--inset); font-size: .82rem; font-weight: 700; color: var(--ink-soft); text-align: left; padding-top: 8px; padding-bottom: 8px; }
.deadlines-table td { vertical-align: top; }
.stack-sm > * + * { margin-top: 10px; }
.stack-sm fieldset { border: 0; margin: 0; padding: 0; }
.stack-sm legend { padding: 0; margin-bottom: 4px; }
@media (max-width: 640px) {
  .hide-sm { display: none; }
  .deadline-filters label { width: 100%; }
  .deadline-filters select { flex: 1; min-width: 0; }
}

/* Error page for uncaught errors (templates/error_server.php); the error dialog of scripts uses .modal (app.js cxFailDialog) */
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.error-actions [hidden] { display: none; }
.error-detail { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .8rem; margin-top: 24px; }
/* Management cockpit (D6, templates/cockpit/*): three duty cards, two columns below, one column on small screens */
.gl-duties { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 14px; }
.gl-duty { margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: break-word; }
.gl-duty p { margin: 0; }
.gl-duty .row-actions { margin-top: auto; padding-top: 8px; flex-wrap: wrap; }
.gl-ref { font-size: .8rem; color: var(--ink-faint); }
.gl-changes { margin: 0; padding-left: 1.1em; }
.gl-liability { margin-bottom: 14px; }
.gl-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.gl-two .panel { margin-top: 0; }
.gl-todo { list-style: none; margin: 0; padding: 0; }
.gl-todo li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.gl-todo li .badge { white-space: nowrap; }
.gl-proof, .gl-settings { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; }
.gl-settings p, .gl-settings .row-actions { flex-basis: 100%; margin: 0; }
.gl-confirm { display: grid; gap: 14px; max-width: 760px; }
.gl-confirm textarea { width: 100%; }
.gl-stepup { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; display: grid; gap: 10px; }
.gl-totp { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; }
.gl-note { white-space: pre-wrap; }
.gl-hash { overflow-wrap: anywhere; font-size: .8rem; }
.gl-training { max-width: 760px; display: grid; gap: 12px; }
.gl-row { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.gl-revoke summary { list-style: none; cursor: pointer; }
.gl-revoke form { display: grid; gap: 6px; margin-top: 6px; min-width: 200px; }
/* minmax(0, 1fr): with a plain 1fr the column took the min-content width of long words and scrolled the page at
   320 px (WCAG 1.4.10, 13.10.2026) */
@media (max-width: 1200px) { .gl-duties { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 800px) { .gl-two { grid-template-columns: 1fr; } }
@media print { .gl-duty .row-actions, .gl-proof, .gl-settings, .gl-revoke { display: none; } }

/* Maintenance and outage banner (templates/_system_notice.php, src/SystemNotices.php): maintenance amber (alert-warn),
   outage red (alert-error), decision 01.10.2026. Text and button wrap; no fixed height (200 % zoom, 320 px). */
.notice-band { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; justify-content: space-between; border-left-width: 4px; }
.notice-band > p { flex: 1 1 280px; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.notice-band .icon { vertical-align: -3px; margin-right: 2px; }
.notice-band .notice-extra { display: block; margin-top: 2px; }
.auth-card .notice-band { margin-bottom: 20px; }
.notice-band[hidden] { display: none; } /* browser-check bar (V3.7.5): stays hidden until browser-check.js unhides it */
.notice-preview { margin-top: 6px; }
.notice-preview .notice-band { margin: 6px 0 0; }
.notice-modes { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.notice-modes legend { margin-bottom: 6px; }
.notice-at { max-width: 320px; }
/* Focus target after hiding the banner (app.js): the content itself, without a frame around the whole page */
#main[tabindex="-1"]:focus, #auth-main[tabindex="-1"]:focus { outline: none; }

/* Administration › Sicherungen (templates/admin/backups.php, 1.37) */
.bk-band { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 0 0 16px; }
.bk-band > .panel { margin: 0; display: grid; gap: 2px; align-content: start; min-width: 0; }
.bk-band p { margin: 0; }
.bk-value { font-size: 1.1rem; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin: 0 0 16px; }
.bk-group { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 0; display: grid; gap: 12px; min-width: 0; align-content: start; }
.bk-group legend { font-weight: 700; padding: 0 6px; }
.bk-group .hint { display: block; font-weight: 400; }
.bk-confirm { border-style: solid; border-color: var(--accent); }
.bk-problems { margin: 4px 0 0; padding-left: 16px; }
.bk-subhead { margin-top: 20px; }
.bk-confirm { scroll-margin-top: 96px; }

/* Applicability check (D7, templates/applicability/index.php) */
.ac-steps ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; counter-reset: none; }
.ac-steps li { border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 10px; font-size: .9rem; background: var(--surface); }
.ac-steps li.is-current { border-color: var(--accent-dark); font-weight: 600; box-shadow: inset 0 -3px 0 var(--accent-dark); }
.ac-steps li.is-done { border-color: var(--line-strong); }
.ac-steps a { color: inherit; }
.ac-form { display: grid; gap: 18px; }
.ac-q .choice-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ac-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 16px; }
.ac-sector { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; background: var(--surface); }
.ac-sector summary { cursor: pointer; font-weight: 600; }
.ac-sector[open] summary { margin-bottom: 8px; }
.ac-type { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--line); }
.ac-type .check { flex: 1 1 260px; }
.ac-neg { display: flex !important; gap: 8px; align-items: center; flex: 0 0 auto; }
.ac-neg select { width: auto; }
.ac-items input, .ac-items select { min-width: 140px; }
.ac-results { display: grid; gap: 16px; }
.ac-law h2 .badge { margin-left: 8px; vertical-align: middle; }
.ac-reasons, .ac-open, .ac-deadlines { padding-left: 1.2em; }
.ac-cls { margin: 4px 0 8px; }
.ac-plan { list-style: none; padding: 0; display: grid; gap: 10px; }
.ac-plan p { margin: 2px 0 0 34px; }
.ac-discard { margin: 12px 0; }

/* AI fill-in assistant (Block 6.3 TR2, templates/ai/suggest.php, public/assets/ai-assist.js) */
.ai-suggest { margin: 6px 0; display: grid; gap: 6px; }
.ai-suggest-result { display: grid; gap: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; background: var(--surface); }
.ai-suggest-notice { margin: 0; font-weight: 600; color: var(--accent-dark); }
.ai-suggest-text { margin: 0; white-space: pre-wrap; }
.ai-suggest-warn { margin: 0; }
.ai-suggest-sources { margin: 0; }
.ai-suggest-error { margin: 0; color: var(--err-ink); }
.ai-suggest-actions { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ai-suggest-help summary { cursor: pointer; }
.ai-suggest-help p { margin: 4px 0 0; }

/* Start page of the Complass team (templates/admin/start.php, src/StaffDashboard.php) */
.staff-kpi { display: flex; flex-direction: column; gap: 2px; color: inherit; }
.staff-kpi:hover, .staff-kpi:focus-visible { text-decoration: none; border-color: var(--accent); }
.staff-kpi.is-alert { border-color: var(--err-line); }
.staff-rows { list-style: none; padding: 0; margin: 10px 0; display: grid; font-size: .9rem; }
.staff-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--line); }
.staff-rows li:first-child { border-top: 0; }
.staff-row-label { min-width: 0; overflow-wrap: anywhere; }
.staff-row-value { text-align: right; font-variant-numeric: tabular-nums; max-width: 22ch; overflow-wrap: anywhere; }
.staff-bars .dash-bars-label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.staff-kpis { align-items: stretch; }
/* Narrow screens (320 px, 200 % zoom): one key figure per row, tile rows show the value below the label */
@media (max-width: 480px) {
  .staff-kpis .dash-s { grid-column: 1 / -1; }
  .staff-rows li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .staff-row-value { text-align: left; max-width: none; }
}
/* Badges in tile rows hold a short word or value only (package A); a long text goes to .staff-row-text below */
.staff-row-value .badge { white-space: nowrap; }
.staff-rows li.is-stacked { row-gap: 2px; }
.staff-row-text { grid-column: 1 / -1; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; overflow-wrap: anywhere; }
/* Tiles flow in two balanced columns without empty areas next to short tiles; one column below 1100 px */
.staff-cols { columns: 2; column-gap: 16px; margin-bottom: 18px; }
.staff-cols > .dash-tile { break-inside: avoid; margin: 0 0 16px; display: flow-root; }
@media (max-width: 1100px) { .staff-cols { columns: 1; } }
@media (max-width: 640px) { .staff-cols > .dash-tile { margin-bottom: 12px; } }
/* Link line at the end of a tile: recognisable as a link (underline and arrow), visible focus, target at least 24 px */
.tile-more { margin: 0; padding-top: 10px; font-size: .9rem; }
.tile-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; font-weight: 600; color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.tile-more a:hover { text-decoration-thickness: 2px; }
.tile-more a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
.tile-more .icon { width: 14px; height: 14px; flex-shrink: 0; }
.scope-note { display: flex; align-items: flex-start; gap: 6px; margin: -6px 0 18px; }
.scope-note .icon { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.scope-note a { text-decoration: underline; text-underline-offset: 3px; }

/* Supplier links: layout of the link forms (templates/suppliers/show.php); the search field itself is combobox.js */
.link-pick { display: grid; gap: 6px; margin-top: 10px; max-width: 720px; }
.link-pick > label { font-weight: 600; font-size: .9rem; }
.link-pick-row { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.link-pick-row > select, .link-pick-row > .cx-combo { flex: 1 1 280px; min-width: 0; max-width: 100%; }
.link-pick > p { margin: 0; }

/* Search field for selections (public/assets/combobox.js, docs/ACCESSIBILITY.md "Search fields") */
.cx-native { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; pointer-events: none; }
.cx-combo { position: relative; display: flex; font-weight: 400; flex-wrap: wrap; align-items: center; gap: 4px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); }
.cx-combo:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.cx-combo .cx-input { flex: 1 1 120px; min-width: 0; width: auto; border: 0; padding: 6px 2px; background: transparent; color: var(--ink); box-shadow: none; outline: none; font: inherit; font-weight: 400; }
.cx-chips { display: contents; }
.cx-chip { display: inline-flex; align-items: center; gap: 2px; max-width: 100%; padding: 2px 2px 2px 8px; border-radius: 999px; background: var(--inset); border: 1px solid var(--line-strong); color: var(--ink); font-size: .85rem; line-height: 1.3; overflow-wrap: anywhere; }
.cx-chip-x { min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); font-size: 1rem; line-height: 1; cursor: pointer; }
.cx-chip-x:hover, .cx-chip-x:focus-visible { background: var(--line); color: var(--ink); }
.cx-chip-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.cx-pop { position: fixed; z-index: 60; box-sizing: border-box; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow-md); }
.cx-list { max-height: 260px; overflow-y: auto; margin: 0; padding: 4px 0; list-style: none; }
.cx-opt { padding: 7px 12px; cursor: pointer; overflow-wrap: anywhere; }
.cx-opt:hover { background: var(--inset); }
.cx-opt[aria-selected="true"] { background: var(--inset); outline: 2px solid var(--accent); outline-offset: -2px; }
.cx-sub { display: block; font-size: .8rem; color: var(--ink-soft); }
.cx-note { margin: 0; padding: 6px 12px; color: var(--ink-soft); font-style: italic; border-top: 1px solid var(--line); }
.cx-list[hidden] + .cx-note { border-top: 0; }
/* ASF: bottom sheet for per-row asset selects (public/assets/asset-sheet.js): bottom sheet at phone width, centred window above */
dialog.asset-sheet { box-sizing: border-box; width: min(520px, calc(100vw - 32px)); max-height: min(80vh, 640px); margin: auto; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: hidden; }
dialog.asset-sheet[open] { display: flex; flex-direction: column; gap: 8px; }
dialog.asset-sheet::backdrop { background: rgba(12, 24, 48, .5); }
.asset-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.asset-sheet-head h2 { margin: 0; font-family: var(--font-sans); font-size: 1.05rem; }
.asset-sheet-input { width: 100%; box-sizing: border-box; min-height: 44px; }
.asset-sheet-list { flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; list-style: none; overflow-y: auto; }
.asset-sheet-opt { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.asset-sheet-opt:hover, .asset-sheet-opt:focus-visible { background: var(--inset); outline: 2px solid var(--accent); outline-offset: -2px; }
.asset-sheet-note { margin: 0; }
.asset-sheet-btn { max-width: 100%; overflow-wrap: anywhere; text-align: left; }
@media (max-width: 600px) { dialog.asset-sheet { width: 100vw; max-width: 100vw; margin: auto 0 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; max-height: 85vh; } }
@media (pointer: coarse) { .asset-sheet-btn, .asset-sheet-head .btn { min-height: 44px; } }

/* Dashboard: running reporting deadlines as a band below the key figures (Marc, 05.10.2026, draft C) */
.dash-tile[data-id="deadlines"].dash-l { border-left: 4px solid var(--info-ink, var(--accent)); }
.dash-tile[data-id="deadlines"].dash-l:has(.dash-band-soon) { border-left-color: var(--warn-ink); }
.dash-tile[data-id="deadlines"].dash-l:has(.dash-band-over) { border-left-color: var(--err-ink); }
.dash-band { display: grid; grid-template-columns: minmax(160px, auto) minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; }
.dash-band-figure .dash-figure { font-size: 1.5rem; margin: 0 0 2px; white-space: nowrap; }
.dash-figure.is-soon { color: var(--warn-ink); }
.dash-band-figure p { margin: 0; }
.dash-band-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.dash-band-list li { overflow-wrap: anywhere; }
.dash-band-list .badge { margin-left: 4px; }
.dash-band-action { align-self: center; white-space: nowrap; }
/* 1040 px: from 761 px the sidebar (264 px) takes its width from the content, so the band stacks earlier (ADR 0031) */
@media (max-width: 1040px) {
  .dash-band { grid-template-columns: minmax(0, 1fr); }
  .dash-band-figure .dash-figure { white-space: normal; }
  .dash-band-action { justify-self: start; }
}
@media print { .dash-band-action { display: none; } }

/* Jump targets (#anchor) never end up under the sticky top bar (62 px portal, 76-88 px website header). Zero specificity,
   so every explicit scroll-margin-top above (.jump-target, .law-section, #konfigurator, …) still wins. Scroll containers
   of their own (handbook box, dialogs) keep a small margin; the handbook page itself uses scroll-padding (see .hb-layout). */
:where([id]) { scroll-margin-top: 80px; }
html:has(.lp-head) :where([id]) { scroll-margin-top: 104px; }
.hb-main [id], dialog [id] { scroll-margin-top: 12px; }

/* Entwicklerdokumentation (API P1, templates/api_doku/index.php, src/ApiDocs.php) */
.api-doku-body { padding: 20px 24px; }
.api-doku-body h2 { margin: 32px 0 10px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint); }
.api-doku-body h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.api-doku-body h3 { margin: 26px 0 8px; }
.api-doku-body h4 { margin: 18px 0 6px; }
.api-doku-body h2, .api-doku-body h3, .api-doku-body h4 { scroll-margin-top: 80px; }
.api-doku-body p, .api-doku-body li { max-width: 860px; }
.api-doku-body code { font-size: .88em; overflow-wrap: anywhere; }
.api-doku-body pre.api-code { margin: 8px 0 16px; padding: 10px 12px; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; font-size: .85rem; line-height: 1.45; }
.api-doku-body pre.api-code code { font-size: inherit; overflow-wrap: normal; white-space: pre; }
.api-doku-body .table-wrap { margin: 8px 0 16px; }
.api-doku-body blockquote.hb-callout { margin: 10px 0 14px; }
.api-doku-body blockquote.hb-callout p { margin: 0; }
.api-doku-body hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.api-doku .hb-toc-part a { color: inherit; }
@media print { .api-doku .help-toc, .hb-actions { display: none !important; } .api-doku-body pre.api-code code { white-space: pre-wrap; } }

/* Incident GDPR track (Datenpanne): stage groups per reporting track, GDPR switch, check groups */
.inc-track-head { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 14px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); }
.inc-track-head:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.inc-track-head h3 { margin: 0; }
.inc-gdpr-switch { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.inc-gdpr-switch h3 { margin: 0 0 6px; }
.inc-fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.inc-fieldset legend { font-weight: 600; font-size: .88rem; margin-bottom: 4px; padding: 0; }
.inc-stage.is-asap { border-left-color: var(--accent); }
/* ---------- Notfallmanagement (BCM1, templates/bcm/) ----------
   Impact matrix: levels as text and colour (WCAG: the level is always written out, colour only supports it). */
.bcm-matrix th[scope="row"] { min-width: 12rem; }
.bcm-matrix select { min-width: 9.5rem; }
.bcm-matrix input[type="text"] { min-width: 12rem; }
.bcm-cat-hint { font-size: .8rem; font-weight: 400; }
/* BCM1 TR2: phone and mail links in the crisis team list, one per line, 24 px targets (WCAG 2.2 2.5.8) */
.bcm-contact a { display: inline-block; min-height: 24px; line-height: 24px; }
/* A fieldset is min-content wide by default; let the steps table scroll inside .table-wrap at 320 px (WCAG 1.4.10) */
.bcm-fieldset { min-width: 0; }
.bcm-lvl-1 { background: var(--ok-bg); color: var(--ok-ink); }
.bcm-lvl-2 { background: var(--info-bg); color: var(--info-ink); }
.bcm-lvl-3 { background: var(--warn-bg); color: var(--warn-ink); }
.bcm-lvl-4 { background: var(--err-bg); color: var(--err-ink); }
.bcm-matrix tfoot th, .bcm-matrix tfoot td { border-top: 2px solid var(--line-strong); }
.text-err { color: var(--err-ink); }
/* Manual search (templates/manual/index.php): hit list stays short so the manual text remains in view */
.hb-search { margin-bottom: 12px; max-width: calc(240px + 24px + 900px); } /* as wide as contents and text below (.help-layout, .help-chapter) */
.hb-search .hb-results { max-height: 40vh; overflow-y: auto; overscroll-behavior: contain; }
.hb-search .hb-results .hb-no { margin-right: 2px; }
/* Tile "Heute zu tun": switch "Meine | Alle, die ich sehen darf" above the list */
/* VM1 (07.10.2026): "Meldungen im Überblick" (one tile per reporting track) and report drafts per stage.
   State is always also written as text (badges); the left border only repeats it (WCAG 1.4.1). */
.inc-tracks { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.inc-track { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); background: var(--inset); padding: 10px 12px; min-width: 0; }
.inc-track h3 { margin: 0 0 2px; font-size: 1rem; overflow-wrap: anywhere; }
.inc-track p { margin: 4px 0; }
.inc-track.is-over { border-left-color: var(--danger-fill); }
.inc-track.is-soon { border-left-color: var(--accent-bright); }
.inc-track.is-ok { border-left-color: var(--info-line); }
.inc-track.is-done { border-left-color: var(--ok-fill, var(--ok-line)); }
.inc-track-add { margin: 6px 0; }
.inc-draft { margin: 8px 0 12px; }
.inc-draft h4 { margin: 4px 0; font-size: .95rem; }
.inc-draft-table { width: 100%; table-layout: fixed; }
.inc-draft-table th[scope="row"] { width: 38%; font-weight: 600; vertical-align: top; overflow-wrap: anywhere; }
.inc-draft-table td { vertical-align: top; overflow-wrap: anywhere; }
.inc-draft-table td:last-child, .inc-draft-table thead th:last-child { width: 9em; text-align: right; }
.inc-draft-table td:last-child .btn { white-space: nowrap; max-width: 100%; }
.inc-draft-table tr.is-missing th[scope="row"] { box-shadow: inset 3px 0 0 var(--danger-fill); }
.inc-draft-table tr.is-changed td:nth-child(2) { background: var(--info-bg); }
.inc-draft-marks { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.inc-draft-value { white-space: normal; }
.inc-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 2px 10px; }
@media (max-width: 560px) {
  .inc-draft-table, .inc-draft-table tbody, .inc-draft-table tr, .inc-draft-table th[scope="row"], .inc-draft-table td { display: block; width: auto; }
  .inc-draft-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .inc-draft-table td:last-child { text-align: left; }
  .inc-draft-table tr { border-bottom: 1px solid var(--line); padding: 6px 0; }
}

/* VM1 P3 (10.10.2026): one questionnaire with a suggestion per reporting track (templates/incidents/_assessment.php).
   The suggestion is always written as text (badge); the left border only repeats it (WCAG 1.4.1). */
.inc-assess-section { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.inc-assess-section > legend { padding: 0; margin: 0 0 4px; }
.inc-suggest { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.inc-suggest-item { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: var(--radius); background: var(--inset); padding: 10px 12px; min-width: 0; }
.inc-suggest-item h4 { margin: 0 0 2px; font-size: 1rem; overflow-wrap: anywhere; }
.inc-suggest-item p { margin: 4px 0; }
.inc-suggest-item.is-ja { border-left-color: var(--danger-fill); }
.inc-suggest-item.is-unklar { border-left-color: var(--accent-bright); }
.inc-suggest-item.is-nein { border-left-color: var(--ok-fill, var(--ok-line)); }
.inc-suggest-add { margin-top: 6px; }
/* Training proof page (MB1 package S, templates/trainings/index.php): participant checklists scroll, courses fold */
.tr-people { max-height: 18rem; overflow-y: auto; padding: 4px 2px; border: 1px solid var(--line); border-radius: var(--radius); }
.tr-course { border-top: 1px solid var(--line); padding: 10px 0; }
.tr-course > summary { cursor: pointer; overflow-wrap: anywhere; }
.tr-course > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.help-menu, .bell-menu { order: 2; position: relative; flex-shrink: 0; display: inline-flex; }
/* Top bar rule (docs/NAVIGATION.md "Top bar"): every icon button has the same box and sits on one line. Help and bell
   became <details> in 1.58 and inherited the global "details { margin: 0 0 10px }", which lifted them 5 px; the
   wrappers carry no margin and centre their summary, the summary gets the same 34 x 34 box as the other tools, the
   unread badge stays absolutely positioned (.bell-count) and never changes the box. */
.topbar-inner > .help-menu, .topbar-inner > .bell-menu { margin: 0; align-items: center; align-self: center; }
.topbar-inner > .help-menu > summary, .topbar-inner > .bell-menu > summary {
  box-sizing: border-box; width: 34px; height: 34px; min-width: 34px; min-height: 34px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.topbar-inner > .help-menu > summary .icon, .topbar-inner > .bell-menu > summary .icon { width: 16px; height: 16px; display: block; }
@media (max-width: 359px) {
  .topbar-inner > .help-menu > summary, .topbar-inner > .bell-menu > summary { width: 32px; min-width: 32px; height: 32px; min-height: 32px; }
}
.help-menu > summary, .bell-menu > summary { list-style: none; cursor: pointer; position: relative; }
.help-menu > summary::-webkit-details-marker, .bell-menu > summary::-webkit-details-marker { display: none; }
.help-menu[open] > summary { background: var(--dark-2); border-color: var(--accent-bright); }
.help-pop, .bell-pop { width: 280px; gap: 2px; padding: 8px; }
/* Bell menu: label and count stay on one line each ("Posteingang Administrator   3 offen"). */
.bell-pop { width: 360px; }
.user-row[aria-current] { background: var(--accent-tint); font-weight: 700; }
.user-opener { position: relative; }
.cs-sub .user-sub-body { padding: 6px 0 4px; font-size: .9rem; }
.cs-pop-body p { margin: 0 0 10px; }
.cs-pop-body .form { gap: 10px; margin-bottom: 12px; }
.cs-pop-body .form input, .cs-pop-body .form select { width: 100%; }
.cs-on-label { color: var(--ok-ink); font-weight: 700; }
@media print { .help-menu, .bell-menu { display: none !important; } }

/* ---------- UX1 package C: list pages (key figures as chips, views and filters as a fold-out menu) ---------- */
.cov-stats.kpi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cov-stats.kpi-chips .panel { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 7px; padding: 6px 12px; border-radius: 999px; box-shadow: none; min-height: 36px; max-width: 100%; }
.cov-stats.kpi-chips strong { font-size: .98rem; line-height: 1.3; }
.cov-stats.kpi-chips span { font-size: .84rem; color: var(--ink-soft); }
.cov-stats.kpi-chips span.small { flex-basis: 100%; font-size: .76rem; color: var(--ink-faint); }
.cov-stats.kpi-chips .panel.is-alert { border-color: var(--err-line); background: var(--err-bg); }
.cov-stats.kpi-chips .panel.is-alert span { color: var(--err-ink); }
.cov-stats.kpi-chips .panel[aria-current] { background: var(--dark); border-color: var(--dark); }
.cov-stats.kpi-chips .panel[aria-current] strong, .cov-stats.kpi-chips .panel[aria-current] span { color: var(--on-dark); }
.cov-stats.kpi-chips .progress { display: none; }
.list-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin-bottom: 12px; }
.list-search { flex: 1 1 420px; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin: 0; }
.list-search .list-search-bar { flex: 1 1 260px; margin: 0; min-width: 0; }
.list-search .list-search-bar label { min-width: 0; width: 100%; }
.list-search .list-search-bar input[type=search] { max-width: none; width: 100%; }
.list-search > .row-actions { margin: 0; }
.list-views, .list-filter { position: relative; }
.list-views > summary, .list-filter > summary { list-style: none; min-height: 38px; }
.list-views > summary::-webkit-details-marker, .list-filter > summary::-webkit-details-marker { display: none; }
.list-views[open] > summary, .list-filter[open] > summary { border-color: var(--accent); background: var(--accent-tint); }
.list-views-pop, .list-filter-panel { position: absolute; top: calc(100% + 6px); z-index: 30; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 12px; }
.list-views-pop { left: 0; width: min(520px, calc(100vw - 32px)); }
.list-views-pop .filter-bar { flex-direction: column; align-items: stretch; gap: 6px; }
.list-views-pop .filter-bar > a.btn, .list-views-pop .vuln-view > a.btn { justify-content: flex-start; }
.list-views-pop .vuln-view > a.btn { flex: 1; }
.list-filter-panel { right: 0; width: min(880px, calc(100vw - 32px)); max-height: min(70vh, 640px); overflow: auto; overscroll-behavior: contain; }
.list-filter-panel .filter-bar label { min-width: 180px; flex: 1 1 180px; }
@media (max-width: 760px) {
  .list-tools > .list-views, .list-search .list-filter { flex: 1 1 auto; }
  .list-views-pop, .list-filter-panel { position: static; width: auto; max-height: none; margin-top: 6px; box-shadow: none; }
}
@media print { .list-views, .list-filter { display: none !important; } }

/* ---------- UX1 package C: project plan in read mode ---------- */
.plan-sec-head { display: flex; flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.plan-sec-head h2 { margin: 0; }
.plan-edit-row > td { background: var(--inset); }
.plan-edit-row .audit-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; }
.plan-edit-row .audit-row label { display: grid; gap: 3px; font-size: .8rem; font-weight: 600; color: var(--ink-soft); min-width: 150px; }
.plan-edit-row .audit-row label.grow { flex: 1 1 220px; }
.plan-add { margin-top: 10px; }
.plan-add > summary { list-style: none; display: inline-flex; }
.plan-add > summary::-webkit-details-marker { display: none; }
.plan-add[open] > summary { margin-bottom: 10px; }
.btn-danger-text { color: var(--err-ink) !important; }

/* ---------- UX1 package C: page navigation for long pages (templates/_pagenav.php, pagenav.js), styled like .stepnav ---------- */
.pagenav { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 19; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pagenav[hidden] { display: none; }
body[data-cs-on] .pagenav { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }
.pagenav-bar { display: flex; flex-direction: column; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.pagenav-bar button { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: transparent; color: var(--ink); cursor: pointer; }
.pagenav-bar button[hidden] { display: none; }
.pagenav-bar button:hover:not(:disabled) { background: var(--inset-alt); color: var(--accent-dark); }
.pagenav-bar button:disabled { color: var(--ink-faint); opacity: .45; cursor: default; }
.pagenav-bar button[aria-expanded="true"] { background: var(--accent-tint); }
.pagenav-bar .icon { width: 18px; height: 18px; }
.pagenav-pos { font-size: .68rem; font-weight: 700; color: var(--ink-faint); text-align: center; padding: 0 0 3px; font-variant-numeric: tabular-nums; }
.pagenav-toc { width: min(320px, calc(100vw - 32px)); max-height: min(60vh, 440px); overflow-y: auto; overscroll-behavior: contain; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 8px; }
.pagenav-toc[hidden] { display: none; }
.pagenav-toc-title { margin: 2px 6px 6px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
.pagenav-toc ol { list-style: none; margin: 0; padding: 0; }
.pagenav-toc a { display: block; padding: 7px 10px; border-radius: var(--radius); font-size: .88rem; font-weight: 500; color: var(--ink-soft); text-decoration: none !important; }
.pagenav-toc a:hover { background: var(--inset-alt); color: var(--accent-dark); }
.pagenav-toc a[aria-current] { background: var(--accent-tint); color: var(--ink); font-weight: 700; }
@media (max-width: 600px) {
  .pagenav { right: 8px; left: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
  .pagenav-bar { flex-direction: row; }
  .pagenav-pos { display: none; }
  .pagenav-toc { width: auto; align-self: stretch; max-height: 50vh; }
  body.has-pagenav .page { padding-bottom: 76px; }
}
@media print { .pagenav { display: none !important; } }
body:has(.sticky-actions) .pagenav { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }
/* WCAG 2.2 2.4.11: focused elements scroll into view above the page navigation */
html:has(body.has-pagenav) { scroll-padding-bottom: 80px; }
/* z-index 19: below the header (20), so open header menus (account, help, bell) always cover the page navigation */
/* Header menus scroll in themselves: the header is sticky, so a taller menu (account menu with "Gemeinsam arbeiten"
   opened, 320 px) could otherwise not be reached by scrolling the page (WCAG 1.4.10 reflow) */
.user-pop { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); overflow-y: auto; overscroll-behavior: contain; }

/* "Mein Tag" (admin dashboards package B, templates/admin/start.php): filter chips, status lights with word and sign,
   one to-do list with action buttons, 14 days and development side by side; one column on narrow screens and zoom */
.myday-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.myday-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .9rem; text-decoration: none; }
.myday-chip:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.myday-chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--surface); font-weight: 600; }
.myday-chip:focus-visible, .myday-action:focus-visible, .myday-light a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.myday-h { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 12px; }
.myday-count { color: var(--ink-faint); letter-spacing: 0; }
.myday-block { margin: 0 0 20px; }
.myday-lights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.myday-light { display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-left: 5px solid var(--line-strong); border-radius: var(--radius-lg); padding: 12px 14px; box-shadow: var(--shadow-sm); min-width: 0; }
.myday-light-title { font-size: .76rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0; font-family: inherit; }
.myday-light-state { font-size: 1.05rem; font-weight: 600; margin: 0; }
.myday-sym { display: inline-block; min-width: 1.1em; }
.myday-light-reason { font-size: .86rem; color: var(--ink-soft); margin: 0; flex: 1; overflow-wrap: anywhere; }
.myday-light-link { margin: 4px 0 0; font-size: .86rem; }
.myday-light a { text-decoration: underline; text-underline-offset: 2px; display: inline-block; min-height: 24px; }
.myday-light.is-err { border-left-color: var(--err-ink); } .myday-light.is-err .myday-light-state { color: var(--err-ink); }
.myday-light.is-warn { border-left-color: var(--warn-ink); } .myday-light.is-warn .myday-light-state { color: var(--warn-ink); }
.myday-light.is-ok { border-left-color: var(--ok-ink); } .myday-light.is-ok .myday-light-state { color: var(--ok-ink); }
.myday-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 20px; align-items: start; margin: 0 0 20px; }
.myday-side { display: grid; gap: 20px; min-width: 0; }
.myday-todo { list-style: none; margin: 0; padding: 0; }
.myday-todo li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.myday-todo li:first-child { border-top: 0; }
.myday-rank { font-size: .78rem; font-weight: 600; text-align: center; border: 1px solid; border-radius: var(--radius); padding: 3px 6px; }
.myday-rank.is-err { background: var(--err-bg); color: var(--err-ink); border-color: var(--err-line); }
.myday-rank.is-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.myday-rank.is-info, .myday-rank.is-muted { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.myday-todo-main { display: flex; flex-direction: column; min-width: 0; }
.myday-todo-title { font-weight: 600; overflow-wrap: anywhere; }
.myday-todo-sub { font-size: .86rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.myday-area { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin-right: 4px; }
.myday-action { white-space: nowrap; min-height: 32px; }
.myday-foot { margin: 10px 0 0; color: var(--ink-soft); }
.myday-rows { list-style: none; margin: 0 0 8px; padding: 0; font-size: .92rem; }
.myday-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.myday-rows li:first-child { border-top: 0; }
.myday-rows .is-alert { color: var(--err-ink); }
.myday-val { text-align: right; }
.myday-delta { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }
.myday-act td, .myday-act th { white-space: normal; }
.myday-act tbody th { text-transform: none; letter-spacing: 0; font-size: inherit; color: var(--ink); font-weight: 600; }
.myday-rows a, .myday-foot a, .myday-act a { text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 1200px) { .myday-lights { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .myday-lights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .myday-grid { grid-template-columns: minmax(0, 1fr); }
  .myday-todo li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .myday-rank { justify-self: start; }
  .myday-action { justify-self: start; }
}
@media (max-width: 640px) {
  .myday-act thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .myday-act, .myday-act tbody, .myday-act tr, .myday-act th, .myday-act td { display: block; width: 100%; }
  .myday-act tr { padding: 8px 0; border-top: 1px solid var(--line); }
  .myday-act tbody th, .myday-act td { border: 0; padding: 2px 0; }
  .myday-act td::before { content: attr(data-label) ": "; color: var(--ink-faint); }
}
@media (max-width: 420px) {
  .myday-lights { grid-template-columns: minmax(0, 1fr); }
  .myday-rows li { flex-wrap: wrap; }
}

/* Whitepaper direct send: preview of the mail text (templates/admin/whitepaper_send.php), wraps at 320 px */
pre.mail-preview { margin: 8px 0 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); font-family: inherit; font-size: .9rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow-y: auto; }

/* Website entry of a partner (partner portal ?r=partner-website, administration ?r=admin-partner): preview of /partners */
.pw-preview { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; }
.pw-preview-logo { display: flex; align-items: center; justify-content: center; width: 200px; max-width: 100%; height: 80px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg, 10px); }
.pw-preview-logo img { max-width: 100%; max-height: 64px; object-fit: contain; }
.pw-preview-logo span { font-size: 1.8rem; font-weight: 600; color: #1f3b57; }
.pw-preview p { margin: 0 0 2px; }

/* Guided configurator (pricing-wizard.js, Marc 07.10.2026): one step at a time with JavaScript, all panels without */
.pr-wz-panel { display: grid; gap: 14px; min-width: 0; }
.pr-wz-panel[hidden], .pr-wz-bar[hidden], .pr-wz-foot[hidden], .pr-wz-mode[hidden], .pr-module[hidden] { display: none; }
.pr-wz-title { margin: 6px 0 0; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; }
.pr-wz-title:focus { outline: none; }
.pr-wz-title:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 4px; }
.pr-wz-intro { margin: 0; color: var(--ink-soft); }
.pr-wz-hint { margin: 0; font-weight: 600; color: var(--ink-soft); }
.pr-wz-soon { margin: 14px 0 0; font-size: .9rem; color: var(--ink-soft); }
.pr-wz-included { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--inset); color: var(--ink-soft); font-size: .9rem; }
.pr-wz-included .icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: var(--ok-ink); }
.pr-wz-bar { display: grid; gap: 8px; scroll-margin-top: 96px; }
.pr-wz-title { scroll-margin-top: 96px; }
.pr-wz-count { margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.pr-wz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.pr-wz-step { width: 100%; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; text-align: left; cursor: pointer; }
.pr-wz-step:hover { border-color: var(--accent); }
.pr-wz-step:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.pr-wz-step .pr-step-no { flex-shrink: 0; background: var(--inset); color: var(--ink); }
.pr-wz-step[aria-current="step"] { border-color: var(--accent); background: var(--accent-tint); font-weight: 700; }
.pr-wz-step[aria-current="step"] .pr-step-no { background: var(--dark); color: var(--on-dark); }
/* Long step names ("Zusammenfassung") wrap inside the button instead of widening the page (WCAG 1.4.10 at 200 % zoom) */
.pr-wz-step span:last-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; }
.pr-wz-foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pr-wz-foot .btn { min-height: 44px; }
.pr-wz-mode { margin: 0; text-align: center; }
.pr-wz-toggle { background: none; border: 0; padding: 8px; font: inherit; font-size: .9rem; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
.pr-wz-toggle:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.pr-conf:not(.is-wz) .pr-wz-desk { display: none; }
@media (max-width: 900px) {
  .pr-wz-desk { display: none; }
  /* Mobile guided mode: the price bar shows the total, the full summary belongs to the last step (5, PR2) */
  .pr-conf.is-wz:not([data-wz-current="5"]) .pr-summary { display: none; }
  .pr-conf.is-wz[data-wz-current="5"] ~ .pr-sticky { display: none; }
}
@media (max-width: 600px) {
  .pr-wz-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pr-wz-step { flex-direction: column; justify-content: center; gap: 2px; padding: 6px 2px; font-size: .74rem; text-align: center; }
  .pr-wz-step span:last-child { overflow-wrap: anywhere; hyphens: auto; }
}
@media (prefers-reduced-motion: reduce) { .pr-wz-step { transition: none; } }
/* Plan and bundle scope (Marc 07.10.2026, 18:33): who it fits, contents, difference to the smaller plan */
.pr-option-fit { font-size: .88rem; color: var(--ink); margin-top: 2px; }
.pr-option-diff { font-size: .82rem; color: var(--ink-soft); border-top: 1px solid var(--line); margin-top: 6px; padding-top: 6px; }
.pr-wz-reco { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius); background: var(--accent-tint); font-size: .92rem; }
.pr-wz-reco[hidden] { display: none; }
.pr-wz-reco > .icon { width: 18px; height: 18px; flex-shrink: 0; }
.pr-wz-reco > span { flex: 1 1 220px; }
.pr-wz-reco .btn { min-height: 44px; }
/* Staff whitepaper library (templates/admin/whitepaper_library.php): one row per whitepaper, buttons bottom-aligned
   with the title block (.row-actions-end), wrapping below it at narrow widths (320 px). */
.wp-library { list-style: none; margin: 0; padding: 0; }
.wp-library > li { justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--line); }
.wp-library > li:first-child { border-top: 0; padding-top: 0; }
.wp-library-meta { flex: 1 1 280px; min-width: 0; overflow-wrap: anywhere; }
/* ---------- Schulung: Lektionen in Schritten (TV1, templates/training/lesson.php, _block.php) ----------
   Illustrationsfarben als eigene Tokens, damit Schaubilder und Titelbilder im Dunkelmodus lesbar bleiben
   (Tiefsee-Flächen würden auf dunklem Grund verschwinden). Kontraste: Text in Kästen nutzt --ink (AA). */
:root {
  --ill-stroke: #a8761a; --ill-soft: #f6ead0; --ill-deep: #1c3560; --ill-sea: #2f7f77; --ill-paper: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ill-stroke: #e0a93b; --ill-soft: #2b2a23; --ill-deep: #9fb6dc; --ill-sea: #7fd3cb; --ill-paper: #1a2c4d; }
}
:root[data-theme="dark"] { --ill-stroke: #e0a93b; --ill-soft: #2b2a23; --ill-deep: #9fb6dc; --ill-sea: #7fd3cb; --ill-paper: #1a2c4d; }

.tl-head { flex-wrap: nowrap; }
.tl-head > div:first-child { min-width: 0; flex: 1 1 auto; }
.tl-head h1 { margin-bottom: 6px; }
.tl-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; color: var(--ink-faint); font-size: .88rem; align-items: center; }
.tl-meta span { display: inline-flex; align-items: center; gap: 5px; }
.tl-meta .icon { width: 15px; height: 15px; }
.tl-ill { width: 168px; flex: 0 0 auto; }
.tl-ill svg { display: block; width: 100%; height: auto; }
@media (max-width: 720px) { .tl-ill { display: none; } }

.tl-stepper { margin: 0 0 14px; display: grid; gap: 8px; }
.tl-stepper-label { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.tl-stepper-label strong { color: var(--ink); }

.tl-step { min-height: 320px; display: grid; align-content: start; gap: 14px; }
.tl-step > * { margin: 0; }
.tl-step h2 { font-size: clamp(1.25rem, 2.4vw, 1.5rem); outline: none; }
.tl-step h2:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.tl-step p, .tl-step li { max-width: 70ch; line-height: 1.6; }
.tl-list, .tl-numbered, .tl-goals { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.tl-goals { list-style: none; padding-left: 0; gap: 8px; }
.tl-goals li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.tl-goals .icon { width: 20px; height: 20px; color: var(--ok-fill); margin-top: 3px; }
.tl-numbered { list-style: none; padding-left: 0; counter-reset: tl; }
.tl-numbered li { counter-increment: tl; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; }
.tl-numbered li::before { content: counter(tl); width: 24px; height: 24px; border-radius: 50%; background: var(--accent-dark); color: var(--on-accent); font-weight: 700; font-size: .8rem; display: grid; place-items: center; margin-top: 2px; }

.tl-callout { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 14px 16px 14px 14px; border-radius: var(--radius); border: 1px solid; }
.tl-callout > .icon { width: 24px; height: 24px; }
.tl-callout p { margin: 0; color: var(--ink); }
.tl-callout .tl-callout-title { font-weight: 700; margin-bottom: 2px; }
.tl-callout-important { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.tl-callout-important .tl-callout-title { color: var(--warn-ink); }
.tl-callout-example { background: var(--info-bg); border-color: var(--info-line); color: var(--info-ink); }
.tl-callout-example .tl-callout-title { color: var(--info-ink); }
.tl-callout-remember { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.tl-callout-remember .tl-callout-title { color: var(--ok-ink); }

.tl-quote { margin: 0; border-left: 4px solid var(--accent); background: var(--inset); padding: 12px 16px; border-radius: 0 var(--radius) var(--radius) 0; }
.tl-quote blockquote { margin: 0; }
.tl-quote blockquote p { font-family: var(--font-display); font-size: 1.08rem; margin: 0 0 6px; color: var(--ink); }
.tl-quote figcaption { font-size: .84rem; color: var(--ink-faint); }

.tl-figure { margin: 0; display: grid; gap: 8px; }
.tl-figure figcaption { font-size: .86rem; color: var(--ink-faint); }
/* Bei 320 px und 200 % Zoom scrollt nur das Schaubild in seinem Kasten, nie die Seite (Textfassung darunter) */
.tl-figure-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); padding: 10px; }
.tl-figure-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* keyboard scrolling of a wide figure (WCAG 2.1.1, axe scrollable-region-focusable) */
.tl-figure-scroll svg { display: block; width: 100%; min-width: 560px; height: auto; }
.tl-shot img { display: block; max-width: 100%; height: auto; border: 1px solid var(--line-strong); border-radius: var(--radius); }
.tl-longdesc { font-size: .9rem; }
.tl-longdesc summary, .tl-check summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; }
.tl-longdesc p, .tl-check details p { margin: 8px 0 0; }

.tl-check { border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px 16px; }
.tl-check-q { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; margin: 0 0 8px; }
.tl-check-q .icon { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }
.tl-check-label { font-weight: 700; }

.tl-refs { padding-top: 6px; border-top: 1px solid var(--line); }
.tl-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.tl-nav .btn { white-space: normal; text-align: left; }

/* Schaubilder: Klassen statt Inline-Farben (CSP style-src 'self'), Farben aus den Illustrations-Tokens */
.tvf-stroke { stroke: var(--ill-stroke); fill: none; }
.tvf-fill-stroke { fill: var(--accent-dark); } /* Ziffern in Weiß bzw. Tiefsee darauf: 5,6 : 1 hell, 8 : 1 dunkel */
.tvf-soft { fill: var(--ill-soft); }
.tvf-deep { fill: var(--ill-deep); }
.tvf-deep-stroke { stroke: var(--ill-deep); fill: none; }
.tvf-sea { fill: var(--ill-sea); }
.tvf-sea-stroke { stroke: var(--ill-sea); fill: none; }
.tvf-paper { fill: var(--ill-paper); }
.tvf-paper-stroke { stroke: var(--ill-paper); fill: none; }
.tvf-line { stroke: var(--line-strong); fill: none; }
.tvf-text { fill: var(--ink); font-family: var(--font-sans); font-size: 14px; }
.tvf-text-soft { fill: var(--ink-soft); font-family: var(--font-sans); font-size: 13px; }
.tvf-text-faint { fill: var(--ink-faint); font-family: var(--font-sans); font-size: 12px; }
.tvf-text-on { fill: var(--surface); font-family: var(--font-sans); font-size: 13px; font-weight: 700; }
.tvf-bold { font-weight: 700; }

.tl-step.tl-enter { animation: tlEnter 200ms ease both; }
@keyframes tlEnter { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .tl-step.tl-enter { animation: none; } }
@media print { .tl-stepper, .tl-nav { display: none !important; } }
.tl-resume { display: grid; gap: 10px; }
.tl-resume > p { margin: 0; }

/* ---------- Training guided flow (TV2, templates/training/_flow.php, exercise.php, module_done.php) ----------
   One step count over the whole module, the module map as chips (done / current / locked, never by colour alone:
   check and lock icons plus screen-reader text), the resume card on "Meine Lernblöcke" and the completion note. */
.tf-head { gap: 6px; }
.tf-module { margin: 0; color: var(--ink-soft); }
.tf-bar.progress { margin: 2px 0 4px; }
.tf-path { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tf-path a, .tf-path span[aria-current], .tf-path li > span { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); font-size: .8rem; text-decoration: none; }
.tf-path a:hover { border-color: var(--accent); color: var(--ink); }
.tf-path .icon { width: 13px; height: 13px; }
.tf-path li.is-done > a, .tf-path li.is-done > span { background: var(--ok-bg); border-color: var(--ok-line); color: var(--ok-ink); }
.tf-path li.is-current > span { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--accent); }
.tf-path li.is-locked > span { border-style: dashed; color: var(--ink-faint); }
.tl-nav .tl-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; margin: 0; }
.tf-hint { max-width: 32ch; }
.tf-resume { background: var(--dark); color: var(--on-dark); border: 1px solid var(--on-dark-line); border-radius: var(--radius-lg); padding: 18px 20px; margin: 0 0 18px; display: grid; gap: 6px; }
.tf-resume > p { margin: 0; }
.tf-resume .eyebrow { color: var(--accent-bright); }
.tf-resume .small { color: var(--on-dark-soft); }
.tf-resume-title { font-family: var(--font-display); font-size: 1.2rem; }
.tf-resume .btn { margin-top: 6px; }
.tf-left { color: var(--ink); font-weight: 600; }
.tf-done { display: grid; gap: 10px; }
.tf-done > * { margin: 0; }
.tf-done.is-complete { background: var(--ok-bg); border-color: var(--ok-line); }
.tf-done.is-complete h2 { color: var(--ok-ink); display: flex; align-items: center; gap: 8px; }
.tf-goals, .tf-open { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 4px; }
.tf-goals .icon { width: 15px; height: 15px; color: var(--ok-ink); vertical-align: -2px; }
.tf-open { padding-left: 1.2em; list-style: disc; }
.tf-exercise h2 { font-size: 1.2rem; }

/* ---------- Training course layout (TL1, decision Marc 11.10.2026; templates/training/block.php, _outline.php) ----------
   Block page: module cards "Modul n" with "Das lernen Sie" (goals, inset box) and the numbered content list (chapter,
   exercise, module check) with state as icon plus text. Lesson, exercise, check, module end and exam: two columns,
   the course outline (.tc-outline, a <details>) sticky on the left from 1081 px, above the content below that (closed on
   load by training.js, open without JavaScript). State never by colour alone: icon plus visible or sr-only text. */
.tc-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; }
.tc-main { min-width: 0; }
.tc-outline { position: sticky; top: calc(var(--topbar-h, 56px) + 16px); max-height: calc(100vh - var(--topbar-h, 56px) - 32px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.tc-box { margin: 0; }
.tc-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; cursor: pointer; list-style: none; font-weight: 700; }
.tc-summary::-webkit-details-marker { display: none; }
.tc-summary-title { display: inline-flex; align-items: center; gap: 6px; }
.tc-summary-title .icon { width: 16px; height: 16px; color: var(--accent); }
.tc-summary-count { font-size: .76rem; font-weight: 400; color: var(--ink-faint); white-space: nowrap; }
.tc-summary:focus-visible, .tc-module summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: var(--radius); }
.tc-body { padding: 0 10px 12px; display: grid; gap: 8px; }
.tc-back { display: inline-flex; align-items: center; gap: 6px; font-size: .84rem; padding: 4px 6px; }
.tc-back .icon { width: 14px; height: 14px; }
.tc-course { display: grid; gap: 6px; padding: 10px; border-radius: var(--radius); background: var(--inset); color: var(--ink); text-decoration: none !important; }
.tc-course:hover { background: var(--inset-alt); }
.tc-course-title { font-weight: 700; line-height: 1.3; font-size: .92rem; }
.tc-course .progress { height: 6px; }
.tc-modules, .tc-parts { list-style: none; margin: 0; padding: 0; }
.tc-modules { display: grid; gap: 2px; }
.tc-module details { margin: 0; }
.tc-module summary, .tc-exam-row { display: flex; align-items: flex-start; gap: 8px; padding: 7px 6px; border-radius: var(--radius); font-size: .86rem; font-weight: 700; line-height: 1.3; cursor: pointer; list-style: none; color: var(--ink); text-decoration: none !important; }
.tc-module summary::-webkit-details-marker { display: none; }
.tc-module summary:hover, a.tc-exam-row:hover { background: var(--inset); }
.tc-mod-no { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--dark-3); color: var(--on-dark); font-size: .74rem; display: inline-flex; align-items: center; justify-content: center; }
.tc-mod-no .icon { width: 12px; height: 12px; stroke-width: 3; }
.tc-module.is-done > details > summary .tc-mod-no, .tc-exam.is-done .tc-mod-no { background: var(--ok-fill); color: #fff; }
.tc-module.is-current > details > summary { color: var(--accent-darker); }
.tc-exam.is-locked .tc-mod-no { background: var(--inset-alt); color: var(--ink-faint); }
.tc-exam-row[aria-current] { background: var(--accent-tint); color: var(--accent-darker); }
.tc-mod-title { flex: 1; min-width: 0; }
.tc-exam-state { display: block; font-size: .74rem; font-weight: 400; color: var(--ink-faint); }
.tc-parts { padding: 0 0 6px 14px; }
.tc-parts a, .tc-part-locked { display: flex; gap: 8px; align-items: flex-start; padding: 5px 8px; border-radius: var(--radius); color: var(--ink-soft); font-size: .84rem; line-height: 1.35; text-decoration: none !important; }
.tc-parts a:hover { background: var(--inset); color: var(--ink); }
.tc-parts a[aria-current] { background: var(--accent-tint); color: var(--accent-darker); font-weight: 700; }
.tc-parts li:not(.is-current):not(.is-done) .dot { border-color: var(--line-strong); box-shadow: none; } /* the global .is-current .dot of .stepnav would ring every part of the current module */
.tc-parts .is-current .dot { border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.tc-part-locked { color: var(--ink-faint); cursor: default; }
.tc-parts .is-locked .dot { border-style: dashed; }
.tc-parts .dot .icon { width: 10px; height: 10px; }
.tc-part-title { min-width: 0; overflow-wrap: anywhere; }

/* Block page */
.tc-progress { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; }
.tc-progress-text { flex: 1 1 320px; display: grid; gap: 8px; }
.tc-progress-text > * { margin: 0; }
.tc-progress-action { display: grid; gap: 6px; justify-items: start; }
.tc-progress-action .btn { white-space: normal; }
.tc-next { color: var(--ink-soft); max-width: 36ch; }
.tc-overdue { color: var(--err-ink); font-weight: 700; }
.tc-module-list { list-style: none; margin: 0; padding: 0; }
.tc-module-card { display: grid; gap: 16px; }
.tc-module-card.is-done { border-left: 4px solid var(--ok-fill); }
.tc-module-head { display: flex; align-items: flex-start; gap: 14px; }
.tc-module-head > .badge { margin-left: auto; margin-top: 4px; }
.tc-module-titles { min-width: 0; flex: 1; }
.tc-module-titles h2 { margin: 0; }
.tc-module-titles .eyebrow { margin-bottom: 2px; }
.tc-no { flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; background: var(--dark-3); color: var(--on-dark); font-weight: 700; font-size: 1.05rem; display: inline-flex; align-items: center; justify-content: center; }
.tc-no .icon { width: 18px; height: 18px; stroke-width: 3; }
.tc-module-card.is-done .tc-no { background: var(--ok-fill); color: #fff; }
.tc-exam-card .tc-no { background: var(--accent-tint); color: var(--accent-darker); }
.tc-exam-card.is-done .tc-no { background: var(--ok-fill); color: #fff; }
.tc-module-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px 24px; }
.tc-module-body > :only-child { grid-column: 1 / -1; }
.tc-sub { font-size: .76rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 8px; font-family: var(--font-sans); }
.tc-goals { background: var(--inset); border-radius: var(--radius); padding: 14px 16px; }
.tc-goals .tl-goals { font-size: .92rem; }
.tc-goals .tl-goals li { line-height: 1.45; }
.tc-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.tc-steps > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 10px; align-items: start; padding: 9px 0; border-bottom: 1px solid var(--line); }
.tc-steps > li:last-child { border-bottom: 0; }
.tc-step-icon { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--line-strong); color: var(--ink-soft); font-size: .78rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.tc-step-icon .icon { width: 13px; height: 13px; }
.tc-steps .is-done .tc-step-icon { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.tc-steps .is-current .tc-step-icon { border-color: var(--accent); color: var(--accent-darker); box-shadow: 0 0 0 3px var(--focus-ring); }
.tc-steps .is-locked .tc-step-icon { border-style: dashed; color: var(--ink-faint); }
.tc-steps .is-check, .tc-steps .is-exercise { background: transparent; }
.tc-step-main { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.tc-step-main > a, .tc-step-main > span:first-child { font-weight: 600; overflow-wrap: anywhere; }
.tc-steps .is-locked .tc-step-main > span:first-child { color: var(--ink-faint); font-weight: 400; }
.tc-step-meta { color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0 10px; }
.tc-step-meta:empty { display: none; }
.tc-step-state { padding-top: 2px; }
.badge-accent { background: var(--accent-tint); color: var(--accent-darker); }
.tc-exam-body > * { margin: 0 0 8px; }
.tc-exam-body > :last-child { margin-bottom: 0; }

/* Employee "Meine Schulungen" (templates/employee/index.php): filter tabs, "Als Nächstes", groups of course cards */
.tc-filter { margin: 4px 0 6px; }
.tc-count { font-weight: 400; color: var(--ink-faint); }
.tc-group-h { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 18px 0 10px; font-family: var(--font-sans); }
.tc-cards { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.tc-course-card { gap: 8px; }
.tc-course-card > * { margin: 0; }
.tc-course-card.is-next { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent), var(--shadow-sm); }
.tc-course-card.is-done { background: var(--inset); }
.tc-card-title { font-size: 1rem; line-height: 1.35; font-family: var(--font-sans); overflow-wrap: anywhere; }
.tc-card-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .84rem; }
.tc-card-pct { font-variant-numeric: tabular-nums; color: var(--ink-soft); white-space: nowrap; }
.tc-card-action { margin-top: auto !important; padding-top: 4px; }

@media (max-width: 1080px) {
  .tc-layout { grid-template-columns: 1fr; gap: 0; }
  .tc-outline { position: sticky; top: var(--topbar-h, 56px); z-index: 5; max-height: calc(100vh - var(--topbar-h, 56px) - 8px); margin: 0 0 16px; }
  .tc-module-body { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .tc-steps > li { grid-template-columns: 28px minmax(0, 1fr); }
  .tc-step-state { grid-column: 2; padding-top: 0; }
  .tc-module-head { flex-wrap: wrap; }
  .tc-module-head > .badge { margin-left: 52px; }
  .tc-no { width: 32px; height: 32px; font-size: .95rem; }
}
@media print { .tc-outline { display: none !important; } .tc-layout { display: block; } }

/* BCM B1: maturity path on the BCM overview (ordered list, state shown as text, not by colour only) */
.stage-path { padding-left: 1.4em; margin: 0 0 12px; }
.stage-path > li { padding: 8px 0; }
.stage-path > li[aria-current="step"] { border-left: 3px solid var(--accent, currentColor); padding-left: 10px; margin-left: -13px; }

/* ---------- Sidebar navigation (UX1, decision Marc 10.10.2026, variant A; ADR 0031, docs/NAVIGATION.md) ----------
   templates/nav/_sidebar.php, templates/layout.php (.shell), behaviour in nav.js. Unpinned (default, ADR 0049) a 64 px icon
   rail (html[data-nav-rail="true"]) that expands to 264 px over the content on hover or focus (html[data-nav-peek]);
   pinned the full 264 px sidebar; below 761 px (also at 200 % zoom) an off-canvas menu (html.nav-open).
   Light mode: white sidebar with a 1 px line, active entry tinted with a Messing bar (variant B "Hell", decision Marc
   10.10.2026, 17:56 Uhr); dark mode: Tiefsee (CI "Navigator"). Text and badge contrast at least 4.5:1 in both. */
:root {
  --sbw-full: 264px; --sbw-rail: 64px; --topbar-h: 56px;
  --sb-bg: #ffffff; --sb-edge: #d9e0ea; --sb-hover: #eef2f7; --sb-active: #e8eef7; --sb-ink: #1b2638; --sb-strong: #13233f; --sb-faint: #5d687a;
  --sb-line: #d9e0ea; --sb-bar: #a8761a; --sb-focus: #8a5f12; --sb-danger: #9a2f24;
  --sb-count: #e3e9f1; --sb-count-ink: #1b2638; --sb-badge-warn: #e0a93b; --sb-badge-err: #f2a196; --sb-badge-ink: #13233f; --sb-badge-err-ink: #3a1a18;
  --sb-overlay: rgba(12, 24, 48, .45);
}
:root[data-theme="dark"] {
  --sb-bg: #0c1830; --sb-edge: transparent; --sb-hover: #16294a; --sb-active: #1f3a66; --sb-ink: #d3dae6; --sb-strong: #f7f3ea; --sb-faint: #a9b6ca;
  --sb-line: rgba(247, 243, 234, .16); --sb-bar: #e0a93b; --sb-focus: #e0a93b; --sb-danger: #f2a196;
  --sb-count: rgba(247, 243, 234, .16); --sb-count-ink: #f7f3ea; --sb-overlay: rgba(0, 0, 0, .55);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sb-bg: #0c1830; --sb-edge: transparent; --sb-hover: #16294a; --sb-active: #1f3a66; --sb-ink: #d3dae6; --sb-strong: #f7f3ea; --sb-faint: #a9b6ca;
    --sb-line: rgba(247, 243, 234, .16); --sb-bar: #e0a93b; --sb-focus: #e0a93b; --sb-danger: #f2a196;
    --sb-count: rgba(247, 243, 234, .16); --sb-count-ink: #f7f3ea; --sb-overlay: rgba(0, 0, 0, .55);
  }
}
/* Shell: sidebar and main column side by side; the sidebar stays in view while the page scrolls */
body.has-sidebar .shell { display: flex; align-items: stretch; min-height: 100vh; }
body.has-sidebar .shell-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
body.has-sidebar .shell-col > .page { flex: 1 0 auto; width: 100%; min-height: 0; }
body.has-sidebar .site-foot { width: 100%; }
.sidebar { flex: none; width: var(--sbw-full); background: var(--sb-bg); color: var(--sb-ink); border-right: 1px solid var(--sb-edge); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; height: 100dvh; z-index: 30; transition: width var(--t), margin-right var(--t), box-shadow var(--t); }
.sidebar :focus-visible { outline: 2px solid var(--sb-focus); outline-offset: -2px; }
.sb-head { height: var(--topbar-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 18px; border-bottom: 1px solid var(--sb-line); }
.sb-brand { display: flex; align-items: center; min-width: 0; color: var(--sb-strong); text-decoration: none !important; border-radius: 4px; }
.sb-brand img { height: 30px; width: auto; max-width: 200px; }
/* The logo follows the theme like the sidebar (brand_mark_themed() renders both variants); the compass mark alone on the rail */
.sidebar .brand-mark-sm { display: none !important; }
.sb-pin { margin-left: auto; flex: none; display: inline-flex; background: none; border: 0; color: var(--sb-faint); padding: 6px; border-radius: var(--radius); cursor: pointer; }
.sb-pin:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-pin .icon { width: 18px; height: 18px; display: block; transform: rotate(45deg); transition: transform var(--t); }
.sb-pin[aria-pressed="true"] { color: var(--sb-bar); }
.sb-pin[aria-pressed="true"] .icon { transform: none; }
html:not(.js) .sb-pin { display: none; }
.sb-close { display: none; margin-left: auto; background: none; border: 0; color: var(--sb-ink); padding: 8px; border-radius: var(--radius); cursor: pointer; }
.sb-close:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-close .icon { width: 20px; height: 20px; display: block; }
.sb-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 10px 10px 12px; display: flex; flex-direction: column; gap: 4px;
  scrollbar-width: thin; scrollbar-color: var(--sb-hover) transparent; overscroll-behavior: contain; }
.sb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sb-row { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius);
  color: var(--sb-ink); text-decoration: none !important; text-align: left; cursor: pointer; font: 500 .92rem/1.3 var(--font-sans); position: relative; }
.sb-row:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-row > .icon, .sb-row > span > .icon { width: 20px; height: 20px; flex: none; display: block; }
.sb-row .sb-text { flex: 1 1 auto; min-width: 0; }
.sb-row.is-active { color: var(--sb-strong); }
.sb-row.is-active > .icon { color: var(--sb-bar); }
.sb-chev { display: inline-flex; opacity: .75; }
.sb-chev .icon { width: 16px; height: 16px; display: block; transition: transform var(--t); }
.sb-gbtn[aria-expanded="true"] .sb-chev .icon, .sb-qbtn[aria-expanded="true"] .sb-chev .icon { transform: rotate(90deg); }
.sb-gbtn[aria-expanded="true"] .sb-gbadge { display: none; }
.sb-sub { list-style: none; margin: 2px 0 6px; padding: 0 0 0 20px; display: grid; gap: 1px; }
.js .sb-gbtn[aria-expanded="false"] + .sb-sub { display: none; }
.sb-link { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 6px 10px 6px 20px; border-left: 1px solid var(--sb-line);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--sb-ink); text-decoration: none !important; font-size: .89rem; line-height: 1.3; }
.sb-link .sb-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.sb-link:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-link[aria-current="page"], a.sb-row[aria-current="page"] { background: var(--sb-active); color: var(--sb-strong); box-shadow: inset 3px 0 0 var(--sb-bar); font-weight: 600; }
.sb-link.is-danger { color: var(--sb-danger); }
.sb-sec { font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-faint); padding: 10px 10px 3px 20px; border-left: 1px solid var(--sb-line); }
.sb-sec.is-danger { color: var(--sb-danger); }
.sb-badge { margin-left: auto; flex: none; min-width: 22px; padding: 1px 7px; border-radius: 999px; font-size: .74rem; font-weight: 700; line-height: 1.5;
  text-align: center; font-variant-numeric: tabular-nums; background: var(--sb-count); color: var(--sb-count-ink); }
.sb-badge.is-warn { background: var(--sb-badge-warn); color: var(--sb-badge-ink); }
.sb-badge.is-err { background: var(--sb-badge-err); color: var(--sb-badge-err-ink); }
/* Quick access */
.sb-quick { border-bottom: 1px solid var(--sb-line); padding-bottom: 8px; margin-bottom: 4px; }
.js .sb-qbtn[aria-expanded="false"] + .sb-qbody { display: none; }
.sb-qh { font-size: .74rem; font-weight: 600; color: var(--sb-faint); margin: 0; padding: 6px 10px 2px; }
.sb-qlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.sb-qlist a { display: flex; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; border-radius: var(--radius); color: var(--sb-ink); text-decoration: none !important; font-size: .86rem; line-height: 1.3; }
.sb-qlist a:hover { background: var(--sb-hover); color: var(--sb-strong); }
.sb-qlist a[aria-current="page"] { background: var(--sb-active); color: var(--sb-strong); }
.sb-qlist .icon { width: 14px; height: 14px; flex: none; color: var(--sb-faint); }
.sb-qlist a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-qempty { font-size: .8rem; color: var(--sb-faint); padding: 2px 10px 4px; }
/* Administration at the bottom, set apart from the subject areas */
.sb-admin { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--sb-line); }
.sb-backdrop { display: none; }

/* Slim header: hamburger (narrow only), search field as command palette opener, bell, help, user card */
body.has-sidebar .topbar { z-index: 20; }
body.has-sidebar .topbar-inner { max-width: none; height: var(--topbar-h); padding: 0 20px; }
.topbar-gap { flex: 1 1 auto; }
/* Fixed "Demo" label of a demo company (DC0, templates/layout.php): never shrinks or hides, also at 320/375 px */
.topbar-demo { flex: 0 0 auto; margin-left: 8px; text-transform: uppercase; letter-spacing: .04em; }
/* Phones: the header row has no free space (six 44 px tools at 320 px), so the label hangs centred on the lower edge of the header */
@media (max-width: 480px) { .topbar-inner { position: relative; } .topbar-demo { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); z-index: 3; margin: 0; padding: 1px 8px; font-size: .64rem; letter-spacing: .04em; box-shadow: 0 0 0 2px var(--dark); } }
.topbar-search { display: flex; align-items: center; gap: 10px; flex: 0 1 420px; min-width: 0; padding: 7px 10px 7px 12px; border: 1px solid var(--line-strong);
  background: var(--inset); color: var(--ink-faint); border-radius: var(--radius); text-decoration: none !important; }
.topbar-search:hover { border-color: var(--accent); color: var(--ink-soft); }
.topbar-search .icon { width: 16px; height: 16px; flex: none; }
.topbar-search-text { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.topbar-search-kbd { font: 600 .74rem var(--font-sans); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; color: var(--ink-faint); background: var(--surface); white-space: nowrap; }
body.has-sidebar .nav-toggle { display: none; background: none; border: 1px solid var(--line-strong); color: var(--ink-soft); border-radius: var(--radius); width: 34px; height: 34px; padding: 0; align-items: center; justify-content: center; cursor: pointer; }
body.has-sidebar .nav-toggle:hover { background: var(--inset); color: var(--ink); }
body.has-sidebar .nav-toggle .icon { width: 20px; height: 20px; display: block; }

/* Page context: breadcrumbs and the bookmark star (moved next to the page heading by nav.js) */
.page-context { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: -8px 0 14px; }
.nav-crumbs { margin: 0; }
.nav-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .84rem; color: var(--ink-faint); }
.nav-crumbs li + li::before { content: "›" / ""; margin-right: 4px; color: var(--ink-faint); }
.nav-crumbs a { color: var(--ink-soft); text-decoration: none; border-radius: 3px; }
.nav-crumbs a:hover { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.nav-crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.title-row > h1 { margin-bottom: 0; }
.page-head .title-row { margin-bottom: 6px; }
.bm-menu .bm-opener { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius);
  background: var(--surface); color: var(--ink-soft); font-size: .84rem; font-weight: 500; line-height: 1.4; text-decoration: none !important; white-space: nowrap; }
.bm-menu .bm-opener:hover { border-color: var(--accent); color: var(--ink); }
.bm-menu .bm-opener .icon { width: 16px; height: 16px; }
.bm-menu .bm-opener.is-on { color: var(--accent-dark); border-color: var(--accent); }
.title-row .bm-pop, .page-context .bm-pop { right: auto; left: 0; }

/* Icon rail (desktop, unpinned and not peeking) and peek (expanded over the content; the negative margin keeps the
   64 px slot in the flex row, so the page does not move) */
@media (min-width: 761px) {
  html.js[data-nav-rail="true"] .sidebar { overflow: hidden; }
  html.js[data-nav-rail="true"][data-nav-peek] .sidebar { width: var(--sbw-full); margin-right: calc(var(--sbw-rail) - var(--sbw-full)); box-shadow: var(--shadow-lg); }
  html.js[data-nav-rail="true"][data-nav-peek] .sb-head, html.js[data-nav-rail="true"][data-nav-peek] .sb-nav { min-width: calc(var(--sbw-full) - 1px); }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sidebar { width: var(--sbw-rail); }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-head { padding: 0; justify-content: center; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-pin { display: none; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sidebar .brand-logo { display: none !important; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sidebar .brand-mark-sm { display: block !important; width: 32px; height: 32px; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-nav { padding-inline: 8px; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-row { justify-content: center; padding: 8px 0; gap: 0; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-text, html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-qh {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; padding: 0; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-chev, html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-sub, html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-qbody { display: none; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-row .sb-badge { position: absolute; top: 5px; right: 9px; min-width: 0; width: 9px; height: 9px; padding: 0; font-size: 0;
    border: 2px solid var(--sb-bg); box-sizing: content-box; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-gbtn[aria-expanded="true"] .sb-gbadge { display: block; }
  html.js[data-nav-rail="true"]:not([data-nav-peek]) .sb-row.is-active { background: var(--sb-active); box-shadow: inset 3px 0 0 var(--sb-bar); }
}

/* Off-canvas menu: narrow screens and 200 % zoom (1280 px / 2) */
@media (max-width: 760px) {
  body.has-sidebar .shell { display: block; }
  html.js body.has-sidebar .sidebar { position: fixed; top: 0; bottom: 0; left: 0; height: auto; width: min(300px, 88vw); transform: translateX(-100%); visibility: hidden;
    transition: transform var(--t), visibility 0s linear 160ms; z-index: 90; }
  html.js.nav-open body.has-sidebar .sidebar { transform: none; visibility: visible; box-shadow: var(--shadow-lg); transition: transform var(--t); }
  html.js.nav-open .sb-backdrop { display: block; position: fixed; inset: 0; z-index: 80; background: var(--sb-overlay); }
  html.js.nav-open { overflow: hidden; }
  .sb-close { display: inline-flex; }
  .sb-pin { display: none; }
  html:not(.js) body.has-sidebar .sidebar { position: static; width: auto; height: auto; }
  html.js body.has-sidebar .nav-toggle { display: inline-flex; }
  body.has-sidebar .topbar { position: sticky; top: 0; }
  body.has-sidebar .topbar-inner { padding: 0 10px; gap: 6px; }
  .topbar-search { flex: 0 0 auto; border-color: var(--line-strong); background: none; padding: 0; width: 34px; height: 34px; justify-content: center; }
  .topbar-search-text, .topbar-search-kbd { display: none; }
  .page-context { margin-top: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sb-chev .icon, .sb-pin .icon { transition: none !important; }
}
@media print {
  .sidebar, .sb-backdrop, .page-context .bm-menu, .title-row .bm-menu { display: none !important; }
  body.has-sidebar .shell { display: block; }
}

/* Uniform page tabs below the page title (sidebar layout, ADR 0031): page links with aria-current, no ARIA tabs.
   Module sub-navigation of assets, vulnerabilities, risks, ATT&CK, BCM, document register (templates/<module>/_nav.php).
   Action buttons (export, settings) stay buttons at the right end. */
.filter-bar.page-tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 4px; padding: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.page-tab { display: inline-flex; align-items: center; gap: 4px; padding: 9px 12px; margin-bottom: -1px; color: var(--ink-soft); font-weight: 500; font-size: .9rem;
  line-height: 1.3; text-decoration: none !important; white-space: nowrap; border-bottom: 2px solid transparent; border-radius: var(--radius) var(--radius) 0 0; }
.page-tab:hover { color: var(--ink); border-bottom-color: var(--line-strong); background: var(--inset); }
.page-tab[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.filter-bar.page-tabs > .btn { align-self: center; margin-bottom: 6px; }
@media (max-width: 760px) { .page-tab { padding: 8px 9px; font-size: .86rem; white-space: normal; } }
/* BP8 dashboard scope switch "Nur meine anzeigen" (templates/status/_scope_switch.php, tile dashboard and start view):
   a real switch (button role="switch"), no hint text (the label explains it). Track and thumb reach at least 3 : 1
   against the box in both themes (WCAG 1.4.11); the state is not shown by colour alone (thumb position plus aria-checked). */
.dash-scope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; }
.switch { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.switch-track { position: relative; flex: none; width: 40px; height: 22px; border: 2px solid var(--ink-faint); border-radius: 11px; background: var(--surface); }
.switch-thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink-faint); transition: transform var(--t), background var(--t); }
.switch[aria-checked="true"] .switch-track { border-color: var(--accent-dark); background: var(--accent-dark); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(18px); background: var(--on-accent); }
.switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); }
.switch-label { font-weight: 600; }
.dash-scope-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink-soft); font-family: var(--font-sans); font-size: .75rem; font-weight: 500; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .switch-thumb { transition: none; } }
@media print { .dash-scope-tag { border: 0; padding: 0; } }
/* Dashboard links (calmer tiles): one arrow marks a title that leads on; small key-figure tiles (.is-whole) are one link as a whole,
   with only real sub-figures (e.g. "3 überfällig") as extra links on top. Secondary links stay recognisable without hover (thin underline). */
.dash-tile-title a { text-decoration: none; }
.dash-tile-arrow { display: inline-block; vertical-align: -1px; color: var(--ink-faint); transition: color var(--t), transform var(--t); }
.dash-tile-arrow .icon { width: 12px; height: 12px; }
.dash-tile-title a:hover .dash-tile-arrow, .dash-tile-title a:focus-visible .dash-tile-arrow, .dash-tile.is-whole:hover .dash-tile-arrow { color: var(--accent-dark); transform: translateX(2px); }
.dash-tile.is-whole { transition: border-color var(--t), background-color var(--t); }
.dash-tile.is-whole .dash-tile-title a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.dash-tile.is-whole:hover, .dash-tile.is-whole:has(.dash-tile-title a:focus-visible) { border-color: var(--accent); }
.dash-tile.is-whole .dash-tile-body :is(a, button, summary, .help-tip) { position: relative; z-index: 1; }
.dash-tile.is-whole > .dash-tile-quick { z-index: 2; }
.dash.is-editing .dash-tile.is-whole .dash-tile-title a::after { display: none; }
.dash-tile-body :is(a.dash-num, a.dash-fig-link strong) { text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: var(--ink-faint); text-underline-offset: 3px; }
.dash-tile-body a.dash-num:hover, .dash-tile-body a.dash-num:focus-visible, .dash-figs > a.dash-fig-link:is(:hover, :focus-visible) strong { text-decoration-color: currentColor; }
@media (prefers-reduced-motion: reduce) { .dash-tile-arrow { transition: none; } .dash-tile-title a:hover .dash-tile-arrow, .dash-tile.is-whole:hover .dash-tile-arrow { transform: none; } }

/* ---------- Startseite (st-startseite), templates/start/*, docs/features/START-VIEW.md ----------
   Existing tokens only (light and dark come from them). Layout reacts to the width of the main column, not the viewport:
   the sidebar takes 264 px from 761 px, so a media query would be wrong. Titles wrap (overflow-wrap), never ellipsis. */
.st { container-type: inline-size; container-name: st; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.st > .panel, .st .st-panel { margin-bottom: 0; }
/* Colour fades of the shared .btn/.input styles are not motion, but the start view promises none under reduced motion (checked by axe run, 10.10.2026). */
@media (prefers-reduced-motion: reduce) { .st, .st *, .st *::before { transition-duration: .01ms !important; animation-duration: .01ms !important; } }
.st-head { display: flex; flex-direction: column; gap: 6px; }
.st-head .eyebrow { margin: 0; }
.st-head h1 { margin: 0; overflow-wrap: anywhere; }
.st-head .dash-scope { margin-left: -4px; }
.st-lede { color: var(--ink-soft); max-width: 62ch; margin: 0; }
.st-panel { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.st-panel h2, .st-empty h2 { margin: 0; }
.st-panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 16px; }
.st-panel-head a { font-size: .9rem; }
.st-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; counter-reset: st; }
.st-step { counter-increment: st; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 4px 14px; padding: 14px 0; border-top: 1px solid var(--line); align-items: start; }
.st-step:first-child { border-top: 0; padding-top: 2px; }
.st-step::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--accent); color: var(--accent-dark); display: grid; place-items: center; font-weight: 600; font-size: .88rem; font-variant-numeric: tabular-nums; }
.st-step-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; align-items: flex-start; }
.st-step h3 { margin: 0; font-size: 1rem; line-height: 1.4; overflow-wrap: anywhere; }
.st-step .badge { white-space: normal; }
.st-step .badge .icon { width: 13px; height: 13px; flex: none; }
.st-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: .86rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.st-act .btn { white-space: normal; text-align: center; }
.st-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.st-fw { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--line); }
.st-fw:first-of-type { border-top: 0; padding-top: 0; }
.st-fw h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.st-fw-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.st-pct { font-family: var(--font-display); font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.st-pct small { font-family: var(--font-sans); font-size: .85rem; color: var(--ink-faint); }
.st-bar { display: block; height: 8px; background: var(--inset-alt); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.st-bar i { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--ok-fill); border-radius: 99px; }
.st-verdict { color: var(--ink-soft); font-size: .92rem; margin: 0; }
.st-notbooked { font-size: .88rem; color: var(--ink-faint); border-top: 1px solid var(--line); padding-top: 12px; margin: 0; }
.st-dl { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.st-dl li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
.st-dl li:first-child { border-top: 0; padding-top: 0; }
.st-dl time { font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; }
.st-dl time small { display: block; font-weight: 400; font-size: .78rem; color: var(--ink-faint); }
.st-dl .st-meta { margin-top: 2px; }
.st-calm { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px 18px; font-size: .92rem; color: var(--ink-soft); }
.st-calm > span { display: inline-flex; align-items: center; gap: 6px; }
.st-calm .icon { width: 16px; height: 16px; flex: none; }
.st-calm .calm-ok .icon { color: var(--ok-ink); }
.st-calm .calm-warn .icon { color: var(--err-ink); }
.st-calm .calm-warn { font-weight: 600; }
.st-calm-all { margin-left: auto; font-size: .88rem; }
.st-empty { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 28px 24px; }
.st-empty p { color: var(--ink-soft); max-width: 58ch; margin: 0; }
@container st (min-width: 760px) { .st-cols { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
@container st (max-width: 559px) {
  .st-step { grid-template-columns: 28px minmax(0, 1fr); }
  .st-step::before { width: 26px; height: 26px; }
  .st-act { grid-column: 2; }
  .st-calm-all { margin-left: 0; }
}
/* Small disclosure toggles (<details class="small">, e.g. Complass admin > System): 24 px high click target (WCAG 2.2 2.5.8);
   .small text alone gives about 22 px. Same rule as .sso-hints > summary. */
details.small > summary { min-height: 24px; line-height: 24px; }

/* Order form and order inbox (templates/orders/form.php, templates/admin/order.php; docs/ORDERS.md) */
.ord-grid { display: grid; gap: 28px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.ord-grid > * { min-width: 0; }
.ord-fs { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.ord-fs legend { font-weight: 600; font-size: 1.05rem; padding: 0; margin-bottom: 10px; }
.ord-fs .check { margin-top: 10px; }
.ord-summary { position: sticky; top: 108px; }
.ord-admin-grid { display: grid; gap: 18px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); align-items: start; }
.ord-admin-grid > * { min-width: 0; }
.ord-admin-grid form + form, .ord-admin-grid form + details, .ord-admin-grid details + form, .ord-admin-grid p + form { margin-top: 10px; }
@media (max-width: 860px) {
  .ord-grid, .ord-admin-grid { grid-template-columns: 1fr; }
  .ord-summary { position: static; order: -1; }
}

/* NP1 review flag "Nachprüfen" (src/ReviewFlags.php, review-flags.js): next to the bookmark star in the header and on
   elements. Pressed = filled, framed and in Lagune (--ok-ink: 7.5 : 1 light, 9 : 1 dark), plus the text hint
   "Zur Nachprüfung seit …", so the state never depends on colour alone (WCAG 1.4.1). Unpressed like the star (--ink-faint). */
/* order 3: the star inside .bm-menu is a .header-tool with order 2, so without it the flag would sit left of the star */
.rf-page-form { order: 3; display: inline-flex; margin: 0 0 0 4px; }
.topbar-inner > .bm-menu .rf-page {
  box-sizing: border-box; width: 34px; height: 34px; padding: 0; margin: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--ink-soft); cursor: pointer;
}
.topbar-inner > .bm-menu .rf-page:hover { background: var(--inset); color: var(--ink); }
.topbar-inner > .bm-menu .rf-page .icon { width: 16px; height: 16px; }
.topbar-inner > .bm-menu .rf-page.is-on, .topbar-inner > .bm-menu .rf-page.is-on:hover { color: var(--ok-ink); border-color: var(--ok-ink); background: var(--ok-bg); }
.rf-page.is-on .icon, .rf-flag[aria-pressed="true"] .icon { fill: currentColor; }
.rf-page:focus-visible, .rf-flag:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rf-flag { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; width: 26px; height: 26px; padding: 0; margin: 0 2px; border: 1px solid transparent; border-radius: var(--radius); background: none; color: var(--ink-faint); cursor: pointer; }
.rf-flag[hidden] { display: none; }
.rf-flag .icon { width: 15px; height: 15px; }
.rf-flag:hover { color: var(--ink); border-color: var(--line-strong); }
.rf-flag[aria-pressed="true"] { color: var(--ok-ink); background: var(--ok-bg); border-color: var(--ok-ink); }
.rf-hint { display: inline-block; vertical-align: middle; font-size: .78rem; font-weight: 500; line-height: 1.3; padding: 1px 7px; border-radius: 999px; color: var(--ok-ink); background: var(--ok-bg); border: 1px solid var(--ok-line); }
/* display above overrides the UA rule for [hidden]; review-flags.js hides the hint when the flag is removed */
.rf-hint[hidden] { display: none; }
.rf-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px; border-bottom: 1px solid var(--line); }
.rf-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; color: var(--ink-soft); text-decoration: none; min-height: 44px; box-sizing: border-box; }
.rf-tabs a .icon { width: 16px; height: 16px; }
.rf-tabs a:hover { color: var(--ink); }
.rf-tabs a[aria-current="page"] { background: var(--surface); border-color: var(--line); color: var(--ink); font-weight: 600; }
.rf-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 12px; }
.rf-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rf-table .row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; justify-content: flex-end; }
.rf-table tr.is-gone td:first-child { color: var(--ink-faint); }
.rf-note { margin: 4px 0 0; overflow-wrap: anywhere; }
.rf-note-form { display: grid; gap: 6px; min-width: min(280px, 80vw); margin-top: 6px; }
@media print { .rf-page-form, .rf-flag { display: none !important; } }
@media (prefers-reduced-motion: no-preference) { .rf-flag, .topbar-inner > .bm-menu .rf-page { transition: color var(--t), background var(--t), border-color var(--t); } }

/* WV-A1 to A4 (10.10.2026): evidence hint band, previous assessment, task board, step effort */
.ev-missing-band { margin-bottom: 14px; }
.dash-alert.ev-missing-band { margin: 8px 0 0; padding: 6px 8px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); overflow-wrap: anywhere; }
.dash-alert.ev-missing-band a { color: inherit; text-decoration: underline; }
.gap-prev { flex-basis: 100%; }
.impact { white-space: nowrap; font-weight: 600; }
.task-fw { margin-top: 4px; }
.task-fw-filter { display: inline-flex; align-items: center; gap: 6px; }
.view-toggle { display: inline-flex; gap: 4px; }
/* Single-choice button group inside a filter bar (e.g. tasks: status and scope): framed so neighbouring groups read as
   separate choices; one button per group is active (btn-primary plus aria-current). */
.filter-group { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border: 1px solid var(--line-strong); border-radius: var(--radius); }
/* Board: four status columns side by side (WV-A2 adds "Wartet auf Freigabe"), two per row up to 1200 px, one below the
   other on narrow screens (no horizontal scrolling at 320 px) */
.task-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1200px) { .task-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.task-col { min-width: 0; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 12px; }
.task-col > h2 { margin: 0 0 10px; }
.task-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.task-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; overflow-wrap: anywhere; }
.task-card.is-overdue { border-left: 3px solid var(--err-ink); }
.task-card-status { margin-top: 6px; }
@media (max-width: 900px) { .task-board { grid-template-columns: minmax(0, 1fr); } }
.step-effort { display: inline-flex; align-items: center; gap: 4px; }
/* WV-A2: tag chips of a task, filter row (priority, person, tag) and the approval line; WV-A3: result stands of the gap analysis */
.task-tags { margin-top: 4px; }
.task-filters { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.task-filters select { max-width: 14rem; }
.task-approval { margin-top: 4px; }
.gap-stand-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.gap-stand-form input[type=text] { min-width: 12rem; }
/* WV-A1: evidence band and badge in the supplier questionnaire */
.sa-noev-band { margin-bottom: 12px; }
/* bp4 (Marc 10.10.2026): "no legal advice" note in the project area and the gap analysis (templates/project/_legal_note.php) */
.legal-note { margin: 6px 0 0; }
.legal-note .icon { width: 14px; height: 14px; vertical-align: -2px; }
.legal-note a { text-decoration: underline; text-underline-offset: 2px; }
/* NP1 page flag next to the bookmark star in the title row (sidebar layout, ADR 0031): same frame as the star button */
.title-row .bm-menu, .page-context .bm-menu { display: inline-flex; align-items: center; gap: 6px; }
.bm-menu .rf-page { box-sizing: border-box; width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink-soft); cursor: pointer; }
.bm-menu .rf-page:hover { border-color: var(--accent); color: var(--ink); }
.bm-menu .rf-page .icon { width: 16px; height: 16px; }
.bm-menu .rf-page.is-on, .bm-menu .rf-page.is-on:hover { color: var(--ok-ink); border-color: var(--ok-ink); background: var(--ok-bg); }
/* HG1 whistleblower system: public channel (templates/whistleblower/public/) and officer workspace */
.wb-org { font-weight: 600; font-size: 1.1rem; margin: 0; color: var(--ink); }
.wb-card { max-width: 46rem; }
.wb-intro, .wb-oral { border-left: 3px solid var(--line-strong); padding: 4px 0 4px 12px; margin: 12px 0; }
.wb-help { margin: 12px 0; }
.wb-help summary { cursor: pointer; font-weight: 600; }
.wb-secrets { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 16px 0; }
.wb-secrets dt { font-weight: 600; }
.wb-secrets dd { margin: 0; }
.wb-secrets code { font-size: 1.15rem; letter-spacing: .05em; overflow-wrap: anywhere; }
.wb-messages { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 10px; }
.wb-msg { border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; background: var(--surface); }
.wb-msg-note { border-style: dashed; }
.wb-msg p { margin: 0 0 4px; }
.wb-text { overflow-wrap: anywhere; white-space: normal; }
.wb-lang { margin-bottom: 6px; }
/* WCAG 2.5.8: each language link is a target of at least 24 x 24 px with room around it (44 px on touch); eight or ten links wrap */
.wb-lang { display: flex; flex-wrap: wrap; gap: 4px 8px; }
.wb-lang a { display: inline-flex; align-items: center; min-height: 24px; min-width: 24px; padding: 2px 6px; box-sizing: border-box; }
@media (pointer: coarse) { .wb-lang a { min-height: 44px; } }
.wb-logout { margin-top: 12px; }
.wb-inline { display: inline; }
/* DSB1 GDPR operations (templates/privacy/): checkbox groups of vocabularies, plain lists in tables, DPIA steps */
.privacy-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 4px 16px; margin: 6px 0 10px; }
.privacy-plain { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.privacy-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding-left: 1.2em; }
.privacy-steps li { padding-right: 4px; }
/* ---------- Guided wizard component (templates/landing/_wizard.php, wizard.js, docs/WIZARD.md) ----------
   Shared by the website (app.css is loaded there before site.css) and the portal (DPIA questionnaire, DSB1).
   Without JavaScript (.wz without .is-on) all steps are listed one below the other. */
.wz-step { display: grid; gap: 14px; min-width: 0; }
.wz-step[hidden], .wz-head[hidden], .wz-frame[hidden], .wz-done[hidden], .wz-foot [hidden], [data-wz-show-if][hidden], .wz .field-error[hidden] { display: none; }
.wz-frame { display: grid; gap: 22px; }
.wz-title { margin: 0; font-size: 1.2rem; line-height: 1.3; display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 96px; }
.wz-title:focus { outline: none; }
.wz-title:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 4px; }
.wz-intro { margin: -6px 0 0; color: var(--ink-soft); }
.wz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wz-foot .btn { min-height: 44px; }
.wz-foot [data-wz-next], .wz-foot [data-wz-submit] { margin-left: auto; }
.wz:not(.is-on) .wz-foot [data-wz-submit] { width: 100%; justify-content: center; }
.wz-foot .wz-order-first { order: 0; }
.wz-foot .wz-order-last { order: 1; }
.wz.is-on .wz-nojs { display: none; }
/* Guided mode: one compact frame, steps fade in briefly */
.wz.is-on .wz-frame { gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm, none); scroll-margin-top: 96px; }
.wz.is-on { scroll-margin-top: 96px; }
.wz.is-on .wz-step { min-height: 220px; align-content: start; }
.wz-head { display: grid; gap: 8px; }
.wz-count { margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.wz-progress { display: flex; gap: 4px; }
.wz-progress span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--line-strong); }
.wz-progress .is-done { background: var(--accent); }
.wz-progress .is-current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.wz-enter { animation: wz-in .18s ease-out; }
@keyframes wz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-enter { animation: none; } }
/* Summary step */
.wz-sum { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.wz-sum-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.wz-sum dt { font-weight: 600; overflow-wrap: anywhere; }
.wz-sum dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wz-sum-line + .wz-sum-line { margin-top: 4px; }
.wz-sum-k { color: var(--ink-soft); }
.wz-sum ul { margin: 2px 0 0; padding-left: 18px; }
.wz-sum-empty { color: var(--ink-soft); font-style: italic; }
.wz-sum-act .btn { min-height: 36px; }
.wz-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--ok-ink); border-radius: var(--radius-lg); background: var(--surface); }
.wz-done p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.wz-done .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ok-ink); }
.wz-done .btn { min-height: 44px; }
@media (max-width: 640px) {
  .wz.is-on .wz-frame { padding: 16px 14px; }
  .wz-sum-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-sum-row dd:not(.wz-sum-act) { grid-column: 1 / -1; grid-row: 2; }
  .wz-sum-act { grid-column: 2; grid-row: 1; }
  .wz-foot .btn { flex: 1 1 auto; justify-content: center; }
}
@media print { .wz-done, .wz-head, .wz-foot { display: none !important; } }
/* ---------- Guided wizard component in the portal (KI1 AI inventory classification, templates/ai-inventory/classify.php;
   same rules as the website section in site.css, docs/WIZARD.md). Keep both in sync. ----------
   Without JavaScript (.wz without .is-on) all steps are listed one below the other. */
.wz-step { display: grid; gap: 14px; min-width: 0; }
.wz-step[hidden], .wz-head[hidden], .wz-frame[hidden], .wz-done[hidden], .wz-foot [hidden], [data-wz-show-if][hidden], .wz .field-error[hidden] { display: none; }
.wz-frame { display: grid; gap: 22px; }
.wz-title { margin: 0; font-size: 1.2rem; line-height: 1.3; display: flex; align-items: baseline; gap: 10px; scroll-margin-top: 72px; }
.wz-title:focus { outline: none; }
.wz-title:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 4px; border-radius: 4px; }
.wz-intro { margin: -6px 0 0; color: var(--ink-soft); }
.wz-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wz-foot .btn { min-height: 44px; }
.wz-foot [data-wz-next], .wz-foot [data-wz-submit] { margin-left: auto; }
.wz:not(.is-on) .wz-foot [data-wz-submit] { width: 100%; justify-content: center; }
.wz.is-on .wz-nojs { display: none; }
/* Guided mode: one compact frame, steps fade in briefly */
.wz.is-on .wz-frame { gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm, none); scroll-margin-top: 72px; }
.wz.is-on { scroll-margin-top: 72px; }
.wz.is-on .wz-step { min-height: 220px; align-content: start; }
.wz-head { display: grid; gap: 8px; }
.wz-count { margin: 0; font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.wz-progress { display: flex; gap: 4px; }
.wz-progress span { flex: 1 1 0; height: 6px; border-radius: 3px; background: var(--line-strong); }
.wz-progress .is-done { background: var(--accent); }
.wz-progress .is-current { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-tint); }
.wz-enter { animation: wz-in .18s ease-out; }
@keyframes wz-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wz-enter { animation: none; } }
/* Summary step */
.wz-sum { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.wz-sum-row { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr) auto; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); align-items: start; }
.wz-sum dt { font-weight: 600; overflow-wrap: anywhere; }
.wz-sum dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.wz-sum-line + .wz-sum-line { margin-top: 4px; }
.wz-sum-k { color: var(--ink-soft); }
.wz-sum ul { margin: 2px 0 0; padding-left: 18px; }
.wz-sum-empty { color: var(--ink-soft); font-style: italic; }
.wz-sum-act .btn { min-height: 36px; }
.wz-done { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--ok-ink); border-radius: var(--radius-lg); background: var(--surface); }
.wz-done p { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.wz-done .icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ok-ink); }
.wz-done .btn { min-height: 44px; }
@media (max-width: 640px) {
  .wz.is-on .wz-frame { padding: 16px 14px; }
  .wz-sum-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wz-sum-row dd:not(.wz-sum-act) { grid-column: 1 / -1; grid-row: 2; }
  .wz-sum-act { grid-column: 2; grid-row: 1; }
  .wz-foot .btn { flex: 1 1 auto; justify-content: center; }
}
@media print { .wz-done, .wz-head, .wz-foot { display: none !important; } }
.wz .choice > label.check { display: flex; gap: 8px; align-items: flex-start; min-height: 44px; }
.ai-duties { margin: 0; padding-left: 18px; display: grid; gap: 10px; }

/* SB1 platform security board (templates/admin/platform_security/): internal note keeps its line breaks */
.ps-note { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Module check result (templates/training/check.php): option labels as .check rows, each graded option tinted by state */
.form fieldset > label.check { padding: 4px 6px; border-radius: 6px; }
.form fieldset > label.check > span { padding-top: 2px; }
label.qz-hit { background: var(--ok-bg); }
label.qz-missed { background: var(--warn-bg); }
label.qz-wrong { background: var(--err-bg); }
label.check input:disabled { opacity: 1; }
legend .badge { margin-left: 6px; vertical-align: middle; }

/* BP19.2 package advice on the whitepaper thank-you page (auth/layout loads only app.css; templates/landing/_package_cards.php, variant compact) */
.pc-packages-compact { margin: 24px 0 8px; }
.pc-packages-compact h2 { font-size: 1.15rem; margin: 0 0 8px; }
.pc-packages-compact .pc-package { margin: 12px 0 0; }
.pc-packages-compact .pc-package h3 { font-size: 1rem; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pc-packages-compact .pc-reasons { margin: 0 0 8px; padding-left: 20px; font-size: .9rem; }
.pc-packages-compact .pc-incl { color: var(--ink-faint, inherit); }
.pc-packages-compact .lp-cta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.pc-packages-compact .btn { max-width: 100%; white-space: normal; }

/* ---------- MOB1-A P1 touch foundation (1.70, checklist in docs/DESIGN-GUIDELINES.md "Handy-Checkliste") ----------
   Scoped to the portal shell (.shell, templates/layout.php); the website (templates/landing/) is not affected.
   Desktop with a mouse stays compact: the 44 px targets apply only to touch devices (pointer: coarse, phones and
   tablets), the 16 px field text also to narrow windows (iOS Safari zooms into fields with less than 16 px). */
@media (pointer: coarse), (max-width: 640px) {
  .shell :is(input:not([type]), input[type=text], input[type=email], input[type=tel], input[type=password], input[type=url],
    input[type=date], input[type=datetime-local], input[type=time], input[type=month], input[type=number], input[type=search],
    select, textarea) { font-size: 16px; }
  /* .code-input keeps its larger size (it has !important) */
}
@media (pointer: coarse) {
  /* Header tools: 44 x 44 (menu, search, bell, help, user card and the optional tools) */
  html body .topbar-inner > :is(.nav-toggle, .header-tool, .help-btn, .theme-toggle),
  html body .topbar-inner > .bm-menu > a, html body .topbar-inner > .cs-menu > summary, html body .topbar-inner > .user-menu > summary,
  html body .topbar-inner > .help-menu > summary, html body .topbar-inner > .bell-menu > summary {
    width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
  html body .topbar-search { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 760px) {
  html body .topbar-search { width: 44px; height: 44px; }
}
@media (pointer: coarse) {
  /* Buttons of every size: min-height with !important, because several toolbar rules above set 34 px with
     higher specificity (.page-head .row-actions .btn, .filter-bar .btn, mixed rows) */
  .shell :is(.btn, .btn-sm, .btn-xs) { min-height: 44px !important; }
  .shell .icon-btn { min-width: 44px; min-height: 44px; }
  /* Checkboxes and radios: the whole label row is the target; standalone boxes in tables get 28 px and spacing */
  .shell .check { min-height: 44px; align-items: center; }
  .shell .row-actions .check, .shell .page-head .row-actions .check { min-height: 44px; }
  .shell :is(td, th) > input:is([type=checkbox], [type=radio]), .shell .notif-pick input[type=checkbox] { width: 28px; height: 28px; margin: 8px; }
  /* Sidebar drawer rows and the skip link */
  .sb-row, .sb-link { min-height: 44px; }
  .skip-link { min-height: 44px; display: inline-flex; align-items: center; box-sizing: border-box; }
  .pagenav-toc a { padding-top: 12px; padding-bottom: 12px; }
  .news-close { min-width: 44px; min-height: 44px; }
}

/* Mein Konto > Sprache (2.0.4): every language row, also the beta languages inside the folded "Weitere Sprachen", is a 44 px
   target on phones and touch devices (the `.check` foundation above covers (pointer: coarse); this adds narrow windows without
   touch, where the rows were 24 px high). Desktop with a mouse and a wide window stays compact. */
@media (max-width: 640px) {
  .shell .lang-choice .check { min-height: 44px; align-items: center; }
}

/* Safe area (viewport-fit=cover in templates/layout.php): notch and home indicator on iPhones, also in landscape */
.topbar { padding-top: env(safe-area-inset-top, 0px); }
.topbar-inner { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.sticky-actions { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.site-foot { padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); }
@media (max-width: 760px) {
  body.has-sidebar .topbar-inner { padding-left: max(10px, env(safe-area-inset-left, 0px)); padding-right: max(10px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 860px) {
  .page { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
}
@media (max-width: 359px) {
  .topbar-inner { gap: 4px; }
}

/* "Was ist neu" on phones: one line (star, short title, "Anzeigen", close); the list opens on tap (templates/tour/_news.php) */
.news-title-short, .news-sum-short { display: none; }
@media (max-width: 640px) {
  .news-panel { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 4px 4px 4px 12px; margin-bottom: 12px; }
  .news-panel .news-head { display: contents; }
  .news-panel .news-head h2 { order: 1; flex: 1 1 auto; min-width: 0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .news-title-full, .news-sum-full, .news-teaser { display: none !important; }
  .news-title-short, .news-sum-short { display: inline; }
  .news-panel .news-details { order: 2; flex: 0 0 auto; }
  .news-panel .news-details > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; cursor: pointer; font-weight: 600; }
  .news-panel [data-news-close] { order: 3; }
  .news-panel .news-details[open] { order: 4; flex: 1 1 100%; padding: 0 8px 8px 0; }
  .news-panel .news-details[open] > summary { min-height: 36px; padding: 0; }
}

/* Floating page navigation on phones: a single "Zum Seitenanfang" button at the edge, so it does not cover text;
   sections and "Zum Seitenende" stay available on larger screens (templates/_pagenav.php, pagenav.js) */
@media (max-width: 640px) {
  .pagenav { left: auto; right: max(8px, env(safe-area-inset-right, 0px)); }
  .pagenav-bar { padding: 0; border-radius: 999px; }
  .pagenav-bar button { border-radius: 999px; }
  .pagenav-bar [data-pagenav-sections], .pagenav-bar [data-pagenav-end], .pagenav-pos, .pagenav-toc { display: none !important; }
  body.has-pagenav .page { padding-bottom: 72px; }
}
@media (max-width: 640px) {
  /* At the top of the page the button has nothing to do (pagenav.js disables it): hide it there instead of covering text */
  .pagenav:has([data-pagenav-top]:disabled) { display: none; }
}

/* ---------- MOB1-A bottom navigation on phones (templates/nav/_bottom.php, Nav::bottom(), docs/NAVIGATION.md) ----------
   Up to 640 px only, fixed at the bottom above the home indicator (safe area), colours of the sidebar (contrast checked
   in light and dark). The page, the floating page navigation and sticky action bars move up by its height. */
:root { --bottom-nav-h: 60px; }
.bottom-nav { display: none; }
@media (max-width: 640px) {
  .bottom-nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--sb-bg); border-top: 1px solid var(--sb-line);
    box-shadow: 0 -2px 10px rgba(12, 24, 48, .08); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
  .bottom-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
  .bottom-nav li { flex: 1 1 0; min-width: 0; }
  .bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--bottom-nav-h); padding: 6px 4px;
    box-sizing: border-box; color: var(--sb-faint); font-size: .74rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none !important; }
  .bottom-nav a:hover { color: var(--sb-strong); background: var(--sb-hover); }
  .bottom-nav a:focus-visible { outline: 2px solid var(--sb-focus); outline-offset: -3px; border-radius: var(--radius); }
  .bottom-nav a[aria-current="page"] { color: var(--sb-strong); box-shadow: inset 0 3px 0 var(--sb-bar); }
  .bottom-nav a[aria-current="page"] .icon { color: var(--sb-bar); }
  .bottom-nav-icon { position: relative; display: inline-flex; }
  .bottom-nav .icon { width: 22px; height: 22px; display: block; }
  .bottom-nav-text { max-width: 100%; overflow-wrap: anywhere; }
  .bottom-nav-badge { position: absolute; top: -6px; left: 14px; min-width: 18px; padding: 0 5px; border-radius: 999px; font-size: .68rem; font-weight: 700; line-height: 18px;
    text-align: center; font-variant-numeric: tabular-nums; background: var(--sb-count); color: var(--sb-count-ink); }
  .bottom-nav-badge.is-warn { background: var(--sb-badge-warn); color: var(--sb-badge-ink); }
  .bottom-nav-badge.is-err { background: var(--sb-badge-err); color: var(--sb-badge-err-ink); }
  /* Room for the bar: page end, footer, floating page navigation, sticky action bars, focus scrolling (WCAG 2.4.11) */
  body.has-bottom-nav .site-foot { padding-bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav .pagenav { bottom: calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav:has(.sticky-actions) .pagenav { bottom: calc(var(--bottom-nav-h) + 88px + env(safe-area-inset-bottom, 0px)); }
  body.has-bottom-nav .sticky-actions { bottom: calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px)); }
  html:has(body.has-bottom-nav) { scroll-padding-bottom: calc(var(--bottom-nav-h) + 72px); }
  /* The open drawer covers everything, the bar included (sidebar z-index 90, backdrop 80) */
}
@media print { .bottom-nav { display: none !important; } }

/* MOB1-B Lists as cards (release 1.70): tables marked with data-cards become one card per row below 640 px.
   CardList::apply() (src/CardList.php) adds the hidden column labels (.cl-label), ARIA table roles and the classes
   cl-title (card title), cl-actions (column without header) and cl-group (group row). Without the attribute a table
   keeps scrolling in .table-wrap. Rights matrix and coverage overview stay tables on purpose (decision Marc 11.10.2026). */
.cl-label, .tt-sort { display: none; }
@media (max-width: 640px) {
  table[data-cards], table[data-cards] > tbody, table[data-cards] > tfoot, table[data-cards] > tbody > tr, table[data-cards] > tfoot > tr,
  table[data-cards] > tbody > tr > td, table[data-cards] > tbody > tr > th, table[data-cards] > tfoot > tr > td { display: block; width: auto; }
  table[data-cards] > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table[data-cards] > tbody > tr { display: flex; flex-direction: column; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  table[data-cards] > tbody > tr:last-child { margin-bottom: 0; }
  table[data-cards] > tbody > tr > td, table[data-cards] > tbody > tr > th { border: 0; padding: 3px 0; text-align: left; white-space: normal; }
  table[data-cards] > tbody > tr > td.nowrap { white-space: normal; }
  /* Long status badges (supplier flags, notice periods) wrap inside a card instead of sticking out at 320 px / 200 % zoom (ga-7, 1.4.10) */
  table[data-cards] > tbody > tr .badge { white-space: normal; max-width: 100%; text-align: left; }
  /* Label in a left column; the cell content keeps its own flow (several nodes, <br>), so no grid on the cell */
  table[data-cards] > tbody > tr > :not(.cl-title):not(.cl-actions):not(.cl-group):not(.cl-stack):not(.cl-select) { display: flow-root; padding-left: 7.5rem; overflow-wrap: anywhere; }
  table[data-cards] > tbody > tr > :not(.cl-title):not(.cl-actions):not(.cl-group):not(.cl-stack):not(.cl-select) > .cl-label { float: left; width: 7rem; margin-left: -7.5rem; padding-top: 2px; }
  /* Bulk selection checkbox in the top right corner of the card, the title keeps room for it */
  table[data-cards] > tbody > tr:has(> .cl-select) { position: relative; }
  table[data-cards] > tbody > tr > .cl-select { position: absolute; top: 4px; right: 4px; padding: 0; }
  table[data-cards] > tbody > tr:has(> .cl-select) > .cl-title { padding-right: 44px; }
  table[data-cards] > tbody > tr > .cl-stack { padding-top: 8px; }
  table[data-cards] > tbody > tr > .cl-stack > .cl-label { margin-bottom: 6px; }
  table[data-cards] .cl-label { display: block; font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); overflow-wrap: break-word; }
  table[data-cards] .cl-title { order: -1; font-size: 1rem; font-weight: 600; padding-bottom: 6px; overflow-wrap: anywhere; }
  table[data-cards] .cl-actions { padding-top: 8px; }
  table[data-cards] .cl-actions .row-actions, table[data-cards] .cl-actions form { display: flex; flex-wrap: wrap; gap: 8px; }
  table[data-cards] > tbody > tr.group-row, table[data-cards] > tbody > tr:has(> .cl-group) { margin: 14px 0 6px; padding: 0; border: 0; background: none; }
  table[data-cards] .cl-group { font-size: .82rem; font-weight: 700; color: var(--ink-soft); text-transform: none; letter-spacing: 0; padding: 0; background: none; }
  table[data-cards] > tbody > tr.is-muted { opacity: .75; }
  table[data-cards] .hide-sm { display: none; }
  .table-wrap:has(> table[data-cards]) { overflow-x: visible; }
  /* Sorting as a select in card mode (table-tools.js; the column headers are hidden) */
  .tt-sort { display: flex; align-items: center; gap: 6px; }
}

/* 1.91-K margin view (templates/partner/_margin.php): tables with class cards-md stay cards up to 767 px and become a
   table only from 768 px (decision 19.10.2026, wide money columns). Same card rules as the 640 px block above. */
@media (min-width: 641px) and (max-width: 767px) {
  table.cards-md[data-cards], table.cards-md[data-cards] > tbody, table.cards-md[data-cards] > tbody > tr,
  table.cards-md[data-cards] > tbody > tr > td { display: block; width: auto; }
  table.cards-md[data-cards] > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.cards-md[data-cards] > tbody > tr { display: flex; flex-direction: column; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  table.cards-md[data-cards] > tbody > tr > td { border: 0; padding: 3px 0; text-align: left; white-space: normal; }
  table.cards-md[data-cards] > tbody > tr > :not(.cl-title) { display: flow-root; padding-left: 7.5rem; overflow-wrap: anywhere; }
  table.cards-md[data-cards] > tbody > tr > :not(.cl-title) > .cl-label { display: block; float: left; width: 7rem; margin-left: -7.5rem; padding-top: 2px; font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--ink-soft); }
  table.cards-md[data-cards] .cl-title { order: -1; font-size: 1rem; font-weight: 600; padding-bottom: 6px; overflow-wrap: anywhere; }
  .table-wrap:has(> table.cards-md[data-cards]) { overflow-x: visible; }
}
/* The totals stand on top of the view as facts; the sum row is only needed in the table layout */
@media (max-width: 767px) { table.cards-md[data-cards] > tfoot { display: none; } }

/* MOB1-B P2 tasks and deadlines: status as three large buttons on phones (templates/plan/tasks.php $statusCell),
   key figures in one row so the list starts higher (M5) */
.st-seg { display: none; }
@media (max-width: 640px) {
  .st-desk { display: none; }
  .st-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; }
  .st-seg .btn { min-height: 44px; justify-content: center; padding: 6px 4px; white-space: normal; line-height: 1.2; text-align: center; }
  .task-card-status .st-seg { margin-top: 4px; }
  .cov-stats { grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
  .cov-stats .panel { padding: 8px 10px; }
  .cov-stats strong { font-size: 1.25rem; }
  .cov-stats span { font-size: .75rem; line-height: 1.25; overflow-wrap: anywhere; }
}

/* MOB1-B P3 incident detail: next reporting deadline directly below the title (templates/incidents/_duebar.php) and
   secondary panels folded on phones (section[data-fold-sm], public/assets/fold-sm.js; open without JavaScript) */
.inc-duebar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-lg); background: var(--surface); color: inherit; text-decoration: none; }
a.inc-duebar:hover { border-color: var(--accent); }
.inc-duebar.is-over { border-left-color: var(--danger-fill); }
.inc-duebar.is-soon, .inc-duebar.is-asap { border-left-color: var(--accent-bright); }
.inc-duebar.is-done { border-left-color: var(--ok-ink); }
.inc-duebar-k { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.inc-duebar-k .icon { width: 16px; height: 16px; }
.inc-duebar-stage { font-size: 1rem; }
.fold-sm-btn { display: none; }
@media (max-width: 640px) {
  .inc-duebar { flex-direction: column; align-items: flex-start; }
  .fold-sm-on > .fold-sm-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
  .fold-sm-on > .fold-sm-head > h2 { margin: 0; min-width: 0; }
  .fold-sm-on > .fold-sm-head > .fold-sm-btn { display: inline-flex; flex: 0 0 auto; }
  section.fold-sm-on.is-folded > :not(.fold-sm-head) { display: none !important; }
}

/* MOB1-B P4 training lesson: the header wraps on phones, so "Kurze Tour" keeps its width (finding M2) */
.page-head .page-tour-btn { flex-shrink: 0; white-space: nowrap; }
@media (max-width: 640px) {
  .tl-head { flex-wrap: wrap; }
}
/* MOB1-B P4: answer rows of checks and questionnaires as 48 px touch rows (finding M1), confirmation at the end of a
   distributed document (templates/documents/release.php) */
@media (max-width: 640px), (pointer: coarse) {
  .form fieldset > label.check { min-height: 48px; align-items: center; padding: 8px 10px; margin: 0 0 6px; border: 1px solid var(--line); border-radius: var(--radius); }
}
.doc-ack-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; border-left: 4px solid var(--accent); }
.doc-ack-end p { margin: 0; }
@media (max-width: 640px) { .doc-ack-end .btn { width: 100%; justify-content: center; } .doc-ack-end form { width: 100%; } }

/* MOB1-B P6 "Foto aufnehmen" next to evidence uploads (Evidence::cameraField): only on touch devices, where the
   capture attribute opens the rear camera; desktop keeps the single file picker */
.cam-field { display: none; }
@media (pointer: coarse) {
  .cam-field { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 600; cursor: pointer; }
  .cam-field .icon { width: 18px; height: 18px; }
  .cam-field input[type=file] { font-size: .85rem; font-weight: 400; max-width: 100%; min-width: 0; flex: 1 1 10em; }
  /* 320 px (13.10.2026, WCAG 1.4.10): the label with padding must not grow past its column */
  .cam-field { max-width: 100%; box-sizing: border-box; }
  .cam-field:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
}
@media (max-width: 360px) {
  table[data-cards] > tbody > tr > :not(.cl-title):not(.cl-actions):not(.cl-group):not(.cl-stack):not(.cl-select) { padding-left: 6.25rem; }
  table[data-cards] > tbody > tr > :not(.cl-title):not(.cl-actions):not(.cl-group):not(.cl-stack):not(.cl-select) > .cl-label { width: 5.75rem; margin-left: -6.25rem; }
}


/* Supplier approval status in the cockpit (release 1.71, SupplierApproval::STATUSES; keys reduced to [a-z]) */
.dist-seg-approved { --seg: var(--ok-ink); }
.dist-seg-conditional { --seg: var(--accent-dark); }
.dist-seg-notapproved { --seg: var(--err-ink); }
.dist-seg-pending { --seg: var(--ink-faint); }
/* ONP1 company policy for notification channels (templates/company/_notify_policy.php) and its hints on Mein Konto */
.notify-policy-table { table-layout: fixed; width: 100%; min-width: 520px; }
.notify-policy-table thead th:first-child { width: 22%; }
.notify-policy-table select { width: 100%; font-size: .875rem; padding-left: 8px; }
.notify-policy-table th[scope="row"] { font-weight: 600; }
.notify-policy-groups { margin: 12px 0; }
.notify-policy-groups > summary { cursor: pointer; font-weight: 600; }
.notify-policy-note { margin: 0; }
/* ---------- MOB2-A status comment dialog (status-note.js, templates/plan/_status_note_dialog.php) ---------- */
dialog.status-note-dialog > form { display: grid; gap: 10px; padding: 16px 18px; }
dialog.status-note-dialog h2 { margin: 0; font-size: 1.15rem; }
dialog.status-note-dialog textarea { width: 100%; min-height: 6.5rem; }
dialog.status-note-dialog .status-note-err { color: var(--err-ink); margin: 0; }
dialog.status-note-dialog .row-actions { justify-content: flex-end; }
/* phones: the dialog sits at the bottom like a sheet, above the safe area */
@media (max-width: 640px) {
  dialog.status-note-dialog:modal { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
/* ACC1 "Konto wechseln" in the account menu (templates/account/_user_menu.php): address on the first line, company below */
.user-switch-item { flex-direction: column; align-items: flex-start; gap: 2px; }
.user-switch-mail { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-switch-org { font-size: .8rem; color: var(--ink-faint); }
/* ---------- OB1 first-run setup: assistant (?r=onboarding) and setup checklist (templates/help/_onboarding.php) ---------- */
.ob-steps ol { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.ob-steps a { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); text-decoration: none; font-size: .86rem; background: var(--surface); }
.ob-steps a:hover { border-color: var(--accent); color: var(--ink); }
.ob-steps a:focus-visible { outline: 3px solid var(--focus, var(--accent)); outline-offset: 2px; }
.ob-step-no { width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line-strong); font-weight: 600; font-size: .8rem; flex-shrink: 0; }
.ob-step-no .icon { width: 14px; height: 14px; }
.ob-steps .is-done .ob-step-no { background: var(--ok-fill); border-color: var(--ok-fill); color: #fff; }
.ob-steps .is-current a { border-color: var(--accent); color: var(--ink); font-weight: 600; box-shadow: 0 0 0 2px var(--accent-tint); }
.ob-steps .is-current .ob-step-no { border-color: var(--accent); }
.ob-wz .wz-step { min-height: 0; }
.ob-wz fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px 14px; margin: 0; min-width: 0; }
.ob-wz legend { font-weight: 600; padding: 0 4px; }
.ob-foot { justify-content: flex-start; }
.ob-foot [value="next"], .ob-foot [value="finish"] { margin-left: auto; }
.ob-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; }
.ob-card h3 { margin: 0; display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.ob-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ob-links a { font-weight: 600; display: inline-flex; gap: 6px; align-items: center; min-height: 32px; }
.ob-cta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 12px 0 4px; }
.ob-section { border-top: 1px solid var(--line); padding: 6px 0; }
.ob-section > summary { cursor: pointer; min-height: 36px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ob-section-title { font-weight: 600; }
.ob-na { margin-top: 4px; }
.ob-na > summary { cursor: pointer; color: var(--ink-soft); display: inline-block; min-height: 24px; }
.ob-na-form { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-end; margin-top: 6px; }
.ob-na-form label { flex: 1 1 14rem; }
.onboarding-list li.is-na .onboarding-mark { background: var(--line-strong); border-color: var(--line-strong); }
.onboarding-areas { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 2px; }
.onboarding-areas li { display: flex; gap: 8px; }
@media (max-width: 600px) { .ob-foot .btn { flex: 1 1 100%; justify-content: center; } .ob-foot [value="next"], .ob-foot [value="finish"] { order: -1; margin-left: 0; } }
/* ONP1b: quiet-hours window (two selects with "bis") in a wider second column; label styled like the form labels */
.notify-row-wide { grid-template-columns: minmax(0, 1fr) auto; }
.notify-times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.form .notify-times select { width: auto; flex: 1 1 7em; min-width: 6em; max-width: 11em; }
.form .notify-label { font-weight: 700; font-size: .88rem; }
.notify-policy .notify-group { margin-top: 16px; }
@media (max-width: 640px) { .notify-row-wide { grid-template-columns: 1fr; } }

/* MSO1 part C: header site switcher (templates/sites/_switcher.php) and group overview (templates/group/index.php) */
.topbar-site { display: flex; align-items: center; gap: 6px; min-width: 0; }
.topbar-site-label { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.topbar-site-label svg { flex: 0 0 auto; }
.topbar-site select { max-width: 220px; min-height: 34px; padding: 4px 8px; font-size: .875rem; }
@media (max-width: 640px) {
  .topbar-site select { max-width: 120px; min-width: 44px; min-height: 44px; }
}
/* Phones (up to 420 px): menu, search, site switcher, inbox, bell, help and user are 7 touch targets of 44 px. With the
   pin icon next to the select the switcher was wider than its box and its select overlapped the inbox (envelope)
   button at 375 px. The select alone carries the accessible name (sr-only label text) and shows the arrow; the box
   no longer shrinks below the select. */
@media (max-width: 420px) {
  .topbar-site-label svg { display: none; }
  .topbar-site { flex: 0 0 auto; }
  .topbar-site select { width: 50px; min-width: 50px; max-width: 50px; padding-left: 6px; text-overflow: clip; }
}
.group-light { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.group-light svg { width: 1em; height: 1em; }
.group-light-ok { color: var(--ok-ink); }
.group-light-warn { color: var(--warn-ink); }
.group-light-bad { color: var(--err-ink); }
.group-reasons, .group-trend { display: block; }
.group-table tr.group-central td { background: var(--info-bg); }
.group-table tr.group-total td { border-top: 2px solid var(--line-strong); font-weight: 600; }
/* Click test 2.0 (201): long KPI headings wrap, so the 10 columns fit at 1280 px without a sideways scroll */
@media (min-width: 761px) { .group-table th.tt-sortable { white-space: normal; } }
.dash-site-view { margin: 4px 0 0; }
.group-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.group-impl summary { cursor: pointer; white-space: nowrap; }
.group-filter { margin: 0 0 12px; }
.group-filter > summary { list-style: none; display: inline-flex; }
.group-filter > summary::-webkit-details-marker { display: none; }
.group-filter[open] > summary { margin-bottom: 8px; }
/* Phones: the group table becomes cards (data-cards). Its sort links stay usable as a row of 44 px buttons above the
   cards instead of hiding in the clipped header (focusable but invisible); long unbreakable values wrap */
@media (max-width: 640px) {
  table.group-table[data-cards] > thead { display: block; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 0 0 10px; }
  /* one row of sort chips that scrolls sideways inside itself (content first, DESIGN-GUIDELINES section 10) */
  table.group-table[data-cards] > thead > tr { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
  table.group-table[data-cards] > thead > tr > th { flex: 0 0 auto; white-space: nowrap; }
  table.group-table[data-cards] > thead > tr > th { display: block; padding: 0; border: 0; background: none; width: auto; }
  table.group-table[data-cards] > thead > tr > th:not(:has(a)) { display: none; }
  table.group-table[data-cards] > thead a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .group-table .nowrap, .group-impl summary { white-space: normal; }
  #meldungen-rechtspersonen details > summary { display: flex; align-items: center; min-height: 44px; }
}
/* Applicability result (one section per law, per legal entity tab): a grid item's minimum width follows its longest
   unbreakable content (authority links); without minmax(0, ...) the column was 708 px wide at 375 px (SC 1.4.10) */
.ac-results { grid-template-columns: minmax(0, 1fr); }
.ac-law a { overflow-wrap: anywhere; }

/* GROW1 Skalierungs-Auslöser (templates/admin/_growth.php): explanation under the trigger name stays regular in the card title */
#skalierung .sys-note { font-weight: 400; }
/* ---------- MOB2-B phone tools (mobile-tools.js, templates/_mobile_tools.php, docs/DESIGN-GUIDELINES.md section 9) ----------
   Content first on phones (decisions Marc 12.10.2026 F1-F6): slim page header with a "…" sheet, key figures as one
   chip row, sticky list search with a filter sheet, no board, no empty card fields. Desktop unchanged: every rule here
   sits below 640 px or styles elements that only exist there (the script builds them below 640 px only). */
.mt-sheet-sub { font-size: .9rem; margin: 16px 0 6px; }
.mt-intro-btn { background: none; border: 0; padding: 0; color: var(--accent-dark); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  /* Header: eyebrow off, menu breadcrumbs off on top-level pages (two steps; sub-pages keep their way back) */
  .page-head .eyebrow { display: none; }
  .page-context.mt-off { display: none; }
  .page-head.mt-head { margin-bottom: 12px; gap: 6px; }
  .page-head.mt-head .title-row { flex-wrap: nowrap; align-items: center; }
  .page-head.mt-head .title-row > h1 { min-width: 0; }
  .mt-more-btn { margin-left: auto; flex: none; width: 44px; min-width: 44px; padding: 0; justify-content: center; }
  .mt-more-btn .icon { width: 20px; height: 20px; }
  .page-head.mt-head h1 + .mt-more-btn { float: right; }
  .mt-intro { display: flex; align-items: center; gap: 8px; }
  .mt-intro > p { flex: 1 1 auto; min-width: 0; }
  .mt-intro > .mt-intro-btn { flex: none; }
  .mt-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden; margin-bottom: 0; }
  .mt-intro-btn { min-height: 44px; }
  /* "Neu in" only on the start page (F3) */
  .news-panel.news-offstart { display: none; }
  /* Key figures as one chip row that scrolls sideways inside itself (F5); the page itself never scrolls sideways */
  .cov-stats.kpi-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 10px; padding: 2px 16px; scroll-padding-inline: 16px; }
  .cov-stats.kpi-chips::-webkit-scrollbar { display: none; }
  .cov-stats.kpi-chips .panel { flex: none; white-space: nowrap; flex-wrap: nowrap; }
  /* Sticky search row with the filter button (filter bar folded into the sheet) */
  .mt-searchrow { position: sticky; top: calc(var(--topbar-h, 56px) + env(safe-area-inset-top, 0px)); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 0 -16px 10px; padding: 8px 16px; background: var(--bg); border-bottom: 1px solid var(--line); }
  .mt-searchrow .list-search { flex: 1 1 0; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
  .mt-searchrow .list-search input[type=search] { flex: 1 1 auto; min-width: 0; max-width: none; }
  .mt-searchrow .list-search .btn { flex: none; width: 44px; padding: 0; justify-content: center; }
  .mt-searchrow .ls-btn-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mt-searchrow > .xref-chip { order: 3; flex-basis: 100%; }
  .mt-filter-btn { flex: none; gap: 6px; }
  .mt-filter-btn.is-active { border-color: var(--accent); color: var(--ink); }
  .mt-count:not(:empty) { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--accent); color: var(--on-accent); font-size: .76rem; font-weight: 700; }
  /* Bottom sheet (shared by "…" and filter): full width at the bottom, scrolls inside, above the safe area */
  dialog.mt-sheet:modal { width: 100vw; max-width: 100vw; max-height: 85vh; margin: auto 0 0; padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0;
    border-radius: 16px 16px 0 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; }
  dialog.mt-sheet::backdrop { background: rgba(12, 24, 48, .45); }
  .mt-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--line); }
  .mt-sheet-head h2 { margin: 0; }
  .mt-sheet-close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); }
  .mt-sheet-body { overflow-y: auto; padding: 12px 16px 16px; overscroll-behavior: contain; }
  .mt-sheet .row-actions, .mt-sheet .filter-bar { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
  .mt-sheet .row-actions > *, .mt-sheet .filter-bar > * { width: 100%; }
  .mt-sheet :is(.row-actions, .filter-bar) form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .mt-sheet .filter-bar label { min-width: 0; }
  .mt-sheet .filter-bar label select { width: 100%; }
  .mt-sheet .filter-group, .mt-sheet .view-toggle { display: flex; flex-wrap: wrap; gap: 6px; }
  .mt-sheet .filter-group > .btn, .mt-sheet .view-toggle > .btn { flex: 1 1 auto; justify-content: center; }
  .mt-sheet .page-tour { margin: 0; }
  .mt-sheet .bm-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
  .mt-sheet .bm-menu > .bm-opener { min-height: 44px; }
  .mt-sheet .bm-pop { position: static; flex: 1 1 100%; width: auto; max-width: none; margin-top: 0; box-shadow: none; }
  .mt-sheet .tt-sort { display: flex; }
  .mt-sheet .tt-sort select { flex: 1 1 auto; }
  /* No board on phones (F4); empty card fields left out (F6) */
  .mt-sheet .view-toggle.mt-phone-hide { display: none; }
  table[data-cards] > tbody > tr > td.mt-empty { display: none; }
  /* Compact cards: the list panel around a card list loses its own frame, so cards are not boxed twice */
  section.panel:has(> .table-wrap > table[data-cards]) { padding: 0; border: 0; background: none; box-shadow: none; }
}
@media (max-width: 640px) and (prefers-reduced-motion: no-preference) {
  dialog.mt-sheet[open] { animation: mt-sheet-in .18s ease-out; }
  @keyframes mt-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}
/* Help tip "?" (help_tip(), src/helpers.php) on touch devices: the visible circle stays 20 px, an invisible ::before
   extends the tap area to 44 x 44 px (WCAG 2.5.8, finding from the a11y check of MSO1-C, 12.10.2026) */
@media (pointer: coarse) {
  .help-tip-btn { position: relative; }
  .help-tip-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 999px; }
}

/* ---------- MOB2-C phone pages (mobile-tools.js, docs/DESIGN-GUIDELINES.md section 11) ----------
   Content first on the list pages (documents, training, assets, risks, suppliers, deadlines, incidents, start): page
   tabs as one row that scrolls sideways, key figures as chips, filters and export folded away. Desktop unchanged. */
@media (max-width: 640px) {
  /* Page tabs: one row, scrolls sideways inside itself (the page never does); 44 px tap height */
  #main .page-tabs, #main .board-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px;
    padding-left: 16px; padding-right: 16px; scroll-padding-inline: 16px; }
  #main .page-tabs::-webkit-scrollbar, #main .board-tabs::-webkit-scrollbar { display: none; }
  #main .page-tabs > *, #main .board-tabs > * { flex: none; white-space: nowrap; }
  #main .page-tabs > .page-tab, #main .board-tabs > a { min-height: 44px; display: inline-flex; align-items: center; }
  /* Export panels parked in the "…" sheet lose their own frame */
  .mt-sheet .panel[data-mt-more] { padding: 0; border: 0; box-shadow: none; background: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  .mt-sheet [data-mt-more] { margin-top: 12px; }
  /* Search part of a list-tools filter form kept in the sticky row; its label text stays for screen readers */
  .mt-searchrow > .tt-search { flex: 1 1 0; min-width: 0; max-width: none; width: auto; margin: 0; }
  .mt-searchrow > .list-search-bar { flex: 1 1 0; min-width: 0; margin: 0; }
  .mt-searchrow > .list-search-bar label { display: block; margin: 0; }
  .mt-searchrow > .list-search-bar label > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .mt-searchrow > .list-search-bar input[type=search] { width: 100%; max-width: none; }
  /* List tools inside the sheet: the filter dropdown shows its panel open, views as a plain list */
  .mt-sheet .list-tools { display: flex; flex-direction: column; align-items: stretch; gap: 10px; margin: 0; }
  .mt-sheet details.mt-unfold > summary { display: none; }
  .mt-sheet .list-filter-panel, .mt-sheet .list-views-pop { position: static; width: auto; max-height: none; margin: 0; padding: 0; border: 0; box-shadow: none; }
  .mt-sheet .asset-filter { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .mt-sheet .asset-filter label { min-width: 0; flex: none; }
  .mt-sheet .asset-filter label select, .mt-sheet .asset-filter label input:not([type=checkbox]):not([type=radio]) { width: 100%; }
  .tt-bar.mt-tt-nosearch > .tt-search { display: none; }
  .tt-bar.mt-tt-nosearch:not(:has(> :not(:empty):not(.tt-search))) { display: none; }
  .mt-phone-off { display: none; }
  /* Muted cards (e.g. retired assets) keep full opacity on the page background: their badges stay at 4.5 : 1 (axe);
     the muted look comes from the faint text colour of tr.is-muted */
  table[data-cards] > tbody > tr.is-muted { opacity: 1; }
  /* Key figure cards two per row (training overview, dashboard), so the list below comes sooner */
  #main .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Start page header: same slim header as other pages (eyebrow off, tour and bookmark in the "…" sheet) */
  .st-head .eyebrow { display: none; }
  .st-head.mt-head .title-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
  .st-head.mt-head .title-row > h1 { min-width: 0; margin: 0; }
  /* The list panel around card lists inside a bulk form loses its frame too (MOB2-B does it for direct card lists) */
  #main section.panel#liste:has(table[data-cards]) { padding: 0; border: 0; background: none; box-shadow: none; }
  #main section.panel#liste:has(table[data-cards]) > form > p.small.muted:first-of-type { margin: 0 0 6px; }
  #main .page-head.mt-head + .page-tabs, #main .page-head.mt-head + .board-tabs { margin-top: -4px; }
  .mt-sheet details.col-chooser { margin: 12px 0 0; }
  .mt-sheet > .mt-sheet-body > .page-tour { display: flex; justify-content: flex-start; margin: 12px 0 0; }
  .mt-sheet form.panel { border: 0; box-shadow: none; background: none; padding: 0; margin: 0; }
}

/* MOB2-E top bar on 320 px phones (DESIGN-GUIDELINES 11.1a): below 360 px mobile-tools.js moves the less important header
   tools (site switcher, inboxes) into the sheet "Weitere Werkzeuge" behind a "…" button when they do not fit in one row. */
@media (max-width: 359px) {
  .topbar-inner > .mt-tools-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
  .topbar-inner > .mt-tools-btn .icon { width: 16px; height: 16px; }
  .mt-sheet-tools .mt-sheet-body { display: flex; flex-direction: column; gap: 8px; }
  .mt-sheet-tools .header-tool { position: relative; display: flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: 44px; padding: 8px 12px;
    color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
  .mt-sheet-tools .header-tool .icon { width: 20px; height: 20px; flex: none; }
  .mt-sheet-tools .header-tool .bell-count { position: static; margin-left: auto; }
  .mt-sheet-tools .topbar-site, .mt-sheet-tools .topbar-site-label { width: 100%; }
  .mt-sheet-tools .topbar-site select { flex: 1 1 auto; width: 100%; max-width: none; min-height: 44px; }
  .mt-sheet-tools .topbar-site-label svg { display: block; }
}

/* ---------- CT1 control tests (templates/control_tests/) ---------- */
.ct-status { margin: .25rem 0 0; }
.ct-fail { color: var(--err-ink); font-weight: 600; }
.ct-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ct-tabs .ct-view { margin-left: auto; }
.ct-count { font-variant-numeric: tabular-nums; }
.ct-count::before { content: "("; }
.ct-count::after { content: ")"; }
.ct-row-fail td:first-child { border-left: 3px solid var(--err-ink); }
.ct-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.ct-fold { margin: 8px 0; }
.ct-fold > summary { list-style: none; display: inline-flex; }
.ct-fold > summary::-webkit-details-marker { display: none; }
.ct-fold[open] > summary { margin-bottom: 8px; }
.ct-fold textarea { width: 100%; }
@media (max-width: 639px) {
  /* Content first (DESIGN-GUIDELINES 10.2): one row of filters that scrolls sideways inside itself */
  .ct-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ct-tabs .btn { flex: 0 0 auto; }
  .ct-tabs .ct-view { margin-left: 0; }
}

/* ===== MOB3-A console on phones (decision Marc 13.10.2026, docs/NAVIGATION.md "Untere Navigation",
   docs/DESIGN-GUIDELINES.md section 11.2) ===== */
/* Long labels of the console bar ("Systemzustand", "Interessenten") break at a syllable, not at any letter */
.bottom-nav-text { -webkit-hyphens: auto; hyphens: auto; }
/* "Mein Tag" (templates/admin/start.php): one light list per width; the phone list is sorted by severity and folds the
   lights "In Ordnung" into one row. display: none keeps the hidden list away from screen readers too. */
.myday-lights-phone { display: none; }
.myday-fine > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line);
  border-left: 5px solid var(--ok-ink); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); cursor: pointer;
  font-weight: 600; color: var(--ok-ink); }
.myday-fine > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.myday-fine-names { flex-basis: 100%; font-weight: 400; font-size: .86rem; color: var(--ink-soft); }
.myday-fine[open] > summary { margin-bottom: 8px; }
@media (max-width: 640px) {
  .myday-lights-wide { display: none; }
  .myday-lights-phone { display: grid; gap: 8px; }
  .myday-lights-phone .myday-lights { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  /* Compact light: area and state in one line, reason and link below */
  .myday-lights-phone .myday-light { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 10px; padding: 10px 14px; }
  .myday-lights-phone .myday-light-reason, .myday-lights-phone .myday-light-link { grid-column: 1 / -1; }
  .myday-lights-phone .myday-light-state { font-size: .95rem; text-align: right; }
  /* Area filter: one chip row that scrolls sideways inside itself (the page never scrolls sideways), 44 px chips */
  .myday-filter { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px; }
  .myday-filter::-webkit-scrollbar { display: none; }
  .myday-chip { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 640px) and (pointer: coarse) { .myday-chip { min-height: 44px; } }
/* Icon-only filter links in table cells (e.g. "Nur Nutzer dieses Unternehmens" on admin-users): at least 24 x 24 px
   (WCAG 2.5.8 target size, axe finding 13.10.2026) */
td a.filter-link { min-width: 24px; justify-content: center; }
/* ---------- USP-B Regulatorik-Radar (templates/radar/, templates/admin/radar/) ---------- */
.rr-text { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 70ch; }
.rr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.rr-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: var(--bg); }
.rr-item h2 { margin: 4px 0 8px; font-size: 1.1rem; overflow-wrap: anywhere; }
.rr-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: .85rem; color: var(--ink-faint); }
.rr-affected { margin: 8px 0 0; padding-left: 18px; }
.rr-affected li { margin: 2px 0; overflow-wrap: anywhere; }
.rr-assess { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; margin-top: 12px; }
.rr-assess label { flex: 1 1 200px; }
.rr-history { font-size: .85rem; margin-top: 8px; }
@media (max-width: 600px) {
  .rr-item { padding: 12px; }
  .rr-assess .btn { width: 100%; min-height: 44px; }
}
.kv + .h4 { margin-top: 16px; }
/* USP A answer library (templates/answers/): stacked form, control checkboxes in columns, inline radios */
.ans-form { display: grid; gap: .5rem; }
.ans-form textarea { width: 100%; }
.ans-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr)); gap: .25rem .75rem; margin-top: .5rem; }
.ans-form input, .ans-form select { max-width: 100%; min-width: 0; }
.ans-form .form-row { flex-wrap: wrap; }
.ans-form .form-row > div { min-width: 0; }
.ans-inline { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1rem; min-height: 2.75rem; }
/* USP A2 questionnaire review: one card per question, actions at the end of the page */
.qn-item textarea { width: 100%; }
.qn-item summary { display: flex; align-items: center; min-height: 2.75rem; }
.qn-actions { flex-wrap: wrap; gap: .5rem; }
/* USP A3 trust center: progress bars, honeypot field, NDA box */
.tc-frameworks li { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; align-items: center; margin-bottom: .5rem; }
.tc-bar { grid-column: 1 / -1; display: block; height: .4rem; background: var(--inset-alt); border-radius: 999px; overflow: hidden; }
.tc-bar > span { display: block; height: 100%; width: calc(var(--p, 0) * 1%); background: var(--ok-ink); }
.tc-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.tc-nda { border: 1px solid var(--line-strong); border-radius: 6px; padding: .5rem .75rem; margin: .5rem 0; }
.tc-items li { margin-bottom: .25rem; min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
/* USP C sealed management proofs (templates/cockpit/proofs.php) and public verification (templates/landing/verify-proof.php) */
.gl-proof-period { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.gl-proof-period label { flex: 1 1 10em; }
.gl-proof-code code, .vp-facts code { overflow-wrap: anywhere; word-break: break-all; font-size: 1rem; }
.gl-proofs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.gl-proof { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.gl-proof-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.gl-proof p { margin: 6px 0; }
.gl-proof .gl-revoke form { margin-top: 8px; }
.vp-facts { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0; }
.vp-facts dt { font-weight: 700; }
.vp-facts dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .vp-facts { grid-template-columns: 1fr; } .vp-facts dd { margin-bottom: 6px; } }
/* APP1 push block (templates/account/_push.php, public/assets/push.js): buttons the script has not revealed stay hidden
   (.btn sets its own display) and the device list as a simple list, one device per row, button at the end */
[data-push] [hidden] { display: none !important; }
.push-devices { list-style: none; margin: .5rem 0 0; padding: 0; }
.push-devices li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: center; padding: .5rem 0; border-top: 1px solid var(--line); }


/* Fieldset without frame (used only to disable a group of fields, e.g. briefing settings) */
.fieldset-plain { border: 0; padding: 0; margin: 0; min-width: 0; }
/* MOB2-D D6: public forms outside the portal shell (demo and partner request ?r=interesse, order and similar pages with
   body.public-body): 16 px field text on phones and touch devices (no iOS zoom on focus), 44 px fields and buttons on
   touch devices. The website pages (body.lp-body) get the same in site.css, block "MOB2-D". */
@media (max-width: 640px), (pointer: coarse) {
  .public-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .public-body select, .public-body textarea { font-size: 16px; }
}
@media (pointer: coarse) {
  .public-body input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]), .public-body select, .public-body .btn { min-height: 44px; }
}

/* AK1a: card "Neu in Version X · fällig bis …" above the learning blocks, one column at every width (375 px: no sideways scroll) */
.tc-news-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tc-news-list li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; min-height: 44px; }
.tc-news-list a { overflow-wrap: anywhere; }
/* TF6 retest bar of a pentest/audit report: sticky at the bottom, 44 px touch targets on touch devices */
.retest-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; background: var(--surface, #fff); border-top: 1px solid var(--border, #ddd); }
@media (pointer: coarse) { .retest-bar .btn { min-height: 44px; } }
/* TF1 backup coverage and restore tests (templates/backup/, docs/features/BACKUP-COVERAGE.md): the tabs scroll inside themselves on the
   phone, findings stay a short list, the hub tile is one tappable card, touch targets 44 px on touch devices */
.bk-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.bk-tabs .page-tab { white-space: nowrap; flex: 0 0 auto; }
.bk-findings { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); }
.bk-assets { columns: 2 220px; margin: 0; padding-left: 18px; }
.bk-tile { display: block; text-decoration: none; color: inherit; }
.bk-tile:hover, .bk-tile:focus-visible { border-color: var(--accent, currentColor); }
.bk-summary { margin: 0 0 12px; }
@media (pointer: coarse) {
  .bk-tabs .page-tab, .bk-run-form .btn, .bk-import .btn { min-height: 44px; }
  .bk-run-form input, .bk-run-form select { min-height: 44px; }
}
/* TF2 certificate inventory (templates/certificates/): quick filters and format choice scroll sideways inside their own row on
   phones (no sideways page scroll), long names and fingerprints wrap, expiry chips stay readable */
.cert-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.cert-cn { overflow-wrap: anywhere; }
.cert-fp { overflow-wrap: anywhere; word-break: break-all; }
.cert-fields { grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); }
@media (max-width: 640px) {
  .cert-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; }
  .cert-chips .btn { flex: 0 0 auto; white-space: nowrap; }
  .cert-fields { grid-template-columns: 1fr; }
  .cert-fields dd { margin: 0 0 8px; }
}
.cert-help pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* INT1 Microsoft Teams (templates/integration/teams*.php, templates/teams/link.php): inline styles are blocked by the CSP */
.int-card { max-width: 34rem; }
.int-check { margin: 6px 0; }
.int-stack { display: flex; flex-direction: column; gap: .6rem; }
.int-stack .btn { width: 100%; justify-content: center; text-align: center; }

/* API key form (API-GL): scopes as a vertical list with 44 px touch rows, write scopes in their own group */
.scope-group { margin: 12px 0 4px; }
.scope-row { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 8px 0; }
.scope-row input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; }
.scope-row .scope-hint { display: block; overflow-wrap: anywhere; }
/* ---------- U3 product file: requirement list (templates/products/version.php) ----------
   One folded <details> per requirement; the summary is the 44 px tap target. Works unchanged at 375 px: title and chips
   wrap, the edit form sits full width inside the open item. */
.req-list { list-style: none; margin: 0 0 16px; padding: 0; }
.req-item { border-top: 1px solid var(--line); }
.req-item:first-child { border-top: 0; }
.req-item > details > summary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; min-height: 44px; padding: 8px 0; cursor: pointer; list-style: none; }
.req-item > details > summary::-webkit-details-marker { display: none; }
.req-item > details > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.req-title { flex: 1 1 18rem; min-width: 0; overflow-wrap: anywhere; }
.req-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.req-body { padding: 4px 0 14px; }
.checklist { list-style: none; margin: 0 0 12px; padding: 0; }
.checklist li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; min-height: 32px; }
/* AREA-PPTX: "Als PowerPoint" button of the area pages; on a phone full width and 44 px high */
.area-pptx-form { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
@media (max-width: 600px) { .area-pptx-form { display: flex; flex-direction: column; align-items: stretch; } .area-pptx-form select { min-height: 44px; width: 100%; } .area-pptx-form .btn { width: 100%; min-height: 44px; justify-content: center; } }
/* ---------- TT-1 document sections: checklist and snippet (templates/project/document.php, public/assets/doc-sections.js) ----------
   Checklist: one card per row, status as four segmented choices with icon and word (never colour alone), 44 px high on
   touch devices; notes fold away. Snippet: the code scrolls inside its own box, the page never scrolls sideways. */
.chk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 6px 0; }
.chk-sum { margin: 0; }
.chk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chk-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--inset); min-width: 0; }
.chk-row-warn { border-color: var(--warn-line); }
.chk-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.chk-text { padding: 0; font-weight: 600; overflow-wrap: anywhere; display: block; width: 100%; margin-bottom: 6px; }
.chk-text .badge { margin-left: 6px; font-weight: 400; }
.chk-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chk-opt { flex: 1 1 8rem; position: relative; min-width: 0; }
.chk-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chk-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); background: var(--surface); text-align: center; line-height: 1.2; }
.chk-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chk-opt input:checked + span { font-weight: 600; border-width: 2px; }
.chk-done input:checked + span { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-fill); }
.chk-partial input:checked + span { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.chk-open input:checked + span { background: var(--err-bg); color: var(--err-ink); border-color: var(--danger-fill); }
.chk-not_applicable input:checked + span { background: var(--inset-alt); border-color: var(--ink-soft); }
.chk-note label, .chk-note summary, .chk-help summary { display: block; }
.chk-note summary, .chk-help summary { cursor: pointer; min-height: 32px; padding: 6px 0; }
.chk-note textarea, .chk-note select { width: 100%; }
.chk-row[hidden] { display: none; }
.snippet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); min-width: 0; }
.snippet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.snippet-code { margin: 0; padding: 10px; overflow-x: auto; max-width: 100%; font-size: .85rem; line-height: 1.45; white-space: pre; tab-size: 4; }
.snippet-code:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (pointer: coarse) {
  .chk-filter, .snippet-head .btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .chk-opt { flex: 1 1 calc(50% - 6px); }
}
.chk-filter[aria-pressed="true"] { background: var(--accent-tint, var(--inset-alt)); border-color: var(--accent); font-weight: 600; }

/* Document page action bar on the phone (docs/DESIGN-GUIDELINES.md sections 9 and 10): the panel dissolves, hint and
   change reason stay in the page flow above, only the button row is the slim sticky bar. Works without JavaScript;
   desktop (above 860 px) is unchanged. */
.doc-lbl-short { display: none; }
@media (max-width: 860px) {
  .sticky-actions.doc-actions { display: contents; }
  .doc-actions-note { margin: 0 0 10px; }
  .doc-actions .doc-reason { flex: none; margin: 0 0 12px; }
  .doc-actions > .row-actions { position: sticky; z-index: 5; bottom: calc(var(--bottom-nav-h, 0px) + 8px + env(safe-area-inset-bottom, 0px)); flex-wrap: nowrap; gap: 6px; padding: 6px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); margin-bottom: 18px; }
  .doc-actions > .row-actions .btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding-left: 8px; padding-right: 8px; white-space: nowrap; hyphens: none; text-align: center; font-size: .85rem; }
  .doc-actions > .row-actions .btn-primary { flex: 1.3 1 0; }
  .doc-lbl-long { display: none; }
  .doc-lbl-short { display: inline; }
  /* Reviewer select shares the nowrap bar: let it shrink instead of widening the page by 1 px at 320 px (WCAG 1.4.10) */
  .doc-actions > .row-actions .doc-reviewer { flex: 2 1 0; min-width: 0; }
  .doc-actions > .row-actions .doc-reviewer select { width: 100%; min-width: 0; max-width: 100%; }
  /* The sticky bar rests on the form's first edge while the form is still below the fold and would cover the first
     section's bookmark and flag buttons (WCAG 2.5.8 target size, axe "partially obscured"). The spacer keeps that spot free. */
  .doc-form:has(> .doc-actions)::before { content: ""; display: block; height: 80px; }
  body:has(.doc-actions) .pagenav { bottom: calc(var(--bottom-nav-h, 0px) + 72px + env(safe-area-inset-bottom, 0px)); }
}

/* VT-RW implementation guide ("Umsetzungshilfe") below the context line of a catalogue entry (templates/project/_guide.php) */
.cat-guide { margin-top: 6px; max-width: 820px; }
.cat-guide > summary { font-size: .85rem; color: var(--ink-soft); }
.cat-guide-label { font-weight: 700; color: var(--info-ink); }
.cat-guide-parts { color: var(--ink-faint); }
.cat-guide-body { padding: 6px 0 2px 16px; border-left: 2px solid var(--line); margin: 6px 0 0 5px; font-size: .9rem; }
.cat-guide-body h4 { margin: 12px 0 4px; font-size: .85rem; color: var(--ink-soft); }
.cat-guide-body p, .cat-guide-body ul, .cat-guide-body ol { margin: 0 0 4px; }
.cat-guide-body ul, .cat-guide-body ol { padding-left: 20px; }
.guide-steps > li { margin-bottom: 4px; }
.guide-step-text { overflow-wrap: anywhere; }
.guide-step-btn { margin-left: 6px; vertical-align: baseline; }
.guide-step-menu { display: none; }
.guide-levels { display: grid; grid-template-columns: max-content 1fr; gap: 2px 10px; margin: 0; }
.guide-levels dt { font-weight: 700; }
.guide-levels dd { margin: 0; }
.guide-links { display: flex; flex-wrap: wrap; gap: 6px; }
.xref-chip.is-off { opacity: .7; }
.guide-tests { list-style: none; padding-left: 0; }
.guide-source { margin-top: 10px; }
@media (max-width: 600px) {
  .cat-guide-body { padding-left: 10px; margin-left: 2px; }
  .guide-step-btn { display: none; }
  .guide-steps > li::after { content: ''; display: table; clear: both; }
  .guide-step-menu { display: block; float: right; position: relative; width: 44px; margin: -6px 0 0 8px; }
  .guide-step-menu > summary { cursor: pointer; padding: 0 10px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; list-style: none; }
  .guide-step-menu > summary::-webkit-details-marker { display: none; }
  .guide-step-menu[open] > .btn { position: absolute; right: 0; top: 40px; z-index: 3; min-height: 44px; width: max-content; max-width: calc(100vw - 96px); white-space: normal; background: var(--surface, #fff); box-shadow: 0 2px 8px rgba(0, 0, 0, .18); }
  .guide-levels { grid-template-columns: 1fr; }
  .guide-levels dd { margin-bottom: 4px; }
}
/* ---------- EX1 provider switching (templates/switching/index.php): timeline as a list, dates as rows; one column at 375 px ---------- */
.sw-timeline { list-style: none; margin: 8px 0 12px; padding: 0; border-left: 2px solid var(--line); }
.sw-timeline li { position: relative; display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 8px 0 8px 16px; min-height: 44px; align-items: baseline; }
.sw-timeline li::before { content: ""; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border-radius: 50%; background: var(--bg); border: 2px solid var(--line); }
.sw-timeline li.sw-done::before { background: var(--accent); border-color: var(--accent); }
.sw-timeline li.sw-now::before { border-color: var(--accent); }
.sw-timeline li.sw-next { opacity: .75; }
.sw-date { font-weight: 600; min-width: 6.5rem; }
.sw-dates { display: grid; grid-template-columns: 1fr; gap: 2px 16px; margin: 0 0 12px; }
.sw-dates dt { color: var(--ink-soft); font-size: .9em; }
.sw-dates dd { margin: 0 0 8px; font-weight: 600; }
.sw-jobs { list-style: none; margin: 0 0 12px; padding: 0; }
.sw-jobs li { padding: 6px 0; overflow-wrap: anywhere; }
@media (min-width: 640px) { .sw-dates { grid-template-columns: 1fr auto; } .sw-dates dd { margin: 0; text-align: right; } }
/* ---------- VT-BCM B3 emergency page (templates/bcm/emergency*.php) ----------
   Process rows and plan steps are cards; the log is a plain list; at 375 px a fixed "Eintrag" button (44 px) leads to the log form. */
.em-proc, .em-step { margin: 0 0 12px; }
.em-log > li { padding: 10px 0; border-top: 1px solid var(--line); }
.em-log > li:first-child { border-top: 0; }
.em-sticky { display: none; }
@media (max-width: 600px) {
  .em-sticky { display: inline-flex; position: fixed; right: 16px; bottom: 16px; z-index: 20; min-height: 44px; min-width: 44px; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
  .em-proc .btn, .em-step .btn { min-height: 44px; }
}
/* VDR1 reminder and escalation block of the vulnerability settings (templates/vulns/settings.php): a card inside the form,
   one column, labels above the fields, 44 px target for the switch on touch devices */
.vuln-remind { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px 14px; margin: 0; display: grid; gap: 10px; min-width: 0; }
.vuln-remind legend { padding: 0 6px; }
.vuln-remind label { display: grid; gap: 4px; min-width: 0; }
.vuln-remind input[type="number"] { width: 100%; max-width: 12rem; }
.vuln-remind .vuln-remind-switch { display: flex; align-items: flex-start; gap: 8px; }
@media (pointer: coarse) { .vuln-remind .vuln-remind-switch { min-height: 44px; align-items: center; } .vuln-remind .vuln-remind-switch input { min-width: 24px; min-height: 24px; } }
/* AI-GL: marking of AI-assisted text (templates/ai/marker.php), wraps under the field and never truncates it */
.ai-marker { margin: 4px 0 0; display: flex; gap: 6px; align-items: flex-start; overflow-wrap: anywhere; }

/* AI-GL package C: opt-in step of the AI fill-in assistant (templates/company/_ai_optin.php, settings.php) */
.ai-optin { margin: 8px 0; }
.ai-optin > summary { display: inline-block; cursor: pointer; list-style: none; }
.ai-optin > summary::-webkit-details-marker { display: none; }
.ai-optin-form { margin-top: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ai-optin-list { margin: 0 0 8px; padding-left: 18px; display: grid; gap: 6px; }
.ai-optin-check { display: flex; gap: 8px; align-items: flex-start; margin: 10px 0; }
@media (max-width: 640px) {
  /* phone: the confirmation row sticks to the bottom edge while the statement scrolls (bottom-sheet behaviour without a dialog) */
  .ai-optin-check { min-height: 44px; }
  .ai-optin-check input[type="checkbox"] { width: 24px; height: 24px; flex: none; }
  .ai-optin-actions { position: sticky; bottom: 0; padding: 8px 0; background: var(--surface); }
  .ai-optin-actions .btn { width: 100%; min-height: 44px; }
}
.ai-marker-info { display: inline; }
.ai-marker-info > summary { display: inline; cursor: pointer; text-decoration: underline; }
/* ADV1: list of advisory sources (admin "Schwachstellen-Daten"): long messages and addresses wrap, actions are 44 px targets on touch devices */
.vuln-state .adv-msg { overflow-wrap: anywhere; word-break: break-word; }
.vuln-state details.adv-msg summary { cursor: pointer; }
.vuln-state .adv-actions { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.vuln-state .adv-actions .inline-form { display: inline-flex; flex-wrap: wrap; gap: .4rem; }
@media (pointer: coarse) { .vuln-state .adv-actions .btn { min-height: 44px; min-width: 44px; } }
/* TF3 identity and access coverage (templates/identities/, docs/features/IDENTITY-COVERAGE.md): the reviewer page "Meine Prüfungen" is
   designed phone first: one card per account, two full-width 44 px decision buttons, "…" opens the comment, progress sticks to the top */
.ar-sticky { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 12px; padding: 8px 0; background: var(--bg, #fff); border-bottom: 1px solid var(--line, #ddd); }
.ar-sticky progress { flex: 1; min-width: 0; }
.ar-list { display: grid; gap: 12px; margin-top: 12px; }
.ar-card h2 { overflow-wrap: anywhere; margin: 0 0 4px; }
.ar-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.ar-btn { min-height: 44px; min-width: 44px; justify-content: center; }
.ar-more { flex: 1 1 100%; }
.ar-more summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ar-more textarea { width: 100%; }
@media (max-width: 640px) {
  .ar-actions > .ar-btn { flex: 1 1 40%; }
}
@media (pointer: coarse) { .ar-btn { min-height: 44px; } }

/* MSO1 click test (15.10.2026): a fieldset defaults to min-width: min-content, so the matrix page (programme years, site
   states) scrolled sideways on phones; the tables inside keep scrolling in their .table-wrap */
.panel fieldset, .panel-sub fieldset { min-width: 0; }
/* TF5 hardening (templates/hardening, docs/features/HARDENING.md) */
.hd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.hd-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; display: grid; gap: 4px; align-content: start; min-width: 0; }
.hd-card h3 { margin: 0; overflow-wrap: anywhere; }
.hd-score { display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }
.hd-bar { width: 96px; height: 8px; accent-color: var(--accent); vertical-align: middle; }
.hd-line { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.hd-section > summary { cursor: pointer; padding: 8px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.hd-pick { width: 36px; }
.hd-section td summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; }
.hd-set { display: grid; gap: 8px; margin-top: 8px; }
.hd-sticky { position: sticky; bottom: 0; background: var(--surface); border-top: 1px solid var(--line); padding: 8px 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: end; z-index: 2; }
@media (max-width: 640px) {
  .hd-bar { width: 72px; }
  .hd-sticky { bottom: 64px; }   /* above the fixed bottom navigation */
  .hd-sticky .btn { min-height: 44px; flex: 1 1 100%; }
  .hd-pick { width: auto; }
}

/* ADV2: push intake administration (templates/vulns/push_*.php): addresses, IDs and keys wrap, the one-time token is selectable in one click, controls are 44 px targets on touch devices */
.adv-wrap { overflow-wrap: anywhere; word-break: break-word; }
.push-token { display: block; padding: .6rem .8rem; border: 1px solid var(--line, currentColor); border-radius: 6px; user-select: all; font-size: 1rem; }
.push-token-once { border-left: 4px solid var(--warn-line, #b7791f); }
@media (pointer: coarse) { .push-token-once .btn, .push-source .btn, .push-source .btn-sm, .push-source .inline-details summary, .push-source .check { min-height: 44px; } .push-source .btn-sm { min-width: 44px; } }

/* Mobile fixes (15.10.2026, MSO1 and partner portal click tests): partner portal "Kunden mit Zugang" rows and the folded
   daily digest. On phones a person row is the name with the level on one line and the button full width below; the
   assign form stacks its fields (before: names broke after every word and the buttons overlapped). */
.partner-digest { margin: 0 0 16px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 0 16px; }
.partner-digest > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 44px; cursor: pointer; }
.partner-digest[open] > summary { margin-bottom: 4px; }
.partner-digest > form { margin: 0 0 14px; }
@media (max-width: 640px) {
  .grant-person, .grant-add { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 0 0 14px; }
  .grant-person .btn, .grant-add .btn { width: 100%; }
  .grant-add label, .grant-add select { display: block; width: 100%; max-width: 100%; }
}
.chk-filter[aria-pressed="true"] { background: var(--accent-tint, var(--inset-alt)); border-color: var(--accent); font-weight: 600; }

/* ---------- TT-1 document sections: checklist and snippet (templates/project/document.php, public/assets/doc-sections.js) ----------
   Checklist: one card per row, status as four segmented choices with icon and word (never colour alone), 44 px high on
   touch devices; notes fold away. Snippet: the code scrolls inside its own box, the page never scrolls sideways. */
.chk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; position: sticky; top: 0; z-index: 2; background: var(--surface); padding: 6px 0; }
.chk-sum { margin: 0; }
.chk-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.chk-row { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--inset); min-width: 0; }
.chk-row-warn { border-color: var(--warn-line); }
.chk-fs { border: 0; margin: 0; padding: 0; min-width: 0; }
.chk-text { padding: 0; font-weight: 600; overflow-wrap: anywhere; display: block; width: 100%; margin-bottom: 6px; }
.chk-text .badge { margin-left: 6px; font-weight: 400; }
.chk-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.chk-opt { flex: 1 1 8rem; position: relative; min-width: 0; }
.chk-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.chk-opt span { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--line-strong, var(--line)); border-radius: var(--radius); background: var(--surface); text-align: center; line-height: 1.2; }
.chk-opt input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.chk-opt input:checked + span { font-weight: 600; border-width: 2px; }
.chk-done input:checked + span { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-fill); }
.chk-partial input:checked + span { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-ink); }
.chk-open input:checked + span { background: var(--err-bg); color: var(--err-ink); border-color: var(--danger-fill); }
.chk-not_applicable input:checked + span { background: var(--inset-alt); border-color: var(--ink-soft); }
.chk-note label, .chk-note summary, .chk-help summary { display: block; }
.chk-note summary, .chk-help summary { cursor: pointer; min-height: 32px; padding: 6px 0; }
.chk-note textarea, .chk-note select { width: 100%; }
.chk-row[hidden] { display: none; }
.snippet { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); min-width: 0; }
.snippet-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); }
.snippet-code { margin: 0; padding: 10px; overflow-x: auto; max-width: 100%; font-size: .85rem; line-height: 1.45; white-space: pre; tab-size: 4; }
.snippet-code:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (pointer: coarse) {
  .chk-filter, .snippet-head .btn { min-height: 44px; }
}
@media (max-width: 480px) {
  .chk-opt { flex: 1 1 calc(50% - 6px); }
}
.chk-filter[aria-pressed="true"] { background: var(--accent-tint, var(--inset-alt)); border-color: var(--accent); font-weight: 600; }

/* ONP-X external people in comments (templates/external/): case list and message of the inviting person */
.ext-cases { display: grid; gap: 12px; }
.ext-case { display: grid; gap: 2px; }
.ext-case-link { display: grid; gap: 2px; text-decoration: none; }
.ext-case-title { color: var(--ink-soft); }
.ext-message { margin: 16px 0 0; padding: 4px 0 4px 14px; border-left: 3px solid var(--accent); }
.ext-message p { margin: 4px 0; }
.ext-grant { display: grid; gap: 6px; padding: 8px 0; border-bottom: 1px solid var(--line, #dde3ec); }
.ext-grant:last-child { border-bottom: 0; }
.cmt-ext-banner { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--surface-2, rgba(0,0,0,.03)); }
@media (max-width: 640px) {
  .ext-card .kv { grid-template-columns: auto 1fr; gap: 2px 12px; }
  .ext-card h1 { font-size: 1.35rem; }
}

/* INT5 Slack set-up wizard (templates/integration/slack.php): the app manifest scrolls inside its own box, never the page */
pre.slack-manifest { margin: 8px 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); font-size: 13px; line-height: 1.5; white-space: pre; overflow-x: auto; max-width: 100%; }
.slack-copy { min-height: 44px; }
@media (hover: none) and (pointer: coarse) { .slack-copy { min-width: 44px; } #slack summary { padding-block: 11px; } }

/* AR1-C reviewer card with entitlements (templates/identities/_reviewer_rights.php, _reviewer_change.php; docs/specs/AR1-ACCESS-REVIEW-CONNECTORS-SPEC.md 6.5):
   privileged rights as chips (max three), "+n" and "Ändern" open a sheet without JavaScript (details). Chips wrap, nothing scrolls sideways at 375 px;
   below 641 px an open sheet is a panel on the bottom edge and the (invisible) summary becomes the backdrop that closes it. */
.ar-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; align-items: center; }
.ar-chip { display: inline-flex; align-items: center; min-height: 28px; max-width: 100%; padding: 2px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface);
  color: var(--ink); font-size: .85rem; overflow-wrap: anywhere; }
.ar-chip-priv { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.ar-sheet { display: inline-block; max-width: 100%; }
.ar-sheet > summary { list-style: none; cursor: pointer; }
.ar-sheet > summary::-webkit-details-marker { display: none; }
.ar-sheet-body { margin-top: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); max-width: 100%; }
.ar-sheet-body h3 { margin: 0 0 8px; font-size: 1rem; }
.ar-rights { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.ar-rights li { overflow-wrap: anywhere; }
.ar-pick { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ar-pick input[type="checkbox"] { width: 24px; height: 24px; flex: none; margin-top: 2px; }
.ar-pick span { overflow-wrap: anywhere; min-width: 0; }
.ar-change { flex: 1 1 100%; }
.ar-change > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; }
.ar-change > summary::-webkit-details-marker { display: none; }
.ar-change textarea { width: 100%; }
@media (max-width: 640px) {
  .ar-sheet[open] > .ar-sheet-body, .ar-change[open] > .ar-sheet-body { position: fixed; left: 0; right: 0; bottom: 0; z-index: 61; max-height: 70vh; overflow-y: auto; margin: 0;
    border-radius: var(--radius) var(--radius) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); box-shadow: 0 -8px 24px rgba(0, 0, 0, .25); }
  .ar-sheet[open] > summary, .ar-change[open] > summary { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .4); font-size: 0; border: 0; border-radius: 0; padding: 0; min-height: 0; max-width: none; }
  .ar-sheet[open] > summary::after, .ar-change[open] > summary::after { content: attr(data-close); position: fixed; right: 12px; bottom: calc(70vh + 8px); z-index: 62; font-size: 1rem;
    min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; background: var(--surface); color: var(--ink); }
}
.ar-impl { margin: 8px 0; }
.ar-group-list { display: grid; gap: 0; max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); padding: 0 12px; }
/* AR1 identity connectors (templates/identities/connector*.php, account.php, _connector_card.php): entitlement chips wrap, 44 px pick rows,
   copy boxes scroll inside themselves; nothing scrolls sideways at 375 px */
.iam-chip { display: inline-block; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: var(--bg-soft, #eef2f7); overflow-wrap: anywhere; }
.iam-chip.is-priv { background: var(--warn-soft, #fff3d6); font-weight: 600; }
.iam-ents li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 4px 0; }
.iam-row { min-height: 44px; display: flex; align-items: center; gap: 8px; }
.iam-pick { max-height: 50vh; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; padding: 0 10px; margin-bottom: 10px; }
.iam-sticky { position: sticky; top: 0; background: var(--bg, #fff); padding: 4px 0; margin: 0; z-index: 1; }
.iam-checks li { padding: 4px 0; overflow-wrap: anywhere; }
.copy-box { max-width: 100%; max-height: 12em; overflow: auto; white-space: pre; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .85rem; }
/* PA1 auditor workspace (templates/audits/workspace*.php, docs/features/AUDITOR-WORKSPACE.md): tiles, tab strip, request board.
   375 px: tiles in two columns, the tab strip scrolls inside its own box, the board is hidden (the list shows). */
.aw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.aw-tile { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; min-width: 0; }
a.aw-tile:hover { border-color: var(--line-strong); }
.aw-tile.is-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.aw-tile-label { font-size: .82rem; color: var(--ink-soft); }
.aw-tile-value { font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.aw-tile-sub { font-size: .78rem; color: var(--ink-soft); overflow-wrap: anywhere; }
.aw-tabs { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--line); margin-bottom: 14px; -webkit-overflow-scrolling: touch; }
.aw-tab { flex: 0 0 auto; padding: 10px 14px; color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }
.aw-tab.is-active { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
.aw-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-bottom: 8px; }
.aw-bar h2 { margin: 0; }
.aw-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 12px; }
.aw-filter label { display: flex; flex-direction: column; gap: 2px; font-size: .85rem; }
.aw-req { margin-bottom: 12px; }
.aw-req h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.aw-req p, .aw-card-text { overflow-wrap: anywhere; }
.aw-preview-list { padding-left: 20px; display: grid; gap: 6px; }
.aw-preview-list .is-error { opacity: .75; }
.aw-board { display: none; }
@media (min-width: 900px) {
  .aw-view-board .aw-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; }
  .aw-view-board .aw-list { display: none; }
  .aw-col { background: var(--inset); border-radius: var(--radius); padding: 10px; display: grid; gap: 8px; }
  .aw-card { display: grid; gap: 4px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; }
}
@media (max-width: 899px) { .aw-viewswitch { display: none; } }
@media (max-width: 600px) {
  .aw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .aw-tile { padding: 8px 10px; }
  .aw-tile-value { font-size: 1.25rem; }
  .aw-filter { flex-direction: column; align-items: stretch; }
  .aw-req .btn, .aw-req summary.btn { min-height: 44px; }
}
.aw-releases { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.aw-release { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 8px 10px; background: var(--inset); border-radius: var(--radius); }
.aw-release-main { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) { .aw-release .btn { min-height: 44px; } }

/* PR4 (ADR 0121): customers above the booked quantity of sites or companies (admin-abos), card list on every width, no sideways scroll */
.overbooked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.overbooked-list .card { padding: 12px 16px; overflow-wrap: anywhere; }
.overbooked-list dl { margin: 8px 0 0; }
.overbooked-list dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.overbooked-list dt { color: var(--ink-soft); }
.overbooked-list dd { margin: 0; text-align: right; }
.quantity-notice .row-actions { margin: 8px 0 0; }
/* ---------- Supplier page: dialog "Lieferant beenden" (VT2 SUP-A); bottom sheet on phones ---------- */
dialog.supplier-end-dialog { width: min(560px, calc(100vw - 32px)); overflow: auto; }
.supplier-end-dialog .end-lines { border: 0; margin: 12px 0; padding: 0; }
.supplier-end-dialog .end-lines legend { font-weight: 700; margin-bottom: 6px; padding: 0; }
.supplier-end-dialog .end-line { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; padding: 6px 0; }
.supplier-end-dialog .end-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.supplier-end-dialog .end-fields input, .supplier-end-dialog .end-fields select { width: 100%; }
@media (max-width: 639px) {
  dialog.supplier-end-dialog { position: fixed; inset: auto 0 0 0; margin: 0; width: 100%; max-width: 100%; max-height: 90vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .supplier-end-dialog .end-fields { grid-template-columns: 1fr; }
  .supplier-end-dialog .modal-actions .btn { min-height: 44px; }
}
/* PA1 phase 2 lane C: audit conclusion tab and watermark pages (docs/features/AUDITOR-WORKSPACE.md) */
.cc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.cc-tile { display: grid; gap: 2px; padding: 10px; background: var(--inset); border-radius: var(--radius); }
.cc-tile-n { font-size: 1.4rem; font-weight: 700; }
.cc-tile-l { font-size: .85rem; color: var(--muted); overflow-wrap: anywhere; }
.cc-period { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cc-form textarea { width: 100%; }
.cc-result .pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; }
.cc-withdraw { margin-top: 12px; }
.wm-hash code, .cc-result code { overflow-wrap: anywhere; word-break: break-all; }
@media (min-width: 700px) { .cc-facts { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 600px) { .cc-form .sticky-actions .btn { flex: 1 1 100%; min-height: 44px; } .cc-period { grid-template-columns: 1fr; } }
/* DH1 lane E: old policy sections, take-over preview, comparison of two versions (docs/features/DOCUMENT-HIERARCHY.md) */
.doc-legacy .row-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.lib-diff, .doc-compare-section { margin: 12px 0; padding-top: 8px; border-top: 1px solid var(--line); }
.lib-diff-old, .lib-diff-new { margin: 6px 0; padding: 6px 10px; border-left: 3px solid var(--line); }
.lib-diff-new { border-left-color: var(--ok-fill); }
.lib-diff-same { opacity: .75; }
.doc-diff { margin: 6px 0 0; padding: 0; list-style: none; font-size: .9rem; }
.doc-diff li { padding: 2px 8px; white-space: pre-wrap; overflow-wrap: anywhere; border-left: 3px solid transparent; }
.doc-diff .diff-add { background: var(--ok-bg); border-left-color: var(--ok-fill); }
.doc-diff .diff-del { background: var(--err-bg); border-left-color: var(--danger-fill); text-decoration: line-through; text-decoration-color: var(--err-line); }
.doc-diff .diff-gap { color: var(--ink-faint); text-align: center; }
.doc-diff .diff-mark { display: inline-block; width: 1.4em; font-weight: 600; }
.doc-compare-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .doc-compare-meta { grid-template-columns: 1fr; } .doc-diff { font-size: .95rem; } }
/* BT1 objectives with targets (templates/objectives/, src/Objectives.php) */
.obj-text { white-space: pre-line; }
.obj-spark { height: 48px; max-width: 520px; margin: 12px 0 4px; }
.obj-light { gap: 4px; }
@media (max-width: 480px) { .page-narrow .kv { grid-template-columns: 1fr; } }
/* JP1 annual programme (templates/program/): months as folded blocks on a phone, side by side on wide screens */
.prog-months { display: grid; gap: 8px; }
.prog-month > summary { cursor: pointer; padding: 8px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; }
.prog-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.prog-card { border: 1px solid var(--border, #d0d5dd); border-radius: 8px; padding: 8px 12px; }
@media (min-width: 900px) { .prog-months { grid-template-columns: repeat(3, 1fr); align-items: start; } }
/* JP1-c incident exercise (templates/exercises/): banner on every tab */
.exercise-banner { border: 2px solid var(--warn, #b45309); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }

/* LV1.9 reconciliation section of the contract page and the page "Software ohne Vertrag": assigned software as pills, pick lists as rows. */
.usage-sw { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.usage-sw li { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 12px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); overflow-wrap: anywhere; }
.usage-pick { list-style: none; margin: 0 0 12px; padding: 0; }
.usage-pick li { padding: 6px 0; border-top: 1px solid var(--line); }
.usage-result { margin: 12px 0; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius, 8px); background: var(--surface); }
.usage-result p { margin: 4px 0; }
@media (pointer: coarse), (max-width: 640px) {
  .usage-sw .btn, .usage-pick .btn, .usage-cards .btn { min-height: 44px; }
  .usage-pick li { min-height: 44px; display: flex; align-items: center; }
}
.usage-cards { display: grid; gap: 10px; }
/* KN1 evidence connectors (templates/evidence_connectors/*.php): permission list as stacked cards, check picker, result cards. 375 px: one column, copy
   buttons and rows at least 44 px, long ids and labels wrap, nothing scrolls sideways. */
.ev-guide { padding-left: 1.4em; }
.ev-guide li { margin-bottom: 8px; }
/* KN1b GB1 relay config snippet: scrolls inside its own box, never the page */
pre.ev-snippet { margin: 6px 0; padding: 8px 10px; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-alt); font-size: .8rem; }
.ev-perms, .ev-results { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 8px; }
.ev-perm, .ev-result { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; overflow-wrap: anywhere; background: var(--surface); }
.ev-perm p, .ev-result p { margin: 4px 0; }
.ev-perm .btn { min-height: 44px; }
.ev-pick { display: grid; gap: 4px; margin-bottom: 12px; }
.ev-pick-item { border-bottom: 1px solid var(--line); padding-bottom: 4px; }
.ev-thr { margin: 4px 0 8px 26px; }
.ev-thr summary { min-height: 44px; display: flex; align-items: center; }
.ev-thr label { display: block; margin-top: 8px; }
.ev-items summary { min-height: 44px; display: flex; align-items: center; }
.ev-items li { padding: 6px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
@media (min-width: 900px) { .ev-results { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* BT1-c: tile "Managementsystem im Betrieb" (templates/widgets/pdca.php) and the switch hint (templates/status/index.php).
   auto-fit columns stack on narrow screens and keep the DOM order Plan, Do, Check, Act (WCAG 1.4.10, no sideways scroll). */
.pdca-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 12px; }
.pdca-phase { border: 1px solid var(--line, #d9dee5); border-radius: 8px; padding: 10px 12px; min-width: 0; }
.pdca-phase h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 2px; }
.pdca-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.pdca-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.pdca-value { font-weight: 600; }
.ops-hint { border-left: 4px solid var(--accent, #1f6feb); }

/* M-F (deep check 3, lane tc3-soa): catalogue entries as cards on phones. Below 640 px (and only with JavaScript) an entry
   shows number, title, a card line (applicable, status, owner) and "Bearbeiten"; its fields open in the bottom sheet
   dialog.cat-sheet inside the form (public/assets/app.js). Without JavaScript or on wider screens nothing changes. */
.cat-card-sum, .cat-sheet-foot { display: none; }
@media (max-width: 640px) {
  html.js .cat-card-sum { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 8px 0 0; }
  html.js .cat-card-sum .icon { width: 14px; height: 14px; vertical-align: -2px; }
  html.js .cat-card-sum .cat-edit-btn { margin-left: auto; min-height: 44px; }
  html.js .cat-item > .cat-edit { display: none; }
  html.js dialog.cat-sheet .cat-item > .cat-edit { display: block; }
  html.js .cat-item .cat-context, html.js .cat-item .cat-soa, html.js .cat-item .cat-guide { display: none; }
  dialog.cat-sheet .mt-sheet-body.cat-item { padding: 12px 16px 16px; border-bottom: 0; }
  dialog.cat-sheet .cat-fields, dialog.cat-sheet .cat-control, dialog.cat-sheet .cat-files, dialog.cat-sheet .cat-history { margin-left: 0; }
  dialog.cat-sheet .cat-fields { grid-template-columns: 1fr; }
  dialog.cat-sheet .cat-control select { max-width: 100%; }
  dialog.cat-sheet .cat-sheet-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }
  dialog.cat-sheet .cat-sheet-foot .btn { min-height: 44px; }
  .mt-searchrow > input[type=search][data-search] { flex: 1 1 0; min-width: 0; }
}

/* PR1: folded package list on phones (pricing-wizard.js sets .is-compact): detail lines only for the selected package */
.pr-fold-btn { margin: 0 0 .75rem; }
.pr-options-plans.is-compact .pr-option:not(:has(input:checked)) :is(.pr-option-fit, [data-pr-planmeta]) { display: none; }
/* M-E (deep check 3, ADR 0148): selection box of the bulk edit at the start of a catalogue entry or task card */
.cat-sel { float: left; display: flex; align-items: center; margin-right: 6px; min-width: 24px; min-height: 24px; }
.cat-sel input { width: 24px; height: 24px; margin: 0; } /* WCAG 2.5.8: the input itself is measured; floated so a wrapped title line never overlaps its 24px target */

/* Deep check 3, evidence Soll/Kann (N-D check of an audit export package, N-F internal requests, N-G review): phone view first */
.ae-sha { word-break: break-all; }
.ae-verify p { margin: 4px 0; }
.ae-verify-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.ae-verify-form label { flex: 1 1 240px; }
.ae-verify-form input[type=file] { max-width: 100%; }
.er-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.er-list li { margin: 0; }
.er-form { display: grid; gap: 12px; max-width: 640px; }
.er-filter { flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.er-facts { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; }
.er-facts dd { margin: 0; overflow-wrap: anywhere; }
.er-text { overflow-wrap: anywhere; }
@media (max-width: 480px) { .er-facts { grid-template-columns: 1fr; } .er-facts dd { margin-bottom: 6px; } }

/* ---------- Relation graph RG1 (1.92-T, ADR 0192, templates/partials/_relation_graph.php, island relation-graph) ---------- */
.rg { --rg-asset: #1f4e8c; --rg-risk: #a3302a; --rg-vuln: #8a5a00; --rg-incident: #6b3fa0; --rg-control: #2f7a4f;
  --rg-task: #4d5a6c; --rg-supplier: #3d4fa8; --rg-contract: #2b6a80; --rg-gap: #b3261e; --rg-gap-bg: #fdecea;
  --rg-path: #2f6fd6; --rg-edge: #9aa7b8; --rg-on: var(--dark); --rg-on-ink: var(--on-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rg { --rg-asset: #8fb6ec; --rg-risk: #f0938a; --rg-vuln: #e6b65c;
  --rg-incident: #c3a4ec; --rg-control: #86d3a5; --rg-task: #b9c4d3; --rg-supplier: #a8b5f2; --rg-contract: #8fd0e3; --rg-gap: #ff9d94;
  --rg-gap-bg: #3a1d1b; --rg-path: #7fb0ff; --rg-edge: #5b6d88; --rg-on: var(--accent-bright); --rg-on-ink: #13233f; } }
:root[data-theme="dark"] .rg { --rg-asset: #8fb6ec; --rg-risk: #f0938a; --rg-vuln: #e6b65c; --rg-incident: #c3a4ec; --rg-control: #86d3a5;
  --rg-task: #b9c4d3; --rg-supplier: #a8b5f2; --rg-contract: #8fd0e3; --rg-gap: #ff9d94; --rg-gap-bg: #3a1d1b; --rg-path: #7fb0ff; --rg-edge: #5b6d88;
  --rg-on: var(--accent-bright); --rg-on-ink: #13233f; }
.rg .rg-t-asset { --rg-c: var(--rg-asset); } .rg .rg-t-risk { --rg-c: var(--rg-risk); } .rg .rg-t-vuln { --rg-c: var(--rg-vuln); }
.rg .rg-t-incident { --rg-c: var(--rg-incident); } .rg .rg-t-control { --rg-c: var(--rg-control); } .rg .rg-t-task { --rg-c: var(--rg-task); }
.rg .rg-t-supplier { --rg-c: var(--rg-supplier); } .rg .rg-t-contract { --rg-c: var(--rg-contract); }
/* List (no JavaScript, 375 px, list view of the island): cards for level 1, foldable deeper levels */
.rg-list { list-style: none; margin: 0; padding: 0; }
.rg-top { display: grid; gap: 10px; }
.rg-top > .rg-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 6px 14px; }
.rg-item .rg-list { margin: 6px 0 4px; padding-left: 14px; border-left: 2px solid var(--line); display: grid; gap: 4px; }
.rg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; padding: 4px 0; }
.rg-sub > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink-soft); font-size: .88rem; }
.rg-sub > summary::-webkit-details-marker { display: none; }
.rg-sub > summary::before { content: "▸"; color: var(--ink-faint); }
.rg-sub[open] > summary::before { content: "▾"; }
.rg-sub > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rg-type { flex-basis: 100%; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: var(--rg-c, var(--ink-faint)); }
.rg-name { font-weight: 700; overflow-wrap: anywhere; min-height: 24px; display: inline-flex; align-items: center; }
.rg-gap { margin: 4px 0 6px; padding: 8px 12px; border: 1px dashed var(--rg-gap); border-radius: var(--radius); background: var(--rg-gap-bg); color: var(--rg-gap); font-size: .9rem; }
.rg-extra { margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rg-sum { margin-top: -4px; }
.cov-rg { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
/* Island toolbar */
.rg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 6px; }
.rg-btn { font: inherit; font-size: .88rem; min-height: 36px; min-width: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.rg-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rg-btn[aria-pressed="true"] { background: var(--rg-on); border-color: var(--rg-on); color: var(--rg-on-ink); }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-chip[class*="rg-t-"] { border-color: var(--rg-c); color: var(--rg-c); }
.rg-chip[class*="rg-t-"][aria-pressed="true"] { background: var(--rg-c); color: var(--surface); }
.rg-chip-gap { border-color: var(--rg-gap); color: var(--rg-gap); }
.rg-chip-gap[aria-pressed="true"] { background: var(--rg-gap); border-color: var(--rg-gap); color: var(--surface); }
.rg-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--inset); }
.rg-seg .rg-btn { border-color: transparent; background: transparent; }
.rg-seg .rg-btn[aria-pressed="true"] { background: var(--rg-on); color: var(--rg-on-ink); }
.rg-depth-l { padding: 0 6px 0 10px; color: var(--ink-faint); font-size: .88rem; }
.rg-status:empty { display: none; }
.rg-more-list { margin: 2px 0 6px; border-radius: var(--radius); }
@media (pointer: coarse), (max-width: 640px) { .rg-btn { min-height: 44px; min-width: 44px; } }
/* Island canvas */
.rg-canvas { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--inset); overflow: hidden; }
.rg-svg { display: block; width: 100%; height: 560px; touch-action: none; cursor: grab; user-select: none; }
.rg-svg:active { cursor: grabbing; }
.rg-edge { stroke: var(--rg-edge); stroke-width: 2; }
.rg-edge.is-path { stroke: var(--rg-path); stroke-width: 4; }
.rg-edge.is-dim { opacity: .35; }
.rg-node { cursor: pointer; }
.rg-node .rg-box { fill: var(--surface); stroke: var(--rg-c, var(--line-strong)); stroke-width: 1.5; }
.rg-node .rg-head-t { fill: var(--rg-c, var(--ink-faint)); font: 600 10.5px var(--font-sans); letter-spacing: .03em; }
.rg-node .rg-label { fill: var(--ink); font: 600 13.5px var(--font-sans); }
.rg-node.is-root .rg-box { fill: var(--rg-on); stroke: var(--rg-on); }
.rg-node.is-root .rg-head-t, .rg-node.is-root .rg-label { fill: var(--rg-on-ink); }
.rg-node.has-gap .rg-box { stroke: var(--rg-gap); stroke-width: 2; }
.rg-node.is-path .rg-box { stroke: var(--rg-path); stroke-width: 3; }
.rg-node.is-dim { opacity: .4; }
.rg-node a:focus-visible .rg-box { stroke: var(--accent); stroke-width: 4; }
.rg-node a { outline: none; }
.rg-more-btn { cursor: pointer; }
.rg-more-btn circle { fill: var(--rg-on); stroke: var(--surface); stroke-width: 2; }
.rg-more-btn text { fill: var(--rg-on-ink); font: 700 11px var(--font-sans); }
.rg-more-btn:focus-visible circle { stroke: var(--accent); stroke-width: 4; }
.rg-zoom { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.rg-zoom .rg-btn { border-radius: var(--radius); padding: 4px; width: 40px; height: 40px; font-size: 1.1rem; }
.rg-mini { position: absolute; right: 10px; bottom: 10px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.rg-mini svg { display: block; cursor: pointer; }
.rg-mini-dot { fill: var(--rg-c, var(--ink-faint)); }
.rg-mini-dot.is-root { fill: var(--ink); }
.rg-mini-view { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.rg-mini-l { font-size: .72rem; color: var(--ink-faint); }
.rg-tip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: min(520px, 70%); padding: 8px 12px; border-radius: var(--radius);
  background: var(--dark); color: var(--on-dark); font-size: .85rem; pointer-events: none; }
.rg-foot { margin: 6px 0 0; }
.rg-island.is-full, .rg-island:fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 12px 16px; background: var(--bg); overflow: auto; }
.rg-island.is-full .rg-svg, .rg-island:fullscreen .rg-svg { height: calc(100vh - 150px); }
@media (max-width: 640px) { .rg-svg { height: 420px; } .rg-mini { display: none; } .rg-tip { display: none; } }
/* RG1 readability with many neighbours (20.10.2026, ADR 0192 addendum): larger box text (label 14 px = LABEL_PX in
   frontend/islands/relation-graph/model.js, MIN_ZOOM keeps it at about 12 px on screen), gap counter instead of gap
   boxes, cluster boxes of same-type siblings, "Gruppen zuklappen" */
.rg-node .rg-head-t { font-size: 12px; }
.rg-node .rg-label { font-size: 14px; }
.rg-gap-badge circle { fill: var(--rg-gap); stroke: var(--surface); stroke-width: 2; }
.rg-gap-badge text { fill: var(--surface); font: 700 12px var(--font-sans); }
.rg-cluster { cursor: pointer; outline: none; }
.rg-cluster .rg-box { stroke-width: 2; }
.rg-cluster .rg-stack { fill: var(--surface); stroke: var(--rg-c, var(--line-strong)); opacity: .55; }
.rg-cluster .rg-label { fill: var(--rg-c, var(--ink)); }
.rg-cluster .rg-label-gap { fill: var(--rg-gap); }
.rg-cluster:focus-visible .rg-box:not(.rg-stack) { stroke: var(--accent); stroke-width: 4; }
.rg-fold { position: absolute; top: 10px; left: 10px; background: var(--surface); }
.rg-clip { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) { .rg-mini-toggle { display: none; } }

/* Own lessons editor (block 7b E3): one answer row = correct-answer radio (44 px touch row) + text field */
.ao-option { display: flex; align-items: center; gap: 10px; margin: 6px 0; min-height: 44px; }
.ao-option input[type="radio"] { width: 24px; height: 24px; margin: 10px; flex-shrink: 0; accent-color: var(--accent-dark); }
.ao-option input[type="text"] { flex: 1 1 auto; min-width: 0; margin: 0; }

/* RW22 H-2: target-object hints in the catalogue ("Vorschlag: nicht anwendbar", proposals only) */
.cat-target-hint { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; border: 1px dashed var(--info-line); border-radius: var(--radius); padding: 6px 10px; }
.cat-target-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; }
.cat-target-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.cat-target-dismiss { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
@media (pointer: coarse) { .cat-target-hint .btn, .cat-target-list .btn, .cat-target-dismiss .btn { min-height: 44px; } }

/* ---------- B7-GS IT-Grundschutz per target object (templates/grundschutz/, docs/features/GRUNDSCHUTZ-MODELLING.md) ---------- */
.gs-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; margin: 0 0 12px; }
.gs-sheet > summary { list-style: none; }
.gs-sheet > summary::-webkit-details-marker { display: none; }
.gs-sheet[open] > summary { margin-bottom: 8px; }
.gs-sheet-body { max-width: 640px; }
.gs-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gs-sheet-head h3 { margin: 0; font-size: 1.05rem; }
.gs-filter { margin: 0 0 12px; }
.gs-filter-form { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-top: 8px; }
.gs-filter-form > label { flex-basis: 100%; margin: 0; }
.gs-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gs-card { display: grid; gap: 6px; padding: 12px 16px; margin: 0; }
.gs-card-main { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.gs-card-title { font-weight: 600; overflow-wrap: anywhere; }
.gs-card-progress { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.gs-card-progress .progress { width: 140px; }
.gs-card-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.gs-needs { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.gs-need abbr { text-decoration: none; font-weight: 700; }
.gs-needs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; }
.gs-members, .gs-modlist, .gs-summary { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.gs-members li, .gs-summary li { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.gs-mod { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--line); }
.gs-mod-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.gs-reject[open] { flex-basis: 100%; }
.gs-addmod { max-width: 520px; }
.gs-acceptall { margin: 0 0 12px; }
.gs-matrix-wrap { max-height: 70vh; margin: 0 0 16px; }
.gs-matrix th[scope="row"] { position: sticky; left: 0; background: var(--surface); z-index: 1; white-space: nowrap; }
.gs-matrix thead th { vertical-align: bottom; }
.gs-vert { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .8rem; }
.gs-cell { text-align: center; min-width: 28px; }
.gs-cell-applied { color: var(--accent); font-weight: 700; }
.gs-cell-proposed { color: var(--ink-soft); }
.gs-levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.gs-wz { display: grid; gap: 12px; }
.gs-reqs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gs-req { padding: 12px 16px; margin: 0; }
.gs-req fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.gs-req legend { padding: 0; margin-bottom: 6px; }
.gs-req.has-error { border-color: var(--danger, #b42318); }
.gs-req-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; }
.gs-req [data-gs-dispensable][hidden] { display: none; }
.gs-wz-foot { position: sticky; bottom: 0; background: var(--bg, var(--surface)); padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); }
@media (max-width: 900px) { .gs-req-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) {
  .gs-needs-grid, .gs-req-grid { grid-template-columns: 1fr; }
  .gs-matrix-wrap { display: none; }
  .gs-sheet[open] > .gs-sheet-body { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-width: none; max-height: 85vh; overflow-y: auto;
    margin: 0; border-radius: 16px 16px 0 0; box-shadow: 0 -8px 24px rgba(0, 0, 0, .18); padding-bottom: calc(16px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
  .has-bottom-nav .gs-sheet[open] > .gs-sheet-body { bottom: var(--bottom-nav-h, 0); }
  .has-bottom-nav .gs-wz-foot { bottom: var(--bottom-nav-h, 0); }
}
.gs-matrix th[scope="row"] { text-transform: none; letter-spacing: 0; font-weight: 600; font-size: .9rem; }
.gs-matrix td, .gs-matrix th { padding: 6px 8px; vertical-align: middle; }
/* EVL1 link evidence (templates/project/_evidence_links.php, ADR 0183): list line like a file, path as selectable text, switch
   "Datei hochladen | Link hinterlegen" without JavaScript (radios before the panels, sibling selectors). 375 px: line and form wrap,
   buttons 44 px on touch devices through the shared .btn rule. */
.ev-link-list { margin-top: 6px; }
.ev-link-path code { display: block; margin-bottom: 4px; overflow-wrap: anywhere; white-space: normal; -webkit-hyphens: none; hyphens: none; font-size: .8rem; }
.ev-link-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px; margin: 6px 0 2px; }
.ev-link-form label { display: inline-flex; flex-direction: column; align-items: stretch; gap: 2px; font-weight: 600; min-width: 0; }
.ev-link-form input[type=date] { padding: 3px 6px; font-size: .85rem; }
.ev-link-form input[type=file] { font-size: .85rem; max-width: 100%; font-weight: normal; }
.ev-link-hint { flex-basis: 100%; margin: 0; }
.ev-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 2px; }
.ev-sw-r { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ev-sw-l { cursor: pointer; }
.ev-sw-r:checked + .ev-sw-l { background: var(--inset); border-color: var(--accent-dark); color: var(--accent-dark); }
.ev-sw-r:focus-visible + .ev-sw-l { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
.ev-sw-p { flex-basis: 100%; min-width: 0; }
.ev-sw-r-file:checked ~ .ev-sw-p-link, .ev-sw-r-link:checked ~ .ev-sw-p-file { display: none; }
@media (max-width: 640px) {
  .ev-link-form label { flex-basis: 100%; }
  .ev-link-form .ev-meta-desc input { width: 100%; }
}
/* ---------- 1.91-A platform switches (templates/admin/platform.php, ADR 0186): one row per entry, request as a bottom sheet below 640 px ---------- */
.platform-list { list-style: none; margin: 0; padding: 0; }
.platform-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 10px 0; border-top: 1px solid var(--line); }
.platform-row:first-child { border-top: 0; }
.platform-main { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; flex: 1 1 320px; }
.platform-hint { flex-basis: 100%; }
.platform-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.platform-preview { margin: 4px 0 12px; padding-left: 1.2em; }
.platform-indent { margin-left: 1.6em; }
dialog.platform-sheet[open]:not(:modal) { border-color: var(--accent); }
@media (pointer: coarse) {
  .platform-actions .btn, .platform-sheet-close { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
}
@media (max-width: 640px) {
  .platform-actions { width: 100%; }
  .platform-actions .btn { flex: 1 1 auto; min-height: 44px; justify-content: center; }
  dialog.platform-sheet[open]:not(:modal) { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 60; width: 100vw; max-width: 100vw; max-height: 85vh; max-height: 85dvh;
    margin: 0; overflow-y: auto; border-radius: 16px 16px 0 0; border: 0; box-shadow: 0 -8px 24px rgba(12, 24, 48, .25); padding-bottom: env(safe-area-inset-bottom, 0px); }
  dialog.platform-sheet .row-actions { flex-direction: column; align-items: stretch; }
  dialog.platform-sheet .row-actions .btn { min-height: 44px; justify-content: center; }
  .platform-sheet-close { min-height: 44px; min-width: 44px; }
}
/* ---------- Custom frameworks (1.92-R, templates/frameworks_custom/, ADR 0191): editor as server-driven wizard, requirements as a
   collapsible list, one column at 375 px, 44 px targets on touch devices ---------- */
.cf-steps { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .86rem; }
.cf-steps a { display: inline-flex; align-items: center; min-height: 24px; }
.cf-steps a[aria-current] { font-weight: 700; color: var(--ink); text-decoration: none; }
.cf-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.cf-item { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; background: var(--surface); min-width: 0; }
.cf-item-head { display: flex; gap: 8px 12px; align-items: center; flex-wrap: wrap; }
.cf-item-head .grow { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.cf-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cf-inline { display: inline; margin: 0; }
.cf-row { display: flex; flex-wrap: wrap; gap: 0 12px; }
.cf-row .cf-ref { flex: 0 1 9rem; }
.cf-row .grow { flex: 1 1 16rem; min-width: 0; }
.cf-section { margin: 0 0 20px; }
.cf-section > h3 { margin: 16px 0 8px; overflow-wrap: anywhere; }
.cf-req { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin: 0 0 8px; background: var(--surface); }
.cf-req > summary { min-height: 32px; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; overflow-wrap: anywhere; }
.cf-req-body { display: grid; gap: 8px; padding-top: 8px; min-width: 0; overflow-wrap: anywhere; }
.cf-add > summary, .cf-delete > summary { min-height: 32px; display: inline-flex; gap: 6px; align-items: center; font-weight: 600; }
.cf-ref-chip { display: inline-block; font-size: .78rem; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: var(--inset-alt); color: var(--ink-soft); white-space: nowrap; }
.cf-controls { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 4px; margin: 0 0 12px; min-width: 0; }
.cf-controls legend { font-weight: 700; padding: 0 4px; }
.cf-check { padding: 4px 0; overflow-wrap: anywhere; }
.cf-chips { margin: 0 0 12px; padding-left: 18px; }
.cf-final { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cf-final form { margin: 0; }
.cf-nav { margin-top: 20px; }
.cf-summary-title { display: inline; font-size: 1.1rem; margin: 0; }
.cf-forms details { margin: 0 0 14px; }
@media (pointer: coarse) { .cf-touch, .cf-steps a, .cf-req > summary, .cf-add > summary, .cf-delete > summary { min-height: 44px; } .cf-touch { min-width: 44px; justify-content: center; } }
@media (max-width: 640px) { .cf-row .cf-ref, .cf-row .grow { flex-basis: 100%; } .cf-final .btn, .cf-final form { width: 100%; } .cf-final .btn { justify-content: center; min-height: 44px; } }
/* ---------- 1.92-U certificate register: chapters, substance declarations (templates/cert_register/, supplier_portal/_declarations.php) ----------
   Chapter groups are disclosures on every width; forms open from a details.cr-sheet, a sheet at the bottom on phones that needs no
   JavaScript (tap the summary again to close); declaration tables become cards below 768 px (cr-wide). */
.cr-groups { display: grid; gap: 8px; margin: 12px 0; }
.cr-group { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
.cr-group > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 44px; padding: 6px 12px; font-weight: 600; }
.cr-group-no { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 999px; border: 2px solid var(--line-strong); font-size: .85rem; }
.cr-clauses { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 10px; }
.cr-clause-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-no { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 2.6em; }
.cr-links { list-style: none; margin: 4px 0 0; padding: 0 0 0 2.6em; display: grid; gap: 4px; overflow-wrap: anywhere; }
.cr-chips { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cr-chips li { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; }
.cr-chips li.is-off { color: var(--ink-faint); border-style: dashed; }
.cr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.cr-sheet { margin: 8px 0; }
.cr-sheet > summary { list-style: none; display: inline-flex; min-height: 36px; }
.cr-sheet > summary::-webkit-details-marker { display: none; }
.cr-sheet[open] > .cr-sheet-body { margin-top: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-align: left; }
.cr-supplier-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.cr-supplier-head h2 { margin: 0; }
.cr-requests { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cr-request { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); }
@media (max-width: 767px) {
  table[data-cards].cr-wide, table[data-cards].cr-wide > tbody, table[data-cards].cr-wide > tbody > tr, table[data-cards].cr-wide > tbody > tr > td { display: block; width: auto; }
  table[data-cards].cr-wide > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table[data-cards].cr-wide > tbody > tr { display: flex; flex-direction: column; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); }
  table[data-cards].cr-wide td.right { text-align: left; }
}
@media (max-width: 640px) {
  .cr-sheet > summary, .cr-group > summary { min-height: 44px; }
  /* open: backdrop, the sheet from 72 px below the top to the bottom edge, the summary stays reachable above it as the close button */
  .cr-sheet[open]::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(12, 24, 48, .45); }
  .cr-sheet[open] > summary { position: fixed; top: 16px; right: 12px; z-index: 61; }
  .cr-sheet[open] > summary::after { content: " ✕"; }
  .cr-sheet[open] > .cr-sheet-body { position: fixed; left: 0; right: 0; top: 72px; bottom: 0; z-index: 60; overflow-y: auto; margin: 0;
    border-radius: 16px 16px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -8px 24px rgba(12, 24, 48, .25); overscroll-behavior: contain; }
  .cr-links { padding-left: 0; }
}

/* ---------- Relation graph RG1 (1.92-T, ADR 0192, templates/partials/_relation_graph.php, island relation-graph) ---------- */
.rg { --rg-asset: #1f4e8c; --rg-risk: #a3302a; --rg-vuln: #8a5a00; --rg-incident: #6b3fa0; --rg-control: #2f7a4f;
  --rg-task: #4d5a6c; --rg-supplier: #3d4fa8; --rg-contract: #2b6a80; --rg-gap: #b3261e; --rg-gap-bg: #fdecea;
  --rg-path: #2f6fd6; --rg-edge: #9aa7b8; --rg-on: var(--dark); --rg-on-ink: var(--on-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rg { --rg-asset: #8fb6ec; --rg-risk: #f0938a; --rg-vuln: #e6b65c;
  --rg-incident: #c3a4ec; --rg-control: #86d3a5; --rg-task: #b9c4d3; --rg-supplier: #a8b5f2; --rg-contract: #8fd0e3; --rg-gap: #ff9d94;
  --rg-gap-bg: #3a1d1b; --rg-path: #7fb0ff; --rg-edge: #5b6d88; --rg-on: var(--accent-bright); --rg-on-ink: #13233f; } }
:root[data-theme="dark"] .rg { --rg-asset: #8fb6ec; --rg-risk: #f0938a; --rg-vuln: #e6b65c; --rg-incident: #c3a4ec; --rg-control: #86d3a5;
  --rg-task: #b9c4d3; --rg-supplier: #a8b5f2; --rg-contract: #8fd0e3; --rg-gap: #ff9d94; --rg-gap-bg: #3a1d1b; --rg-path: #7fb0ff; --rg-edge: #5b6d88;
  --rg-on: var(--accent-bright); --rg-on-ink: #13233f; }
.rg .rg-t-asset { --rg-c: var(--rg-asset); } .rg .rg-t-risk { --rg-c: var(--rg-risk); } .rg .rg-t-vuln { --rg-c: var(--rg-vuln); }
.rg .rg-t-incident { --rg-c: var(--rg-incident); } .rg .rg-t-control { --rg-c: var(--rg-control); } .rg .rg-t-task { --rg-c: var(--rg-task); }
.rg .rg-t-supplier { --rg-c: var(--rg-supplier); } .rg .rg-t-contract { --rg-c: var(--rg-contract); }
/* List (no JavaScript, 375 px, list view of the island): cards for level 1, foldable deeper levels */
.rg-list { list-style: none; margin: 0; padding: 0; }
.rg-top { display: grid; gap: 10px; }
.rg-top > .rg-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 6px 14px; }
.rg-item .rg-list { margin: 6px 0 4px; padding-left: 14px; border-left: 2px solid var(--line); display: grid; gap: 4px; }
.rg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 44px; padding: 4px 0; }
.rg-sub > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink-soft); font-size: .88rem; }
.rg-sub > summary::-webkit-details-marker { display: none; }
.rg-sub > summary::before { content: "▸"; color: var(--ink-faint); }
.rg-sub[open] > summary::before { content: "▾"; }
.rg-sub > summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rg-type { flex-basis: 100%; font-size: .78rem; letter-spacing: .03em; text-transform: uppercase; color: var(--rg-c, var(--ink-faint)); }
.rg-name { font-weight: 700; overflow-wrap: anywhere; min-height: 24px; display: inline-flex; align-items: center; }
.rg-gap { margin: 4px 0 6px; padding: 8px 12px; border: 1px dashed var(--rg-gap); border-radius: var(--radius); background: var(--rg-gap-bg); color: var(--rg-gap); font-size: .9rem; }
.rg-extra { margin: 2px 0 6px; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.rg-sum { margin-top: -4px; }
.cov-rg { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; }
/* Island toolbar */
.rg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 6px; }
.rg-btn { font: inherit; font-size: .88rem; min-height: 36px; min-width: 36px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; }
.rg-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.rg-btn[aria-pressed="true"] { background: var(--rg-on); border-color: var(--rg-on); color: var(--rg-on-ink); }
.rg-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-chip[class*="rg-t-"] { border-color: var(--rg-c); color: var(--rg-c); }
.rg-chip[class*="rg-t-"][aria-pressed="true"] { background: var(--rg-c); color: var(--surface); }
.rg-chip-gap { border-color: var(--rg-gap); color: var(--rg-gap); }
.rg-chip-gap[aria-pressed="true"] { background: var(--rg-gap); border-color: var(--rg-gap); color: var(--surface); }
.rg-seg { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 999px; background: var(--inset); }
.rg-seg .rg-btn { border-color: transparent; background: transparent; }
.rg-seg .rg-btn[aria-pressed="true"] { background: var(--rg-on); color: var(--rg-on-ink); }
.rg-depth-l { padding: 0 6px 0 10px; color: var(--ink-faint); font-size: .88rem; }
.rg-status:empty { display: none; }
.rg-more-list { margin: 2px 0 6px; border-radius: var(--radius); }
@media (pointer: coarse), (max-width: 640px) { .rg-btn { min-height: 44px; min-width: 44px; } }
/* Island canvas */
.rg-canvas { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--inset); overflow: hidden; }
.rg-svg { display: block; width: 100%; height: 560px; touch-action: none; cursor: grab; user-select: none; }
.rg-svg:active { cursor: grabbing; }
.rg-edge { stroke: var(--rg-edge); stroke-width: 2; }
.rg-edge.is-path { stroke: var(--rg-path); stroke-width: 4; }
.rg-edge.is-dim { opacity: .35; }
.rg-node { cursor: pointer; }
.rg-node .rg-box { fill: var(--surface); stroke: var(--rg-c, var(--line-strong)); stroke-width: 1.5; }
.rg-node .rg-head-t { fill: var(--rg-c, var(--ink-faint)); font: 600 10.5px var(--font-sans); letter-spacing: .03em; }
.rg-node .rg-label { fill: var(--ink); font: 600 13.5px var(--font-sans); }
.rg-node.is-root .rg-box { fill: var(--rg-on); stroke: var(--rg-on); }
.rg-node.is-root .rg-head-t, .rg-node.is-root .rg-label { fill: var(--rg-on-ink); }
.rg-node.has-gap .rg-box { stroke: var(--rg-gap); stroke-width: 2; }
.rg-node.is-path .rg-box { stroke: var(--rg-path); stroke-width: 3; }
.rg-node.is-dim { opacity: .4; }
.rg-node a:focus-visible .rg-box { stroke: var(--accent); stroke-width: 4; }
.rg-node a { outline: none; }
.rg-more-btn { cursor: pointer; }
.rg-more-btn circle { fill: var(--rg-on); stroke: var(--surface); stroke-width: 2; }
.rg-more-btn text { fill: var(--rg-on-ink); font: 700 11px var(--font-sans); }
.rg-more-btn:focus-visible circle { stroke: var(--accent); stroke-width: 4; }
.rg-zoom { position: absolute; top: 10px; right: 10px; display: grid; gap: 4px; }
.rg-zoom .rg-btn { border-radius: var(--radius); padding: 4px; width: 40px; height: 40px; font-size: 1.1rem; }
.rg-mini { position: absolute; right: 10px; bottom: 10px; padding: 6px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-align: center; }
.rg-mini svg { display: block; cursor: pointer; }
.rg-mini-dot { fill: var(--rg-c, var(--ink-faint)); }
.rg-mini-dot.is-root { fill: var(--ink); }
.rg-mini-view { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.rg-mini-l { font-size: .72rem; color: var(--ink-faint); }
.rg-tip { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); max-width: min(520px, 70%); padding: 8px 12px; border-radius: var(--radius);
  background: var(--dark); color: var(--on-dark); font-size: .85rem; pointer-events: none; }
.rg-foot { margin: 6px 0 0; }
.rg-island.is-full, .rg-island:fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 12px 16px; background: var(--bg); overflow: auto; }
.rg-island.is-full .rg-svg, .rg-island:fullscreen .rg-svg { height: calc(100vh - 150px); }
@media (max-width: 640px) { .rg-svg { height: 420px; } .rg-mini { display: none; } .rg-tip { display: none; } }
/* LA1 AI reading of supplier evidence (templates/suppliers/_evidence_ai.php): one card per suggested field, 44 px buttons on touch */
.evidence-ai-cards { gap: 10px; margin: 10px 0; }
.evidence-ai-card { padding: 12px 14px; overflow-wrap: anywhere; }
.evidence-ai-card p { margin: 2px 0; }
.evidence-ai-card .row-actions { margin-top: 6px; }
@media (pointer: coarse) { .evidence-ai .btn { min-height: 44px; } .evidence-ai-card .row-actions .btn { flex: 1 1 0; } }
@media (max-width: 480px) { .evidence-ai { padding: 10px; margin-left: -8px; margin-right: -8px; } .evidence-ai-card { padding: 10px 12px; } .evidence-ai-card .row-actions .btn { white-space: nowrap; hyphens: none; padding-left: 8px; padding-right: 8px; } }

/* W2-A: documented commands on the import pages wrap instead of widening the page (375 px, no sideways scroll) */
.bk-import pre { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
.bk-import > .panel { min-width: 0; }

/* ---------- React islands: shared building blocks I0 (ADR 0192 addendum, frontend/islands/shared/, docs/frontend/ISLANDS.md) ----------
   Base styles once for every island (dialog, keyboard result list, toasts, loading and error states, @-mentions); an
   island's own styles live in its own CSS file imported by its code (Vite emits it, the manifest links it). */
.isl-dialog { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); padding: 0;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 64px); box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.isl-dialog.is-wide { width: min(880px, calc(100vw - 32px)); }
.isl-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.isl-dialog[open] { display: flex; flex-direction: column; }
.isl-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 12px 8px 20px; border-bottom: 1px solid var(--line); }
.isl-dialog-title { font-size: 1.1rem; margin: 0; }
.isl-dialog-body { padding: 16px 20px; overflow: auto; }
.isl-dialog-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); }
.isl-icon-btn { font: inherit; font-size: 1.4rem; line-height: 1; min-width: 44px; min-height: 44px; border: 0; border-radius: 999px; background: transparent; color: var(--ink-soft); cursor: pointer; }
.isl-icon-btn:hover { background: var(--inset); color: var(--ink); }
.isl-icon-btn:focus-visible, .isl-results-input:focus-visible, .isl-mention-input:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
/* Phones and small tablets: the dialog becomes a bottom sheet (DESIGN-GUIDELINES section 9) */
@media (max-width: 767.98px) {
  .isl-dialog { width: 100vw; max-width: 100vw; max-height: 85vh; margin: auto 0 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
  .isl-dialog-foot > .btn { flex: 1 1 auto; min-height: 44px; }
}
.isl-results { position: relative; display: grid; gap: 4px; }
.isl-results-label { font-weight: 600; font-size: .92rem; }
.isl-results-input, .isl-mention-input { font: inherit; font-size: 1rem; width: 100%; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface); color: var(--ink); }
.isl-results-list { list-style: none; margin: 0; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); max-height: 320px; overflow: auto; }
.isl-results-list[hidden] { display: none; }
.isl-results-opt { display: flex; flex-direction: column; justify-content: center; min-height: 44px; padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.isl-results-opt.is-active { background: var(--accent-tint); color: var(--ink); outline: 2px solid var(--accent); outline-offset: -2px; }
.isl-results-opt[aria-disabled="true"] { color: var(--ink-faint); cursor: default; }
.isl-results-sub { font-size: .85rem; color: var(--ink-soft); }
.isl-results-empty { padding: 10px; color: var(--ink-soft); }
.isl-mention { position: relative; display: grid; gap: 4px; }
.isl-mention .isl-results-list { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; box-shadow: 0 8px 24px rgba(0, 0, 0, .15); }
.isl-toasts { position: fixed; z-index: 1000; right: 16px; bottom: 16px; display: grid; gap: 8px; max-width: min(420px, calc(100vw - 32px)); }
.isl-toast { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 8px; border: 1px solid var(--ok-line); background: var(--ok-bg); color: var(--ok-ink); box-shadow: 0 6px 20px rgba(0, 0, 0, .15); }
.isl-toast.is-error { border-color: var(--err-line); background: var(--err-bg); color: var(--err-ink); }
.isl-toast > span { flex: 1; }
@media (max-width: 767.98px) {
  .isl-toasts { left: 16px; right: 16px; max-width: none; }
  body.has-bottom-nav .isl-toasts { bottom: calc(16px + var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
}
.isl-loading { display: flex; align-items: center; gap: 10px; padding: 12px 0; color: var(--ink-soft); }
.isl-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: isl-spin .8s linear infinite; }
@keyframes isl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .isl-spinner { animation: none; } }
.isl-error { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 14px; border: 1px solid var(--err-line); border-radius: 8px; background: var(--err-bg); color: var(--err-ink); }
.isl-error-inline { margin: 4px 0 0; color: var(--err-ink); font-size: .9rem; }

/* AKT1 promotions (admin area "Aktionen", templates/admin/promotions.php): cards, facts as a two-column list */
.akt-list { display: grid; gap: var(--space-3, 1rem); }
.akt-card header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.akt-card header h3 { margin: 0 .5rem 0 0; }
.akt-facts { display: grid; grid-template-columns: max-content 1fr; gap: .25rem 1rem; }
.akt-facts dt { color: var(--muted, #667); }
.akt-facts dd { margin: 0; }
.akt-request { display: grid; gap: .5rem; flex: 1 1 100%; }
@media (max-width: 640px) {
  .akt-facts { grid-template-columns: 1fr; gap: 0; }
  .akt-facts dd { margin-bottom: .4rem; }
  .akt-card .btn { min-height: 44px; }
}

/* ---------- RG1 jump line under the page head (templates/partials/_relation_jump.php, docs/features/RELATION-GRAPH.md) ---------- */
.rg-jump { margin: 8px 0; }
.rg-jump a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 32px; }
@media (pointer: coarse) { .rg-jump a { min-height: 44px; } }
/* ---------- NC1 (templates/_nis2_duties.php, src/Nis2Duties.php): card "Was für Sie gilt": one list entry per duty, details fold open,
   notice as bottom sheet (dialog.platform-sheet above), 44 px touch targets ---------- */
.nd-tier { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 8px; }
.nd-list { list-style: none; margin: 8px 0; padding: 0; border-top: 1px solid var(--line); }
.nd-item { border-bottom: 1px solid var(--line); }
.nd-details > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 0; cursor: pointer; min-height: 44px; list-style-position: inside; }
.nd-title { font-weight: 600; flex: 1 1 14rem; min-width: 0; }
.nd-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.nd-ref { font-size: .86rem; color: var(--muted); }
.nd-status { flex-basis: 100%; font-size: .86rem; color: var(--muted); }
.nd-status-warn { color: var(--warn-ink); font-weight: 600; }
.nd-body { padding: 0 0 12px; }
.nd-body p { margin: 0 0 6px; }
.nd-links a { display: inline-flex; align-items: center; min-height: 24px; margin-right: 12px; }
.nd-proof-form { margin-top: 8px; }
.nd-frames { margin: 12px 0 0; }
.nd-frames dt { font-weight: 600; margin-top: 8px; }
.nd-frames dd { margin: 2px 0 0; }
.nd-change { margin: 4px 0 10px; padding-left: 1.1em; }
.nd-sheet-body { padding: 14px 18px; }
.nd-notice .btn { margin-left: 8px; }
@media (pointer: coarse) {
  .nd-links a, .nd-notice .btn { min-height: 44px; }
}
@media (max-width: 640px) {
  .nd-notice .btn { margin: 8px 0 0; display: flex; justify-content: center; min-height: 44px; }
}

/* 204 offers page (admin-offers, templates/admin/offers.php): compact status line; below 640 px the action of a card is the last line, full width */
.offers-status { margin: .25rem 0 .5rem; }
.offer-actions .btn + .btn, .offer-actions .btn + .small { margin-left: .25rem; }
@media (max-width: 639px) {
  .offers-status { margin: 0 0 .375rem; }
  table[data-cards] > tbody > tr > td.offer-actions { padding-top: 8px; }
  td.offer-actions .btn { display: flex; width: 100%; justify-content: center; margin: 0 0 6px; min-height: 44px; }
  td.offer-actions .small { display: block; }
}

/* 2.0.5 M9 (finding of the 2.0.4 full test, DESIGN-GUIDELINES section 9.2): small controls that measured 35-36 px on touch devices
   get 44 px targets; desktop with a mouse stays compact. Chips of forms (website enquiry), list status chips, project jump bar,
   learning block tabs, index links of the help. */
@media (pointer: coarse) {
  .chip span { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }
  .cov-stats.kpi-chips .panel { min-height: 44px; align-items: center; }
  .jumpbar a { min-height: 44px; box-sizing: border-box; }
  .dash-tab { min-height: 44px; box-sizing: border-box; }
  .help-toc .linklist a { display: flex; align-items: center; min-height: 44px; box-sizing: border-box; }
}
/* 2.0.5 L3: file fields keep 16 px text below 640 px (rule 9.3; the specific 14 px rules above are narrower than this one in source order only) */
@media (max-width: 640px) {
  .page input[type=file], .ev-upload-row input[type=file], .ev-link-form input[type=file], .cam-field input[type=file], .form-inline input[type=file] { font-size: 16px; }
}
@media (pointer: coarse) and (max-width: 640px) { .cov-stats.kpi-chips { margin-bottom: 2px; } }   /* the 44 px chips must not push the first list entry down */