/* 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"); }
/* Stand-in until Work Sans has loaded: a system font scaled to the same text width, so lines do not rewrap at the swap (layout shift, SEO plan phase B). The values are measured with Arial on German website text; Marcellus needs no stand-in, Georgia is within 0.5 % of its width. */
@font-face { font-family: "Work Sans Fallback"; font-weight: 400; src: local("Arial"), local("Roboto"), local("Liberation Sans"); size-adjust: 110%; }
@font-face { font-family: "Work Sans Fallback"; font-weight: 600 700; src: local("Arial Bold"), local("Roboto Bold"), local("Liberation Sans Bold"); size-adjust: 103.5%; }

: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;
  --placeholder: #5d687a;   /* ::placeholder text, at least 4.5 : 1 on surface and inset (M7, 28.10.2026): the browser grey was only 3.4 : 1 on the dark surface */
  --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", "Work Sans Fallback", -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;
    --placeholder: #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;
  --placeholder: #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%; }
input::placeholder, textarea::placeholder { color: var(--placeholder); opacity: 1; }
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; }
/* P6 (2.15): the hidden attribute must win over display: grid, or data-show-if (app.js) cannot hide a field */
.form-field[hidden] { display: none; }
.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=time], input[type=datetime-local], input[type=month], 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; }
/* T13 surface label (docs/HOSTS-SPEC.md 4a): light text, not brass, so it does not read as a second slogan line; #d3dae6 on #13233f 11.1:1, on #1c3560 8.6:1 (both themes keep the Tiefsee background) */
.auth-tag[data-surface-tag] { color: var(--on-dark-soft); font-weight: 400; }
/* Sibling sign-in links stay in one piece at 375 px (no "Lieferan-ten") */
.auth-surface-alt a { white-space: nowrap; hyphens: none; }
.auth-card { background: var(--surface); border-radius: var(--radius-lg); padding: 32px 30px; box-shadow: var(--shadow-lg); }
/* Sign-in fields at 16 px: below that iOS Safari zooms into the page on focus (a11y check 2.28; the portal default is .94rem) */
.auth-card input, .auth-card select, .auth-card textarea { font-size: 1rem; }
.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(--card-edge); border-radius: var(--card-radius); padding: 22px 24px; margin-bottom: 18px; box-shadow: var(--card-shadow); }
.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(--card-edge); border-radius: var(--card-radius); padding: 20px 22px; box-shadow: var(--card-shadow); 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(--card-edge); border-radius: var(--card-radius); padding: 14px; box-shadow: var(--card-shadow); }
.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, "no", "yes"). */
.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; } }
/* ADR 0215 addendum E6: parts of a long catalogue (CatalogPaging): a wrapping row of part links, a section jump and previous/next */
.cat-parts { margin: 8px 0 14px; }
.cat-parts-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 6px 0; padding: 0; }
.cat-parts-list a { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-decoration: none; }
.cat-parts-list a[aria-current] { border-color: var(--accent); color: var(--accent-dark); font-weight: 700; }
.cat-parts-jump { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cat-parts-jump select { max-width: 100%; min-width: 0; flex: 1 1 220px; }
.cat-parts-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; }
@media (pointer: coarse) { .cat-parts-list a, .cat-parts-jump select, .cat-parts-jump .btn, .cat-parts-foot .btn { 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="no"] .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="no"] [data-cat-f="status"], .cat-item[data-fields="no"] [data-cat-f="evidence"], .cat-item[data-fields="no"] [data-cat-f="review"],
.cat-item[data-fields="no"] [data-cat-f="task"], .cat-item[data-fields="no"] [data-cat-f="upload"],
.cat-item[data-fields=""] [data-cat-f="sources"], .cat-item[data-fields="no"] [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="no"] [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="no"] .cat-fields { grid-template-columns: 110px minmax(0, 1fr); }
  .cat-item[data-fields=""] .cat-fields > .ai-suggest, .cat-item[data-fields="no"] .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; }
/* Cross-references of a cross-cutting control fold into one line (coverage.php); the summary is the 44 px touch target */
.cov-xref { margin-top: 6px; }
.cov-xref > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 32px; cursor: pointer; font-size: .86rem; color: var(--accent-dark); }
.cov-xref > summary .muted { font-size: .82rem; }
.cov-xref > summary::-webkit-details-marker { display: none; }
.cov-xref > summary::before { content: "▸"; color: var(--ink-faint); }
.cov-xref[open] > summary::before { content: "▾"; }
.cov-xref[open] > summary { margin-bottom: 2px; }
.cov-xref .xref { margin-top: 4px; }
.cov-xref .cov-rg { margin-top: 6px; }
.cov-xref-bar { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.cov-xref-bar .btn[hidden] { display: none; }
@media (pointer: coarse) { .cov-xref > summary { min-height: 44px; } }
.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-high { background: var(--err-bg); color: var(--err-ink); }
.prio-medium { background: var(--warn-bg); color: var(--warn-ink); }
.prio-low { 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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.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) */
/* except the insecure/secure mark of a code example, which repeats its red or green label (ADR 0260 addendum 6) */
:is(.panel, .card, .stepnav, .table, .phase-intro, .filter-bar) .icon:not(.btn .icon):not(.badge .icon):not(.dot .icon):not(.tl-code-tag .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.eu (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 h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; color: var(--ink); margin: 28px 0 8px; }
.lp-legal h4 { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 20px 0 6px; }
.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=security, 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; }
/* IP3: "Anzeigen" (reveal one masked person, Security::revealForStaff()) folded in the account cell; full-width reason, 44 px touch target */
.sec-reveal { margin-top: .25rem; }
.sec-reveal form { display: grid; gap: .35rem; margin-top: .35rem; }
.sec-reveal input[type=text] { width: 100%; }
@media (pointer: coarse) { .sec-reveal summary, .sec-reveal input[type=text], .sec-reveal button { min-height: 44px; } }
.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 */
/* Zone map (asset-zones, src/ZoneMap.php; redesign zc 2.10): tokens, shared SVG rules (copy of ZoneMap::sharedCss(), keep in sync), view switch, detail panel, phone list */
.zmap-wrap { --zmap-band: var(--inset); --zmap-band-dmz: var(--inset-alt); --zmap-box: var(--surface); --zmap-box-border: var(--line-strong); --zmap-text: var(--ink);
  --zmap-faint: var(--ink-faint); --zmap-conduit: var(--ink-faint); --zmap-ok: var(--ok-fill); --zmap-ok-ink: var(--ok-ink); --zmap-warn: var(--warn-ink); --zmap-warn-ink: var(--warn-ink);
  --zmap-bad: var(--err-ink); --zmap-exc: var(--ink-faint); --zmap-chip: var(--inset); --zmap-line: var(--line); --zmap-badge: var(--accent-tint);
  --zmap-halo: var(--inset); --zmap-pill: var(--surface); --zmap-pill-bad: var(--err-bg); }
.zmap { max-width: 100%; min-width: 720px; height: auto; display: block; }
.zmap text { font-family: var(--font-sans); }
.zmap-band-bg{fill:var(--zmap-band)}.zmap-band-dmz{fill:var(--zmap-band-dmz)}.zmap-band-code{font:700 10px sans-serif;letter-spacing:.06em;fill:var(--zmap-faint)}.zmap-band-label{font:600 12px sans-serif;fill:var(--zmap-text)}.zmap-zone-box{fill:var(--zmap-box);stroke:var(--zmap-box-border);stroke-width:1.5}.zmap-zone-name{font:600 13px sans-serif;fill:var(--zmap-text)}.zmap-badge{fill:var(--zmap-badge)}.zmap-badge-text{font:600 11px sans-serif;fill:var(--zmap-text)}.zmap-chip{fill:var(--zmap-chip);stroke:var(--zmap-line)}.zmap-chip-text,.zmap-asset-more{font:11px sans-serif;fill:var(--zmap-text)}.zmap-gap{fill:none;stroke-width:2.5}.zmap-gap-ok{stroke:var(--zmap-ok)}.zmap-gap-warn{stroke:var(--zmap-warn)}.zmap-gap-err{stroke:var(--zmap-bad);stroke-width:3}.zmap-gap-open{stroke:var(--zmap-exc);stroke-dasharray:4,3}.zmap-gap-text{font:600 12px sans-serif}.zmap-gap-text-ok{fill:var(--zmap-ok-ink)}.zmap-gap-text-warn{fill:var(--zmap-warn-ink)}.zmap-gap-text-err{fill:var(--zmap-bad)}.zmap-gap-text-open{fill:var(--zmap-exc)}.zmap-halo{fill:none;stroke:var(--zmap-halo);stroke-width:7;stroke-linejoin:round}.zmap-conduit,.zmap-flow{fill:none;stroke-width:2.5;stroke-linejoin:round}.zmap-conduit{stroke:var(--zmap-conduit)}.zmap-st-allowed{stroke:var(--zmap-ok)}.zmap-st-deviation{stroke:var(--zmap-warn);stroke-dasharray:2,4}.zmap-st-violation{stroke:var(--zmap-bad);stroke-dasharray:9,5}.zmap-st-exception{stroke:var(--zmap-exc);stroke-dasharray:12,4,2,4}.zmap-st-none{stroke:var(--zmap-conduit);stroke-width:2}.zmap-flow-allowed{stroke:var(--zmap-ok)}.zmap-flow-deviation{stroke:var(--zmap-warn)}.zmap-flow-violation{stroke:var(--zmap-bad)}.zmap-flow-exception{stroke:var(--zmap-exc)}.zmap-arrow{fill:var(--zmap-text)}.zmap-pill rect{fill:var(--zmap-pill);stroke:var(--zmap-box-border)}.zmap-pill-text{font:600 11px sans-serif;fill:var(--zmap-text)}.zmap-pill-icon{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke:var(--zmap-text)}.zmap-pill-allowed rect{stroke:var(--zmap-ok)}.zmap-pill-allowed .zmap-pill-icon{stroke:var(--zmap-ok-ink)}.zmap-pill-deviation rect{stroke:var(--zmap-warn)}.zmap-pill-deviation .zmap-pill-icon{stroke:var(--zmap-warn-ink)}.zmap-pill-violation rect{fill:var(--zmap-pill-bad);stroke:var(--zmap-bad)}.zmap-pill-violation .zmap-pill-icon{stroke:var(--zmap-bad)}.zmap-pill-violation .zmap-pill-text{fill:var(--zmap-bad)}.zmap-legend-label{font:11px sans-serif;fill:var(--zmap-text)}.zmap-title{font:600 16px sans-serif;fill:var(--zmap-text)}.zmap-sub{font:12px sans-serif;fill:var(--zmap-faint)}
.zmap-wrap:has(#zmap-l-flows:not(:checked)) .zmap-conduit { stroke: var(--zmap-conduit); stroke-dasharray: none; }
.zmap-wrap:has(#zmap-l-flows:not(:checked)) .zmap-pill rect { fill: var(--zmap-pill); stroke: var(--zmap-box-border); }
.zmap-wrap:has(#zmap-l-flows:not(:checked)) .zmap-pill-icon { display: none; }
.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-wrap:has(#zmap-l-gap:checked) .zmap-asset-open circle { fill: none; stroke: var(--zmap-exc); stroke-dasharray: 2,2; }
.zmap-zone-link { cursor: pointer; }
.zmap-zone-link:hover .zmap-zone-box, .zmap-zone.is-selected .zmap-zone-box { stroke: var(--accent); stroke-width: 3; }
.zmap-zone-link:focus-visible { outline: none; }
.zmap-zone-link:focus-visible .zmap-zone-box { stroke: var(--accent); stroke-width: 4; }
.zmap-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 10px; }
.zmap-views { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.zmap-views .zmap-v { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zmap-views label { padding: 6px 14px; font-size: .9rem; font-weight: 500; cursor: pointer; background: var(--surface); color: var(--ink); }
.zmap-views .zmap-v:focus-visible + label { outline: 2px solid var(--accent); outline-offset: -2px; }
.zmap-wrap:has(#zmap-v-plan:checked) label[for="zmap-v-plan"], .zmap-wrap:has(#zmap-v-list:checked) label[for="zmap-v-list"],
.zmap-wrap:not(:has(.zmap-v:checked)) label[for="zmap-v-plan"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
.zmap-filter-toggle { display: none; }
.zmap-filter-btn { display: none; }
.zmap-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.zmap-site { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: .9rem; font-weight: 600; }
.zmap-site select { font: inherit; font-weight: 500; }
.zmap-layers { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: .9rem; }
.zmap-layers label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 16px; background: var(--inset); }
.zmap-wrap { container-type: inline-size; }
/* plan at full width with the detail panel below it; side by side only where the plan keeps (almost) its natural size */
.zmap-plan-view { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
@container (min-width: 1180px) { .zmap-plan-view { flex-direction: row; align-items: flex-start; } .zmap-sheet { flex: 0 0 300px; } }
.zmap-canvas { flex: 1 1 auto; min-width: 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.zmap-sheet { box-sizing: border-box; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 14px 16px; background: var(--surface); font-size: .9rem; }
.zmap-sheet-zone { display: none; }
.zmap-sheet-zone:target { display: block; }
.zmap-sheet-zone:focus { outline: none; }
.zmap-plan-view > .zmap-sheet { max-width: 760px; }
.zmap-sheet:has(.zmap-sheet-zone:target) .zmap-sheet-empty { display: none; }
.zmap-sheet-band { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.zmap-sheet h3 { margin: 2px 0 2px; }
.zmap-sheet-h { margin: 12px 0 6px; font-size: .8rem; font-weight: 700; }
.zmap-fr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: .72rem; font-weight: 600; }
.zmap-fr li { display: flex; flex-direction: column; gap: 2px; padding: 4px 0; border-radius: 4px; }
.zmap-fr-ok { background: var(--ok-bg); color: var(--ok-ink); } .zmap-fr-warn { background: var(--warn-bg); color: var(--warn-ink); }
.zmap-fr-err { background: var(--err-bg); color: var(--err-ink); } .zmap-fr-open { background: var(--inset); color: var(--ink-soft); }
.zmap-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.zmap-chip-html, .zmap-badge-html { font-size: .78rem; background: var(--inset); border: 1px solid var(--line); border-radius: 10px; padding: 1px 8px; white-space: nowrap; }
.zmap-badge-html { border-radius: 4px; background: var(--accent-tint); border-color: transparent; font-weight: 600; }
.zmap-conns { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; }
.zmap-conn { display: flex; justify-content: space-between; gap: 8px; }
.zmap-conn-st { white-space: nowrap; font-weight: 600; }
.zmap-conn-allowed .zmap-conn-st { color: var(--ok-ink); } .zmap-conn-deviation .zmap-conn-st { color: var(--warn-ink); }
.zmap-conn-violation { color: var(--err-ink); } .zmap-conn-none .zmap-conn-st, .zmap-conn-exception .zmap-conn-st { color: var(--ink-faint); font-weight: 400; }
.zmap-list-view { display: none; }
.zmap-list-band { margin: 14px 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); }
.zmap-lcard { display: flex; flex-direction: column; gap: 6px; margin: 0 0 8px; padding: 12px; border: 2px solid var(--line-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); text-decoration: none; }
.zmap-lcard:hover { border-color: var(--accent); }
.zmap-lcard-ok { border-color: var(--ok-fill); } .zmap-lcard-warn { border-color: var(--warn-ink); } .zmap-lcard-err { border-color: var(--err-ink); } .zmap-lcard-open { border-style: dashed; border-color: var(--ink-faint); }
.zmap-lcard-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.zmap-lcard-meta { font-size: .85rem; color: var(--ink-soft); }
.zmap-lcard-ok .zmap-lcard-gap { color: var(--ok-ink); font-weight: 600; } .zmap-lcard-warn .zmap-lcard-gap { color: var(--warn-ink); font-weight: 600; }
.zmap-lcard-err .zmap-lcard-gap { color: var(--err-ink); font-weight: 600; } .zmap-lcard-open .zmap-lcard-gap { color: var(--ink-faint); font-weight: 600; }
.zmap-lcard .zmap-conns { border-top: 1px solid var(--line); padding-top: 6px; }
.zmap-wrap:has(#zmap-v-list:checked) .zmap-plan-view { display: none; }
.zmap-wrap:has(#zmap-v-list:checked) .zmap-list-view { display: block; }
@media (max-width: 767px) {
  .zmap-plan-view { display: none; flex-direction: column; }
  .zmap-list-view { display: block; }
  .zmap-wrap:has(#zmap-v-plan:checked) .zmap-plan-view { display: flex; }
  .zmap-wrap:has(#zmap-v-plan:checked) .zmap-list-view { display: none; }
  .zmap-sheet { flex-basis: auto; width: 100%; box-sizing: border-box; }
  .zmap-wrap:not(:has(.zmap-v:checked)) label[for="zmap-v-plan"] { background: var(--surface); color: var(--ink); font-weight: 500; }
  .zmap-wrap:not(:has(.zmap-v:checked)) label[for="zmap-v-list"] { background: var(--btn-bg); color: var(--btn-ink); font-weight: 600; }
  .zmap-bar { gap: 8px; }
  .zmap-views { flex: 1 1 auto; }
  .zmap-views label { flex: 1 1 0; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .zmap-filter-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .zmap-filter-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); font-weight: 600; cursor: pointer; }
  .zmap-filter-toggle:focus-visible + .zmap-filter-btn { outline: 2px solid var(--accent); outline-offset: 2px; }
  .zmap-tools { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
  .zmap-filter-toggle:checked ~ .zmap-tools { display: flex; }
  .zmap-layers label { min-height: 44px; box-sizing: border-box; }
  .zmap-site select { min-height: 44px; flex: 1 1 auto; }
}
.zmap-legend-html line { stroke-width: 2.5; }
.zmap-legend-html { margin: 8px 0 0; }
.zmap-legend-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin: 0 0 4px; }
/* Legend tips (zc 2.13): ⓘ opens on hover, keyboard focus and tap; at phone width as a bottom sheet (app.js sets .is-open) */
.zmap-lg-tip { position: relative; display: inline-flex; }
.zmap-lg-btn { width: 24px; height: 24px; padding: 0; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent-dark); font: inherit; font-size: .8rem; line-height: 1; cursor: help; display: inline-flex; align-items: center; justify-content: center; }
.zmap-lg-btn:hover, .zmap-lg-tip.is-open .zmap-lg-btn { border-color: var(--accent); background: var(--accent-tint); }
.zmap-lg-text { display: none; position: absolute; z-index: 30; top: calc(100% + 6px); left: -8px; 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); white-space: normal; font-size: .85rem; line-height: 1.45; font-weight: 400; text-align: left; }
.zmap-lg-tip.is-right .zmap-lg-text { left: auto; right: -8px; }
.zmap-lg-close { display: none; }
@media (min-width: 640px) {
  .zmap-lg-tip:hover::after { content: ""; position: absolute; left: -8px; right: -8px; top: 100%; height: 8px; }
  .zmap-lg-tip:hover .zmap-lg-text, .zmap-lg-tip:focus-within .zmap-lg-text, .zmap-lg-tip.is-open .zmap-lg-text { display: block; }
  .zmap-lg-tip.is-dismissed .zmap-lg-text { display: none !important; }
}
@media (max-width: 639px) {
  .zmap-lg-btn { width: 44px; height: 44px; font-size: 1.05rem; }
  .zmap-legend-item { white-space: normal; }
  .zmap-lg-tip.is-open .zmap-lg-text { display: flex; flex-direction: column; align-items: flex-start; position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; top: auto; right: 0; width: auto; max-width: none; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); font-size: 1rem; }
  .zmap-lg-tip.is-open .zmap-lg-close { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--accent-bright); border-radius: var(--radius); background: transparent; color: var(--on-dark); font: inherit; font-weight: 600; cursor: pointer; }
}
.zmap-legend-all { margin: 4px 0 0; }
.zmap-legend-all summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 24px; color: var(--accent-dark); font-weight: 600; }
.zmap-legend-all dl { margin: 6px 0 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-items: baseline; }
.zmap-legend-all dt { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.zmap-legend-all dd { margin: 0; }
@media (max-width: 639px) { .zmap-legend-all summary { min-height: 44px; } .zmap-legend-all dl { grid-template-columns: 1fr; gap: 0; } .zmap-legend-all dd { margin: 0 0 10px 36px; } }
@media print { .zmap-lg-tip { display: none; } }
.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); }
[data-wz-addons-for] { margin-top: 14px; }
.pr-plans-sec { padding-top: 56px; }
.pr-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
/* Link to the feature comparison of the package page below the cards (plan 2.37 W1, instead of a second table) */
.pr-compare { margin: 18px 0 0; text-align: center; font-weight: 600; }
.pr-compare .lp-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.pr-compare svg { width: 18px; height: 18px; }
.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; }
/* Hints of different length (and longer translations) wrap differently; the fields stay level at the bottom of each row */
.pr-addons label > input, .pr-addons label > select { margin-top: auto; }
.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) */
/* Read rows in two columns (one below 900 px), one group as a form, folded groups (ADR 0303) */
.pricing-admin input, .pricing-admin select { width: 100%; min-width: 90px; }
.pa-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; }
.pa-row { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 16px; padding: 7px 0 7px 8px; border-top: 1px solid var(--line); min-width: 0; }
.pa-row dt { min-width: 0; overflow-wrap: anywhere; }
.pa-row dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.pa-row.is-changed { box-shadow: inset 3px 0 0 var(--accent-bright); }
.pa-row:target { background: var(--inset); }
.pa-std { display: block; font-size: .8rem; font-weight: 400; color: var(--ink-faint); }
.pa-head-end { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.pa-others { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0 0 12px; }
.pa-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.pa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px 20px; align-items: start; }
.pa-grid-tight { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pa-new-row { grid-column-start: 1; }
.pa-asof { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.pa-fold + .pa-fold { border-top: 1px solid var(--line); }
.pa-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 9px 0; cursor: pointer; }
.pa-fold-name { flex: 1 1 240px; min-width: 0; font-weight: 600; }
.pa-fold-price { font-variant-numeric: tabular-nums; }
.pa-fold[open] > summary { margin-bottom: 4px; }
.pa-fold .read-head { margin: 4px 0 6px; }
.pa-fold .pricing-admin, .pa-fold .pa-read { margin-bottom: 12px; }
@media (max-width: 900px) { .pa-read { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pa-fold > summary { min-height: 44px; } .pa-head-end .btn { min-height: 44px; } .pa-grid, .pa-grid-tight { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 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(--card-edge); border-radius: var(--card-radius); padding: 16px 18px; box-shadow: var(--card-shadow); 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(--card-edge); border-left: 3px solid var(--accent-bright); border-radius: var(--card-radius); box-shadow: var(--card-shadow); }
.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; }

/* Name and end button of a person of a partner (customer page and partner portal, ADR 0308) */
.grant-person-name { margin-right: 10px; }

/* ---------- Lizenz und Nutzung (?r=licence, templates/license.php) ---------- */
/* 2.37 slim layout: equal small figure cards that do not stretch to the tallest one, module cards with folded chips,
   detail tables in a <details> fold. Phones: one column, content first; summaries are 44 px touch targets. */
.license-figures, .license-modules { display: grid; gap: 16px; margin-bottom: 16px; align-items: start; }
.license-figures { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.license-modules { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); margin-bottom: 26px; }
.license-figures .card, .license-modules .card { padding: 16px 18px; margin: 0; }
.license-figures .eyebrow, .license-modules .eyebrow { margin: 0 0 4px; }
.license-figure .progress { margin: 4px 0 6px; }
.license-figure .small { margin: 0; }
.license-names { list-style: none; padding: 0; }
.license-fold-chips { margin: 6px 0 0; }
.license-fold-chips > summary, .license-fold > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: .88rem; font-weight: 600; color: var(--accent-dark); }
.license-fold-chips > summary::-webkit-details-marker, .license-fold > summary::-webkit-details-marker { display: none; }
.license-fold-chips > summary { list-style: none; }
.license-fold > summary { list-style: none; }
.license-fold-chips > summary::before, .license-fold > summary::before { content: "▸"; color: var(--ink-faint); }
.license-fold-chips[open] > summary::before, .license-fold[open] > summary::before { content: "▾"; }
.license-fold-chips .license-when-open, .license-fold-chips[open] .license-when-closed { display: none; }
.license-fold-chips[open] .license-when-open { display: inline; }
.license-fold { margin: 4px 0 0; }
.license-fold[open] > summary { margin-bottom: 8px; }
@media (pointer: coarse) { .license-fold-chips > summary, .license-fold > summary { min-height: 44px; } }
@media (max-width: 640px) { .license-figures, .license-modules { grid-template-columns: minmax(0, 1fr); } }
.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); }
/* min-width/min-height 24px: WCAG 2.5.8 target size; the link box was 21px wide or high (axe target-size on /risks at 1280 px) */
.cmt-count { display: inline-flex; align-items: center; gap: 3px; min-width: 24px; min-height: 24px; justify-content: center; 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%); }
@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 */
#cronjobs, #sicherheit, #speicher-verlauf, #antwortzeit-verlauf, #sicherung-details, #schwachstellen-details, #email-fehler, #php-datenbank { scroll-margin-top: 90px; }
.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; }
/* Portal review M6 (28.10.2026): sortable headers may wrap here, otherwise "Klassifizierung", "Verantwortlich" and "Nächste Prüfung" alone keep the register wider than the screen (1.9k px at 1440 px). */
.doc-register th.tt-sortable { white-space: normal; vertical-align: bottom; }
.doc-register th .tt-sort-btn { text-align: left; }
.doc-register td { hyphens: auto; }
.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; }
/* EMAIL-FIRST sign-in (docs/specs/EMAIL-FIRST-LOGIN-SPEC.md): "Andere E-Mail-Adresse" under the read-only address, company logo on the intermediate page (max. 160 x 48 px) */
.auth-change { margin: -6px 0 4px; }
.auth-change a { display: inline-block; min-height: 24px; }
.auth-tenant-logo { margin: 0 0 12px; text-align: center; }
.auth-tenant-logo img { max-width: 160px; max-height: 48px; width: auto; height: auto; }
/* „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; }
@media (pointer: coarse) { .user-row, .user-sub > summary { min-height: 44px; } } /* touch targets, DESIGN-GUIDELINES 9/10 */
.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-import { margin-top: 12px; }
@media (min-width: 768px) { .hide-lg-only { display: none; } }
.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; }
/* Wide windows up to 1500 px: the fixed page navigation (54 px wide, 16 px from the edge) would sit on the right-hand buttons of list toolbars ("Filtern") and on the last table column, so the page keeps its own gutter while the navigation is shown (Fresh-Eyes 2.07 M6; 1500 px instead of 1420 px since the portal review M5, 28.10.2026: page 1320 px plus sidebar 64 px plus 2 x 50 px free margin).  */
@media (min-width: 769px) and (max-width: 1500px) { body:has(.pagenav:not([hidden])) .page { padding-right: 82px; } }
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; } }
/* Release 2.31: sticky table of contents in a left column from 1280 px (templates/_pagetoc.php, pagenav.js). The column is
   carved out of the page's left padding while the script shows it (body.has-pagetoc, set in the same frame as the first
   paint, so nothing moves afterwards); the nav is absolutely positioned over that padding and its inner box sticks below the
   top bar. Narrower windows keep the floating section list only. Colours come from tokens, so light and dark follow the theme. */
