/* Otatel — design system v5 "Schwarz, Mint, Blau, Violett" (CT-1846 · OTD-02, 2026-10-06).
   A GRC / information-security identity, deliberately distinct from the HADBA sales brand.
   Neutral black bands carry authority and alternate with light bands; mint (green on light) is the ONE
   brand and action colour (logo, primary button, links, focus); blue marks NIS2, violet marks the CRA;
   amber only for legal limits and real warnings. Rules and contrast table: DESIGN-SYSTEM.md.
   ONE source: this file. `node ops/sync-brand.mjs` copies it (and fonts/, brand/) into the shell, the
   NIS2 instance and the CRA export; BrandSyncTest fails on any drift. Plain CSS, no external request,
   no script. Colour literals only inside the token block (qa/tokens.mjs).
   Rule of the file: exactly one .ot-btn--primary per view — hierarchy by contrast, not by count. */

@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: optional; /* CT-1706, D-37: never swap after the first paint */
  /* Inter 4.1 (SIL OFL 1.1, fonts/LICENSE-Inter.txt), subset to Latin + Latin Extended-A +
     punctuation, € and arrows: 73 KB instead of 352 KB. Served from our own origin. */
}

/* CT-1706 (D-37) · Layout shift from the web font, measured under slow 4G: with "swap" the late Inter
   re-wrapped the text (home 0.249, Datenschutz 0.210, NIS2 example 0.122 even unthrottled — NIS2 has no
   preload). "optional" never swaps after the first paint: a first visit on a slow connection keeps the
   fallback for that page, the next page takes Inter from the cache. Measured on staging with this file
   injected: CLS 0.000 on every page above. The fallback is a local font sized to Inter's metrics so that
   page looks as close to Inter as possible — measured in Chrome at 100 px: Inter width 6015 / Arial 6179
   → size-adjust 97.33 %; Inter ascent 0.96875 and descent 0.2412 em (Inter 4: 1984 / 494 of 2048),
   divided by the size-adjust. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans");
  size-adjust: 97.33%;
  ascent-override: 99.53%;
  descent-override: 24.78%;
  line-gap-override: 0%;
}

/* ── TOKENS v5 (CT-1846, OTD-02, D-61) ─────────────────────────────────────────────────────────────
   Two layers. (1) The PALETTE: fixed colours, the only place a colour literal may stand (qa/tokens.mjs).
   (2) RESOLVED tokens every component uses (--ot-bg, --ot-surface, --ot-text, --ot-link …): a band
   class (.ot-band--ink | --coal | --paper) sets them, so one component reads correctly on a black and
   on a light band. The page itself is a paper band; header and footer are ink in both schemes.
   Colour = meaning: mint/green = Otatel (logo, the one primary action, focus), blue = NIS2 (companies),
   violet = CRA (products), amber = warnings and legal limits only. Colour never carries meaning alone:
   every NIS2/CRA element also shows its icon and its name (WCAG 1.4.1).
   Contrast, measured with the WCAG formula (text ≥ 4.5:1, UI/large ≥ 3:1) — table in DESIGN-SYSTEM.md:
     mint #3ddc97 on ink-0 10.71 · ink-2 8.62 · slate 8.92 | green #0f7a52 on paper-1 5.02, white on it 5.35
     blue #5b9bff on ink-0 6.83 · ink-2 5.50 · slate-1 5.07 | #1e5bd6 on paper-1 5.60, white on it 5.96
     violet #b197fc on ink-0 7.84 · ink-2 6.31 · slate-1 5.82 | #6b3fd4 on paper-1 6.00, white on it 6.39
     amber #f59e0b on ink-0 8.81 | #b45309 on paper-1 4.72 · on white 5.02 · on amber-soft 4.62
     text #e6edf3 on ink-0 16.02 · muted #9aa7b4 on ink-2 6.21 | text #0f172a on paper-1 16.77 · muted #526070 5.72–6.43
     field borders (UI ≥ 3:1): #768596 on white 3.77 · #7a8796 on ink-2 4.16 · on slate-1 3.84 */
:root {
  /* palette */
  --ot-mint: #3ddc97;
  --ot-mint-hover: #6ee7b7;
  --ot-green: #0f7a52;
  --ot-green-hover: #0b6343;
  --ot-green-soft: #e3f5ec;
  --ot-blue: #5b9bff;
  --ot-blue-strong: #1e5bd6;
  --ot-blue-soft: #e8f0ff;
  --ot-violet: #b197fc;
  --ot-violet-strong: #6b3fd4;
  --ot-violet-soft: #f1ecff;
  --ot-amber: #f59e0b;
  --ot-amber-strong: #b45309;
  --ot-amber-soft: #fff4e5;
  --ot-amber-deep: #2d1e08;
  --ot-ok-light: #166534;
  --ot-ok-light-soft: #e6f4ea;
  --ot-ok-dark: #4ade80;
  --ot-ok-dark-soft: #0f2a18;
  --ot-bad-light: #b91c1c;
  --ot-bad-light-soft: #fdecec;
  --ot-bad-dark: #f87171;
  --ot-bad-dark-soft: #3a1717;
  --ot-ink-0: #0d1117;
  --ot-ink-1: #161b22;
  --ot-ink-2: #1f2630;
  --ot-ink-3: #262e3a;
  --ot-paper-0: #ffffff;
  --ot-paper-1: #f6f8fa;
  --ot-paper-2: #eef2f6;
  --ot-slate-0: #1c2330;
  --ot-slate-1: #242c39;
  --ot-slate-2: #2c3542;
  --ot-text-on-dark: #e6edf3;
  --ot-muted-on-dark: #9aa7b4;
  --ot-text-on-light: #0f172a;
  --ot-muted-on-light: #526070;
  --ot-line-on-dark: rgba(230, 237, 243, 0.12);
  --ot-line-on-light: #dde3ea;
  --ot-field-on-dark: #7a8796;
  --ot-field-on-light: #768596;
  --ot-white: #ffffff;
  --ot-mint-soft-dark: rgba(61, 220, 151, 0.14);
  --ot-blue-soft-dark: rgba(91, 155, 255, 0.14);
  --ot-violet-soft-dark: rgba(177, 151, 252, 0.14);
  --ot-shadow-light: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 24px -12px rgba(15, 23, 42, 0.18);
  --ot-shadow-dark: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 28px -12px rgba(0, 0, 0, 0.7);
  /* palette by meaning (OTD-03 resolves --ot-nis2-fg / --ot-cra-fg per band) */
  --ot-brand: var(--ot-mint);
  --ot-brand-strong: var(--ot-green);
  --ot-nis2: var(--ot-blue);
  --ot-nis2-strong: var(--ot-blue-strong);
  --ot-cra: var(--ot-violet);
  --ot-cra-strong: var(--ot-violet-strong);
  /* type, radius, layout */
  --ot-radius: 12px;
  --ot-radius-lg: 20px;
  --ot-font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ot-mono: ui-monospace, "JetBrains Mono", Consolas, monospace;
  --ot-maxw: 72rem;
  --ot-measure: 62ch;
  --ot-step--1: 0.875rem;
  --ot-step-0: 1rem;
  --ot-step-1: 1.125rem;
  --ot-step-2: 1.35rem;
  --ot-step-3: 1.7rem;
  --ot-step-4: clamp(2rem, 1.4rem + 2.4vw, 2.75rem);
  /* spacing scale 4 · 8 · 12 · 16 · 24 · 32 · 40 · 56 · 72 · 96 (OTD-09 fixes the use per place) */
  --ot-space-1: 4px; --ot-space-2: 8px; --ot-space-3: 12px; --ot-space-4: 16px; --ot-space-5: 24px;
  --ot-space-6: 32px; --ot-space-7: 40px; --ot-space-8: 56px; --ot-space-9: 72px; --ot-space-10: 96px;
}

/* Resolved tokens. Light paper (default page) … */
:root, .ot-band--paper {
  --ot-bg: var(--ot-paper-1); --ot-surface: var(--ot-paper-0); --ot-fill: var(--ot-paper-2);
  --ot-text: var(--ot-text-on-light); --ot-muted: var(--ot-muted-on-light);
  --ot-border: var(--ot-line-on-light); --ot-field-border: var(--ot-field-on-light);
  --ot-link: var(--ot-green); --ot-link-hover: var(--ot-green-hover);
  --ot-action: var(--ot-green); --ot-action-hover: var(--ot-green-hover); --ot-on-action: var(--ot-white); --ot-action-soft: var(--ot-green-soft);
  --ot-nis2-fg: var(--ot-blue-strong); --ot-nis2-soft: var(--ot-blue-soft);
  --ot-cra-fg: var(--ot-violet-strong); --ot-cra-soft: var(--ot-violet-soft);
  --ot-warn: var(--ot-amber-strong); --ot-warn-soft: var(--ot-amber-soft);
  --ot-success: var(--ot-ok-light); --ot-success-soft: var(--ot-ok-light-soft);
  --ot-error: var(--ot-bad-light); --ot-error-soft: var(--ot-bad-light-soft);
  --ot-shadow: var(--ot-shadow-light);
  color-scheme: light;
}
/* … black bands, header and footer (both schemes) … */
.ot-band--ink, .ot-band--coal, .ot-header, .ot-footer, .ot-hero, .ot-subbar,
.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact) {
  --ot-bg: var(--ot-ink-0); --ot-surface: var(--ot-ink-2); --ot-fill: var(--ot-ink-3);
  --ot-text: var(--ot-text-on-dark); --ot-muted: var(--ot-muted-on-dark);
  --ot-border: var(--ot-line-on-dark); --ot-field-border: var(--ot-field-on-dark);
  --ot-link: var(--ot-mint); --ot-link-hover: var(--ot-mint-hover);
  --ot-action: var(--ot-mint); --ot-action-hover: var(--ot-mint-hover); --ot-on-action: var(--ot-ink-0); --ot-action-soft: var(--ot-mint-soft-dark);
  --ot-nis2-fg: var(--ot-blue); --ot-nis2-soft: var(--ot-blue-soft-dark);
  --ot-cra-fg: var(--ot-violet); --ot-cra-soft: var(--ot-violet-soft-dark);
  --ot-warn: var(--ot-amber); --ot-warn-soft: var(--ot-amber-deep);
  --ot-success: var(--ot-ok-dark); --ot-success-soft: var(--ot-ok-dark-soft);
  --ot-error: var(--ot-bad-dark); --ot-error-soft: var(--ot-bad-dark-soft);
  --ot-shadow: var(--ot-shadow-dark);
  color-scheme: dark;
}
.ot-band--coal { --ot-bg: var(--ot-ink-1); }
/* … and paper in the dark scheme = "slate": lighter than the black bands, so the change of bands stays
   visible without glaring (D-61). Both ways as before (D-20): system setting and [data-theme]. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]), :root:not([data-theme="light"]) .ot-band--paper {
    --ot-bg: var(--ot-slate-0); --ot-surface: var(--ot-slate-1); --ot-fill: var(--ot-slate-2);
    --ot-text: var(--ot-text-on-dark); --ot-muted: var(--ot-muted-on-dark);
    --ot-border: var(--ot-line-on-dark); --ot-field-border: var(--ot-field-on-dark);
    --ot-link: var(--ot-mint); --ot-link-hover: var(--ot-mint-hover);
    --ot-action: var(--ot-mint); --ot-action-hover: var(--ot-mint-hover); --ot-on-action: var(--ot-ink-0); --ot-action-soft: var(--ot-mint-soft-dark);
    --ot-nis2-fg: var(--ot-blue); --ot-nis2-soft: var(--ot-blue-soft-dark);
    --ot-cra-fg: var(--ot-violet); --ot-cra-soft: var(--ot-violet-soft-dark);
    --ot-warn: var(--ot-amber); --ot-warn-soft: var(--ot-amber-deep);
    --ot-success: var(--ot-ok-dark); --ot-success-soft: var(--ot-ok-dark-soft);
    --ot-error: var(--ot-bad-dark); --ot-error-soft: var(--ot-bad-dark-soft);
    --ot-shadow: var(--ot-shadow-dark);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], :root[data-theme="dark"] .ot-band--paper {
  --ot-bg: var(--ot-slate-0); --ot-surface: var(--ot-slate-1); --ot-fill: var(--ot-slate-2);
  --ot-text: var(--ot-text-on-dark); --ot-muted: var(--ot-muted-on-dark);
  --ot-border: var(--ot-line-on-dark); --ot-field-border: var(--ot-field-on-dark);
  --ot-link: var(--ot-mint); --ot-link-hover: var(--ot-mint-hover);
  --ot-action: var(--ot-mint); --ot-action-hover: var(--ot-mint-hover); --ot-on-action: var(--ot-ink-0); --ot-action-soft: var(--ot-mint-soft-dark);
  --ot-nis2-fg: var(--ot-blue); --ot-nis2-soft: var(--ot-blue-soft-dark);
  --ot-cra-fg: var(--ot-violet); --ot-cra-soft: var(--ot-violet-soft-dark);
  --ot-warn: var(--ot-amber); --ot-warn-soft: var(--ot-amber-deep);
  --ot-success: var(--ot-ok-dark); --ot-success-soft: var(--ot-ok-dark-soft);
  --ot-error: var(--ot-bad-dark); --ot-error-soft: var(--ot-bad-dark-soft);
  --ot-shadow: var(--ot-shadow-dark);
  color-scheme: dark;
}
.ot-band--ink, .ot-band--coal, .ot-band--paper { background-color: var(--ot-bg); color: var(--ot-text); }

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--ot-bg); color: var(--ot-text); font-family: var(--ot-font); font-size: 16px; line-height: 1.6; letter-spacing: 0; }
/* CT-1706 · A German compound that is wider than the line ("Konformitätserklärung" in an h1 at 360 px in a
   wider fallback font — found by qa/browser.mjs on the Linux runner) breaks instead of widening the page.
   break-word only touches a word that cannot fit on a line of its own: lines that fit are unchanged. */