.pagetoc { display: none; }
@media (min-width: 1280px) {
  main.page { position: relative; }
  body.has-pagetoc main.page { padding-left: calc(20px + 200px + 28px); }
  .pagetoc:not([hidden]) { display: block; position: absolute; left: 20px; top: 28px; bottom: 48px; width: 200px; }
  .pagetoc-inner { position: sticky; top: calc(var(--topbar-h, 56px) + 16px); max-height: calc(100vh - var(--topbar-h, 56px) - 32px); overflow-y: auto; overscroll-behavior: contain; padding: 2px 0 2px 12px; border-left: 2px solid var(--line); }
  .pagetoc-title { margin: 0 0 6px 10px; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); }
  .pagetoc ol { list-style: none; margin: 0; padding: 0; }
  .pagetoc a { display: block; padding: 5px 8px; margin-left: -14px; padding-left: 12px; border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; font-size: .84rem; line-height: 1.35; font-weight: 500; color: var(--ink-soft); text-decoration: none !important; overflow-wrap: anywhere; }
  .pagetoc a:hover { background: var(--inset-alt); color: var(--accent-dark); }
  .pagetoc a[aria-current] { border-left-color: var(--accent); background: var(--accent-tint); color: var(--ink); font-weight: 700; }
  .pagetoc a:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .pagetoc a { scroll-margin-top: calc(var(--topbar-h, 56px) + 8px); }   /* at the end of a long page the column ends under the top bar; focus must not stay hidden there (WCAG 2.4.11) */
  /* The floating section list is redundant here; "Zum Seitenanfang" and "Zum Seitenende" stay */
  body.has-pagetoc .pagenav-bar [data-pagenav-sections], body.has-pagetoc .pagenav-toc { display: none !important; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  /* With the sidebar pinned the content column is tight at 1280 px: a slimmer table of contents */
  body.has-pagetoc main.page { padding-left: calc(20px + 168px + 20px); }
  .pagetoc:not([hidden]) { width: 168px; }
}
@media print { .pagetoc { 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(--card-edge); border-left: 5px solid var(--line-strong); border-radius: var(--card-radius); box-shadow: var(--card-shadow); padding: 12px 14px; 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; }
/* Grouping, search and audience filter of the library (public/assets/whitepaper-library.js). The toolbar carries `hidden`
   until the script runs; without JavaScript all groups stay open. */
.wpl-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-bottom: 14px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.wpl-toolbar[hidden] { display: none; }
.wpl-search { position: relative; flex: 1 1 300px; max-width: 460px; }
.wpl-search input { width: 100%; padding-left: 36px; }
.wpl-search .icon { position: absolute; left: 11px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.wpl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wpl-chip { background: var(--surface); color: var(--ink-soft); border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .86rem; cursor: pointer; }
.wpl-chip:hover { border-color: var(--accent); }
.wpl-chip[aria-pressed="true"] { background: var(--accent-bright); border-color: var(--accent-bright); color: #13233f; font-weight: 600; }
.wpl-chip-n { opacity: .75; margin-left: 2px; }
.wpl-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.wpl-link { background: none; border: 0; padding: 2px; font: inherit; font-size: .86rem; color: var(--accent-dark); cursor: pointer; text-decoration: underline; }
.wpl-group { border-bottom: 1px solid var(--line); }
.wpl-group:last-child { border-bottom: 0; }
.wpl-group[hidden], .wp-library > li[hidden], .wpl-empty[hidden] { display: none; }
.wpl-group > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 0 10px; }
.wpl-group > summary::-webkit-details-marker { display: none; }
.wpl-group > summary h2 { margin: 0; font-size: 1.02rem; min-width: 0; }
.wpl-group > summary .wpl-count { flex: none; white-space: nowrap; }
.wpl-group > summary .wpl-caret { flex: none; }
.wpl-caret .icon { width: 14px; height: 14px; color: var(--ink-faint); transition: transform .16s ease; }
.wpl-group[open] > summary .wpl-caret .icon { transform: rotate(90deg); }
.wpl-group > .wp-library { margin-bottom: 10px; }
.wpl-group .wp-library > li:first-child { padding-top: 12px; border-top: 0; }
.wpl-new { display: inline-block; margin-left: 6px; font-size: .78rem; font-weight: 700; color: var(--accent-darker); }
.wpl mark { background: var(--accent-tint); color: inherit; border-radius: 2px; box-shadow: 0 0 0 1px var(--accent-bright); }
.wpl-empty { padding: 20px 0; }
@media (prefers-reduced-motion: reduce) { .wpl-caret .icon { transition: none; } }
@media (pointer: coarse) { .wpl-group > summary, .wpl-chip, .wpl-link { min-height: 44px; } .wpl-link { padding: 2px 8px; } }
@media (max-width: 640px) {
  /* Phone: rows stack (title block above the DE/EN buttons), the chip row scrolls sideways inside itself */
  .wpl-search { max-width: none; }
  .wpl-chips { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; padding-bottom: 4px; }
  .wpl-chip { flex: 0 0 auto; white-space: nowrap; }
  .wpl-tools { margin-left: 0; width: 100%; justify-content: space-between; }
  .wpl .wp-library > li { flex-direction: column; align-items: stretch; }
  .wpl .wp-library-meta { flex: none; }   /* its row-axis basis (280px) would become a height in the column */
}
/* Sales material (templates/admin/sales_material.php, templates/partner/sales_material.php, ADR 0254): one card per deck, one row
   per language and format; buttons wrap below the text at 375 px and keep 44 px touch targets on touch devices. */
.sm-decks, .sm-files { list-style: none; margin: 0; padding: 0; }
.sm-deck { padding: 14px 0; border-top: 1px solid var(--line); }
.sm-deck:first-child { border-top: 0; padding-top: 0; }
.sm-deck h3, .sm-deck h4 { margin: 0 0 8px; }
/* Material families on the administration page (ADR 0273): one folded block per family, 44 px summary on touch devices */
.sm-family { border-top: 1px solid var(--line); padding: 10px 0; }
.sm-family:first-of-type { border-top: 0; }
.sm-family > summary { cursor: pointer; }
.sm-family > summary h3 { display: inline; margin: 0 8px 0 0; }
.sm-family[open] > summary { margin-bottom: 10px; }
.sm-keys { margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
@media (pointer: coarse) { .sm-family > summary { min-height: 44px; } }
.sm-files > li { justify-content: space-between; padding: 8px 0; }
.sm-files > li > div:first-child { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.sm-hash { font-size: .78em; word-break: break-all; }
.sm-files .row-actions { align-items: flex-start; }
.sm-withdraw > summary { list-style: none; }
.sm-withdraw > summary::-webkit-details-marker { display: none; }
/* Bulk upload progress (public/assets/sales-material.js): one line per file, wraps long file names at 375 px */
.sm-progress { margin-top: 12px; }
.sm-progress progress { width: 100%; height: 12px; }
.sm-results { list-style: none; margin: 0; padding: 0; font-size: .9em; }
.sm-results > li { padding: 3px 0; overflow-wrap: anywhere; }
.sm-results > .sm-ok { color: var(--ok-ink); }
.sm-results > .sm-fail { color: var(--err-ink); }
.sm-withdraw[open] form { margin-top: 8px; }
@media (pointer: coarse) { .sm-files .btn { min-height: 44px; } }
/* ---------- 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; }
/* Layout fix (Marc 01.11.2026): in the training flow the step navigation sits at the bottom of the viewport-high main
   column and stays there (sticky), so "Weiter" does not jump to another height with every step */
.tc-main > .tl-nav { position: sticky; bottom: 0; z-index: 3; margin: auto 0 0; padding: 14px 0 16px;
  background: linear-gradient(to bottom, transparent, var(--bg) 14px); }
.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; }
.tvf-dash { stroke-dasharray: 4 3; } /* TV3: dashed outline = "fällt heraus"; the figure's legend says so in text */

/* ---------- TV3 lesson blocks (templates/training/_block.php, _steps.php; design approved by Marc 01.11.2026) ----------
   Colours only through the theme tokens (light and dark), states never by colour alone, phone view from 320 px below. */
.tl-step h3 { font-size: 1rem; margin: 0; }
/* compare: two columns */
.tl-compare { display: grid; gap: 10px; }
.tl-compare-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tl-col { border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.tl-col > * { margin: 0; }
.tl-col-h { display: flex; gap: 10px; align-items: center; }
.tl-col-h p { margin: 0; font-size: .84rem; color: var(--ink-faint); }
.tl-col-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-dark); flex: 0 0 auto; }
.tl-col ul { padding-left: 1.15em; display: grid; gap: 4px; }
.tl-col ul li::marker { color: var(--accent-dark); }
.tl-compare-foot, .tl-steps-loop { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.tl-compare-foot .icon, .tl-steps-loop .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-dark); flex: 0 0 auto; }
/* steps: numbered sequence with a connector line */
.tl-steps { display: grid; gap: 8px; }
.tl-steps > * { margin: 0; }
.tl-steps-list { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-steps-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; position: relative; padding-bottom: 14px; }
.tl-steps-list li:last-child { padding-bottom: 0; }
.tl-steps-list li::after { content: ""; position: absolute; left: 17px; top: 36px; bottom: 2px; width: 2px; background: var(--line-strong); }
.tl-steps-list li:last-child::after { display: none; }
.tl-steps-list p { margin: 0; }
.tl-steps-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--accent); color: var(--accent-darker); font-weight: 700; font-size: .9rem; position: relative; z-index: 1; }
.tl-steps-n .icon { width: 17px; height: 17px; }
.tl-steps-t { font-weight: 600; padding-top: 6px; }
.tl-steps-d { font-size: .88rem; color: var(--ink-faint); }
.tl-ui { display: inline-block; font-size: .86rem; font-weight: 600; padding: 0 8px; border-radius: 4px; background: var(--inset-alt); color: var(--ink); border: 1px solid var(--line); }
.tl-steps-loop { padding-left: 48px; }
/* stat: key figure tiles */
.tl-stat { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.tl-stat li { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; background: var(--surface); display: grid; gap: 2px; align-content: start; }
.tl-stat li.is-key { background: var(--accent-tint); border-color: var(--accent); }
.tl-stat-v { font-family: var(--font-display); font-size: 1.85rem; line-height: 1.1; color: var(--accent-darker); font-variant-numeric: tabular-nums; }
.tl-stat-l { font-size: .88rem; color: var(--ink-soft); line-height: 1.4; }
/* case: invented example of a fixed example company */
.tl-case { border: 1px solid var(--info-line); border-radius: var(--radius); background: var(--info-bg); overflow: hidden; }
.tl-case-h { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--info-line); }
.tl-case-h p, .tl-case-h h3 { margin: 0; }
.tl-case-who { width: 44px; height: 44px; flex: 0 0 auto; }
.tl-case-k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--info-ink); }
.tl-case-m { font-size: .84rem; color: var(--ink-soft); }
.tl-case-b { padding: 12px 16px 14px; display: grid; gap: 10px; background: var(--surface); }
.tl-case-b > * { margin: 0; }
.tl-case-b ul { list-style: none; padding: 0; display: grid; gap: 6px; }
.tl-case-b li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.tl-tag { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border-radius: 4px; text-align: center; border: 1px solid; hyphens: auto; overflow-wrap: anywhere; } /* long single-word tags ("Dokumentation") break inside the 70px column instead of running into the text */
.tl-tag-info { background: var(--info-bg); color: var(--info-ink); border-color: var(--info-line); }
.tl-tag-warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.tl-tag-ok { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-line); }
.tl-case-note { font-size: .9rem; color: var(--ink-soft); border-top: 1px dashed var(--line-strong); padding-top: 8px; }
/* match: ungraded assignment (radio groups; feedback by training.js, without it the solution in <details>) */
.tl-match { border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 12px; }
.tl-match p { margin: 0; }
.tl-match-h { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; }
.tl-match-h .icon { width: 22px; height: 22px; color: var(--accent-dark); margin-top: 2px; }
.tl-match-t { font-weight: 700; }
.tl-match ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tl-match fieldset { border: 0; margin: 0; padding: 10px 12px; border-radius: var(--radius); background: var(--inset); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; min-width: 0; }
.tl-match legend { float: left; padding: 0; font-size: .95rem; }
.tl-match-opts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tl-match-opts input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tl-match-opts label { cursor: pointer; padding: 5px 14px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); font-size: .86rem; font-weight: 600; color: var(--ink-soft); }
.tl-match-opts label:hover { border-color: var(--accent); color: var(--ink); }
.tl-match-opts input:checked + label { background: var(--dark-3); border-color: var(--dark-3); color: var(--on-dark); }
.tl-match-opts input:checked + label::before { content: "✓ "; white-space: pre; } /* selection also as a sign, not only colour */
.tl-match-opts input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.tl-match-fb { grid-column: 1 / -1; font-size: .88rem; display: flex; gap: 6px; align-items: flex-start; }
.tl-match-fb .icon { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto; }
.tl-match-fb.is-ok { color: var(--ok-ink); }
.tl-match-fb.is-no { color: var(--err-ink); }
.tl-match-fb.is-open { color: var(--ink-soft); }
.tl-match-key { font-size: .92rem; }
.tl-match-key summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.tl-match-key ul { margin: 8px 0 0; padding-left: 1.2em; display: grid; gap: 4px; }
.tl-match-foot { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.tl-match-foot[hidden], .tl-match-fb[hidden], .tl-match-key[hidden], .tl-match .btn[hidden] { display: none; }
@media (max-width: 640px) {
  .tf-head h1 { font-size: 1.22rem; }
  .tf-meta { gap: 2px 10px; font-size: .82rem; }
  .tf-row { gap: 10px; }
  .tf-actions .bm-opener-text, .tf-actions .page-tour-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  body.has-bottom-nav .tc-main > .tl-nav { bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
  .tl-compare-cols, .tl-match fieldset { grid-template-columns: minmax(0, 1fr); }
  .tl-case-b li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tl-case-b li .tl-tag { justify-self: start; }
  .tl-steps-loop { padding-left: 0; }
}
@media (pointer: coarse) {
  .tl-match-opts label, .tl-match-key summary, .tf-back, .tf-actions .bm-opener, .tf-actions .page-tour-btn { min-height: 44px; min-width: 44px; justify-content: center; }
  .tf-back { width: 44px; height: 44px; }
}
.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-nav, .tf-back, .tf-bar, .tf-actions, .tl-match-foot { display: none !important; } .tc-main { min-height: 0 !important; } }
.tl-resume { display: grid; gap: 10px; }
.tl-resume > p { margin: 0; }
/* ---------- Code examples (ADR 0260 addendum 6, templates/training/_block.php `code`) ----------
   Escaped monospace text, no highlighting script (CSP). Only the listing scrolls sideways (focusable region), never the
   page; "Unsicher"/"Sicher" are written out next to the icon, the coloured edge only repeats them. Print wraps instead. */
.tl-code { margin: 0; display: grid; gap: 12px; min-width: 0; }
.tl-code > * { margin: 0; }
.tl-code-title { font-weight: 600; }
.tl-code-side { border: 1px solid var(--line); border-left-width: 4px; border-radius: var(--radius); background: var(--inset); min-width: 0; display: grid; }
.tl-code-side.is-bad { border-left-color: var(--err-ink); }
.tl-code-side.is-good { border-left-color: var(--ok-ink); }
.tl-code-tag { margin: 0; padding: 8px 12px 0; display: flex; align-items: center; gap: 6px; font-size: .86rem; }
.tl-code-tag .icon { width: 16px; height: 16px; flex: 0 0 auto; }
.is-bad > .tl-code-tag .icon, .is-bad > .tl-code-tag strong { color: var(--err-ink); }
.is-good > .tl-code-tag .icon, .is-good > .tl-code-tag strong { color: var(--ok-ink); }
.tl-code-lang { margin-left: auto; font-size: .78rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }
.tl-code-pre { margin: 0; padding: 8px 12px 12px; overflow-x: auto; white-space: pre; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.55; color: var(--ink); tab-size: 4; }
.tl-code-pre code { font: inherit; background: none; padding: 0; border-radius: 0; overflow-wrap: normal; }
.tl-code-pre:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.tl-code-c { color: var(--ink-faint); font-style: italic; }
.tl-code-note { margin: 0; padding: 10px 12px; border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); background: var(--surface); border-radius: 0 0 var(--radius) 0; }
.tl-code figcaption { font-size: .86rem; color: var(--ink-faint); }
@media (max-width: 600px) { .tl-code-pre { font-size: .8rem; } }
@media print { .tl-code-pre { white-space: pre-wrap; overflow: visible; overflow-wrap: anywhere; } .tl-code-side { break-inside: avoid; } }
/* ---------- Training downloads (ADR 0262, templates/training/_block.php `download`, _sheet.php, sheet.php, block.php) ----------
   Colours only through the theme tokens (light and dark); tick boxes and fill lines are decorative; phone view from 320 px. */
.tl-dl { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); padding: 14px 16px; display: grid; gap: 12px; }
.tl-dl > * { margin: 0; }
.tl-dl-h { display: flex; gap: 12px; align-items: flex-start; }
.tl-dl-h p, .tl-dl-h h3 { margin: 0; }
.tl-dl-ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-darker); flex: 0 0 auto; }
.tl-dl-ic .icon { width: 20px; height: 20px; }
.tl-dl-k { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-darker); }
.tl-dl-m { font-size: .86rem; color: var(--ink-soft); }
.tl-dl-actions, .tl-sheet-actions { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.tl-sheet-actions p { margin: 0; }
.tl-sheet-actions [data-tl-print][hidden], .tl-sheet-actions [data-tl-print-hint][hidden] { display: none; }
.tl-dl-more summary { cursor: pointer; color: var(--accent-dark); font-weight: 600; min-height: 32px; display: flex; align-items: center; }
.tl-dl-more[open] summary { margin-bottom: 8px; }
.tl-sheet { display: grid; gap: 10px; max-width: 820px; }
.tl-sheet > * { margin: 0; }
.tl-sheet-sec { font-size: 1rem; margin: 6px 0 0; }
.tl-sheet-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.tl-sheet-list.is-check { list-style: none; padding-left: 0; }
.tl-sheet-list.is-check li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; }
.tl-sheet-box { display: inline-block; width: 16px; height: 16px; border: 1.5px solid var(--ink-soft); border-radius: 3px; margin-top: 3px; background: var(--surface); }
.tl-sheet-table th, .tl-sheet-table td { vertical-align: top; }
.tl-sheet-table .tl-sheet-tick { width: 1%; text-align: center; white-space: nowrap; }
.tl-sheet-note { display: flex; gap: 8px; align-items: flex-start; font-size: .92rem; color: var(--ink-soft); border-top: 1px dashed var(--line-strong); padding-top: 8px; }
.tl-sheet-note .icon { width: 16px; height: 16px; margin-top: 3px; color: var(--accent-dark); flex: 0 0 auto; }
.tl-sheet-fill { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px 24px; }
.tl-sheet-fill li { display: grid; gap: 22px; font-size: .86rem; color: var(--ink-soft); }
.tl-sheet-line { display: block; border-bottom: 1px solid var(--ink-soft); }
.tl-sheet-page { max-width: 900px; display: grid; gap: 12px; }
.tl-sheet-page > * { margin: 0; }
.tl-sheet-origin { font-size: .9rem; color: var(--ink-soft); }
.tc-downloads { display: grid; gap: 10px; }
.tc-downloads > * { margin: 0; }
.tc-dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tc-dl-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--inset); }
.tc-dl-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1px solid var(--line-strong); color: var(--accent-dark); }
.tc-dl-ic .icon { width: 18px; height: 18px; }
.tc-dl-t { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .tl-sheet-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tl-sheet-table, .tl-sheet-table tbody, .tl-sheet-table tr, .tl-sheet-table td { display: block; width: 100%; }
  .tl-sheet-table tr { border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 8px; background: var(--surface); }
  .tl-sheet-table td { border: 0; padding: 3px 0; }
  .tl-sheet-table td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; color: var(--ink-faint); }
  .tl-sheet-table .tl-sheet-tick { width: 100%; text-align: left; }
  .tc-dl-list li { grid-template-columns: 36px minmax(0, 1fr); }
  .tc-dl-list li .btn { grid-column: 2; justify-self: start; }
}
@media (pointer: coarse) {
  .tl-dl-actions .btn, .tl-sheet-actions .btn, .tc-dl-list .btn, .tl-dl-more summary { min-height: 44px; min-width: 44px; }
}
@media print {
  .tl-sheet-page { max-width: none; box-shadow: none; border: 0; padding: 0; }
  .tl-sheet-actions, .tl-dl-actions, .tl-sheet-page .eyebrow { display: none !important; }
  .tl-sheet-table tr, .tl-sheet-list li { break-inside: avoid; }
  .tl-sheet-box, .tl-sheet-line { border-color: #000; }
}

/* ---------- Training guided flow (TV2 flow, TV3 compact header, templates/training/_flow.php, exercise.php, module_done.php) ----------
   A control row of fixed height (back link, module, step count over the whole module, minutes left, page tools on the
   right), the title in full width below and a slim bar (the chapter chips of TV2 are gone, decision Marc 01.11.2026:
   the course outline shows the parts); the main column is as high as the viewport so the step navigation sits at its
   bottom (layout fix, Marc 01.11.2026). Also the resume card on "Meine Lernblöcke" and the completion note. */
.tc-main:has(> .tf-head) { display: flex; flex-direction: column; min-height: calc(100vh - var(--topbar-h, 56px) - 16px); }
.tf-head { gap: 8px; margin-bottom: 14px; }
.tf-row { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.tf-back { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); flex: 0 0 auto; }
.tf-back:hover { border-color: var(--accent); color: var(--accent-dark); text-decoration: none; }
.tf-back:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.tf-back .icon { width: 18px; height: 18px; }
.tf-head h1 { font-size: 1.5rem; line-height: 1.25; margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tf-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } /* nav.js: bookmark star, tour.js: "Kurze Tour" */
.tf-actions .bm-menu, .tf-actions .page-tour { margin: 0; }
.tf-actions .bm-opener, .tf-actions .page-tour-btn { min-height: 40px; min-width: 40px; justify-content: center; }
.tf-actions .bm-menu { order: 1; } .tf-actions .page-tour { order: 2; } /* same order on every page, whichever script ran first */
.tf-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; font-size: .86rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.tf-meta > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* the longer deepening label ("Vertiefung, Schritt 1 von 2") may wrap so the control row fits 320 px (WCAG 1.4.10) */
.tf-meta { min-width: 0; }
.tf-meta > .tl-stepper-label { white-space: normal; }
.tf-meta strong { color: var(--ink); font-weight: 600; }
.tf-meta .icon { width: 14px; height: 14px; }
.tf-bar.progress { height: 4px; margin: 0; }
.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; }
/* Deepening box on the module end page (decision Marc 02.11.2026): same spacing as .tf-done, no extra colours */
.tf-deepening { display: grid; gap: 10px; margin-top: 16px; }
.tf-deepening > * { margin: 0; }
.tl-deepening-note { margin-bottom: 12px; }
.tf-exercise h2 { font-size: 1.2rem; }
/* TV3 exercise fields: task box, purpose ("Warum"), done note and model answer (only after done) */
.tf-ex-task { background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.tf-ex-k { display: block; font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 2px; }
.tf-why { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: .94rem; color: var(--ink-soft); }
.tf-why .icon { color: var(--accent-dark); margin-top: 3px; }
.tf-donebox { display: flex; gap: 10px; align-items: center; background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: var(--radius); padding: 12px 14px; color: var(--ok-ink); font-weight: 600; }
.tl-solution { border: 1px solid var(--ok-line); border-radius: var(--radius); padding: 12px 16px; display: grid; gap: 8px; }
.tl-solution h3 { font-size: 1rem; margin: 0; display: flex; gap: 8px; align-items: center; }
.tl-solution h3 .icon { color: var(--ok-fill); }
.tl-solution ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }

/* ---------- 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); }
/* Section headings sit outside the tree line, with space and a hairline above, so each section reads as its own block
   (decision Marc 30.10.2026, variant A; brass stays reserved for active and focus states). */
.sb-sec { font-size: .69rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sb-faint);
  margin-top: 16px; padding: 12px 10px 6px 4px; border-top: 1px solid var(--sb-line); }
.sb-sec:first-child { margin-top: 0; padding-top: 8px; border-top: 0; }
.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), the 2.06 block "Portal header at 375 px" at the end turns the label into a dot on the avatar */
@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; }
/* Phone: the bookmarks island turns the popup into a bottom sheet at 767 px and below (position fixed, left/right 0,
   bottom 0; islands/shared comments css). The title-row rule above has higher specificity and kept left:0/right:auto, so the
   sheet shrank to its content (207 px at 375 px, CI islands-e2e comments). Restore the full-width sheet; the legacy
   fallback popup (no island, 600 px rule near the top) keeps its own 8 px inset. */
@media (max-width: 767px) {
  .title-row .bm-island .bm-pop, .page-context .bm-island .bm-pop { left: 0; right: 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; }
/* Akademie solo order form (templates/orders/training.php, package 3): one row per course with its quantity field (44 px target) */
.ord-courses { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.ord-course { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.ord-course label { display: grid; gap: 2px; margin: 0; }
.ord-course-title { font-weight: 600; color: var(--ink); }
.ord-course-meta { font-size: .9rem; color: var(--ink-soft); font-weight: 400; }
.ord-qty { min-height: 44px; text-align: right; }
.ord-hint { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; }
.ord-hint .icon { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.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; } }
/* Legal links of the public whistleblower page (D-9, ADR 0255): same target sizes as the language links */
.wb-legal { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-bottom: 6px; }
.wb-legal a { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 6px; box-sizing: border-box; }
@media (pointer: coarse) { .wb-legal 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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); 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) */
  /* Plain .status pills too (findings kind "Verbesserungspotenzial": 344 px wide at 320 px with the CI fonts) */
  table[data-cards] > tbody > tr .badge, table[data-cards] > tbody > tr .status { 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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); 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.board-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* F2 (2.08 gate): the 72 px rule above squeezed the admin KPI tiles into four slivers */
  .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 :is(select, input[type=time]) { width: auto; flex: 1 1 7em; min-width: 6em; max-width: 11em; }
.form .notify-times input[type=time] { flex: 0 1 8em; min-width: 0; }
@media (min-width: 641px) { .notify-times { flex-wrap: nowrap; } }
.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 .mt-more-btn { float: right; }   /* sits before the h1 (mobile-tools.js), ignored inside a flex title row */
  .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 and 360 px phones (DESIGN-GUIDELINES 11.1a): below 375 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
   (374 px since the 2.06 gate: with switcher and inbox the row needs 375 px and scrolled sideways at 360 px). */
@media (max-width: 374px) {
  .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=enquiry, 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". Choice rows (label.check,
   e.g. the marketing consent) are 44 px as on the website: on a 768 px touch tablet the one-line consent was 42 px (2.25). */
@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; }
  .public-body label.check { min-height: 44px; padding-block: 10px; }
}

/* 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; }
/* Channel card with a tour marker: the marker frame keeps a small distance to the text */
.int-channel { margin-inline: -10px; padding: 6px 10px; }
.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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); 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; }
/* Partner portal "Unterlagen" and "Akademie" (templates/partner/_downloads_sections.php, academy.php, admin/_partner_academy.php;
   spec PARTNER-DOWNLOADS-ACADEMY section 6): folded sections with a 48 px heading row, one card per entry, buttons stacked at full
   width below 640 px and 44 px high on touch devices; the progress bar always has the percent as text next to it. */
.pd-section { margin: 0 0 12px; border: 1px solid var(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); background: var(--surface); padding: 0 16px; }
.pd-section > summary { display: flex; align-items: center; min-height: 48px; cursor: pointer; }
.pd-section > summary h2 { margin: 0; font-size: 1.05rem; }
.pd-section[open] > summary { margin-bottom: 6px; }
.pd-cards, .pd-links { list-style: none; margin: 0 0 12px; padding: 0; }
.pd-card { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.pd-card:first-child { border-top: 0; }
.pd-card > div:first-child { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pd-link { font-size: 16px; min-width: 0; width: 100%; max-width: 420px; }
.pd-logo { padding: 10px; border-radius: var(--radius); background: #fff; max-width: 240px; }
.pd-logo-dark { background: #10223a; }
.pd-logo img { display: block; max-width: 100%; height: 40px; width: auto; }
.pa-bar { height: 8px; margin: 6px 0 4px; border-radius: 4px; background: var(--line); overflow: hidden; max-width: 320px; }
.pa-bar > span { display: block; height: 100%; background: var(--accent); }
.pa-details { margin: 6px 0 0; }
@media (max-width: 639px) { .pd-actions, .pd-actions form, .pd-card > form { width: 100%; } .pd-btn { width: 100%; } }
@media (pointer: coarse) { .pd-btn, .pa-details > summary { min-height: 44px; } }
@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; }
/* Relay script block of the relay panels (ADR 0297): label beside value, stacked on a phone; the 64 characters of the checksum wrap */
.relay-script dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; margin: 8px 0; }
.relay-script dt { font-weight: 600; }
.relay-script pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* no automatic hyphens: a visible hyphen inside a checksum or a command reads as part of it */
.relay-script code { hyphens: none; -webkit-hyphens: none; }
.relay-script dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { .relay-script dl { grid-template-columns: minmax(0, 1fr); } .relay-script dd { margin-bottom: 6px; } }
.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); }

/* P6 (2.15, finding H6): catalogue entries as read rows (templates/project/catalog.php). The summary is a grid: number, title
   with flags, Anwendbar, Status, Nachweis, Verantwortlich and "Bearbeiten"; the column heads (.cat-row-cols) sit once per
   chapter. On phones the cells wrap below the title. The fields keep their layout inside the opened row. */
.cat-item { display: flex; gap: 6px; align-items: flex-start; padding: 0; }
.cat-item > .cat-sel { float: none; margin: 12px 0 0; }
.cat-item > details.cat-row { flex: 1 1 auto; min-width: 0; }
.cat-row-sum, .cat-row-cols { display: grid; grid-template-columns: 74px minmax(0, 1fr) 150px 140px 120px 150px 90px; gap: 6px 12px; align-items: center; }
.cat-row-sum { padding: 10px 6px; cursor: pointer; list-style: none; border-radius: var(--radius); min-height: 44px; }
.cat-row-sum::-webkit-details-marker { display: none; }
.cat-row-sum:hover { background: var(--inset); }
.cat-row-sum:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
.cat-row-sum .cat-ref { min-width: 0; }
.cat-row-title { min-width: 0; }
.cat-row-title > strong { font-weight: 600; }
.cat-row-flags:not(:empty) { display: inline; }
.cat-row-flags .badge { margin-left: 4px; }
.cat-row-cell { font-size: .86rem; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.cat-row-cell .icon { width: 14px; height: 14px; vertical-align: -2px; }
.cat-row-open { justify-self: end; font-size: .85rem; font-weight: 600; color: var(--accent-dark); white-space: nowrap; }
.cat-row-open::after { content: " ▾"; }
details.cat-row[open] > .cat-row-sum .cat-row-open::after { content: " ▴"; }
details.cat-row[open] > .cat-row-sum { background: var(--inset); }
details.cat-row[data-changed] > .cat-row-sum .cat-ref::after { content: ""; display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.cat-row-cols { padding: 0 6px 6px; margin-left: 30px; border-bottom: 1px solid var(--line); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.cat-row-cols:not(.with-sel) { margin-left: 0; }
.cat-row-body { padding: 4px 6px 14px; }
.cat-row-body > .cat-row-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 2px 0 6px 80px; }
.cat-row-body > .cat-row-meta:empty { display: none; }
.cat-row-body > .cat-edit .cat-fields, .cat-row-body > .cat-edit .cat-control { margin-left: 80px; }
.cat-row-body > :is(.cat-context, .cat-soa, .cat-topic-use, .cat-guide, .reuse, .link-badge, .link-hint, .cat-proposal, .cat-target-hint, .cat-history, .cat-files) { margin-left: 80px; }
@media (max-width: 1080px) {
  .cat-row-sum, .cat-row-cols { grid-template-columns: 64px minmax(0, 1fr) 130px 120px 90px; }
  .cat-row-sum [data-col="owner"], .cat-row-cols [data-col="owner"], .cat-row-sum [data-col="evidence"], .cat-row-cols [data-col="evidence"] { display: none; }
}
@media (max-width: 640px) {
  .cat-row-cols { display: none; }
  .cat-row-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 4px; }
  .cat-row-sum > .cat-ref { flex: 0 0 auto; }
  .cat-row-sum > .cat-row-title { flex: 1 1 calc(100% - 90px); }
  .cat-row-sum > .cat-row-cell, .cat-row-sum > [data-col="owner"], .cat-row-sum > [data-col="evidence"] { display: inline-flex; flex: 0 1 auto; gap: 4px; align-items: center; }
  .cat-row-open { margin-left: auto; }
  .cat-row-body { padding: 4px 0 14px; }
  .cat-row-body > .cat-row-meta, .cat-row-body > .cat-edit .cat-fields, .cat-row-body > .cat-edit .cat-control,
  .cat-row-body > :is(.cat-context, .cat-soa, .cat-topic-use, .cat-guide, .reuse, .link-badge, .link-hint, .cat-proposal, .cat-target-hint, .cat-history, .cat-files) { margin-left: 0; }
  .cat-row-body .cat-fields { grid-template-columns: minmax(0, 1fr); }
  .cat-row-body .cat-control select { max-width: 100%; }
}
@media (max-width: 640px) { .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); }
/* Platform switches, grouped layout (Fable review, Marc 03.11.2026): status line, section head with counter, sub-lists, folded rollback section */
.platform-statusline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0 0 8px; font-variant-numeric: tabular-nums; }
.platform-how { margin: 0 0 16px; }
.platform-how summary { cursor: pointer; color: var(--muted); }
.platform-how p { margin: 8px 0 0; max-width: 75ch; }
.platform-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.platform-sub { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin: 14px 0 2px; }
.platform-note { margin: 6px 0 4px; max-width: 80ch; }
.platform-src { font-weight: 400; }
.platform-fold > summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; list-style: none; }
.platform-fold > summary::-webkit-details-marker { display: none; }
.platform-fold > summary h2::before { content: "▸ "; color: var(--muted); }
.platform-fold[open] > summary h2::before { content: "▾ "; }
@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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); 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(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); 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; }
}
/* ---------- INT-HUB hub "Integrationen" (templates/integration/hub.php, public/assets/integration-hub.js): chips wrap, categories as
   details, one tile column and 44 px buttons below 640 px, search field full width ---------- */
.int-chips { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 8px 0 0; }
.int-attention-list { list-style: none; margin: 0; padding: 0; }
.int-attention-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.int-attention-list li:first-child { border-top: 0; }
.int-att-text { flex: 1 1 14rem; min-width: 0; }
.int-search { margin: 0 0 16px; max-width: 34rem; }
.int-search label { display: block; font-weight: 600; margin-bottom: 4px; }
.int-search input { width: 100%; }
.int-cat { margin-bottom: 8px; }
.int-cat > summary { display: list-item; cursor: pointer; padding: 6px 0; }
.int-cat > summary h2 { display: inline; margin: 0 8px 0 0; }
.int-tiles { margin-top: 8px; }
.int-tile h3 { margin: 0 0 4px; }
.int-tile .btn { margin-top: 4px; }
.int-flows { margin-top: 8px; }
.int-cap { margin: 0 0 12px; }
@media (pointer: coarse) { .int-tile .btn, .int-attention-list .btn { min-height: 44px; } .int-cat > summary { padding: 12px 0; } .int-tile .btn, .int-attention-list .btn { display: inline-flex; align-items: center; } }
@media (max-width: 640px) {
  .int-search { max-width: none; }
  .int-tile .btn { width: 100%; justify-content: center; min-height: 44px; display: inline-flex; align-items: center; }
  .int-attention-list .btn { min-height: 44px; display: inline-flex; align-items: center; }
}
/* Setup guides (ConnectorSetupGuides): guide link on the hub tile and on the connector pages; 44 px touch target on touch devices */
.int-tile .int-guide { display: inline-block; margin: 6px 12px 0 0; }
.guide-link { margin: 4px 0 0; }
@media (pointer: coarse) { .int-tile .int-guide, .guide-link a { min-height: 44px; display: inline-flex; align-items: center; } }