body { overflow-wrap: break-word; }
a { color: var(--ot-link); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--ot-link-hover); text-decoration: underline; }
/* links inside running text are underlined: colour alone would not set them apart (WCAG 1.4.1) */
.ot-prose a, p a, li a, dd a, .ot-notice a { text-decoration: underline; text-decoration-thickness: 1px; }
/* CT-1854: a button is set apart by its shape — no underline when it sits in running text (article CTA card) */
:is(.ot-prose, p, li, dd, .ot-notice) a.ot-btn { text-decoration: none; }
:focus-visible { outline: 3px solid var(--ot-link); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--ot-text); font-weight: 700; margin: 0 0 0.5em; }
h1 { font-size: var(--ot-step-4); line-height: 1.04; letter-spacing: -0.035em; max-width: 20ch; }
.ot-prose h1, .ot-page-head h1 { max-width: none; }
h2 { font-size: var(--ot-step-3); line-height: 1.12; letter-spacing: -0.025em; margin-top: 2.25rem; padding-top: 0.5rem; }
/* D-23: the heading mark is ink, not petrol — petrol means "you can act here". */
h2::before { content: ""; display: block; width: 24px; height: 2px; background: var(--ot-text); border-radius: 2px; margin-bottom: 0.75rem; }
h3 { font-size: var(--ot-step-1); line-height: 1.25; letter-spacing: -0.01em; margin-top: 1.5rem; }
p { margin: 0 0 1em; }
code { font-family: var(--ot-mono); font-size: 0.9em; background: var(--ot-fill); padding: 1px 8px; border-radius: 4px; }
.ot-container { width: 100%; max-width: var(--ot-maxw); margin: 0 auto; padding: 0 16px; }
.ot-muted { color: var(--ot-muted); }
.ot-small { font-size: var(--ot-step--1); }
.ot-mono { font-family: var(--ot-mono); }
.ot-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-muted); margin-bottom: 0.6rem; }
.ot-lead { font-size: var(--ot-step-1); color: var(--ot-text); max-width: var(--ot-measure); }
.ot-plain { list-style: none; padding: 0; margin: 0; }
.ot-plain li { margin: 3px 0; }
.ot-skip { position: absolute; left: -999px; top: 8px; background: var(--ot-surface); padding: 8px 12px; border-radius: 8px; z-index: 20; }
.ot-skip:focus { left: 8px; }
details summary { cursor: pointer; color: var(--ot-text); font-weight: 600; }

/* D-24 · Fundstellen-Chip — the recurring mark of the brand ("jede Antwort mit Fundstelle"):
   every cited article, on every page, in every tool and in the PDFs looks like this. */
.ot-cite { display: inline-block; font-family: var(--ot-mono); font-size: 0.8rem; line-height: 1.5; color: var(--ot-text); background: var(--ot-action-soft); border: 1px solid color-mix(in srgb, var(--ot-link) 35%, transparent); border-radius: 6px; padding: 0 8px; white-space: nowrap; vertical-align: baseline; }
.ot-cite--tool { background: transparent; border-color: transparent; padding: 0; color: var(--ot-muted); }

/* CT-1847 (OTD-03) · Icons from one sprite (shared/brand/icons.svg, Lucide, ISC): <svg class="ot-icon"><use href="…#i-x"/></svg>.
   The drawing attributes live here, so the sprite has none and every icon follows the text colour. */
.ot-icon { width: 24px; height: 24px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; overflow: visible; }
.ot-icon--sm { width: 16px; height: 16px; flex-basis: 16px; }
.ot-icon--md { width: 20px; height: 20px; flex-basis: 20px; }

/* header */
.ot-header { background: var(--ot-bg); color: var(--ot-text); border-bottom: 1px solid var(--ot-border); position: sticky; top: 0; z-index: 10; }
.ot-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.ot-header__cta { display: inline-flex; }
.ot-header__cta .ot-btn { padding: 8px 16px; }
/* OTD-02 · Logo: ring mark (the "O" as a check point, Ries' visual hammer) + wordmark "Otatel" without .com.
   Mark in the accent of its band (mint on black, green on light); never another colour, never distorted. */
.ot-brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 800; font-size: 1.375rem; line-height: 1; letter-spacing: -0.02em; color: var(--ot-text); }
.ot-brand:hover { text-decoration: none; color: var(--ot-text); }
.ot-brand__mark { width: 30px; height: 30px; flex: 0 0 auto; color: var(--ot-link); display: block; }
.ot-brand__text { white-space: nowrap; }
.ot-brand__tag { margin-left: 2px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ot-border); color: var(--ot-muted); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.ot-nav { display: flex; gap: 2px; flex-wrap: wrap; }
.ot-nav a { color: var(--ot-muted); padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 0.95rem; }
.ot-nav a:hover, .ot-nav a[aria-current="page"] { color: var(--ot-text); background: var(--ot-fill); text-decoration: none; }
.ot-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--ot-link); }
@media (max-width: 719px) {
  /* No hamburger script in the shell: one scrollable line of at most four links + the CTA. */
  .ot-header__inner { flex-wrap: nowrap; gap: 8px; }
  .ot-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .ot-nav::-webkit-scrollbar { display: none; }
  .ot-nav a { padding: 8px 12px; white-space: nowrap; font-size: 0.9rem; }
}

/* hero — calm gradient; the old grid texture was noise (Krug) and competed with the headline */
.ot-hero .ot-eyebrow { color: var(--ot-muted); }
.ot-hero__actions { display: flex; gap: 12px 20px; flex-wrap: wrap; align-items: center; margin-top: 24px; }
.ot-hero__actions a:not(.ot-btn) { color: var(--ot-text); text-decoration: underline; text-underline-offset: 4px; }
/* A note right under a button row needs air and room for one line (besprechen: «Wie es danach weitergehen kann …») */
.ot-hero__actions + p, #besprechen .ot-hero__actions + p { margin-top: var(--ot-space-5); max-width: 48rem; }
.ot-hero__micro { margin-top: 12px; font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-hero .ot-btn--ghost { background: transparent; color: var(--ot-text); border-color: var(--ot-field-border); }
.ot-hero .ot-btn--ghost:hover { background: var(--ot-fill); }

/* main & sections */
.ot-main { padding: 40px 0 72px; }
.ot-section { margin-top: 56px; }
.ot-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ot-section__head h2 { margin: 0; padding-top: 0; }
.ot-section__head h2::before { display: none; }

/* cards — hierarchy by type and space, not by colour bars */
.ot-card { background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg); padding: 24px; box-shadow: var(--ot-shadow); display: flex; flex-direction: column; gap: 12px; position: relative; overflow: hidden; }
.ot-card--primary { border-top: 3px solid var(--ot-text); }
.ot-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ot-card__icon { width: 44px; height: 44px; border-radius: 12px; background: var(--ot-fill); color: var(--ot-text); display: grid; place-items: center; }
.ot-card__icon svg { width: 24px; height: 24px; }
.ot-card--soon .ot-card__icon { color: var(--ot-muted); }
.ot-card h3 { margin: 4px 0 0; font-size: var(--ot-step-1); }
.ot-card__law { font-size: 0.82rem; color: var(--ot-muted); font-family: var(--ot-mono); }
.ot-card p { margin: 0; }
.ot-card .ot-dl { margin-top: 8px; padding-top: 12px; border-top: 1px dashed var(--ot-border); font-size: 0.9rem; }
.ot-card .ot-btn { align-self: flex-start; margin-top: auto; }
.ot-card--question h3 { font-size: var(--ot-step-2); line-height: 1.25; margin-top: 0; }
.ot-facts { font-family: var(--ot-mono); font-size: 0.8rem; color: var(--ot-muted); }
.ot-card--result { display: block; }
.ot-card--result > h3 { margin: 20px 0 8px; font-size: 1.02rem; }
.ot-result__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.ot-result__actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ot-border); }
.ot-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ot-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ot-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* badges, buttons, notices */
.ot-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 12px; border-radius: 999px; background: var(--ot-fill); color: var(--ot-muted); white-space: nowrap; }
.ot-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ot-badge--ok { background: var(--ot-success-soft); color: var(--ot-success); }
.ot-badge--soon { background: var(--ot-warn-soft); color: var(--ot-warn); }
.ot-badge--start { background: var(--ot-text); color: var(--ot-bg); }
.ot-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: var(--ot-radius); font-weight: 700; font-size: 0.95rem; font-family: inherit; line-height: 1.3; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, transform 0.15s ease; }
.ot-btn--primary { background: var(--ot-action); color: var(--ot-on-action); }
.ot-btn--primary:hover { background: var(--ot-action-hover); color: var(--ot-on-action); text-decoration: none; transform: translateY(-1px); }
.ot-btn--ghost { border-color: var(--ot-field-border); color: var(--ot-text); background: var(--ot-surface); }
.ot-btn--ghost:hover { background: var(--ot-fill); color: var(--ot-text); text-decoration: none; }
.ot-btn[aria-disabled="true"], .ot-btn:disabled { opacity: 0.55; pointer-events: none; }
/* amber = legal limits and real warnings only (KEV, reporting deadlines, "keine Rechtsberatung") */
.ot-notice { display: flex; gap: 12px; align-items: flex-start; border: 1px solid color-mix(in srgb, var(--ot-warn) 35%, transparent); border-left: 4px solid var(--ot-warn); background: var(--ot-warn-soft); border-radius: var(--ot-radius); padding: 16px 16px; margin: 20px 0; }
.ot-notice svg { flex: 0 0 auto; width: 20px; height: 20px; color: var(--ot-warn); margin-top: 2px; }
/* explanations are calmer: fill + ink edge */
.ot-notice--info { border-color: var(--ot-border); border-left-color: var(--ot-muted); background: var(--ot-fill); }
.ot-notice--info svg { color: var(--ot-text); }

/* table of contents / jump marks (long pages: Methodik, Grenzen, Crosswalk) */
.ot-toc { margin: 16px 0 8px; padding: 16px 16px; border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: var(--ot-surface); font-size: 0.95rem; }
.ot-toc__title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-muted); margin: 0 0 8px; }
.ot-toc ol, .ot-toc ul { margin: 0; padding-left: 1.2rem; columns: 1; }
@media (min-width: 720px) { .ot-toc ol, .ot-toc ul { columns: 2; column-gap: 32px; } }
.ot-toc li { margin: 2px 0; break-inside: avoid; }
.ot-toc--inline ol, .ot-toc--inline ul { columns: 1; list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 16px; }
:target { scroll-margin-top: 84px; }