/* ---------- 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 */

/* A2 exceptions register (templates/exceptions/, ADR 0217): folded decision forms, link picker, decision list. Phone: the
   label/value list stacks, multi-selects of the request wizard take the full width, controls keep the 44 px foundation. */
.exc-fold { margin: 8px 0; }
.exc-fold > summary { list-style: none; display: inline-flex; }
.exc-fold > summary::-webkit-details-marker { display: none; }
.exc-fold[open] > summary { margin-bottom: 8px; }
.exc-fold textarea, .exc-fold select { width: 100%; }
.exc-decision form { margin: 8px 0; }
.exc-pick select[multiple] { width: 100%; min-height: 8em; }
.exc-hint { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
@media (max-width: 640px) {
  .exc-kv { grid-template-columns: 1fr; }
  .exc-kv dt { margin-top: 6px; }
}
/* ---------- A3 list tools (2.07, ADR 0218, templates/_list_tools.php, src/ListPrefs.php) ----------
   Saved views, column chooser and quick exports of a list in one row. Columns the person hid carry no markup change:
   ListPrefs::apply() adds lt-hide-<n> to the table and the n-th cell of every row is hidden (table and card view). */
.lt-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.list-tools > .lt-bar { display: contents; }
.lt-group { margin: 10px 0 4px; color: var(--muted); font-weight: 600; }
.lt-view-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.lt-view { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.lt-view > a.btn { flex: 1 1 180px; justify-content: flex-start; }
.lt-view-actions { display: inline-flex; flex-wrap: wrap; gap: 2px; }
.lt-save { margin-top: 10px; }
.lt-cols .lt-pop { width: min(360px, calc(100vw - 32px)); }
.lt-cols .col-chooser-list { border: 0; padding: 0; margin: 0 0 8px; }
.list-import-errors { margin: 4px 0 0; padding-left: 18px; }
table.lt-hide-1 tr > :nth-child(1), table.lt-hide-2 tr > :nth-child(2), table.lt-hide-3 tr > :nth-child(3), table.lt-hide-4 tr > :nth-child(4),
table.lt-hide-5 tr > :nth-child(5), table.lt-hide-6 tr > :nth-child(6), table.lt-hide-7 tr > :nth-child(7), table.lt-hide-8 tr > :nth-child(8),
table.lt-hide-9 tr > :nth-child(9), table.lt-hide-10 tr > :nth-child(10), table.lt-hide-11 tr > :nth-child(11), table.lt-hide-12 tr > :nth-child(12),
table.lt-hide-13 tr > :nth-child(13), table.lt-hide-14 tr > :nth-child(14), table.lt-hide-15 tr > :nth-child(15), table.lt-hide-16 tr > :nth-child(16) { display: none !important; }
@media (max-width: 640px) {
  .lt-bar { flex-direction: column; align-items: stretch; }
  .lt-view > a.btn { flex-basis: 100%; }
  .lt-save input[type=text] { min-width: 0; width: 100%; }
  .list-import-actions { flex-direction: column; align-items: stretch; }
}
@media (pointer: coarse) {
  .lt-view-actions .btn, .lt-view > a.btn { min-height: 44px; }
}
.mt-sheet .lt-bar { flex-direction: column; align-items: stretch; margin-top: 10px; }
@media print { .lt-bar { display: none !important; } }
/* ---------- Portal header at 375 px (2.06, decision Marc 23.10.2026, variant A) ----------
   Below 481 px the site switcher is a pin icon with a short label ("Alle", site code, "Gruppe") that opens a bottom sheet with one
   real submit button per choice (templates/sites/_switcher_phone.php, <details>, works without JavaScript); the desktop select
   (.topbar-site) is hidden there. The "Demo" label of a demo company becomes a dot on the avatar; its text stays for screen readers. */
.tss { display: none; }
@media (max-width: 480px) {
  .topbar-inner { padding-left: 8px; padding-right: 8px; }
  .topbar-site { display: none; }
  .tss { display: block; flex: 0 0 auto; margin: 0; }
  .tss-btn { list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: 3px; box-sizing: border-box; min-width: 44px; max-width: 76px; height: 44px; padding: 0 7px; cursor: pointer;
    color: var(--ink-soft); background: none; border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: .8rem; font-weight: 600; }
  .tss-btn::-webkit-details-marker { display: none; }
  .tss-btn .icon { width: 16px; height: 16px; flex: none; }
  .tss-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tss[open] .tss-btn { background: var(--inset); color: var(--ink); }
  .topbar:has(.tss[open]) { z-index: 80; }
  .tss[open]::before { content: ""; position: fixed; inset: 0; z-index: 69; background: rgba(12, 24, 48, .45); pointer-events: none; }
  .tss-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; gap: 8px; max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--ink); border-top: 1px solid var(--line-strong); border-radius: 16px 16px 0 0; box-shadow: var(--shadow-lg); }
  .tss-title { margin: 0 0 4px; font-weight: 700; }
  .tss-opt { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
  .tss-opt[aria-current] { border-color: var(--accent); background: var(--inset); font-weight: 700; }
  .tss-opt[aria-current]::after { content: "\2713"; margin-left: auto; color: var(--accent-dark); }
  .topbar-demo { position: absolute; left: auto; right: 13px; top: 11px; bottom: auto; transform: none; width: 11px; height: 11px; padding: 0; margin: 0; border-radius: 50%; pointer-events: none; z-index: 3; background: var(--warn-ink); border: 0; box-shadow: 0 0 0 2px var(--surface); }
  .topbar-demo-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (max-width: 359px) {
  /* 320 px: the sheet button moves into the "Weitere Werkzeuge" sheet (mobile-tools.js), where it shows as an inline list */
  .mt-sheet-tools .tss-btn { width: 100%; max-width: none; justify-content: flex-start; padding: 0 12px; }
  .mt-sheet-tools .tss[open]::before { display: none; }
  .mt-sheet-tools .tss-panel { position: static; max-height: none; padding: 8px 0 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
}

/* MOB3-B (2.10): admin billing key figures fold into one summary row on phones (details.kpi-fold, closed by
   mobile-tools.js via data-mt-shut) so the subscription list comes first. Wide screens and no-JS stay open. */
.kpi-fold > summary { display: none; }
@media (max-width: 640px) {
  .kpi-fold { margin: 0 0 8px; border: 1px solid var(--card-edge); border-radius: var(--card-radius); box-shadow: var(--card-shadow); background: var(--surface); padding: 0 14px; }
  .kpi-fold > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; cursor: pointer; }
  .kpi-fold[open] > summary { margin-bottom: 8px; }
  .kpi-fold > .cov-stats { margin-bottom: 12px; }
  .kpi-fold-flat { margin: 0; border: 0; background: none; padding: 0; }   /* secondary tool inside a panel (admin-tickets export) */
  .cmt-head:has(> .kpi-fold-flat) { margin-bottom: 0; gap: 0 8px; }
}
/* MOB3-B (2.29): fold wrapping a panel (admin billing EU threshold note): the panel loses its own frame on phones and its heading is
   replaced by the summary row (the heading stays for screen readers); icon-only filter links ("only users of this company") reach
   WCAG 2.5.8 (24 px) everywhere and 44 px on touch devices */
@media (max-width: 640px) {
  .kpi-fold > .panel { margin: 0 0 12px; padding: 0; border: 0; box-shadow: none; background: none; }
  .kpi-fold > .panel > h2:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
td a.filter-link:has(> svg) { min-width: 24px; min-height: 24px; justify-content: center; }
@media (pointer: coarse) { td a.filter-link:has(> svg) { min-width: 44px; min-height: 44px; } }
/* km5 group requirements (templates/group-requirements/, ADR 0231): cards with a stacked bar (inline SVG, colour plus text legend,
   WCAG 1.4.1), the requirement × site matrix only from 768 px, 44 px cell links on touch devices */
.grq-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.grq-card-title { margin: 0 0 4px; font-size: 1.05rem; overflow-wrap: anywhere; }
.grq-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 6px; }
.grq-fulfilled { margin: 0 0 6px; }
.grq-bar { display: block; width: 100%; height: 10px; border-radius: 5px; overflow: hidden; background: var(--inset-alt, var(--line)); }
.grq-bar .grq-implemented { fill: var(--ok-fill); }
.grq-bar .grq-deviation { fill: var(--accent); }
.grq-bar .grq-in_progress { fill: var(--info-line); }
.grq-bar .grq-open { fill: var(--line); }
.grq-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 6px 0 0; }
.grq-text { white-space: normal; overflow-wrap: anywhere; }
.grq-long > summary { cursor: pointer; list-style: none; }
.grq-long[open] > summary { display: none; }
.grq-versions { margin: 0; padding-left: 1.1rem; }
.grq-versions > li + li { margin-top: 8px; }
.grq-facts dt { font-weight: 600; margin-top: 8px; }
.grq-facts dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.grq-matrix td { min-width: 9rem; vertical-align: top; }
.grq-cell { display: inline-flex; gap: 6px; align-items: flex-start; min-height: 24px; text-decoration: none; }
.grq-cell.grq-overdue { color: var(--err-ink); font-weight: 600; }
.grq-cell.grq-implemented { color: var(--ok-ink); }
.grq-cell.grq-deviation { color: var(--warn-ink); }
.grq-narrow-only { display: none; }
@media (max-width: 767.98px) {
  .grq-wide-only { display: none !important; }
  .grq-narrow-only { display: block; }
}
@media (pointer: coarse) { .grq-cell { min-height: 44px; align-items: center; } }
/* km6 "Benutzer aus Entra ID" (templates/directory/index.php): counters two per row on phones, mappings as stacked cards,
   44 px touch targets for the order and remove buttons (docs/DESIGN-GUIDELINES.md sections 9 and 10) */
.dir-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin: 10px 0 14px; }
.dir-stats .panel { margin: 0; display: grid; gap: 2px; padding: 10px 12px; }
.dir-stats strong { font-size: 1.4rem; line-height: 1.2; }
.dir-stats span { font-size: .85rem; color: var(--ink-faint); }
.directory-sync .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dir-conflicts .btn-row { margin-top: 6px; }
.directory-sync .btn-row form { margin: 0; }
.dir-mappings { display: grid; gap: 10px; margin-bottom: 12px; }
.dir-mapping { gap: 6px; padding: 14px 16px; }
.directory-sync .btn-touch { min-height: 44px; min-width: 44px; }
.directory-sync .plain-list li { overflow-wrap: anywhere; padding: 4px 0; }

/* P6 (2.15, findings H6 and M1, docs/DESIGN-GUIDELINES.md section 12 "Read mode"): shared building blocks.
   .read-dl: values of a section as a read list (label above value); .wide spans the full row.
   .read-head: section heading with the "Bearbeiten" link on the right; .is-editing marks the one open section.
   .seg: segmented control built from real radio buttons (arrow keys and form submit keep working), 2 x 2 on phones.
   .kpi-row: key figures in one row; on phones a chip row that scrolls sideways inside itself (section 11). */
.read-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.read-head > h2, .read-head > h3 { margin: 0; }
.read-head .badge { white-space: nowrap; }
.read-dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 28px; margin: 4px 0 0; }
.read-dl > div { min-width: 0; }
.read-dl > div.wide { grid-column: 1 / -1; }
.read-dl dt { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--ink-faint); }
.read-dl dd { margin: 3px 0 0; color: var(--ink); white-space: pre-line; overflow-wrap: anywhere; }
.read-dl dd.muted { color: var(--ink-faint); }
.read-empty { margin: 4px 0 0; color: var(--ink-faint); }
.read-result { font-weight: 600; margin: 0 0 8px; }
section.is-editing { box-shadow: inset 4px 0 0 var(--accent); }
.edit-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
fieldset.seg { border: 0; padding: 0; margin: 0 0 6px; min-width: 0; }
fieldset.seg > legend { font-weight: 600; font-size: .92rem; margin-bottom: 6px; padding: 0; }
.seg-options { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--inset); max-width: 100%; justify-self: start; }
.seg-options > label.check { margin: 0; padding: 0; position: relative; display: flex; min-height: 0; }
.seg-options label.check > span { flex: 1 1 auto; }
.seg-options input { position: absolute; opacity: 0; inset: 0; margin: 0; width: 100%; height: 100%; cursor: pointer; }
.seg-options label.check > span { display: block; padding: 8px 16px; border-radius: 7px; font-weight: 600; font-size: .9rem; color: var(--ink-soft); }
.seg-options input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(19, 35, 63, .14), inset 0 0 0 1.5px var(--accent); }
.seg-options input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 1px; }
.seg-options input:disabled + span { cursor: default; }
@media (pointer: coarse) { .seg-options label.check > span { min-height: 44px; display: flex; align-items: center; justify-content: center; } }
.cov-stats.kpi-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.cov-stats.kpi-row > .panel { padding: 14px 16px; }
.cov-stats.kpi-row > .panel strong { font-size: 1.35rem; }
/* Folded section with a counter line (Zusammenhänge, Verlauf): the heading is the summary */
details.fold-section > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; cursor: pointer; }
details.fold-section > summary > :is(h2, h3) { margin: 0; display: inline; }
details.fold-section > summary .fold-count { font-size: .85rem; color: var(--ink-faint); }
details.fold-section[open] > summary { margin-bottom: 10px; }
@media (max-width: 640px) {
  .read-dl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 16px; }
  .read-head .btn { min-height: 44px; }
  .seg-options { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); width: 100%; }
  .seg-options label.check > span { text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 6px 4px; font-size: .82rem; hyphens: manual; overflow-wrap: normal; }
  .cov-stats.kpi-row { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; scroll-snap-type: x proximity; }
  .cov-stats.kpi-row > .panel { flex: 0 0 auto; min-width: 128px; max-width: 170px; padding: 10px 12px; scroll-snap-align: start; }
  .cov-stats.kpi-row > .panel strong { font-size: 1.1rem; }
  .cov-stats.kpi-row > .panel span { font-size: .75rem; overflow-wrap: normal; hyphens: manual; }
  details.fold-section > summary { min-height: 44px; }
}

/* P7 "Erste Schritte" compact (templates/help/_onboarding.php, decision Marc 29.10.2026): one head row (title, count,
   progress bar, "…") plus <details class="ob-fold"> whose summary is the "Weiter einrichten" button. Closed, the fold sits
   in the head row; open, it takes the full width below it. "Trifft nicht zu" lives in the "…" menu of an item and opens as
   a bottom sheet below 640 px. Plain CSS on <details>, works without JavaScript. */