/* steps (progress) — identical in CRA and NIS2 */
.ot-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; counter-reset: ot-step; flex-wrap: wrap; }
.ot-steps li { counter-increment: ot-step; display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-radius: 999px; background: var(--ot-fill); color: var(--ot-muted); font-size: 0.9rem; font-weight: 600; }
.ot-steps li::before { content: counter(ot-step); display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ot-surface); border: 1px solid var(--ot-border); font-size: 0.8rem; }
.ot-steps li[aria-current="step"] { background: var(--ot-text); color: var(--ot-bg); }
.ot-steps li[aria-current="step"]::before { background: var(--ot-bg); color: var(--ot-text); border-color: var(--ot-bg); }
.ot-steps li.is-done::before { content: "✓"; background: var(--ot-success-soft); color: var(--ot-success); border-color: transparent; }
@media (max-width: 599px) { .ot-steps li:not([aria-current="step"]) { padding: 8px; font-size: 0; gap: 0; } .ot-steps li:not([aria-current="step"])::before { font-size: 0.8rem; } }

/* forms — same in every tool */
.ot-form { display: grid; gap: 20px; margin-top: 24px; }
.ot-form .ot-card { display: block; }
.ot-form h2 { font-size: var(--ot-step-1); margin: 0 0 12px; padding: 0; }
.ot-form h2::before { display: none; }
.ot-form h4 { margin: 16px 0 8px; font-size: 0.95rem; }
.ot-form label, .ot-field { display: block; font-size: 0.95rem; margin: 8px 0; }
.ot-form label > span, .ot-field > span { display: block; font-weight: 600; margin-bottom: 4px; }
.ot-field__help { display: block; font-size: var(--ot-step--1); color: var(--ot-muted); margin-top: 4px; font-weight: 400; }
.ot-form input[type="number"], .ot-form input[type="text"], .ot-form input[type="email"], .ot-form input[type="datetime-local"], .ot-form select, .ot-input {
  width: 100%; padding: 12px 12px; border: 1px solid var(--ot-field-border); border-radius: var(--ot-radius);
  background: var(--ot-surface); color: var(--ot-text); font: inherit; }
.ot-form input:focus, .ot-form select:focus, .ot-input:focus { outline: none; border-color: var(--ot-link); box-shadow: 0 0 0 3px var(--ot-action-soft); }
.ot-check { display: flex !important; gap: 12px; align-items: flex-start; font-weight: 400; }
.ot-check input { margin-top: 4px; accent-color: var(--ot-action); width: 16px; height: 16px; flex: 0 0 auto; }
.ot-check > span { display: inline !important; font-weight: 400 !important; }
.ot-check .ot-small { display: block !important; }
.ot-choice { display: inline-flex; gap: 8px; }
.ot-choice button, .ot-choice label { min-width: 5.5rem; justify-content: center; }
.ot-choice [aria-pressed="true"], .ot-choice input:checked + span { background: var(--ot-text); color: var(--ot-bg); border-color: var(--ot-text); }
.ot-error { display: flex; gap: 8px; align-items: flex-start; color: var(--ot-error); font-size: var(--ot-step--1); margin-top: 4px; }
.ot-form__actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.ot-form__actions--split { justify-content: space-between; }
.ot-form__note { font-size: var(--ot-step--1); color: var(--ot-muted); margin: 8px 0 0; }

/* prose (legal + methodology pages) */
.ot-page-head { padding-bottom: 20px; margin-bottom: 8px; border-bottom: 1px solid var(--ot-border); }
.ot-page-head h1 { margin-bottom: 0.25em; }
.ot-prose { max-width: 50rem; }
.ot-prose ul, .ot-prose ol { padding-left: 1.3rem; }
.ot-prose li { margin-bottom: 0.45em; }
.ot-prose li::marker { color: var(--ot-muted); font-weight: 700; }
.ot-stand { display: inline-flex; align-items: center; gap: 8px; margin-top: 28px; padding: 8px 12px; border-radius: 8px; background: var(--ot-fill); color: var(--ot-muted); font-size: 0.88rem; font-family: var(--ot-mono); }
.ot-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0; }
.ot-dl dt { color: var(--ot-muted); font-weight: 600; }
.ot-dl dd { margin: 0; }
dl.ot-kv, .ot-kv { display: grid; grid-template-columns: 1fr; gap: 4px 16px; margin: 0; }
@media (min-width: 720px) { dl.ot-kv, .ot-kv { grid-template-columns: 14rem 1fr; } }
.ot-kv dt { font-weight: 600; color: var(--ot-muted); font-size: 0.9rem; }
.ot-kv dd { margin: 0 0 8px; }

/* tables — long ones keep their head in view; on phones they become cards (data-label on td) */
.ot-table-wrap { overflow-x: auto; border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: var(--ot-surface); }
.ot-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.ot-table th, .ot-table td { text-align: left; padding: 12px 12px; border-bottom: 1px solid var(--ot-border); vertical-align: top; }
.ot-table thead th { background: var(--ot-fill); color: var(--ot-muted); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; text-transform: uppercase; }
.ot-table tbody tr:last-child td { border-bottom: 0; }
.ot-table input { width: 100%; min-width: 6rem; padding: 8px 8px; }
.ot-table--sticky thead th { position: sticky; top: 64px; z-index: 1; }
.ot-table-wrap:has(.ot-table--sticky) { overflow: visible; }
@media (max-width: 599px) {
  .ot-table--cards thead { position: absolute; left: -9999px; }
  .ot-table--cards, .ot-table--cards tbody, .ot-table--cards tr, .ot-table--cards td { display: block; width: 100%; }
  .ot-table--cards tr { border-bottom: 1px solid var(--ot-border); padding: 8px 0; }
  .ot-table--cards td { border: 0; padding: 4px 12px; }
  .ot-table--cards td[data-label]::before { content: attr(data-label); display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ot-muted); }
}

/* footer */
.ot-footer { background: var(--ot-bg); color: var(--ot-muted); border-top: 1px solid var(--ot-border); padding: 40px 0 28px; font-size: 0.92rem; }
.ot-footer__inner { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .ot-footer__inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.ot-footer a { color: var(--ot-text); }
.ot-footer a:hover { color: var(--ot-link); }
.ot-footer__brand { margin-bottom: 12px; }
.ot-footer .ot-brand { font-size: 1.125rem; }
.ot-footer .ot-brand__mark { width: 24px; height: 24px; }
.ot-footer__links { display: flex; flex-direction: column; gap: 8px; }
.ot-footer__title { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-muted); margin-bottom: 8px; }
.ot-devby { margin-top: 12px; }
.ot-devby a, .ot-devby strong { color: var(--ot-text); }
/* CT-1717: the author link sits inside a sentence — underlined so it is recognisable as a link without
   relying on colour (WCAG 1.4.1; axe link-in-text-block) */
.ot-devby a, .ot-footer__author a { text-decoration: underline; text-underline-offset: 2px; }
.ot-footer__bottom { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ot-border); font-size: 0.85rem; color: var(--ot-muted); }

/* motion — off when the visitor asks for it */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .ot-btn--primary:hover { transform: none; }
}

/* print — a result prints as a memo, nothing else */
@media print {
  @page { margin: 18mm; }
  body { background: var(--ot-white); color: var(--ot-ink-0); font-size: 11pt; }
  .ot-header, .ot-footer, .ot-form, .ot-hero__actions, .ot-result__actions, .ot-skip, nav { display: none !important; }
  .ot-card, .ot-card--result { box-shadow: none; border: 1px solid var(--ot-field-on-light); break-inside: avoid; }
  .ot-cite { border-color: var(--ot-muted-on-light); background: var(--ot-white); color: var(--ot-ink-0); }
  a { color: var(--ot-ink-0); text-decoration: underline; }
  .ot-print-footer { display: block !important; position: fixed; bottom: 0; left: 0; right: 0; font-size: 8pt; color: var(--ot-text-on-light); }
}
.ot-print-footer { display: none; }

/* author block (CT-1699) — a real photo of the owner, never a stock or generated person (BI-5) */
.ot-author { display: flex; gap: 16px; align-items: flex-start; }
.ot-author__photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--ot-border); }
.ot-author p { margin: 0 0 8px; }
@media (max-width: 480px) { .ot-author { flex-direction: column; } }

/* comparison table (CT-1699 #alternativen): the otatel column is set apart by an ink rule, not by colour */

/* hero proof card: the real engine result */
.ot-proof { background: var(--ot-surface); color: var(--ot-text); border-radius: var(--ot-radius-lg); padding: 20px; box-shadow: var(--ot-shadow-dark); }
.ot-proof__head { font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ot-muted); margin: 0 0 8px; }
.ot-proof__verdict { font-size: var(--ot-step-3); font-weight: 700; line-height: 1.2; margin: 8px 0 12px; }
.ot-proof ul { margin: 0 0 12px; padding-left: 1.1rem; }
.ot-proof li { margin: 4px 0; }
.ot-hero .ot-proof p { color: var(--ot-text); font-size: var(--ot-step--1); }
@media (min-width: 900px) { .ot-trustline { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* V3: editorial hierarchy, task selection and an application workspace.
   Original colour tokens remain the source of truth. No third-party assets, no motion dependency. */
@media screen {
  :root { --ot-maxw: 76rem; --ot-radius: 12px; --ot-radius-lg: 20px; }
  h1, h2, h3 { text-wrap: balance; }
  h2::before { display: none; }
  .ot-container { padding-inline: clamp(20px, 3vw, 40px); }
  .ot-header__inner { min-height: 80px; }
  .ot-nav a { font-size: 0.875rem; font-weight: 500; }
  .ot-header__cta .ot-btn { padding: 12px 20px; }
  .ot-btn { min-height: 46px; padding: 12px 20px; font-size: 0.9rem; font-weight: 650; text-decoration: none; }
  .ot-btn:hover { text-decoration: none; }
  .ot-eyebrow { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em; margin-bottom: 16px; }
  .ot-main { padding-block: 56px 96px; }
  .ot-section { margin-top: 72px; }
  .ot-section > h2, .ot-section__head h2 { font-size: clamp(1.65rem, 2.8vw, 2.4rem); letter-spacing: -0.045em; max-width: 28ch; margin-top: 0; padding: 0; }
  .ot-section__head { margin-bottom: 20px; }
  .ot-section__head > a { font-size: 0.875rem; text-decoration: underline; }
  .ot-card { padding: 28px; box-shadow: none; gap: 16px; }
  .ot-card--question { border-radius: 16px; }
  .ot-card--question h3 { font-size: 1.22rem; letter-spacing: -0.025em; }
  .ot-card--question > p:not(.ot-facts) { color: var(--ot-muted); }
  .ot-card--question .ot-btn { margin-top: auto; }
  .ot-card__category { display: flex; align-items: center; justify-content: space-between; color: var(--ot-muted); font-size: 0.7rem; letter-spacing: 0.1em; font-weight: 700; }
  .ot-card__category svg { width: 22px; height: 22px; }
  .ot-facts { font-family: var(--ot-font); font-size: 0.8rem; border-top: 1px solid var(--ot-border); padding-top: 16px; }
  .ot-page-head { padding: 4px 0 32px; margin-bottom: 28px; }
  .ot-page-head h1 { font-size: clamp(2rem, 3.8vw, 3.4rem); letter-spacing: -0.05em; max-width: 24ch; margin-bottom: 20px; }
  .ot-page-head .ot-lead { color: var(--ot-muted); }
  .ot-container.ot-prose { max-width: 60rem; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 24px; padding: clamp(24px, 5vw, 72px); }
  .ot-prose h2 { padding-top: 24px; border-top: 1px solid var(--ot-border); }
  .ot-prose .ot-lead { max-width: 54ch; }
  .ot-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; list-style: none; padding: 0; }
  .ot-principles li { padding: 24px; border: 1px solid var(--ot-border); border-radius: 14px; background: var(--ot-fill); margin: 0; }
  .ot-toc { background: var(--ot-fill); padding: 24px; border: 0; }
  .ot-toc li { margin-block: 8px; }
  .ot-document-bar { display: flex; gap: 16px; justify-content: space-between; padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--ot-border); font: 600 0.65rem var(--ot-mono); letter-spacing: 0.06em; color: var(--ot-muted); }
  .ot-card--result { padding: clamp(24px, 4vw, 40px); border-top: 3px solid var(--ot-action); }
  .ot-result__head { margin-bottom: 24px; }
  .ot-card--result > h3 { margin-top: 28px; }
  .ot-card--result .ot-kv { padding: 20px 0; border-block: 1px solid var(--ot-border); }
  .ot-home #autor .ot-author { background: var(--ot-surface); border: 1px solid var(--ot-border); padding: clamp(24px, 4vw, 40px); border-radius: 24px; }
  .ot-author { gap: 24px; }
  .ot-author__photo { width: 112px; height: 128px; border-radius: 14px; }
  .ot-home #autor .ot-container > p { margin: 24px 0 0; color: var(--ot-muted); font-size: 0.9rem; }
  #besprechen .ot-lead { color: var(--ot-text); }
  #besprechen p { max-width: 62ch; }
  #besprechen h2 { margin-top: 0; }
  .ot-footer { padding-block: 56px 28px; }
  .ot-form { gap: 24px; }
  .ot-form > .ot-card { padding: clamp(24px, 3vw, 40px); }
  .ot-form h2 { font-size: 1.4rem; letter-spacing: -0.03em; }
  .ot-form input, .ot-form select, .ot-input { min-height: 48px; }
  .ot-check { padding: 12px; border: 1px solid var(--ot-border); border-radius: 12px; background: var(--ot-surface); transition: border-color .15s; }
  .ot-check input { min-height: 0; }
  .ot-check:has(input:checked) { background: var(--ot-action-soft); border-color: var(--ot-action); }
  .ot-check:hover { border-color: var(--ot-field-border); }
  .ot-check:focus-within { outline: 2px solid var(--ot-action); outline-offset: 2px; }
  .ot-form__actions { padding-block: 16px; }
  .ot-steps { gap: 8px; padding: 16px; border: 1px solid var(--ot-border); border-radius: 16px; background: var(--ot-surface); }
  .ot-steps li { background: transparent; border-radius: 10px; flex: 1; white-space: nowrap; }
  .ot-steps li[aria-current="step"] { background: var(--ot-action-soft); color: var(--ot-text); }
  .ot-steps li[aria-current="step"]::before { color: var(--ot-on-action); background: var(--ot-action); border-color: var(--ot-action); }
  .ot-steps li::before { min-width: 28px; height: 28px; }
  .ot-cite { white-space: normal; overflow-wrap: anywhere; }
  .ot-progress { display: block; width: 100%; height: 5px; border: 0; border-radius: 8px; overflow: hidden; background: var(--ot-fill); accent-color: var(--ot-action); }
  .ot-progress::-webkit-progress-bar { background: var(--ot-fill); }
  .ot-progress::-webkit-progress-value { background: var(--ot-action); }
  .ot-progress::-moz-progress-bar { background: var(--ot-action); }
}
@media screen and (max-width: 899px) {
  .ot-section { margin-top: 56px; }
}
@media screen and (max-width: 719px) {
  .ot-header__inner { flex-wrap: wrap; gap: 8px 12px; min-height: 68px; padding-block: 12px 8px; }
  .ot-brand { font-size: 1.25rem; }
  .ot-brand__mark { width: 28px; height: 28px; }
  .ot-nav { order: 3; flex: 1 0 100%; gap: 0; justify-content: space-between; padding-block: 4px; }
  .ot-nav a { padding: 8px 8px; }
  .ot-header__cta { margin-left: auto; }
  .ot-header__cta .ot-btn { min-height: 40px; font-size: 0.78rem; padding: 8px 12px; }
  .ot-principles { grid-template-columns: 1fr; }
  .ot-page-head h1 { font-size: 2rem; }
  .ot-steps { padding: 12px; gap: 4px; }
  .ot-steps li { flex: 0 1 auto; }
  .ot-form__actions > .ot-btn { flex: 1 1 auto; }
  :target { scroll-margin-top: 132px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes ot-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}

/* Progressive visual explanation: native disclosure, vector icons, no script. */
@media screen {
  .ot-icon { width: 28px; height: 28px; flex: 0 0 28px; }
  .ot-deadline-flow { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block: 24px; }
  .ot-deadline-flow li { border: 1px solid var(--ot-border); border-radius: 14px; padding: 20px; background: var(--ot-surface); }
  .ot-deadline-flow strong { display: block; font: 600 1.8rem var(--ot-font); letter-spacing: -.04em; color: var(--ot-action); margin-bottom: 12px; }
  .ot-deadline-flow span { font-size: .85rem; display: block; }
  .ot-deadline-flow small { display: block; color: var(--ot-muted); margin-top: 8px; }
}
@media screen and (max-width: 719px) {
  .ot-deadline-flow { grid-template-columns: 1fr; gap: 12px; }
  .ot-deadline-flow li { display: grid; grid-template-columns: 90px 1fr; gap: 4px 12px; align-items: center; }
  .ot-deadline-flow strong { grid-row: span 2; font-size: 1.5rem; margin: 0; }
  .ot-deadline-flow small { margin: 0; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .ot-card--question, .ot-btn { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
  .ot-card--question:hover { transform: translateY(-3px); }
  .ot-btn:active { transform: translateY(1px); }
  @keyframes ot-flow-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @supports (animation-timeline: view()) {
    @keyframes ot-soft-arrive { from { transform: translateY(14px); } to { transform: none; } }
  }
}

/* D-42 · Information architecture expressed as diagrams. HTML carries every label;
   geometry is decorative, local and readable with motion disabled. */
@media screen {
  .ot-home .ot-section { margin-top: 96px; }
  .ot-home .ot-band h2, .ot-home .ot-section__head h2 { font-size: clamp(1.85rem, 3.2vw, 2.8rem); max-width: 24ch; }
  .ot-kicker { display: block; font: 600 .65rem var(--ot-mono); letter-spacing: .09em; color: var(--ot-muted); }
  .ot-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .ot-review-grid > p { margin: 0; padding: 24px; display: grid; gap: 16px; border: 1px solid var(--ot-border); border-radius: 12px; font-size: .88rem; color: var(--ot-muted); background: var(--ot-fill); }
  .ot-review-index { font: 600 .8rem var(--ot-mono); color: var(--ot-text); }
  .ot-page-head--graphic { position: relative; padding: 40px; overflow: hidden; background: var(--ot-action-soft); border: 1px solid var(--ot-border); border-radius: 24px; isolation: isolate; }
  .ot-page-head--graphic::after { content: ''; position: absolute; width: 320px; height: 320px; right: -190px; top: -100px; border: 1px solid var(--ot-field-border); border-radius: 50%; box-shadow: 0 0 0 35px var(--ot-action-soft), 0 0 0 36px var(--ot-border), 0 0 0 70px var(--ot-action-soft), 0 0 0 71px var(--ot-border); z-index: -1; }
  .ot-page-head--graphic h1 { max-width: 19ch; }
  .ot-page-head--graphic .ot-lead { max-width: 48ch; }
  .ot-catalog-map { counter-reset: tool-card; }
  .ot-catalog-map .ot-card { counter-increment: tool-card; position: relative; border-radius: 18px; border-top: 3px solid var(--ot-text); }
  .ot-catalog-map .ot-card__category::before { content: '0' counter(tool-card); font: 500 1.5rem var(--ot-mono); color: var(--ot-muted); margin-right: auto; }
  .ot-catalog-map .ot-card__category { gap: 20px; }
  .ot-reference-page .ot-container.ot-prose { max-width: 76rem; padding: 0 clamp(20px, 3vw, 40px); border: 0; background: none; border-radius: 0; }
  .ot-reference-page .ot-prose > p { max-width: 74ch; }
  .ot-reference-page .ot-prose > h2 { font-size: clamp(1.5rem, 2.5vw, 2rem); letter-spacing: -.035em; margin-top: 72px; padding-top: 32px; }
  .ot-reference-page .ot-prose > h3 { margin-top: 32px; }
  .ot-chapter-nav { padding: 28px; border: 1px solid var(--ot-border); border-radius: 18px; background: var(--ot-surface); }
  .ot-chapter-nav ol { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 32px; counter-reset: chapter; list-style: none; padding: 0; margin: 0; }
  .ot-chapter-nav li { counter-increment: chapter; margin: 0; border-bottom: 1px solid var(--ot-border); }
  .ot-chapter-nav li a { display: flex; align-items: baseline; gap: 16px; font-size: .85rem; padding: 16px 0; }
  .ot-chapter-nav li a::before { content: '0' counter(chapter); font: .7rem var(--ot-mono); color: var(--ot-muted); }
  .ot-reference-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; list-style: none; padding: 0; }
  .ot-reference-cards > li { background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 14px; padding: 24px 24px; margin: 0; font-size: .93rem; line-height: 1.7; }
  .ot-reference-cards > li > strong:first-child { display: block; margin-bottom: 8px; }
  .ot-reference-page .ot-prose > .ot-reading-flow { counter-reset: reading; padding: 0 0 0 24px; list-style: none; border-left: 1px solid var(--ot-field-border); margin-left: 16px; }
  .ot-reference-page .ot-prose > .ot-reading-flow > li { counter-increment: reading; position: relative; padding: 20px 28px; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: 14px; margin-block: 12px; font-size: .93rem; }
  .ot-reference-page .ot-prose > .ot-reading-flow > li::before { content: counter(reading); position: absolute; left: -39px; top: 22px; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ot-text); color: var(--ot-bg); border-radius: 50%; font: .75rem var(--ot-mono); }
  .ot-evidence-map { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-block: 28px; }
  .ot-evidence-map article { border-top: 2px solid var(--ot-field-border); padding: 24px 20px; background: var(--ot-surface); border-radius: 0 0 16px 16px; position: relative; }
  .ot-evidence-number { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ot-field-border); border-radius: 50%; font: 1rem var(--ot-mono); }
  .ot-evidence-map h3 { font-size: 1.1rem; margin-block: 24px 12px; }
  .ot-evidence-map p { min-height: 3.5em; font-size: .9rem; }
  .ot-evidence-map dl { font-size: .8rem; padding-top: 12px; border-top: 1px solid var(--ot-border); }
  .ot-evidence-map dt { font-weight: 600; margin-top: 16px; }
  .ot-evidence-map dd { margin: 4px 0 0; color: var(--ot-muted); }
  .ot-evidence-map article:last-child { border-color: var(--ot-warn); background: var(--ot-warn-soft); }
  .ot-about .ot-author { padding: 32px; border: 1px solid var(--ot-border); background: var(--ot-surface); border-radius: 20px; }
}
@media screen and (max-width: 1023px) {
  .ot-evidence-map { grid-template-columns: 1fr 1fr; }
}
@media screen and (max-width: 719px) {
  .ot-home .ot-section { margin-top: 72px; }
  .ot-reference-page .ot-prose > h2 { margin-top: 56px; }
  .ot-page-head--graphic { padding: 28px 24px; }
  .ot-evidence-map { grid-template-columns: 1fr; }
  .ot-evidence-map p { min-height: 0; }
  .ot-chapter-nav { padding: 24px; }
}
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes ot-geometry-arrive { from { transform: translateY(-8px); } to { transform: none; } }
  @supports (animation-timeline: view()) {
  }
}

/* OTB-04 · /termin booker — structure of HADBA app.hadba.net/business (info | month | times; the form replaces
   month + times), in otatel tokens only. Petrol where one can act (open days, times, the one primary button). */