.onboarding { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; }
.onboarding .ob-title { margin: 0; }
.onboarding .ob-bar { flex: 1 1 160px; min-width: 120px; display: flex; }
.onboarding .ob-bar progress.progress-sm { width: 100%; margin: 0; }
.onboarding .ob-more { order: 5; }
.ob-fold { order: 4; }
.ob-fold[open] { order: 6; flex: 1 1 100%; display: grid; }
.ob-fold > summary { list-style: none; cursor: pointer; }
.ob-fold > summary::-webkit-details-marker { display: none; }
.ob-fold:not([open]) > summary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); }
.ob-fold:not([open]) > summary:hover { background: var(--btn-bg-hover); }
.ob-fold[open] > summary { justify-self: end; }
.ob-fold .ob-when-open, .ob-fold[open] .ob-when-shut { display: none; }
.ob-fold[open] .ob-when-open { display: inline; }
.ob-body { display: grid; gap: 4px; margin-top: 4px; }
.ob-body .ob-auto { margin: 0; }
.ob-body .onboarding-list li { position: relative; padding-right: 48px; }
.ob-body .onboarding-list li.is-done, .ob-body .onboarding-list li.is-na { padding-right: 0; }
.ob-item-more { position: absolute; right: 0; top: -4px; }
.ob-item-more > summary { min-width: 36px; justify-content: center; }
.ob-na-pop { width: min(320px, 80vw); padding: 10px 12px; }
.ob-na-pop .ob-na-title { margin: 0 0 6px; }
.ob-na-pop .ob-na-form { display: grid; gap: 8px; margin: 0; }
.ob-rest > summary, .ob-donesecs > summary { cursor: pointer; color: var(--ink-soft); min-height: 32px; display: inline-flex; align-items: center; gap: 6px; }
.ob-donesecs { border-top: 1px solid var(--line); padding-top: 6px; }
.ob-donesecs .ob-show { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.ob-donesecs[open] .ob-show { display: none; }
.ob-donesecs .ob-section-title { margin: 8px 0 0; }
@media (pointer: coarse) {
  .onboarding .ob-more > summary, .ob-fold > summary, .ob-item-more > summary, .ob-rest > summary, .ob-donesecs > summary, .ob-section > summary { min-height: 44px; min-width: 44px; }
}
@media (max-width: 640px) {
  .onboarding { padding: 12px; }
  .onboarding .ob-title { flex: 1 1 auto; }
  .onboarding .ob-bar { order: 3; flex: 1 1 100%; }
  .onboarding .ob-count { order: 2; }
  .ob-fold:not([open]) { flex: 1 1 auto; }
  .ob-fold:not([open]) > summary { width: 100%; justify-content: center; min-height: 44px; }
  .onboarding:not(.is-compact) .ob-more, .onboarding:has(> .ob-fold[open]) .ob-more { order: 1; }
  /* Item menu as a bottom sheet: fixed to the bottom edge, safe area, dimmed page behind it */
  .ob-item-more[open] > .ob-na-pop { position: fixed; inset: auto 0 0 0; top: auto; width: auto; max-width: none; border-radius: 16px 16px 0 0;
    padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-shadow: 0 0 0 100vmax rgba(10, 20, 40, .45); z-index: 120; }
  .ob-na-pop .ob-na-form .btn { min-height: 44px; }
}

/* P5 compact cards (decision Marc 29.10.2026; src/CardList.php "Compact cards"): a table[data-cards] with class
   cards-compact shows a phone card as title (two lines at most), one meta line (.cl-sub) and one chip row (.cl-chip,
   status first, at most one .cl-flag). Cells and title extras marked hide-sm are left out (rule in the MOB1-B block).
   Target: at most about 160 px per card at 375 px (gate CARD_MAX in tools/testenv/mobile-check.mjs). Wide screens and
   the table view are unchanged; .cl-sub and .cl-flag exist only for the card. */
.cl-sub, .cl-flag, .cl-only, .cl-flag-text { display: none; }
/* The hide-sm wrapper around the P3/P4 title icons must not add a flex item of its own on wide screens */
.cr-line > span.hide-sm { display: contents; }
@media (max-width: 640px) {
  table.cards-compact[data-cards] > tbody > tr { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; }
  table.cards-compact[data-cards] .hide-sm { display: none !important; }
  table.cards-compact[data-cards] > tbody > tr > .cl-title { flex: 1 1 100%; min-width: 0; padding: 0; }
  table.cards-compact[data-cards] .cl-only, table.cards-compact[data-cards] .cl-flag-text { display: inline; }
  /* P3/P4 title line (.cr-line with a.cr-main) shrinks to the plain link; its icons are hide-sm */
  table.cards-compact[data-cards] .cl-title > .cr-line { display: block; }
  table.cards-compact[data-cards] .cl-title > .cr-line > a.cr-main { white-space: normal; }
  table.cards-compact[data-cards] .cl-title > a:not(.hide-sm), table.cards-compact[data-cards] .cl-title > .cr-line > a.cr-main { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.35; }
  table.cards-compact[data-cards] .cl-sub { display: block; margin-top: 3px; font-size: .875rem; font-weight: 400; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.cards-compact[data-cards] .cl-sub .cl-over { color: var(--err-ink); font-weight: 600; }
  table.cards-compact[data-cards] > tbody > tr > .cl-chip { display: block; flex: 0 1 auto; padding: 0 !important; order: 2; }
  table.cards-compact[data-cards] > tbody > tr > .cl-chip-first { order: 1; }
  table.cards-compact[data-cards] > tbody > tr > .cl-chip > .cl-label { display: none !important; }
  table.cards-compact[data-cards] .cl-flag { display: inline-block; margin-left: 6px; }
}
/* P5 status chip of the action plan (templates/plan/tasks.php $statusCell): on phones one chip instead of four buttons;
   open, it is the bottom sheet "Status ändern" with one 48 px submit button per allowed status (no JavaScript needed,
   app.js closes it on Esc or a tap outside via data-menu-details). Wide screens keep the select (.st-desk). */
.st-chip { display: none; }
@media (max-width: 640px) {
  .st-chip { display: inline-block; white-space: normal; }
  .st-chip > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); font-size: .9rem; font-weight: 600; cursor: pointer; }
  .st-chip > summary::-webkit-details-marker { display: none; }
  .st-chip > summary .icon { width: 14px; height: 14px; }
  .st-chip > summary.st-chip-in_progress { background: var(--accent-tint); border-color: var(--accent); }
  .st-chip > summary.st-chip-for_approval { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-bg); }
  .st-chip > summary.st-chip-done { background: var(--ok-bg); color: var(--ok-ink); border-color: var(--ok-fill); }
  .st-chip[open] > .st-chip-sheet { position: fixed; inset: auto 0 0 0; z-index: 130; display: grid; gap: 10px; background: var(--surface); color: var(--ink);
    border-radius: 16px 16px 0 0; padding: 16px max(16px, env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    box-shadow: 0 0 0 100vmax rgba(10, 20, 40, .45); }
  .st-chip-head { margin: 0; }
  .st-chip .st-seg { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; }
  .st-chip .st-seg .btn { min-height: 48px; justify-content: space-between; text-align: left; padding: 0 14px; }
  .st-chip .st-seg .btn[aria-pressed="true"]::after { content: "✓"; }
  .st-chip-sheet .inline-form .btn { min-height: 44px; }
}

/* ---------- P3 list head and filter bar (portal review, 2.16, templates/_list_head.php, templates/_filter_bar.php) ----------
   Goal: the first list entry within 450 px at 1440 × 900 (DESIGN-GUIDELINES 12b). The description is one line; "mehr" is a
   CSS-only toggle (details, works without JavaScript). Secondary actions sit in the "…" menu (phones: sheet "Weitere
   Aktionen"); at most four key figure chips plus "+n weitere". One filter bar: search, segments, "Filter (n)" panel with
   one "Anwenden", list tools, number of hits; chips of the active filters below. */
.page-head.lh { align-items: center; margin-bottom: 10px; }
.page-head.lh .lh-main { min-width: 0; flex: 1 1 420px; }
.page-head.lh h1 { margin: 0; }
.page-head.lh .title-row { align-items: center; gap: 10px; }
.page-head.lh > .row-actions { align-items: center; flex-wrap: nowrap; }
.lh-desc { display: flex; align-items: baseline; gap: 8px; max-width: 980px; margin: 4px 0 0; color: var(--ink-soft); }
.lh-desc-text { flex: 1 1 auto; min-width: 0; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lh-desc:has(details[open]) { flex-direction: column; gap: 2px; }
.lh-desc:has(details[open]) .lh-desc-text { white-space: normal; }
.lh-desc-toggle { flex: none; }
.lh-desc-toggle > summary { list-style: none; cursor: pointer; color: var(--accent-dark); text-decoration: underline; font-size: .92rem; }
.lh-desc-toggle > summary::-webkit-details-marker { display: none; }
.lh-desc-less, .lh-desc-toggle[open] .lh-desc-more { display: none; }
.lh-desc-toggle[open] .lh-desc-less { display: inline; }
.lh-more { position: relative; }
.lh-more, .lh-kpi-more, .lh-desc-toggle, .fb-filter, .fb-more-filters { margin-bottom: 0; }
.lh-more > summary { list-style: none; min-width: 38px; justify-content: center; }
.lh-more > summary::-webkit-details-marker { display: none; }
.lh-more:not(:has(.lh-menu > *)) { display: none; }
.lh-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 31; min-width: 260px; max-width: min(360px, calc(100vw - 32px)); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.lh-menu > .btn, .lh-menu > details > summary.btn, .lh-menu .page-tour-btn { justify-content: flex-start; border-color: transparent; box-shadow: none; width: 100%; background: none; }
.lh-menu > .btn:hover, .lh-menu > details > summary.btn:hover { background: var(--accent-tint); }
.lh-menu > details .lt-pop { position: static; width: auto; box-shadow: none; margin: 4px 0; }
/* A form moved into the "…" menu (the document register export, 2.16) would otherwise pick up the inline-flex row of
   ".page-head .row-actions form" and push its download button 160 px past the right edge at 1280 px (CI reflow). */
.lh-menu .lt-pop form.form { display: grid; }
/* Partner file (ADR 0299): a post form straight in the "…" menu (status actions) looks like the plain menu buttons */
.lh-menu > form { margin: 0; display: block; }
.lh-menu > form > .btn { justify-content: flex-start; border-color: transparent; box-shadow: none; width: 100%; background: none; }
.lh-menu > form > .btn:hover { background: var(--accent-tint); }
.kpi-chips.lh-kpis { margin: 6px 0 10px; align-items: flex-start; }
.kpi-chips.lh-kpis .panel { padding-top: 4px; padding-bottom: 4px; min-height: 32px; }
.lh-kpi-more { position: relative; }
.lh-kpi-more > summary { list-style: none; cursor: pointer; border-style: dashed; display: inline-flex; align-items: baseline; gap: 2px 7px; padding: 4px 12px; border-radius: 999px; min-height: 32px; box-shadow: none; }
.lh-kpi-more > summary::-webkit-details-marker { display: none; }
.lh-kpi-pop { position: absolute; right: 0; left: auto; top: calc(100% + 6px); z-index: 30; width: min(560px, calc(100vw - 32px)); display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.fb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; position: relative; }
.fb-form { display: contents; }
.fb-search { flex: 1 1 220px; max-width: 380px; min-width: 200px; display: flex; }
.fb-search input[type=search] { width: 100%; max-width: none; margin: 0; }
.fb .btn { white-space: nowrap; }
.fb > .lt-bar { display: contents; }
.fb .list-filter { position: static; }
.fb .list-filter > summary.is-active { border-color: var(--accent); }
.fb-count { margin-left: auto; font-size: .86rem; color: var(--ink-soft); white-space: nowrap; }
.fb-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; max-width: 100%; }
.fb-seg a { padding: 6px 11px; font-size: .86rem; color: var(--ink); text-decoration: none; border-right: 1px solid var(--line); white-space: nowrap; }
.fb-seg a:last-child { border-right: 0; }
.fb-seg a[aria-current] { background: var(--accent-tint); color: var(--accent-darker); font-weight: 600; }
.fb-seg a .muted { font-size: .8rem; margin-left: 2px; }
.fb-seg a .icon { width: 15px; height: 15px; vertical-align: -2px; }
.fb .fb-panel { left: 0; right: 0; width: auto; padding: 16px 18px; }
.fb-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 16px; align-items: end; }
.fb-grid > label { display: flex; flex-direction: column; gap: 4px; font-size: .84rem; font-weight: 600; margin: 0; min-width: 0; }
.fb-grid > label.check { flex-direction: row; align-items: center; font-weight: 400; }
.fb-grid select, .fb-grid input:not([type=checkbox]):not([type=radio]) { width: 100%; max-width: none; margin: 0; }
.fb-panel h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); margin: 0 0 8px; }
.fb-more-filters { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.fb-more-filters > summary { cursor: pointer; font-weight: 600; font-size: .88rem; margin-bottom: 10px; }
.fb-foot { display: flex; gap: 8px; align-items: center; margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.fb-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 0 10px; }
.fb-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; background: var(--accent-tint); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 3px 2px 11px; color: var(--ink); }
.fb-chip a { display: inline-flex; width: 26px; height: 26px; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink-soft); }
.fb-chip a:hover, .fb-chip a:focus-visible { background: var(--surface); color: var(--ink); }
.fb-chip a .icon { width: 14px; height: 14px; }
.fb-reset { font-size: .82rem; margin-left: 4px; }
@media (max-width: 1100px) { .fb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .page-head.lh > .row-actions { flex-wrap: wrap; }
  .lh-desc-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lh-desc:has(details[open]) .lh-desc-text { display: block; }
  .kpi-chips.lh-kpis { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .kpi-chips.lh-kpis .panel { flex: none; }
  .lh-kpi-pop { position: fixed; left: 16px; right: 16px; top: auto; width: auto; }
  .fb-grid { grid-template-columns: 1fr; }
  .fb-chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .fb-chip { white-space: nowrap; flex: none; }
  .fb-chip a { width: 44px; height: 44px; }
  .mt-sheet .fb { flex-direction: column; align-items: stretch; }
  .mt-sheet .fb .fb-panel { padding: 0; border: 0; }
  .mt-searchrow > .fb-search { flex: 1 1 0; min-width: 0; }
  .mt-searchrow > .fb-search input[type=search] { width: 100%; }
  .mt-sheet .fb-seg { flex-wrap: wrap; }
  .mt-sheet .fb-seg a { min-height: 44px; display: inline-flex; align-items: center; flex: 1 1 auto; }
  .mt-sheet .fb-foot { position: sticky; bottom: 0; z-index: 2; background: var(--surface); margin: 12px 0 0; padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px)); }
  .mt-sheet .fb-foot .btn { min-height: 44px; flex: 1 1 auto; justify-content: center; }
  .mt-sheet .fb-count { margin: 0; }
  .mt-sheet .lh-more { display: none; }
  .mt-sheet .lh-menu { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; max-width: none; }
}
@media print { .fb, .fb-chips, .lh-more, .lh-desc-toggle { display: none !important; } .lh-desc-text { white-space: normal; } }

/* ---------- P4 compact rows and pagination (portal review, 2.16, templates/_pager.php) ----------
   Risks, documents and (H4, 2.27) assets, vulnerabilities and suppliers: title column at least 40 %, title and meta one line each (ellipsis, full text as tooltip), badges
   that repeat in many rows become icons (list_icon(), legend below the table); median row height 56–72 px. */