.ot-booker-wrap [hidden], .ot-booker[hidden] { display: none !important; }
.ot-booker-intro { max-width: 46rem; margin: 0; text-align: left; }
.ot-booker-intro h1 { max-width: none; }
.ot-booker-intro .ot-lead { margin: var(--ot-space-4) 0 0; color: var(--ot-muted); }
.ot-booker-wrap { min-height: 560px; }
.ot-booker { max-width: 60rem; margin: 0 auto; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg); display: grid; grid-template-columns: 1fr; overflow: hidden; }
.ot-booker h2 { margin: 0; padding: 0; font-size: var(--ot-step-1); }
.ot-booker h2::before { display: none; }
.ot-booker__info { padding: 24px; border-bottom: 1px solid var(--ot-border); }
.ot-booker__event { font-size: var(--ot-step-2) !important; line-height: 1.25; }
.ot-booker__sub { color: var(--ot-muted); font-size: var(--ot-step--1); margin: 8px 0 16px; }
.ot-booker__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; color: var(--ot-muted); font-size: var(--ot-step--1); }
.ot-booker__facts li { display: flex; gap: 8px; align-items: flex-start; }
.ot-booker__facts svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.ot-booker__picked { color: var(--ot-text); font-weight: 600; padding-top: 12px; border-top: 1px solid var(--ot-border); }
.ot-booker__picked svg { color: var(--ot-action); }
.ot-booker__local { display: block; font-weight: 400; color: var(--ot-muted); font-size: 0.8rem; }
.ot-booker__pick { display: grid; grid-template-columns: 1fr; }
.ot-booker__month { padding: 24px; }
.ot-booker__monthhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ot-booker__monthname { font-weight: 700; margin: 0; }
.ot-booker__nav { display: flex; gap: 8px; }
.ot-booker__arrow { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: var(--ot-surface); color: var(--ot-text); cursor: pointer; }
.ot-booker__arrow svg { width: 18px; height: 18px; }
.ot-booker__arrow:hover:not(:disabled) { border-color: var(--ot-action); color: var(--ot-action); }
.ot-booker__arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.ot-booker__grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.ot-booker__grid th { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ot-muted); padding: 4px 0; text-align: center; }
.ot-booker__grid td { padding: 0; text-align: center; height: 44px; }
.ot-booker__day { position: relative; width: 100%; height: 44px; border: 0; border-radius: var(--ot-radius); background: transparent; color: var(--ot-muted); font: inherit; font-weight: 700; font-size: 0.9rem; cursor: not-allowed; opacity: 0.55; }
.ot-booker__day.is-open { background: var(--ot-action-soft); color: var(--ot-action); cursor: pointer; opacity: 1; }
.ot-booker__day.is-open:hover { outline: 2px solid var(--ot-action); outline-offset: -2px; }
.ot-booker__grid td[aria-selected="true"] .ot-booker__day { background: var(--ot-action); color: var(--ot-on-action); }
.ot-booker__day[aria-current="date"]::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
.ot-booker__skel { display: block; height: 44px; border-radius: var(--ot-radius); background: var(--ot-fill); }
.ot-booker__skel--slot { height: 42px; margin-bottom: 8px; }
.ot-booker__times { padding: 24px; border-top: 1px solid var(--ot-border); }
.ot-booker__dayhead { font-weight: 700; font-size: var(--ot-step--1); margin: 0 0 12px; }
.ot-booker__slots { display: grid; gap: 8px; max-height: 21rem; overflow-y: auto; padding-right: 2px; }
.ot-booker__slot { min-height: 42px; border: 1px solid var(--ot-field-border); border-radius: var(--ot-radius); background: var(--ot-surface); color: var(--ot-action); font: inherit; font-weight: 700; cursor: pointer; }
.ot-booker__slot:hover { border-color: var(--ot-action); background: var(--ot-action-soft); }
.ot-booker__empty, .ot-booker__msg { font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-booker__msg { color: var(--ot-text); border-left: 3px solid var(--ot-warn); background: var(--ot-warn-soft); padding: 8px 12px; border-radius: 6px; }
.ot-booker__form { padding: 24px; }
.ot-booker__back { display: inline-flex; gap: 8px; align-items: center; border: 0; background: none; color: var(--ot-muted); font: inherit; font-weight: 600; font-size: var(--ot-step--1); cursor: pointer; padding: 0; margin-bottom: 16px; }
.ot-booker__back:hover { color: var(--ot-text); }
.ot-booker__back svg { width: 16px; height: 16px; }
.ot-booker__summary { color: var(--ot-muted); margin: 4px 0 16px; }
.ot-booker__fields { display: grid; gap: 8px; max-width: 34rem; }
.ot-booker__fields textarea.ot-input { resize: vertical; min-height: 6rem; }
.ot-booker__fields .ot-error[hidden] { display: none; }
.ot-booker__fields .ot-form__actions { margin-top: 12px; }
.ot-booker__formmsg { color: var(--ot-error); font-size: var(--ot-step--1); margin: 8px 0 0; }
.ot-booker__foot { grid-column: 1 / -1; margin: 0; padding: 12px 24px; border-top: 1px solid var(--ot-border); font-size: 0.78rem; color: var(--ot-muted); }
.ot-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ot-booker-done { max-width: 40rem; margin: 0 auto; background: var(--ot-surface); border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg); padding: 32px 28px; text-align: center; }
.ot-booker-done h2 { margin: 12px 0 8px; padding: 0; }
.ot-booker-done h2::before { display: none; }
.ot-booker-done__mark { width: 64px; height: 64px; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--ot-success-soft); color: var(--ot-success); }
.ot-booker-done__mark svg { width: 36px; height: 36px; }
.ot-booker-done__lead { color: var(--ot-muted); max-width: 30rem; margin: 0 auto 20px; }
.ot-booker-done__facts { margin: 0 0 20px; text-align: left; border-top: 1px solid var(--ot-border); }
.ot-booker-done__facts > div { display: grid; grid-template-columns: 6rem 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ot-border); }
.ot-booker-done__facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-muted); padding-top: 3px; }
.ot-booker-done__facts dd { margin: 0; font-weight: 600; }
.ot-booker-done__addhead { font-weight: 700; font-size: var(--ot-step--1); margin-bottom: 8px; }
.ot-booker-done__links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.ot-booker-done__links .ot-btn { min-height: 40px; padding: 8px 16px; }
@media (min-width: 720px) {
  .ot-booker__pick { grid-template-columns: minmax(0, 1fr) 13rem; }
  .ot-booker__times { border-top: 0; border-left: 1px solid var(--ot-border); }
}
@media (min-width: 960px) {
  .ot-booker { grid-template-columns: 15.5rem minmax(0, 1fr); }
  .ot-booker__info { border-bottom: 0; border-right: 1px solid var(--ot-border); }
}
/* OTB-06 · /intern/termine — plain, one primary action per page */
.ot-booker-admin__notice { border-left: 3px solid var(--ot-success); background: var(--ot-success-soft); padding: 12px 16px; border-radius: 6px; }
.ot-booker-admin__error { border-left: 3px solid var(--ot-error); background: var(--ot-fill); color: var(--ot-text); padding: 12px 16px; border-radius: 6px; }
.ot-booker-admin__error ul { margin: 8px 0 0; }
.ot-booker-admin__week { display: grid; gap: 8px; }
.ot-booker-admin__day { display: grid; grid-template-columns: 1fr; gap: 8px; align-items: end; padding: 8px 0; border-bottom: 1px solid var(--ot-border); }
.ot-booker-admin__fieldset { border: 1px solid var(--ot-border); border-radius: var(--ot-radius); padding: 12px 16px; }
.ot-booker-admin__probe li { margin: 4px 0; }
@media (min-width: 720px) { .ot-booker-admin__day { grid-template-columns: 12rem 9rem 9rem; } }

/* CT-1835 · /zusammenarbeit: scope · result · duration per way */
.ot-coop .ot-card { gap: 12px; }
.ot-coop h3 { margin: 0; }
.ot-coop__facts { margin: 0; display: grid; gap: 4px; font-size: 0.95rem; }
.ot-coop__facts dt { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ot-muted); margin-top: 8px; }
.ot-coop__facts dd { margin: 0; }

/* CT-1836 · /fristen: the consent text stands at the button */
.ot-fristen { max-width: 34rem; }
.ot-fristen__topics { border: 1px solid var(--ot-border); border-radius: var(--ot-radius); padding: 12px 16px; }
.ot-fristen__topics legend { font-weight: 600; padding: 0 4px; }
.ot-fristen__consent { font-size: var(--ot-step--1); background: var(--ot-fill); border-left: 3px solid var(--ot-text); padding: 12px 12px; border-radius: 6px; margin: 4px 0 0; }

/* CT-1837 · share a result by link (no storage) */
.check-share { flex-basis: 100%; display: grid; gap: 4px; justify-items: start; margin-top: 8px; }
.check-share .ot-small { margin: 0; overflow-wrap: anywhere; }
.check-share-loaded form { margin-top: 12px; }
.check-share-loaded { flex-direction: column; }

/* ── CT-1847 (OTD-03, D-62) · Domains: blue = NIS2 (the company), violet = CRA (the product) ─────────────────
   An element with data-domain (or one of its bands) resolves --ot-domain* from its band, so the contrast is right
   on black and on light bands alike. Colour is never alone: every domain surface also shows its icon family
   (NIS2: building, siren, link, checks · CRA: box, layers, file-sign, cpu, router) and its name. */
[data-domain="nis2"], [data-domain="nis2"] :is(.ot-band--ink, .ot-band--coal, .ot-band--paper, .ot-header, .ot-footer, .ot-hero, .ot-page-head, .check-entry, .cra-intro) {
  --ot-domain: var(--ot-nis2-fg); --ot-domain-strong: var(--ot-nis2-strong); --ot-domain-soft: var(--ot-nis2-soft);
}
[data-domain="cra"], [data-domain="cra"] :is(.ot-band--ink, .ot-band--coal, .ot-band--paper, .ot-header, .ot-footer, .ot-hero, .ot-page-head, .check-entry, .cra-intro) {
  --ot-domain: var(--ot-cra-fg); --ot-domain-strong: var(--ot-cra-strong); --ot-domain-soft: var(--ot-cra-soft);
}
.ot-domain-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; font: 600 var(--ot-step--1)/1.2 var(--ot-font); letter-spacing: 0; text-transform: none;
  color: var(--ot-domain, var(--ot-muted)); background: var(--ot-domain-soft, var(--ot-fill)); border: 1px solid color-mix(in srgb, var(--ot-domain, var(--ot-muted)) 35%, transparent); white-space: nowrap; }
.ot-domain-chip .ot-icon { width: 14px; height: 14px; flex-basis: 14px; }
.ot-icon-tile { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; color: var(--ot-domain, var(--ot-text)); background: var(--ot-domain-soft, var(--ot-fill)); }
.ot-icon-tile .ot-icon { width: 22px; height: 22px; }
.ot-card[data-domain], [data-domain] > .ot-card--question, .ot-route[data-domain] { border-top: 3px solid var(--ot-domain); }
.ot-btn--domain { background: var(--ot-domain-strong, var(--ot-action)); color: var(--ot-white); border-color: transparent; }
.ot-btn--domain:hover { background: color-mix(in srgb, var(--ot-domain-strong, var(--ot-action)) 84%, var(--ot-ink-0)); color: var(--ot-white); text-decoration: none; }
/* the app primary action in NIS2 / CRA is the domain button; the header and footer stay neutral (logo mint) */
body[data-domain] .ot-main .ot-btn--primary { background: var(--ot-domain-strong); color: var(--ot-white); }
body[data-domain] .ot-main .ot-btn--primary:hover { background: color-mix(in srgb, var(--ot-domain-strong) 84%, var(--ot-ink-0)); color: var(--ot-white); }

/* ── CT-1848 (OTD-04, D-63) · Bands, colour washes ("Aquarell") and watermark motifs ──────────────────────────
   A page is a sequence of full-width bands that alternate black (.ot-band--ink / --coal) and light (--paper),
   so sections are visibly apart (Williams: contrast — clearly different or the same). Two quiet layers per band,
   never over a text column: a soft colour field (.ot-wash, ::after) and a line motif (.ot-motif + data-motif,
   ::before) drawn as a CSS mask in the band's text colour at 5–6 % — one SVG per motif works on every band and
   scheme. Motifs: shared/brand/motifs/ (built by ops/brand/build-motifs.mjs from the Lucide sprite). */
.ot-band { position: relative; isolation: isolate; overflow: hidden; padding-block: var(--ot-space-10); }
.ot-band > .ot-container { position: relative; z-index: 1; }
.ot-band--coal + .ot-band--ink, .ot-band--ink + .ot-band--coal { border-top: 1px solid var(--ot-border); }
@media (max-width: 1099px) { .ot-band { padding-block: var(--ot-space-9); } }
@media (max-width: 719px) { .ot-band { padding-block: var(--ot-space-8); } }
.ot-wash { --ot-wash-a: 20%; --ot-wash-x: 88%; --ot-wash-y: 6%; --ot-wash-c: var(--ot-brand); }
.ot-band--paper.ot-wash { --ot-wash-a: 10%; }
.ot-wash::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(640px 420px at var(--ot-wash-x) var(--ot-wash-y), color-mix(in srgb, var(--ot-wash-c) var(--ot-wash-a), transparent), transparent 72%); }
.ot-wash--brand { --ot-wash-c: var(--ot-brand); }
.ot-wash--nis2 { --ot-wash-c: var(--ot-nis2); }
.ot-wash--cra { --ot-wash-c: var(--ot-cra); }
.ot-wash--left { --ot-wash-x: 8%; --ot-wash-y: 4%; }
.ot-wash--split::after { background:
  radial-gradient(560px 420px at 14% 28%, color-mix(in srgb, var(--ot-nis2) var(--ot-wash-a), transparent), transparent 72%),
  radial-gradient(560px 420px at 86% 28%, color-mix(in srgb, var(--ot-cra) var(--ot-wash-a), transparent), transparent 72%); }
.ot-wash--hero::after { background:
  radial-gradient(620px 440px at 92% 0%, color-mix(in srgb, var(--ot-brand) 22%, transparent), transparent 72%),
  radial-gradient(420px 320px at 58% 78%, color-mix(in srgb, var(--ot-nis2) 18%, transparent), transparent 72%),
  radial-gradient(420px 320px at 96% 82%, color-mix(in srgb, var(--ot-cra) 18%, transparent), transparent 72%); }
.ot-motif::before { content: ""; position: absolute; z-index: 0; pointer-events: none; right: -40px; top: 48px; width: 520px; height: 520px;
  background: var(--ot-text); opacity: 0.05; -webkit-mask: var(--ot-motif) no-repeat center / contain; mask: var(--ot-motif) no-repeat center / contain; }
.ot-band--paper.ot-motif::before { opacity: 0.06; }
.ot-motif--left::before { right: auto; left: -40px; }
[data-motif="ring"] { --ot-motif: url("motifs/ring.svg"); }
[data-motif="document"] { --ot-motif: url("motifs/document.svg"); }
[data-motif="paths"] { --ot-motif: url("motifs/paths.svg"); }
[data-motif="steps"] { --ot-motif: url("motifs/steps.svg"); }
[data-motif="org"] { --ot-motif: url("motifs/org.svg"); }
[data-motif="product"] { --ot-motif: url("motifs/product.svg"); }
[data-motif="scale"] { --ot-motif: url("motifs/scale.svg"); }
[data-motif="people"] { --ot-motif: url("motifs/people.svg"); }
[data-motif="calendar"] { --ot-motif: url("motifs/calendar.svg"); }
@media (max-width: 719px) { .ot-motif::before { width: 320px; height: 320px; top: auto; bottom: -40px; right: -60px; } }
@media (max-width: 479px) { .ot-motif::before { display: none; } }
/* inner pages: an ink head band, the content on paper; the ink footer closes the page */
.ot-main--bands { padding: 0; }
.ot-page-band { padding-block: var(--ot-space-9) var(--ot-space-8); }
.ot-page-band .ot-page-head { margin: 0; padding: 0; border: 0; background: none; }
.ot-page-band .ot-page-head h1 { color: var(--ot-text); }
.ot-page-band .ot-page-head .ot-lead { color: var(--ot-muted); }
.ot-page-body { padding-block: var(--ot-space-8) var(--ot-space-10); }
@media print { .ot-band { padding-block: 0; } .ot-wash::after, .ot-motif::before { display: none; } }
.ot-page-band .ot-page-head--graphic::after { display: none; }
.ot-page-band.ot-motif::before { width: 300px; height: 300px; top: 50%; transform: translateY(-50%); }
@media screen and (max-width: 719px) { .ot-review-grid, .ot-reference-cards, .ot-chapter-nav ol { grid-template-columns: 1fr; } }
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .ot-evidence-map > article { animation: ot-soft-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 85%; }
  }
}

/* ── CT-1849 (OTD-05, D-64) · Home I: hero diagram, result card, trust bar, "Eine Antwort" ─────────────────── */
.ot-hero.ot-band { padding-block: var(--ot-space-10) 0; }
.ot-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--ot-space-8); row-gap: var(--ot-space-7); align-items: center; }
/* A child without its own placement spans the full row instead of collapsing into one 1/12 track
   (2026-10-07: NIS2 /check/betroffenheit rendered its heading 46 px wide, one letter per line). */
.ot-hero__grid > * { grid-column: 1 / -1; min-width: 0; }
.ot-hero__text { grid-column: 1 / span 6; }
.ot-hero-diagram { grid-column: 7 / span 6; min-width: 0; }
.ot-hero .ot-eyebrow { margin-bottom: var(--ot-space-4); }
.ot-hero h1 { font-size: clamp(2.6rem, 4.6vw, 4.25rem); line-height: 1.04; letter-spacing: -0.035em; max-width: 14ch; margin: 0; }
.ot-hero h1 span { color: var(--ot-link); }
.ot-hero__lead { margin: var(--ot-space-5) 0 0; font-size: var(--ot-step-1); line-height: 1.6; color: var(--ot-text); max-width: 42ch; }
.ot-hero .ot-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ot-space-3) var(--ot-space-5); margin-top: var(--ot-space-6); }
.ot-hero__actions .ot-btn--primary { min-height: 52px; padding-inline: var(--ot-space-5); }
.ot-hero__second { display: inline-flex; align-items: center; gap: var(--ot-space-2); color: var(--ot-text); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.ot-hero__second:hover { color: var(--ot-link); }
.ot-hero .ot-hero__micro { margin: var(--ot-space-5) 0 0; font-size: var(--ot-step--1); color: var(--ot-muted); }
/* the diagram: two domain nodes join in the rule node, which leads into the result card */
.ot-hero-diagram__nodes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ot-node { display: flex; align-items: center; gap: var(--ot-space-3); min-height: 76px; padding: var(--ot-space-3) var(--ot-space-4); border-radius: 16px;
  background: var(--ot-ink-2); border: 1px solid color-mix(in srgb, var(--ot-domain) 45%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ot-domain) 30%, transparent), 0 18px 48px -18px color-mix(in srgb, var(--ot-domain) 60%, transparent); }
.ot-node .ot-icon-tile { width: 40px; height: 40px; flex-basis: 40px; }
.ot-node__text { display: grid; line-height: 1.2; }
.ot-node__text small { font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-node__text b { font-size: var(--ot-step-1); color: var(--ot-text); letter-spacing: 0.02em; }
.ot-hero-diagram__links { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke-width: 2; stroke-linecap: round; }
.ot-link-nis2 { stroke: var(--ot-nis2-fg); }
.ot-link-cra { stroke: var(--ot-cra-fg); }
.ot-link-out { stroke: var(--ot-brand); }
.ot-link-node { fill: var(--ot-ink-0); stroke: var(--ot-brand); }
.ot-link-glyph { fill: var(--ot-brand); stroke: none; font: 700 22px var(--ot-font); }
@media (prefers-reduced-motion: no-preference) {
  .ot-link-nis2, .ot-link-cra { stroke-dasharray: 4 8; animation: ot-flow 6s linear infinite; }
  @keyframes ot-flow { to { stroke-dashoffset: -120; } }
}
/* the result card: light glass on black, chips and figures instead of paragraphs */
.ot-result-card { padding: var(--ot-space-5); border-radius: var(--ot-radius-lg); border: 1px solid var(--ot-border);
  background: color-mix(in srgb, var(--ot-ink-2) 92%, var(--ot-white));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ot-brand) 25%, transparent), 0 24px 60px -24px color-mix(in srgb, var(--ot-brand) 35%, transparent); }