@media (min-width: 641px) {
  table.cr { table-layout: fixed; width: 100%; }
  table.cr th.cr-th-title { width: 40%; }
  table.cr th:first-child:has(input[type=checkbox]) { width: 44px; }
  table.cr td { overflow: hidden; text-overflow: ellipsis; padding-top: 9px; padding-bottom: 9px; vertical-align: middle; font-size: .9rem; }
  table.cr th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  table.cr td.small, table.cr td .small { font-size: .86rem; }
  table.cr td:not(.cr-title) { white-space: nowrap; }
  .cr-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .cr-line > * { flex: none; }
  .cr-line > a.cr-main { flex: 0 1 auto; display: block; min-width: 0; min-height: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .cr-meta { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .8rem; color: var(--ink-soft); margin-top: 1px; }
  .cr-meta a { color: inherit; }
  .risk-table.cr .rk-title { min-width: 0; }
  .risk-table.cr td.small { min-width: 0; }
  .risk-table.cr th[data-col=owner] { width: 112px; }
  .risk-table.cr th[data-col=inh], .risk-table.cr th[data-col=res], .risk-table.cr th[data-col=tgt] { width: 90px; }
  .risk-table.cr th[data-col=ale] { width: 84px; }
  .risk-table.cr th[data-col=treat] { width: 136px; }
  .risk-table.cr th[data-col=status] { width: 122px; }
  .risk-table.cr th[data-col=review] { width: 98px; }
  .doc-register.cr th.doc-th-id { width: 104px; }
  .doc-register.cr th[data-col=type] { width: 110px; }
  .doc-register.cr th[data-col=class] { width: 120px; }
  .doc-register.cr th[data-col=version] { width: 84px; }
  .doc-register.cr th[data-col=status] { width: 124px; }
  .doc-register.cr th[data-col=owner] { width: 132px; }
  .doc-register.cr th[data-col=approval] { width: 160px; }
  .doc-register.cr th[data-col=review] { width: 136px; }
  table.doc-register.cr th, table.risk-table.cr th { white-space: nowrap; }
  #liste[data-server-search] > .tt-bar, #liste[data-server-search] > form > .tt-bar { margin-bottom: 0; }
  .doc-register.cr th[data-col=ack] { width: 104px; }
  .cr-ell { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
  /* H4 completed for assets, vulnerabilities and suppliers (2.27): fixed widths of the narrow columns, the rest shares */
  .asset-table.cr th.as-th-type { width: 140px; }
  .asset-table.cr th.as-th-zone { width: 128px; }
  .asset-table.cr th.as-th-crit { width: 132px; }
  .asset-table.cr th.as-th-life { width: 112px; }
  .asset-table.cr .cr-meta .asset-hit { font-weight: 600; color: var(--ink); }
  .vuln-table.cr th[data-col=cvss] { width: 112px; }
  .vuln-table.cr th[data-col=epss] { width: 72px; }
  .vuln-table.cr th[data-col=prio] { width: 96px; }
  .vuln-table.cr th[data-col=status] { width: 116px; }
  .vuln-table.cr th[data-col=comp] { width: 150px; }
  .vuln-table.cr th[data-col=due] { width: 128px; }
  .vuln-table.cr th[data-col=owner] { width: 130px; }
  .vuln-table.cr .vuln-sum { margin-top: 1px; }
  .supplier-table.cr th[data-col=kind] { width: 120px; }
  .supplier-table.cr th[data-col=status] { width: 96px; }
  .supplier-table.cr th[data-col=criticality] { width: 104px; }
  .supplier-table.cr th[data-col=review] { width: 120px; }
  .supplier-table.cr th[data-col=assessment] { width: 104px; }
  .supplier-table.cr th[data-col=value] { width: 96px; }
  .supplier-table.cr th[data-col=approval] { width: 128px; }
  .supplier-table.cr th[data-col=risk] { width: 104px; }
  .supplier-table.cr .sup-points { display: flex; align-items: center; min-width: 0; }
  .supplier-table.cr .sup-points > .badge { min-width: 0; }
  .cr-phone { display: none; }
}
.cr-meta { font-size: .8rem; color: var(--ink-soft); }
@media (max-width: 640px) {
  .cr-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .cr-line > a.filter-link { display: inline-flex; min-width: 24px; min-height: 24px; align-items: center; justify-content: center; }
  .vuln-table .cr-line > a.cr-main { display: inline-flex; align-items: center; min-height: 24px; }   /* WCAG 2.5.8: the asset link of a vulnerability card */
}
.cr-ico { display: inline-flex; vertical-align: -3px; margin-left: 2px; }
.cr-ico .icon, .cr-ico svg { width: 16px; height: 16px; }
.cr-ico.err { color: var(--err-ink); }
.cr-ico.warn { color: var(--warn-ink); }
.cr-ico.info { color: var(--info-ink); }
.cr-legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: .8rem; color: var(--ink-soft); margin: 8px 0 0; }
.pg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 14px 0 4px; }
.pg .pg-info { margin-right: auto; font-size: .86rem; color: var(--ink-soft); }
.pg > a, .pg > .pg-cur, .pg > .pg-dis, .pg > .pg-gap { min-width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); text-decoration: none; color: var(--ink); font-size: .88rem; }
.pg > .pg-gap { border-color: transparent; padding: 0 2px; min-width: 20px; }
.pg > .pg-cur { background: var(--accent-tint); font-weight: 700; border-color: var(--accent); }
.pg > .pg-dis { opacity: .45; }
.pg-per { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 0 12px; }
.pg-per .btn[aria-pressed="true"] { background: var(--accent-tint); border-color: var(--accent); font-weight: 700; }
@media (max-width: 640px) {
  .pg .pg-info { width: 100%; }
  .pg > a, .pg > .pg-cur, .pg > .pg-dis { min-width: 44px; height: 44px; }
  .pg-per { margin: 6px 0 0; width: 100%; }
  .pg-per .btn { min-height: 44px; min-width: 44px; }
}
@media print { .pg, .cr-legend { display: none !important; } }

/* ---------- P4 page tabs with a "Verwaltung" group (2.16, templates/_page_tabs.php) ---------- */
.page-tab-more { position: relative; display: flex; align-items: flex-end; align-self: stretch; margin: 0; }
.page-tab-more > summary { list-style: none; cursor: pointer; border-bottom: 2px solid transparent; }
.page-tab-more > summary::-webkit-details-marker { display: none; }
.page-tab-more > summary .icon { width: 14px; height: 14px; }
.page-tab-more > summary.is-current { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
.page-tab-more > .ptm-menu { left: 0; right: auto; }
.page-tab-more > .ptm-menu a[aria-current] { background: var(--accent-tint); font-weight: 600; }
.page-tab.ptm-phone { display: none; }
@media (max-width: 640px) {
  .page-tab-more { display: none; }
  .page-tab.ptm-phone { display: inline-flex; }
}

/* ---------- P3 catalogue head (2.16, handover from P6; templates/project/catalog.php, _catrelease.php) ----------
   Release and document control fold into one row; bulk edit and own controls open from buttons next to the filters, so
   their closed panels take no room; the blocks behind the "…" menu sit below the entries. */
.cat-head .refs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; }
.page-head.cat-head { margin-bottom: 4px; }
.cat-head .lh-main > .legal-note { margin: 4px 0 0; }
@media (min-width: 641px) { .cat-head h1 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); } }
.cat-govern { padding: 8px 16px; }
.cat-govern { margin-bottom: 10px; }
.cat-govern > summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; cursor: pointer; }
.cat-govern-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 400; }
.cat-govern-meta .badge .icon { width: 13px; height: 13px; vertical-align: -2px; }
.cat-govern > .panel { border: 0; box-shadow: none; padding: 12px 0 0; margin: 0; background: none; }
.cat-govern > .panel + .panel { border-top: 1px solid var(--line); margin-top: 12px; }
.cat-tools { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.cat-tool-panel:not([open]) { display: none; }
@media (max-width: 640px) {
  .cat-govern-meta .small { display: none; }
  .mt-sheet .cat-tools { flex-direction: column; align-items: stretch; margin: 0; }
  .mt-sheet .cat-tools .btn { min-height: 44px; justify-content: flex-start; }
}
@media (min-width: 641px) {
  #liste:has(> .cat-tools) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
  #liste:has(> .cat-tools) > .filter-bar { margin: 0; align-items: center; }
  #liste:has(> .cat-tools) > .filter-bar > label { display: flex; align-items: center; gap: 8px; margin: 0; }
  #liste:has(> .cat-tools) > .cat-tools { margin: 0; }
  #liste:has(> .cat-tools) > .cat-parts { flex-basis: 100%; }
}

/* Administration › Nutzer › <Name> (2.18, docs/specs/ADMIN-USER-DETAIL-SPEC.md): overview card, folded editing blocks,
   access limit checkbox. Phone (375 px): groups stack, secondary table columns hidden, 44 px summaries. */
.user-id { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.user-ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px 24px; }
.user-ov-grid > section { border-top: 1px solid var(--line); padding-top: 10px; min-width: 0; }
.user-ov-grid h3 { font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 6px; }
.user-ov-grid dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 12px; margin: 0; font-size: .92rem; }
.user-ov-grid dt { color: var(--ink-faint); }
.user-ov-grid dd { margin: 0; overflow-wrap: anywhere; }
.user-section { margin: 22px 0 10px; }
details.user-fold { padding: 0; }
details.user-fold > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 14px 20px; min-height: 44px; }
details.user-fold > summary::-webkit-details-marker { display: none; }
details.user-fold > summary::before { content: "›"; width: 12px; color: var(--ink-faint); transition: transform .15s; }
details.user-fold[open] > summary::before { transform: rotate(90deg); }
details.user-fold > summary > .h3 { margin: 0; font-size: 1.02rem; }
details.user-fold > :not(summary) { margin-left: 20px; margin-right: 20px; }
details.user-fold > :last-child { margin-bottom: 16px; }
details.user-fold > form > .panel { box-shadow: none; border: 0; padding: 8px 0; margin: 0; }
.access-limit:not(:has(input[name="access_limit"]:checked)) .access-limit-date { display: none; }
@media (prefers-reduced-motion: reduce) { details.user-fold > summary::before { transition: none; } }
@media (max-width: 600px) {
  .user-ov-grid { grid-template-columns: 1fr; }
  .user-hide-sm { display: none; }
  details.user-fold > summary { padding: 12px 14px; }
  details.user-fold > :not(summary) { margin-left: 14px; margin-right: 14px; }
  .user-stack thead { display: none; }
  .user-stack tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--line); }
  .user-stack td { display: block; border: 0; padding: 1px 0; }
  .user-stack td.nowrap { color: var(--ink-faint); }
}
#user-hist-h ~ .h4 { margin-top: 18px; }
/* MO1 system status: mail problems per hour and type become one block per row on phones (docs/DESIGN-GUIDELINES.md section 9) */
@media (max-width: 640px) {
  .mail-overview thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mail-overview, .mail-overview tbody, .mail-overview tr, .mail-overview td { display: block; width: 100%; }
  .mail-overview tr { padding: 8px 0; border-top: 1px solid var(--line); }
  .mail-overview td { border: 0; padding: 2px 0; }
  .mail-overview td::before { content: attr(data-label) ": "; color: var(--ink-faint); }
}
/* Partner overview for sales (src/PartnerSalesOverview.php): the folded "Details" exist only in the phone card; the desktop table shows every column.
   Desktop filters: each label wraps its control (shared .filter-bar pattern), fields aligned on their bottom edge and of a fixed width, not full width */
.po-filters { align-items: end; }
.po-filters > label:not(.check) { min-width: 0; flex: 0 1 220px; }
.po-filters input[type=search] { min-height: 0; height: auto; }
.po-filters > label.check { align-self: center; }
/* The reason of the traffic light stays one line on the desktop (ADR 0299); the full text is the tooltip and the card text on phones */
.po-light { white-space: nowrap; }
.po-reason { display: inline-block; max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.po-fold { display: none; }
@media (max-width: 640px) {
  table.cards-compact[data-cards].po-table .po-fold { display: block; margin-top: 4px; }
  table.cards-compact[data-cards].po-table .po-fold > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .875rem; color: var(--ink-soft); }
  table.cards-compact[data-cards].po-table .po-fold ul { margin: 0 0 6px; padding-left: 18px; }
}
/* Draft 223: warning next to a switch on Verwaltung › Vorschau-Seiten (Preview::NOTES) */
.pv-note { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; color: var(--ink); }
.pv-note .icon { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--warn-ink, var(--ink)); }

/* Akademie solo seat pages (templates/training_solo/, docs/features/TRAINING-SOLO.md): course cards stack on a phone, quantity
   field and actions keep 44 px touch targets, the assign form folds into a details element (bottom sheet style on small screens) */