.ot-result-card__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ot-space-3); flex-wrap: wrap; }
.ot-result-card__version { font: var(--ot-step--1) var(--ot-mono); color: var(--ot-muted); }
.ot-result-flow { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1.2fr); align-items: center; gap: var(--ot-space-3); margin-top: var(--ot-space-5); }
.ot-result-flow__step { display: grid; gap: var(--ot-space-2); justify-items: start; min-width: 0; }
.ot-result-flow__label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-muted); }
.ot-result-flow__inputs { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ot-chip-sm { display: inline-block; padding: 3px 8px; border-radius: 8px; background: var(--ot-fill); border: 1px solid var(--ot-border); font-size: 0.8rem; line-height: 1.35; color: var(--ot-text); }
.ot-result-flow__arrow { color: var(--ot-muted); }
.ot-cite--rule { font-size: 0.85rem; padding: 4px 12px; white-space: nowrap; }
.ot-cite--rule::before { content: "\00a7\00a0"; color: var(--ot-link); }
.ot-result-flow__verdict { margin: 0; padding-left: var(--ot-space-3); border-left: 4px solid var(--ot-domain); font-size: 1.5rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--ot-text); }
.ot-result-flow__size { padding-left: var(--ot-space-4); font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-result-card__review { display: flex; align-items: center; gap: var(--ot-space-3); margin: var(--ot-space-5) 0 0; padding-top: var(--ot-space-4); border-top: 1px solid var(--ot-border); font-size: var(--ot-step--1); color: var(--ot-text); }
.ot-count { display: inline-grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%; background: var(--ot-warn); color: var(--ot-ink-0); font-weight: 800; font-size: 0.85rem; }
.ot-result-card__link { display: inline-flex; align-items: center; gap: var(--ot-space-2); margin-top: var(--ot-space-4); font-weight: 700; color: var(--ot-link); }
/* trust bar: last row of the hero, four equal parts divided by lines */
.ot-hero .ot-trustline { list-style: none; margin: 72px 0 0; padding: 20px 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ot-border); font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-hero .ot-trustline li { display: flex; align-items: center; gap: var(--ot-space-2); padding: 4px var(--ot-space-4); }
.ot-hero .ot-trustline li + li { border-left: 1px solid var(--ot-border); }
.ot-hero .ot-trustline li:first-child { padding-left: 0; }
.ot-hero .ot-trustline .ot-icon { color: var(--ot-brand); }
@media (max-width: 899px) {
  .ot-hero.ot-band { padding-top: 72px; }
  .ot-hero__grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .ot-hero__text, .ot-hero-diagram { grid-column: 1; }
  .ot-hero .ot-trustline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--ot-space-3); margin-top: var(--ot-space-8); }
  .ot-hero .ot-trustline li:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 599px) {
  .ot-result-flow { grid-template-columns: 1fr; justify-items: start; }
  .ot-result-flow__arrow { transform: rotate(90deg); }
  .ot-hero .ot-trustline { grid-template-columns: 1fr; }
  .ot-hero .ot-trustline li { border-left: 0; padding-left: 0; }
  .ot-node { min-height: 64px; padding: var(--ot-space-2) var(--ot-space-3); }
}
/* band head: kicker, h2, lead on one left edge (Williams: alignment); head to content 40 px */
.ot-band__head { max-width: 46rem; margin-bottom: var(--ot-space-7); }
.ot-band__head .ot-eyebrow { margin-bottom: var(--ot-space-3); }
.ot-band__head h2 { margin: 0; padding: 0; font-size: clamp(1.85rem, 3.2vw, 2.8rem); max-width: 24ch; }
.ot-band__head h2::before { display: none; }
.ot-band__head .ot-lead { margin: var(--ot-space-4) 0 0; max-width: 62ch; color: var(--ot-muted); }
@media (max-width: 719px) { .ot-band__head { margin-bottom: var(--ot-space-6); } .ot-band__head .ot-lead { margin-top: var(--ot-space-3); } }
/* "Eine Antwort": three equal cards, each opened by a small diagram (no stock picture, BI-1) */
.ot-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ot-space-5); align-items: stretch; }
.ot-insight-card { display: flex; flex-direction: column; padding: var(--ot-space-6); border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); }
.ot-insight-card h3 { margin: var(--ot-space-2) 0; font-size: 1.35rem; letter-spacing: -0.02em; }
.ot-insight-card p { margin: 0; color: var(--ot-muted); }
.ot-kicker { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-muted); }
.ot-insight-art { display: block; width: 100%; height: 120px; margin-bottom: var(--ot-space-5); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ot-art-line { stroke: var(--ot-field-border); stroke-width: 2; }
.ot-art-dot { fill: var(--ot-text); }
.ot-art-ring { fill: var(--ot-surface); stroke: var(--ot-link); stroke-width: 3; }
.ot-art-ring--plain { stroke: var(--ot-field-border); stroke-width: 2; }
.ot-art-glyph { fill: var(--ot-link); font: 700 22px var(--ot-font); }
.ot-art-fill { fill: var(--ot-text); }
.ot-art-label { fill: var(--ot-muted); font: 12px var(--ot-font); }
.ot-art-paper { fill: var(--ot-surface); stroke: var(--ot-field-border); stroke-width: 1.5; }
.ot-art-chip { fill: var(--ot-action-soft); stroke: var(--ot-link); stroke-width: 1; }
.ot-art-chiptext { fill: var(--ot-link); font: 700 11px var(--ot-font); }
.ot-art-diamond { fill: var(--ot-action-soft); stroke: var(--ot-link); stroke-width: 2; }
@media (max-width: 899px) { .ot-insight-grid { grid-template-columns: 1fr; } .ot-insight-card { padding: var(--ot-space-5); } }

/* ── CT-1850 (OTD-06, D-65) · Home II: comparison, steps, checks NIS2 | CRA, proof, audiences, FAQ ────────────
   Rule (DESIGN-SYSTEM.md): a <details> only INSIDE a framed container and never as navigation or call to action —
   what the visitor should do is a visible button (Krug: obviously clickable). */
.ot-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.ot-band__more { margin: var(--ot-space-7) 0 0; }
/* comparison table (desktop) / open cards (phone) */
.ot-compare-wrap { border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg); background: var(--ot-surface); overflow-x: auto; }
.ot-compare { width: 100%; border-collapse: collapse; font-size: var(--ot-step--1); }
.ot-compare th, .ot-compare td { padding: var(--ot-space-4) 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ot-border); }
.ot-compare thead th { font-weight: 700; color: var(--ot-text); }
.ot-compare__groups th { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ot-muted); padding-bottom: var(--ot-space-2); border-bottom: 0; }
.ot-compare tbody th[scope="row"] { font-weight: 700; color: var(--ot-text); white-space: nowrap; }
.ot-compare td { color: var(--ot-muted); }
.ot-compare .is-own { background: color-mix(in srgb, var(--ot-brand) 10%, transparent); color: var(--ot-text); }
.ot-compare thead tr:first-child .is-own { border-top: 3px solid var(--ot-brand); }
.ot-compare__own { display: inline-flex; align-items: center; gap: var(--ot-space-2); }
.ot-compare__own .ot-brand__mark, .ot-compare-card .ot-brand__mark { width: 16px; height: 16px; color: var(--ot-link); }
.ot-compare__action td { border-bottom: 0; }
.ot-compare tfoot td { border-bottom: 0; color: var(--ot-muted); font-size: 14px; }
.ot-compare tfoot .ot-icon { margin-right: var(--ot-space-2); }
.ot-compare-cards { display: none; }
@media (max-width: 899px) {
  .ot-compare-wrap { display: none; }
  .ot-compare-cards { display: grid; gap: var(--ot-space-4); }
  .ot-compare-card { padding: var(--ot-space-5); border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); }
  .ot-compare-card.is-own { border-top: 3px solid var(--ot-brand); background: color-mix(in srgb, var(--ot-brand) 8%, var(--ot-surface)); }
  .ot-compare-card h3 { display: flex; align-items: center; gap: var(--ot-space-2); margin: 0 0 var(--ot-space-1); font-size: var(--ot-step-1); }
  .ot-compare-card dl { margin: var(--ot-space-4) 0 0; display: grid; gap: var(--ot-space-1) var(--ot-space-4); grid-template-columns: minmax(0, 9rem) 1fr; font-size: var(--ot-step--1); }
  .ot-compare-card dt { font-weight: 700; }
  .ot-compare-card dd { margin: 0; color: var(--ot-muted); }
  .ot-compare-card .ot-btn { margin-top: var(--ot-space-5); }
  .ot-compare-cards__foot { margin: 0; color: var(--ot-muted); font-size: 14px; }
}
/* steps: numbered circles, the connecting line runs BETWEEN the circles */
.ot-flowsteps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ot-space-6); }
.ot-flowsteps li { position: relative; }
.ot-flowsteps li:not(:last-child)::after { content: ""; position: absolute; top: 28px; left: calc(56px + 16px); right: -16px; height: 2px;
  background: linear-gradient(90deg, var(--ot-link), color-mix(in srgb, var(--ot-link) 25%, transparent)); }
.ot-flowsteps__num { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--ot-link); background: var(--ot-surface); color: var(--ot-link); font-weight: 700; font-size: 1.25rem; }
.ot-flowsteps h3 { display: flex; align-items: center; gap: var(--ot-space-2); margin: 20px 0 var(--ot-space-2); font-size: var(--ot-step-1); }
.ot-flowsteps h3 .ot-icon { color: var(--ot-muted); }
.ot-flowsteps p { margin: 0; color: var(--ot-muted); }
@media (max-width: 719px) {
  .ot-flowsteps { grid-template-columns: 1fr; gap: var(--ot-space-6); }
  .ot-flowsteps li { padding-left: 72px; min-height: 56px; }
  .ot-flowsteps__num { position: absolute; left: 0; top: 0; }
  .ot-flowsteps h3 { margin-top: var(--ot-space-3); }
  .ot-flowsteps li:not(:last-child)::after { top: calc(56px + 8px); bottom: calc(-1 * var(--ot-space-6) + 8px); left: 27px; right: auto; width: 2px; height: auto;
    background: linear-gradient(180deg, var(--ot-link), color-mix(in srgb, var(--ot-link) 25%, transparent)); }
}
/* checks: NIS2 | CRA columns — entry card + every further check as a visible row */
.ot-domain-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ot-space-6); align-items: start; }
.ot-route { display: flex; flex-direction: column; gap: var(--ot-space-3); padding: var(--ot-space-6); border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); color: var(--ot-text); }
.ot-route:hover { text-decoration: none; color: var(--ot-text); border-color: var(--ot-domain, var(--ot-link)); }
.ot-route__top { display: flex; align-items: center; gap: var(--ot-space-3); }
.ot-route__question { margin: var(--ot-space-2) 0 0; font-size: clamp(1.35rem, 2vw, 1.7rem); letter-spacing: -0.02em; }
.ot-route__sentence { color: var(--ot-muted); }
.ot-route__btn { align-self: flex-start; margin-top: var(--ot-space-3); }
.ot-domain-column__title { margin: var(--ot-space-7) 0 var(--ot-space-4); font-size: var(--ot-step-0); color: var(--ot-muted); letter-spacing: 0.02em; }
.ot-tool-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ot-space-3); }
.ot-tool-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--ot-space-4); min-height: 64px; padding: var(--ot-space-4) 20px;
  border-radius: var(--ot-radius); border: 1px solid var(--ot-border); background: var(--ot-surface); color: var(--ot-text); }
.ot-tool-row:hover { text-decoration: none; color: var(--ot-text); border-color: var(--ot-domain); }
.ot-tool-row .ot-icon-tile { width: 36px; height: 36px; flex-basis: 36px; border-radius: 10px; }
.ot-tool-row .ot-icon-tile .ot-icon { width: 18px; height: 18px; }
.ot-tool-row__text { display: grid; gap: 2px; }
.ot-tool-row__text strong { font-weight: 700; line-height: 1.35; }
.ot-tool-row__text span { color: var(--ot-muted); font-size: 14px; }
.ot-tool-row__action { display: inline-flex; align-items: center; gap: 8px; color: var(--ot-domain); font-weight: 700; white-space: nowrap; font-size: var(--ot-step--1); }
@media (max-width: 899px) { .ot-domain-columns { grid-template-columns: 1fr; gap: var(--ot-space-8); } }
@media (max-width: 599px) { .ot-tool-row { grid-template-columns: auto minmax(0, 1fr); } .ot-tool-row__action { grid-column: 2; } }
/* proof card: inputs | reasons, open */
.ot-proof-card { padding: clamp(24px, 4vw, 40px); border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); border-top: 3px solid var(--ot-domain); }
.ot-proof-card__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ot-space-3) var(--ot-space-5); padding-bottom: var(--ot-space-5); border-bottom: 1px solid var(--ot-border); }
.ot-proof-card__verdict { margin: 0; font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.ot-proof-card__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ot-space-6); margin-top: var(--ot-space-5); }
.ot-proof-card h3 { margin: 0 0 var(--ot-space-3); font-size: var(--ot-step-1); }
.ot-proof-card > h3 { margin-top: var(--ot-space-6); }
.ot-kv--stack { grid-template-columns: 1fr !important; }
.ot-kv--stack dd { margin-bottom: var(--ot-space-3); }
.ot-reasons { margin: 0; padding-left: 1.3rem; }
.ot-reasons li { margin: 0 0 var(--ot-space-2); }
.ot-review-index { justify-self: start; color: var(--ot-warn); background: var(--ot-warn-soft); padding: 2px 8px; border-radius: 999px; }
.ot-proof-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--ot-space-3); margin-top: var(--ot-space-6); padding-top: 20px; border-top: 1px solid var(--ot-border); }
.ot-proof-card__foot a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.ot-chip-row { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--ot-space-2); }
.ot-chip-row li { padding: 4px 12px; border-radius: 999px; background: var(--ot-fill); border: 1px solid var(--ot-border); font-size: 0.8rem; color: var(--ot-text); }
@media (max-width: 899px) { .ot-proof-card__cols { grid-template-columns: 1fr; } }
/* audiences: each with its next step; limits as an open note */
.ot-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ot-space-5); }
.ot-audience-card { display: flex; flex-direction: column; gap: var(--ot-space-2); padding: var(--ot-space-6); border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); }
.ot-audience-card[data-domain] { border-top: 3px solid var(--ot-domain); }
.ot-audience-card h3 { margin: var(--ot-space-3) 0 0; font-size: var(--ot-step-1); }
.ot-audience-card p { margin: 0; color: var(--ot-muted); }
.ot-audience-card__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: var(--ot-space-5); font-weight: 700; color: var(--ot-domain, var(--ot-link)); }
.ot-note { display: flex; gap: var(--ot-space-3); align-items: flex-start; margin-top: var(--ot-space-7); padding: 20px var(--ot-space-5); border-radius: var(--ot-radius); background: var(--ot-surface); border: 1px solid var(--ot-border); border-left: 4px solid var(--ot-border); }
.ot-note p { margin: 0; max-width: 70ch; }
.ot-note--limits { border-left-color: var(--ot-warn); }
.ot-note--limits > .ot-icon { color: var(--ot-warn); margin-top: 2px; }
@media (max-width: 899px) { .ot-audience-grid { grid-template-columns: 1fr; gap: var(--ot-space-4); } }
.ot-autor__more { margin: var(--ot-space-5) 0 0; color: var(--ot-muted); max-width: 70ch; }
/* FAQ: one list in one frame */
.ot-faq-list { max-width: 56rem; border: 1px solid var(--ot-border); border-radius: var(--ot-radius-lg); background: var(--ot-surface); }
.ot-faq-list details + details { border-top: 1px solid var(--ot-border); }
.ot-faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: var(--ot-space-4); min-height: 64px; margin: 0; padding: 20px var(--ot-space-5); color: var(--ot-text); font-weight: 600; list-style: none; }
.ot-faq-list summary::-webkit-details-marker { display: none; }
.ot-faq-list__chevron { flex: 0 0 16px; color: var(--ot-muted); transition: transform .2s ease; }
.ot-faq-list details[open] .ot-faq-list__chevron { transform: rotate(180deg); }
.ot-faq-list details p { margin: 0; padding: 0 var(--ot-space-5) var(--ot-space-5); max-width: 70ch; color: var(--ot-muted); }
.ot-faq-list details p strong { color: var(--ot-text); }
.ot-faq-list summary:focus-visible { outline-offset: -3px; }
.ot-faq__nis2 { color: var(--ot-nis2-fg); }
.ot-faq__cra { color: var(--ot-cra-fg); }
.ot-tool-row, .ot-tool-row:hover, .ot-route, .ot-route:hover, .ot-audience-card__link { text-decoration: none; }
.ot-kicker { font-family: var(--ot-font); }
#ablauf.ot-motif::before { width: 360px; height: 360px; top: 0; }