.ts-grid { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ts-card { background: var(--inset); border-radius: var(--radius); padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ts-card.is-active { outline: 2px solid var(--accent); }
.ts-card p { margin: 0; }
.ts-card-link { font-weight: 600; }
.ts-qty { max-width: 8rem; min-height: 44px; }
.ts-sheet { margin: 10px 0; }
.ts-sheet > summary { list-style: none; cursor: pointer; }
.ts-sheet form { display: grid; gap: 6px; max-width: 420px; margin-top: 8px; }
@media (pointer: coarse) { .ts-sheet .btn, .order-form .btn, .ts-card-link { min-height: 44px; display: inline-flex; align-items: center; } }
@media (max-width: 600px) { .ts-sheet[open] form { max-width: none; } }
.order-form .sticky-actions { padding: 8px 12px; gap: 6px 8px; }
.order-form .sticky-total { margin: 0; flex: 1 1 100%; font-weight: 600; }
@media (max-width: 600px) { .order-form .sticky-actions .btn { flex: 1 1 0; justify-content: center; white-space: normal; text-align: center; padding-left: 8px; padding-right: 8px; } }

/* CTI briefing "Lagebild" (templates/threat_briefing/, docs/features/CTI-BRIEFING.md): one column of cards, sections as details
   (open by default, foldable on phones), affected entries marked by a stripe in the error or warning colour of the theme */
.cti { display: grid; gap: 16px; margin-bottom: 16px; }
.cti-sec { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); min-width: 0; }
.cti-sec > summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; cursor: pointer; list-style: none; }
.cti-sec > summary::-webkit-details-marker { display: none; }
.cti-sec > summary h2 { margin: 0; }
.cti-sec > summary::after { content: "▾"; color: var(--ink-faint); order: 3; }
.cti-sec:not([open]) > summary::after { content: "▸"; }
.cti-sec > summary .muted { order: 2; margin-left: auto; }
.cti-cards { display: grid; gap: 10px; padding: 0 12px 12px; }
.cti-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; background: var(--surface); display: grid; gap: 4px; min-width: 0; }
.cti-card.is-hit { border-left: 4px solid var(--err-ink); }
.cti-card.is-possible { border-left: 4px solid var(--warn-ink); }
.cti-meta { margin: 0; font-size: .85rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.cti-title { margin: 0; font-size: 1rem; font-family: var(--font-sans); font-weight: 600; overflow-wrap: anywhere; }
.cti-sum, .cti-sum-inline { color: var(--ink-soft); font-weight: 400; font-size: .92rem; }
.cti-sum { margin: 0; }
.cti-ext { color: var(--ink-faint); font-size: .8rem; }
.cti-aff { margin: 0; color: var(--err-ink); font-weight: 500; font-size: .92rem; }
.cti-aff.is-possible { color: var(--warn-ink); }
.cti-sources { border-top: 1px solid var(--line); padding-top: 10px; display: grid; gap: 4px; }
.cti-sources p { margin: 0; }
.cti-feeds { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.cti-feed { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 10px; min-width: 0; }
.cti-feed > div { min-width: 0; overflow-wrap: anywhere; }
.cti-feed p { margin: 2px 0 6px; }
.cti-feed-forms { display: grid; gap: 8px; padding-top: 8px; }
@media (max-width: 760px) {
  .cti-feed { flex-direction: column; }
  .cti-sec > summary, .cti-card .btn, .cti-feed .btn { min-height: 44px; }
}

/* Assignment suggestions on "Schulungen verwalten" (ADR 0265, templates/training/_suggestions.php): text and button side
   by side, stacked on phones with a full-width 44 px button */
.training-suggest { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.training-suggest-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
.training-suggest-form { flex: 0 0 auto; }
@media (max-width: 560px) {
  .training-suggest-form, .training-suggest-form .btn { width: 100%; }
  .training-suggest-form .btn { min-height: 44px; }
}
/* Einstellungen › Team „Über uns“ (templates/admin/site_team.php, ADR 0271): photo thumbnails (4:5) and the position field */
.st-thumb { display: inline-block; width: 40px; height: 50px; border-radius: 4px; object-fit: cover; background: var(--inset); vertical-align: middle; }
.st-photo { display: block; width: 160px; max-width: 100%; aspect-ratio: 4 / 5; height: auto; border-radius: 8px; background: var(--inset); margin-bottom: 8px; }
.st-pos { width: 5em; max-width: 5em; }
.st-photo-row { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; }
.st-photo-now { margin: 0; }
.st-photo-upload { flex: 1 1 260px; min-width: 0; display: grid; gap: 6px; }

/* ---------- Portal look "Stripe" (2.27, docs/DESIGN-GUIDELINES.md section 14a, ADR 0272) ----------
   The calm half of the website look (section 14) for the public forms, the sign-in and the portal base parts: cards without
   a frame and with the fine shadow, a near-white work surface, Messing main button with Tiefsee text, and in the dark theme
   the website page tone #0f1a30 under Tiefsee cards. NOT taken over in the portal: slants, gradient heads and dark bands
   (they disturb daily work). The card tokens are read by the base rules of .panel, .card, .dash-tile, .news-panel,
   .stepnav and the public form card, so modifier classes with a coloured left bar (.inc-alert, .dash-start, …) keep it.
   Step 3 (console and phone cards) uses the same tokens in the base rules of .myday-light ("Mein Tag"), the phone card rows of
   the lists (table[data-cards], .cards-md, .cr-wide), .kpi-fold, .cr-group, .partner-digest and .pd-section; dialogs and bottom
   sheets keep their frames. --st-a, --st-shadow-sm, --st-shadow and --st-mesh are shared with the website (site.css loads
   after this file). */
:root {
  --st-a: var(--surface); --st-work: #f6f8fb;
  --st-shadow-sm: 0 2px 5px -1px rgba(50, 50, 93, .16), 0 1px 3px -1px rgba(0, 0, 0, .14);
  --st-shadow: 0 13px 27px -5px rgba(50, 50, 93, .2), 0 8px 16px -8px rgba(0, 0, 0, .22);
  --st-mesh: radial-gradient(48% 70% at 96% 6%, rgba(224, 169, 59, .85) 0%, rgba(224, 169, 59, 0) 70%),
    radial-gradient(40% 60% at 74% 92%, rgba(168, 118, 26, .7) 0%, rgba(168, 118, 26, 0) 70%),
    radial-gradient(50% 70% at 104% 70%, rgba(47, 127, 119, .7) 0%, rgba(47, 127, 119, 0) 70%),
    radial-gradient(60% 80% at 28% 0%, rgba(28, 53, 96, .9) 0%, rgba(28, 53, 96, 0) 70%),
    linear-gradient(160deg, #0c1830 0%, #13233f 55%, #132a4a 100%);
  /* Sign-in: the same colours, the Messing and Lagune lights at the side edges at mid-height: away from the logo with its Messing
     slogan and from the footer links (contrast), and on phones mostly behind the card */
  --st-mesh-signin: radial-gradient(30% 34% at 100% 58%, rgba(224, 169, 59, .7) 0%, rgba(224, 169, 59, 0) 72%),
    radial-gradient(30% 34% at 0% 38%, rgba(47, 127, 119, .7) 0%, rgba(47, 127, 119, 0) 72%),
    radial-gradient(70% 60% at 30% 0%, rgba(28, 53, 96, .9) 0%, rgba(28, 53, 96, 0) 70%),
    linear-gradient(170deg, #0c1830 0%, #13233f 60%, #132a4a 100%);
  --card-edge: transparent; --card-radius: 12px; --card-shadow: var(--st-shadow-sm);
}
:root[data-theme="dark"] {
  --st-a: #0f1a30; --st-work: #0f1a30;
  --st-shadow-sm: 0 0 0 1px rgba(247, 243, 234, .1), 0 2px 6px rgba(0, 0, 0, .35); --st-shadow: 0 0 0 1px rgba(247, 243, 234, .16), 0 16px 32px -10px rgba(0, 0, 0, .6);
  --sb-edge: rgba(247, 243, 234, .1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --st-a: #0f1a30; --st-work: #0f1a30;
  --st-shadow-sm: 0 0 0 1px rgba(247, 243, 234, .1), 0 2px 6px rgba(0, 0, 0, .35); --st-shadow: 0 0 0 1px rgba(247, 243, 234, .16), 0 16px 32px -10px rgba(0, 0, 0, .6);
  --sb-edge: rgba(247, 243, 234, .1);
} }
/* Step 1, public forms (enquiry, trial, order, confirmations): white page like the website, dark theme #0f1a30 */
.public-body { --bg: var(--st-a); background: var(--st-a); }
/* Sign-in pages (.auth-body): the website gradient instead of plain Tiefsee, the card with the larger website shadow; dark in
   both themes as before, so the existing on-dark text colours of logo line and footer stay valid */
.auth-body { background: var(--st-mesh-signin) #13233f; }   /* no fixed attachment: iOS ignores it and long pages showed white */
.auth-body .auth-card { border-radius: var(--card-radius); box-shadow: var(--st-shadow); }
/* Step 2, portal base parts: near-white work surface (light) or the website page tone (dark) under the cards */
body:is(.has-sidebar, .no-sidebar) { --bg: var(--st-work); }
.btn-primary { box-shadow: var(--st-shadow-sm); }
.btn-ghost { border-color: var(--line); box-shadow: var(--st-shadow-sm); }
.btn-ghost:hover { border-color: var(--accent); }
.btn-xs.btn-ghost { box-shadow: none; border-color: var(--line-strong); }   /* row tools in tables stay flat */
.topbar { border-bottom-color: var(--line); }
/* Step 4, sidebar and phone bottom bar in Tiefsee in both themes (variant A from the earlier build claude/portal-stripe-build,
   Marc 03.11.2026): the light theme takes the dark navigation tokens of the sidebar block above, the dark theme one step
   darker (#07101f) so the bar stays apart from the #0f1a30 page. Messing focus ring (--sb-focus #e0a93b) and Messing bar of the
   active entry in both themes. Contrast on #13233f: text #d3dae6 11.2:1, faint #a9b6ca 7.6:1, focus ring #e0a93b 7.4:1 (on the
   active entry #24426f 4.8:1). Only the sidebar and .bottom-nav read --sb-*, so the website (body.lp-body) is unaffected. */
:root {
  --sb-bg: #13233f; --sb-edge: transparent; --sb-hover: #1c3560; --sb-active: #24426f; --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);
}
:root[data-theme="dark"] { --sb-bg: #07101f; --sb-hover: #13233f; --sb-active: #1c3560; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --sb-bg: #07101f; --sb-hover: #13233f; --sb-active: #1c3560; } }
/* The sidebar is dark in both themes: always the logo for dark backgrounds (the rail keeps its compass mark) */
.sidebar .brand-logo.logo-on-light { display: none !important; }
.sidebar .brand-logo.logo-on-dark { display: block !important; }
@media (min-width: 761px) { html.js[data-nav-rail="true"]:not([data-nav-peek]) .sidebar .brand-logo.logo-on-dark { display: none !important; } }

/* Compact module summary in the admin customer rows (module_summary() in src/helpers.php; templates/admin/index.php and the
   management overview tab "Kunden" in templates/admin/board.php; Marc 02.11. and 03.11.2026: one pill per licence made a row
   6 to 8 lines high). Package and counts on one line, the first three pills, the rest behind a native <details> "+N weitere"
   that opens inline (keyboard: Tab to the summary, Enter or Space toggles). */
.msum { display: grid; gap: 4px; min-width: 20rem; max-width: 26rem; }
.msum-line { margin: 0; font-size: .86rem; line-height: 1.4; color: var(--ink-soft); }
.msum-line strong { color: var(--ink); font-weight: 600; }
.msum-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.msum-pills > * { margin: 0; }
.msum-pills .badge { white-space: nowrap; }
.msum-more > summary { display: inline-flex; align-items: center; min-height: 24px; font-size: .82rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; list-style: none; border-radius: 4px; }
.msum-more > summary::-webkit-details-marker { display: none; }
.msum-more > summary:hover { color: var(--ink); text-decoration: underline; }
.msum-more[open] { flex-basis: 100%; }
.msum-more[open] > summary { margin-bottom: 4px; }
@media (max-width: 640px) { .msum { min-width: 16rem; } }   /* the console table scrolls sideways on phones (MOB3-B); the cell stays readable */

/* An empty key figure: quiet "noch offen" instead of a large dash (kpi_value() on the risk detail, supplier scorecard total) */
:is(.cov-stats strong, .scorecard-value).is-empty { font-size: 1.05rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }
@media (max-width: 640px) { .cov-stats strong.is-empty { font-size: .95rem; } }

/* Admin IA (decision Marc 03.11.2026, "wie empfohlen", ADR 0286; style rules R1 to R14 in docs/DESIGN-GUIDELINES.md section 15):
   shared parts of console pages, modelled on the approved platform switches page. Status line under the title, "So funktioniert …"
   on demand, panel head with counter, one row = name, one state badge, one hint line, one action; folded panels with a counter. */
.adm-statusline { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 6px 0 0; font-size: .9rem; font-variant-numeric: tabular-nums; }
.adm-statusline b { font-weight: 650; }
.adm-how { margin: 6px 0 0; }
.adm-how > summary { cursor: pointer; color: var(--ink-faint); font-size: .9rem; min-height: 24px; line-height: 24px; }
.adm-how > p { margin: 6px 0 0; max-width: 75ch; font-size: .9rem; color: var(--ink-faint); }
.adm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 4px; }
.adm-head > :is(h2, h3) { margin: 0; }
.adm-count { font-size: .85rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.adm-rows { list-style: none; margin: 0; padding: 0; }
.adm-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.adm-row:first-child { border-top: 0; }
.adm-row-main { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; }
.adm-row-hint { grid-column: 1; margin: 0; font-size: .875rem; color: var(--ink-faint); min-width: 0; }
.adm-row-edit { grid-column: 1 / -1; padding-top: 8px; }
.adm-row.is-editing { background: var(--accent-tint, transparent); border-radius: var(--radius, 8px); padding-left: 8px; padding-right: 8px; }
.adm-row-act { grid-row: 1 / span 2; grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.adm-fold > summary { cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.adm-fold > summary::-webkit-details-marker { display: none; }
.adm-fold > summary > :is(h2, h3)::before { content: "▸ "; color: var(--ink-faint); }
.adm-fold[open] > summary > :is(h2, h3)::before { content: "▾ "; }
.adm-fold > summary > :is(h2, h3) { margin: 0; }
.adm-fold[open] > summary { margin-bottom: 8px; }
.adm-fold > summary > .changelog-sub { margin: 0; }
.adm-sub { font-size: .8rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin: 10px 0 2px; }
.adm-seg { display: flex; flex-wrap: nowrap; overflow-x: auto; margin: 4px 0 14px; scrollbar-width: thin; }
.adm-req { border-top: 1px solid var(--line); }
.adm-req:first-child { border-top: 0; }
.adm-req > summary { cursor: pointer; list-style: none; }
.adm-req > summary::-webkit-details-marker { display: none; }
.adm-req > summary .adm-row { border-top: 0; }
.adm-req-open { font-size: .875rem; font-weight: 600; color: var(--accent-darker); white-space: nowrap; }
.adm-req-open::after { content: " ▸"; }
.adm-req[open] .adm-req-open::after { content: " ▾"; }
.adm-req-body { padding: 0 0 12px; }
@media (max-width: 640px) {
  .adm-row { grid-template-columns: 1fr; }
  .adm-row-act { grid-row: auto; grid-column: 1; }
  .adm-row-act > *, .adm-row-act form .btn { width: 100%; min-height: 44px; justify-content: center; }
  .adm-row-act form { width: 100%; }
}

/* Customer file in the console (ADR 0300): meta line under the title, two columns for master data and contact, status line with its one main button,
   an opened row of the module list. Stacks below 900 px; read-dl falls back to its two phone columns. */
.adm-file-meta { margin-top: 6px; }
.adm-file-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.adm-file-grid > .panel { margin: 0; }
.adm-file-grid .read-dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.adm-file-grid + .panel { margin-top: 16px; }
.adm-file-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 10px; }
.adm-file-bar .adm-statusline { margin: 0; }
.adm-row-open { padding: 10px 0; border-top: 1px solid var(--line); }
.adm-row-open:first-child { border-top: 0; }
@media (max-width: 900px) { .adm-file-grid { grid-template-columns: minmax(0, 1fr); } }
.adm-file-search { margin-bottom: 10px; }
.adm-file-search input[type="search"] { width: min(100%, 420px); }

/* AI help with Meles (2.36, docs/specs/AI-HELP-QUALITY-SPEC.md section 5): figure in the head of the help window and of the page
   ai-help, question field, one-line AI and personal-data notice, answer, sources, follow-up buttons. The figure is a still
   image (no motion, so nothing to switch off for prefers-reduced-motion) with the light outline of CI 1.4 chapter 08, which
   keeps its contour above 3:1 on the dark surfaces. Phone behaviour of the window: frontend/islands/search/island.css. */
.help-meles { display: block; flex: none; width: 48px; height: 48px; filter: drop-shadow(0 0 .6px #f7f3ea) drop-shadow(0 0 .6px #f7f3ea) drop-shadow(0 0 .6px #f7f3ea); }
/* Portal sweater and lettering (decision Marc 06.11.2026): cream figure meles-portal.svg, the tag carries its own cream surface and dark
   ink (#13233f on #f7f3ea, about 14:1) so it reads the same in light and dark mode; #a89b80 is the sweater's shadow tone as its edge. */
.help-meles-id { display: inline-flex; flex: none; flex-direction: column; align-items: center; gap: 3px; }
.help-meles-tag { padding: 1px 6px; border: 1px solid #a89b80; border-radius: 999px; background: #f7f3ea; color: #13233f; font-size: .75rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.help-panel-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.help-panel-id h2 { overflow-wrap: anywhere; }
.ai-help-head { display: flex; align-items: center; gap: 12px; }
.ai-help-head .help-meles { width: 56px; height: 56px; }
.ai-help-head h1, .ai-help-head .eyebrow { margin-bottom: 0; }
.help-ask { display: grid; gap: 6px; padding: 12px 22px 14px; border-top: 1px solid var(--line); background: var(--surface); }
.help-ask label { font-size: .9rem; font-weight: 600; }
.help-ask-row { display: flex; align-items: flex-end; gap: 8px; }
.help-ask textarea { flex: 1 1 auto; box-sizing: border-box; min-width: 0; min-height: 44px; max-height: 9em; padding: 10px 12px; font-size: 1rem; line-height: 1.3; resize: none; field-sizing: content; }
.help-ask-send { flex: none; justify-content: center; width: 44px; min-height: 44px; padding: 0; }
.help-ai-line { display: flex; align-items: center; gap: 6px; margin: 0; font-size: .75rem; line-height: 1.35; color: var(--ink-faint); }
.ai-help-line { margin: 0 0 8px; }
.help-ai-badge { flex: none; padding: 0 5px; border: 1px solid var(--line-strong); border-radius: 4px; font-weight: 700; color: var(--ink); }
.help-panel-body > [data-help-ai-slot] + h3 { margin-top: 0; }
/* Phones: the notice wraps under the badge instead of shrinking the type (decision 07.11.2026, plan 2.37); .75rem stays the floor */
@media (max-width: 767px) { .help-ai-line { display: block; } .help-ai-line .help-ai-badge { display: inline-block; margin-right: 4px; } }
.help-ai-answer { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.help-ai-answer:focus { outline: none; }
.help-ai-question { margin: 0 0 6px; font-size: .85rem; color: var(--ink-faint); overflow-wrap: anywhere; }
.help-ai-status { margin: 0 0 14px; font-size: .9rem; color: var(--ink-soft); }
.help-ai-status:empty { display: none; }
.ai-help-text { overflow-wrap: anywhere; }
.help-ai-answer .ai-help-text { margin: 0 0 8px; white-space: pre-line; }
.ai-help-sources { margin-top: 10px; border-top: 1px solid var(--line); }
.ai-help-sources > summary { padding: 12px 0; line-height: 20px; font-weight: 600; cursor: pointer; }
.ai-help-sources ul { margin: 0; padding: 0; list-style: none; }
.ai-help-sources li { border-top: 1px solid var(--line); }
.ai-help-sources a { display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 6px 0; overflow-wrap: anywhere; }
.ai-help-options { display: grid; gap: 8px; margin: 10px 0 0; }
.ai-help-options .btn { justify-content: flex-start; width: 100%; min-height: 44px; text-align: left; white-space: normal; }
.help-ai-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font-size: .85rem; }
.help-ai-links a { display: inline-flex; align-items: center; min-height: 44px; }
.help-ai-note { margin: 10px 0 0; font-size: .8rem; color: var(--ink-faint); }
/* Modulinhalte (ADR 0303): one framework at a time; the five figures stay in one row on wide screens */
.mc-choice { margin-top: 10px; align-items: center; }
.mc-choice label { flex: 0 0 auto; }
.mc-choice select { width: min(100%, 460px); }
.mc-figures { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 10px; }
.mc-link { overflow-wrap: anywhere; }
@media (max-width: 640px) { .mc-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mc-choice select, .mc-choice .btn { width: 100%; } }