/* ── CT-1851 (OTD-07, D-66) · /tools: choice tiles, NIS2 | CRA bands, tool cards with a schema each ────────── */
.ot-choice-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ot-space-4); max-width: 640px; margin-top: var(--ot-space-6); }
.ot-choice-tile { display: flex; align-items: center; gap: var(--ot-space-3); min-height: 88px; padding: var(--ot-space-4); border-radius: var(--ot-radius); border: 1px solid var(--ot-border); border-left: 4px solid var(--ot-domain);
  background: var(--ot-surface); color: var(--ot-text); text-decoration: none; }
.ot-choice-tile:hover { color: var(--ot-text); text-decoration: none; border-color: var(--ot-domain); }
.ot-choice-tile__text { display: grid; gap: 2px; flex: 1; }
.ot-choice-tile__text strong { font-size: var(--ot-step-0); }
.ot-choice-tile__text span { font-size: var(--ot-step--1); color: var(--ot-muted); }
.ot-choice-tile > .ot-icon { color: var(--ot-domain); }
.ot-band__chip { display: flex; width: max-content; margin-bottom: var(--ot-space-3); }
.ot-tool-grid { display: grid; gap: var(--ot-space-5); align-items: stretch; }
.ot-tool-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ot-tool-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1099px) { .ot-tool-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) { .ot-tool-grid--2, .ot-tool-grid--3 { grid-template-columns: 1fr; gap: var(--ot-space-4); } .ot-choice-tiles { grid-template-columns: 1fr; } }
.ot-tool-card { display: flex; flex-direction: column; padding: 28px; border-radius: var(--ot-radius-lg); background: var(--ot-surface); border: 1px solid var(--ot-border); border-top: 3px solid var(--ot-domain); }
.ot-tool-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--ot-space-3); }
.ot-tool-card__num { font: 500 var(--ot-step-0) var(--ot-mono); color: var(--ot-muted); }
.ot-tool-card__schema { margin-block: var(--ot-space-4) 20px; padding: var(--ot-space-3); border-radius: var(--ot-radius); background: var(--ot-fill); }
.ot-tool-card h3 { margin: 0 0 var(--ot-space-2); font-size: var(--ot-step-1); line-height: 1.3; }
.ot-tool-card__benefit { margin: 0; color: var(--ot-muted); }
.ot-tool-card__facts { margin-top: var(--ot-space-3); }
.ot-tool-card__btn { width: 100%; margin-top: auto; }
.ot-tool-card .ot-tool-card__facts { margin-bottom: var(--ot-space-5); }
@media (max-width: 719px) { .ot-tool-card { padding: var(--ot-space-5); } }
/* schemas: lines in the muted colour, what matters in the domain colour */
.ot-schema { display: block; width: 100%; height: 96px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ot-sch-line { stroke: var(--ot-field-border); stroke-width: 1.5; }
.ot-sch-dom { stroke: var(--ot-domain); stroke-width: 2.5; fill: none; }
.ot-sch-box { fill: var(--ot-surface); stroke: var(--ot-field-border); stroke-width: 1.5; }
.ot-sch-fill { fill: var(--ot-domain-soft); stroke: var(--ot-domain); stroke-width: 1.5; }
.ot-sch-dot { fill: var(--ot-domain); }
.ot-sch-bar { fill: var(--ot-field-border); }
.ot-sch-bar--on { fill: var(--ot-domain); }
.ot-sch-grid rect { fill: var(--ot-surface); stroke: var(--ot-border); stroke-width: 1.5; }
.ot-sch-row rect { fill: var(--ot-domain-soft); stroke: var(--ot-domain); stroke-width: 1.5; }
.ot-sch-next { fill: var(--ot-domain); }
.ot-sch-cube path { fill: var(--ot-domain-soft); stroke: var(--ot-domain); stroke-width: 2; }
.ot-sch-stairs { stroke: var(--ot-domain); stroke-width: 2.5; }
.ot-sch-label { fill: var(--ot-muted); font: 11px var(--ot-font); }
.ot-sch-strong { fill: var(--ot-text); font: 700 11px var(--ot-font); }
/* data note and slim band */
.ot-band--slim { padding-block: var(--ot-space-8); }
.ot-note--data { margin-top: 0; }
.ot-note--data h2 { margin: 0 0 var(--ot-space-2); padding: 0; font-size: var(--ot-step-1); }
.ot-note--data h2::before { display: none; }
.ot-note--data p + p { margin-top: var(--ot-space-3); }
.ot-note--data > .ot-icon { color: var(--ot-muted); margin-top: 2px; }

/* ── CT-1852 (OTD-08, D-67) · One header, sub-bar and footer for otatel.com, nis2. and cra. ────────────────── */
/* sub-bar of the tools: the domain's checks under the header, and the way across to the other domain */
.ot-subbar { background: var(--ot-ink-1); color: var(--ot-text); border-bottom: 2px solid var(--ot-domain); }
.ot-subbar__inner { display: flex; align-items: center; gap: var(--ot-space-4); min-height: 48px; flex-wrap: wrap; padding-block: var(--ot-space-1); }
.ot-subbar__nav { display: flex; flex-wrap: wrap; gap: 2px var(--ot-space-1); flex: 1; }
.ot-subbar__nav a { padding: 8px 12px; border-radius: 8px; color: var(--ot-muted); font-size: var(--ot-step--1); font-weight: 600; text-decoration: none; }
.ot-subbar__nav a:hover, .ot-subbar__nav a[aria-current] { color: var(--ot-text); background: var(--ot-fill); text-decoration: none; }
.ot-subbar__end { display: inline-flex; align-items: center; gap: var(--ot-space-4); margin-left: auto; font-size: var(--ot-step--1); }
.ot-subbar__lang a { color: var(--ot-muted); }
.ot-subbar__cross { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ot-domain); }
@media (max-width: 719px) {
  .ot-subbar__inner { gap: var(--ot-space-2); padding-block: var(--ot-space-2); }
  .ot-subbar__nav { order: 3; flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .ot-subbar__nav a { white-space: nowrap; }
}
/* footer: Otatel · NIS2 checks · CRA checks · platform · legal */
.ot-footer__links { display: flex; flex-direction: column; gap: var(--ot-space-2); }
@media (min-width: 720px) { .ot-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ot-space-6); } .ot-footer__inner > div:first-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .ot-footer__inner { grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); } .ot-footer__inner > div:first-child { grid-column: auto; } }
.ot-footer__bottom > span { display: block; }
.ot-footer__bottom > span + span { margin-top: var(--ot-space-2); }
.ot-footer .ot-privacy-button { text-align: left; }

/* ── CT-1853 (OTD-09, D-68) · ONE disclosure: framed, a chevron on the right, 48 px target, mint focus ─────────
   Rule (DESIGN-SYSTEM.md): a <details> only as a framed container or inside one, never as navigation or as the
   way to act; decision-relevant content stands open. Variants that predate the rule are folded into this one. */
details.ot-disclosure, details.cra-help, details.ot-proof-detail { border: 1px solid var(--ot-border); border-radius: var(--ot-radius); background: var(--ot-surface); margin-block: var(--ot-space-3); padding: 0; }
:is(details.ot-disclosure, details.cra-help, details.ot-proof-detail, details.check-details) > summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ot-space-3); min-height: 48px; margin: 0;
  padding: var(--ot-space-3) var(--ot-space-4); color: var(--ot-text); font-weight: 600; cursor: pointer; list-style: none; }
:is(details.ot-disclosure, details.cra-help, details.ot-proof-detail, details.check-details) > summary::-webkit-details-marker { display: none; }
:is(details.ot-disclosure, details.cra-help, details.ot-proof-detail, details.check-details) > summary::after {
  content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-right: 2px solid var(--ot-muted); border-bottom: 2px solid var(--ot-muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s ease; }
:is(details.ot-disclosure, details.cra-help, details.ot-proof-detail, details.check-details)[open] > summary::after { transform: rotate(225deg) translate(-2px, -2px); }
:is(details.ot-disclosure, details.cra-help, details.ot-proof-detail) > :not(summary) { margin: 0 var(--ot-space-4) var(--ot-space-4); }
details > summary:focus-visible { outline: 3px solid var(--ot-link); outline-offset: 2px; border-radius: 8px; }
.check-breakdown h3 { margin: var(--ot-space-5) 0 var(--ot-space-2); font-size: var(--ot-step-0); }

/* CT-1853 (OTD-09) · The tools' head: a black panel with the domain's colour field and motif (NIS2 org, CRA
   product) above the light work area — forms and results stay on paper, without motif (D-63). */
:is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact)) { position: relative; isolation: isolate; overflow: hidden; color: var(--ot-text); border: 0; border-radius: 24px;
  padding: clamp(24px, 4vw, 56px); margin-bottom: var(--ot-space-7);
  background: radial-gradient(560px 380px at 92% 0%, color-mix(in srgb, var(--ot-domain, var(--ot-brand)) 22%, transparent), transparent 72%), var(--ot-bg); }
:is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact))::after { content: none; }
:is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact))::before { content: ""; position: absolute; z-index: -1; pointer-events: none; right: -40px; top: 50%; width: 340px; height: 340px; transform: translateY(-50%);
  background: var(--ot-text); opacity: 0.05; -webkit-mask: var(--ot-motif) no-repeat center / contain; mask: var(--ot-motif) no-repeat center / contain; }
body[data-domain="nis2"] { --ot-motif: url("motifs/org.svg"); }
body[data-domain="cra"] { --ot-motif: url("motifs/product.svg"); }
:is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact)) h1, :is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact)) .ot-lead { color: var(--ot-text); }
:is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact)) .ot-lead { color: var(--ot-muted); }
@media (max-width: 479px) { :is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact))::before { display: none; } }

/* OTB-17 · /wissen: cover image of an article (16:9, from content/wissen) and the article list */
.ot-article-cover { display: block; margin: 0 0 1.25rem; }
.ot-article-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; border: 1px solid var(--ot-border); }
.ot-article-list .ot-card h2 { font-size: 1.2rem; margin: 0.35rem 0 0.5rem; }
.ot-article-body { margin-bottom: 2rem; }

/* CT-1853 · staging review: the domain colour carries through the tools' cards and progress */
body[data-domain] .ot-catalog-map .ot-card, body[data-domain] .ot-card--question { border-top-color: var(--ot-domain); }
.ot-badge--start { align-self: flex-start; }
body[data-domain] .ot-steps li[aria-current="step"] { background: var(--ot-domain-soft); color: var(--ot-text); }
body[data-domain] .ot-steps li[aria-current="step"]::before { background: var(--ot-domain-strong); border-color: var(--ot-domain-strong); color: var(--ot-white); }
body[data-domain] .cra-part-list li[aria-current="step"] .cra-part-index { background: var(--ot-domain-strong); border-color: var(--ot-domain-strong); color: var(--ot-white); }
body[data-domain] .ot-progress { accent-color: var(--ot-domain-strong); }
@media (max-width: 719px) {
  :is(.ot-check-app .ot-main .ot-page-head:not(.check-step-head), .ot-check-app .check-entry, .cra-intro:not(.cra-intro--compact)) h1 { font-size: 1.6rem; }
}
body[data-domain] .ot-progress::-webkit-progress-value { background: var(--ot-domain-strong); }
body[data-domain] .ot-progress::-moz-progress-bar { background: var(--ot-domain-strong); }

/* the prose rule (h2 with top border and padding) must not reach into the CTA card of an article */
.ot-prose .ot-card h2 { padding-top: 0; border-top: 0; margin-top: 0; }
/* CT-1854 (OTD-10) acceptance: the prose list indent (.ot-prose ul) must not push the reference cards off the text edge */
.ot-prose .ot-reference-cards { padding-left: 0; }