/* Legal pages trust.fizard.com – design "product page" (decision Marc 19.09.2026 after comparing four variants).
   Matches the website layout (Inter or system font, white background, dark text); frame up to 1600 px, centred, so that
   sidebar, text column and table of contents fit side by side and wide tables get room (Marc, 19.09.2026).
   Text column at most 46 rem (about 80 characters at 17 px), body 17 px with line height 1.6, ragged right with
   hyphenation (lang="de"). From 1080 px a collapsible sidebar on the left lists the eight legal documents and the module
   filter; from 1360 px the table of contents ("Auf dieser Seite", indented by heading level) runs along on the right
   and marks the section being read (legal.js sets the class "active"; without JavaScript a static list, on narrower
   screens a box above the text). Tables use the whole content column; tables with five or more columns become records
   (one card per row, column name and value from data-th) only when the content column is too narrow for their columns
   (container queries on div.content), all other tables stay tables, on phones as records too. Modules carry a colour dot
   before their name (DATEV-Export für Stripe in Stripe purple, E-Rechnung für Stripe in blue, KI-Plattform für Kanzleien
   in DATEV green), no bars; blocks outside the reading-aid selection are dimmed via the text colour (contrast at least
   4.5:1), never hidden. Colour tokens follow the slate scale of fizard.com (one neutral scale, Marc 19.09.2026). No external fonts, no script dependencies, no browser storage. Code is English, the published
   text is German. */
:root {
  /* neutral scale = slate scale of fizard.com (Marc, 19.09.2026): ink 900, text 800, muted 600, rule-dark 400, rule-strong 300, rule 200, dim 100, surface 50 */
  --ink: #0f172a; --text: #1e293b; --muted: #475569; --rule-dark: #94a3b8; --rule-strong: #cbd5e1; --rule: #e2e8f0; --dim-bg: #f1f5f9; --surface-2: #f8fafc;
  --focus: #2563eb;
  --datev-bar: #a9a3ff; --datev: #635bff;      /* DATEV-Export für Stripe: Stripe purple, dot in the mid tone */
  --einvoice-bar: #8fb8f2; --einvoice: #1d6fe6; /* E-Rechnung für Stripe: blue */
  --ai-bar: #a8c97a; --ai: #4e7a12;            /* KI-Plattform für Kanzleien: DATEV green */
  --measure: 46rem;  /* text column: 736 px, about 80 characters at 17 px Inter (rem = 16 px) */
  --frame: 1560px;   /* outer frame: 24 + 256 sidebar + 48 + 880 content + 48 + 280 toc + 24 */
  --column: 880px;   /* content column at full frame width; text stays at --measure, tables use the column */
  --sidebar: 300px;  /* width of the sticky sidebar (documents, module filter, trust label); entries indented 16 px under their title */
  --toc: 280px;      /* width of the table of contents on the right */
  --radius: 14px;    /* one rounding for boxes, cards, labels and notices (Marc, 19.09.2026) */
  --radius-sm: 6px;  /* small controls: buttons, list entries, segmented bar */
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 32px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: #fff; color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-dark); }
a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* Header of the legal pages (like Stripe Docs): logo and "Trust Center" to the overview, link to the website on the right;
   no footer (nothing mandatory belongs there, the Impressum sits on the overview; Marc, 19.09.2026) */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .inner { max-width: var(--frame); margin: 0 auto; padding: 14px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.site-header .brand { display: inline-flex; align-items: center; margin-right: -8px; }
.site-header .brand img { display: block; height: 26px; width: auto; }
.site-header .section { font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); text-decoration: none; padding-top: 3px; }
.site-header .section:hover { color: var(--ink); }
.site-header .external { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; }
.site-header .external:hover { color: var(--ink); }

/* Page: frame 1600 px; from 1080 px sidebar on the left (documents, filter), from 1360 px table of contents on the right */
main.legal { max-width: var(--frame); margin: 0 auto; padding: 48px 24px 96px; }
@media (min-width: 1080px) {
  main.legal { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); column-gap: 48px; align-items: start; }
  main.legal > * { grid-column: 2; }
  main.legal > aside.sidebar { grid-column: 1; grid-row: 1 / span 14; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; padding-right: 8px; }
  body.sidebar-collapsed main.legal { grid-template-columns: 36px minmax(0, 1fr); }
  body.sidebar-collapsed .documents { display: none; }
}
@media (min-width: 1360px) {
  main.legal { grid-template-columns: var(--sidebar) minmax(0, var(--column)) var(--toc); }
  main.legal > nav.toc { grid-column: 3; grid-row: 1 / span 14; position: sticky; top: 28px; max-height: calc(100vh - 56px); overflow-y: auto; overscroll-behavior: contain; }
  body.sidebar-collapsed main.legal { grid-template-columns: 36px minmax(0, 1fr) var(--toc); }
}
.crumbs { font-size: 14px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }
/* vertical rhythm of the page head (8 px scale): transition notice 24 breadcrumbs 24 h1 12 status 24 tools 32 first heading;
   the notice sits at the very top because it is temporary (Marc, 19.09.2026) */
.page-head { margin-bottom: 24px; max-width: var(--measure); }
.page-head h1 { font-size: clamp(30px, 4.4vw, 40px); font-weight: 750; line-height: 1.12; letter-spacing: -.025em; color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
main.legal .status { color: var(--muted); font-size: 15px; font-weight: 500; margin: 0; }
/* Overview: the page head carries the decorative shader background "Undertones" in the module colours (canvas drawn by legal/hero.js;
   exception from the plain design, Marc 19.09.2026). The box keeps a light grey fallback without JavaScript or WebGPU,
   the text stays dark in front of the canvas (contrast at least 4.5:1 on the darkest tone of the preset), print shows plain text. */
.page-head.hero { position: relative; isolation: isolate; overflow: hidden; max-width: none; padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 36px); border-radius: var(--radius); background: var(--surface-2); }
.page-head.hero > h1, .page-head.hero > .status { position: relative; z-index: 1; max-width: var(--measure); }
.page-head.hero > .status { color: var(--text); }
.hero-canvas { position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s ease; }
.hero-canvas.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-canvas { transition: none; } }
main.legal .notice { background: var(--surface-2); border-radius: var(--radius); padding: 14px 18px; font-size: 15px; line-height: 1.6; margin: 0 0 24px; }
main.legal .tools { margin: 0 0 32px; padding: 0 0 14px; border-bottom: 1px solid var(--rule); max-width: var(--measure); display: flex; flex-wrap: wrap; gap: 6px 0; }
.tools .tool { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--muted); background: none; border: 0; border-left: 1px solid var(--rule); padding: 1px 14px; cursor: pointer; text-decoration: none; }
.tools .tool:first-child { border-left: 0; padding-left: 0; }
.tools .tool:hover { color: var(--ink); }
.tools .tool svg { flex: none; }
.tools .tool[hidden] { display: none; }

/* Sidebar: list of the legal documents (current page marked), collapsible with a button (legal.js);
   below 1080 px on top: documents as a row of chips */
.sidebar { margin: 0 0 28px; }
.sidebar-toggle { display: none; }
@media (min-width: 1080px) {
  .sidebar-toggle { display: block; width: 28px; height: 28px; margin: 0 0 12px auto; padding: 0; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: #fff; color: var(--muted); cursor: pointer; font: 16px/1 var(--sans); }
  .sidebar-toggle[hidden] { display: none; }
  .sidebar-toggle::before { content: "\21E4"; }
  .sidebar-toggle:hover { color: var(--ink); border-color: var(--rule-dark); }
  body.sidebar-collapsed .sidebar-toggle::before { content: "\21E5"; }
  body.sidebar-collapsed .sidebar { padding-right: 0; }
}
.toc-title { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight: 700; }
.documents { font-size: 14px; line-height: 1.4; margin: 0 0 20px; }
.documents ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 8px; }
.documents a { display: inline-block; text-decoration: none; color: var(--text); padding: 5px 11px; border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.documents a:hover { border-color: var(--rule-strong); color: var(--ink); }
.documents a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
/* Table of contents: box above the text; from 1360 px on the right, indented by heading level with a rail */
.toc { font-size: 14px; line-height: 1.45; border: 1px solid var(--rule); padding: 18px 20px; margin: 0 0 36px; max-width: var(--measure); }
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 28px; }
.toc li { margin: 0 0 6px; padding-left: .9em; text-indent: -.9em; break-inside: avoid; overflow-wrap: anywhere; }
.toc li[data-level="3"] { margin-left: 1em; }
.toc li[data-level="4"] { margin-left: 2em; }
.toc a { text-decoration: none; color: var(--muted); }
.toc a:hover { color: var(--ink); }
.toc li.active > a { color: var(--ink); font-weight: 600; }
.toc li.dimmed, .toc li.dimmed a { color: var(--muted); }
@media (min-width: 1360px) {
  /* room for the scrollbar so entries never touch the edge; thin scrollbar */
  main.legal > nav.toc { border: 0; padding: 4px 16px 0 0; margin: 0; max-width: none; font-size: 14px; line-height: 1.4; scrollbar-width: thin; scrollbar-gutter: stable; }
  main.legal > nav.toc ul { columns: 1; }
  main.legal > nav.toc li { margin: 0; padding: 4px 0 4px 0; text-indent: 0; }
  main.legal > nav.toc li[data-level="2"] { margin-left: 0; padding-top: 8px; color: var(--ink); }
  main.legal > nav.toc li[data-level="2"] > a { color: var(--ink); }
  /* one rail segment per entry with a gap in between (like docs.stripe.com), not one continuous line */
  main.legal > nav.toc li[data-level="3"], main.legal > nav.toc li[data-level="4"] { margin: 5px 0; padding: 2px 0 2px 14px; border-left: 1px solid var(--rule); }
  main.legal > nav.toc li[data-level="4"] { padding-left: 28px; }
  main.legal > nav.toc li.active { border-left-color: var(--ink); }
  main.legal > nav.toc li[data-level="2"].active > a::before { content: ""; display: inline-block; width: 2px; height: 1em; background: var(--ink); margin: 0 8px -2px -10px; }
}
@media (min-width: 1080px) {
  .sidebar { margin: 0; padding-top: 4px; }
  .documents { font-size: 14px; margin: 0; }
  /* sidebar lists share one rhythm: title, entries indented 16 px, 4 px between rows (main.legal ul/li rules are overridden here) */
  main.legal .documents ul { display: block; padding-left: 16px; margin: 0; }
  main.legal .documents li { margin: 0 0 4px; position: relative; }
  .documents a { display: block; padding: 5px 10px; border: 0; border-radius: var(--radius-sm); color: var(--muted); font-weight: 500; }
  .documents a:hover { background: var(--surface-2); color: var(--ink); }
  .documents a[aria-current="page"] { background: var(--surface-2); color: var(--ink); font-weight: 700; }
}

/* Text: strong headings, air instead of rules, numbers hanging in the text colour, hyphenation */
.content { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; overflow-wrap: break-word; container-type: inline-size; container-name: content; }
.content > * { max-width: var(--measure); }
main.legal h2 { font-size: 30px; font-weight: 750; line-height: 1.2; letter-spacing: -.02em; color: var(--ink); margin: 64px 0 20px; }
main.legal h3 { font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.01em; color: var(--ink); margin: 40px 0 12px; }
main.legal h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 28px 0 10px; font-weight: 700; }
main.legal .content > :first-child { margin-top: 0; }
main.legal p { margin: 0 0 14px; }
p.para { padding-left: 2.8em; text-indent: -2.8em; }
p.para b.num { font-weight: 700; color: var(--ink); display: inline-block; width: 2.8em; text-indent: 0; font-variant-numeric: tabular-nums; }
main.legal ul, main.legal ol { margin: 0 0 14px; padding-left: 1.6em; }
/* lists in the text are indented one level below the paragraph text (markers start at the text edge of "(1)", 2.8 em,
   the list text 1.6 em further in), as in statutes and contracts (HdR: Aufzählungen im Absatz eingerückt) */
main.legal .content > ul, main.legal .content > ol, main.legal div.module > ul, main.legal div.module > ol, main.legal .box > ul, main.legal .box > ol { padding-left: 4.4em; }
main.legal li { margin: 0 0 6px; }
main.legal li::marker { color: var(--ink); font-weight: 600; }
ol.alpha { list-style: lower-latin; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--surface-2); padding: 1px 6px; border-radius: var(--radius-sm); hyphens: none; overflow-wrap: anywhere; }
.box { background: var(--surface-2); border-radius: var(--radius); padding: 16px 20px; margin: 16px 0 24px; }
.box p:last-child { margin-bottom: 0; }

/* Tables: no frame, zebra stripes; every table uses the whole content column (Marc, 19.09.2026: no empty space beside
   the tables); phones scroll horizontally with a shadow edge */
.content > .table-wrap, div.module > .table-wrap { max-width: none; margin: 16px 0 28px; }
.table-wrap { overflow-x: auto; background: linear-gradient(to right, #fff 30%, rgba(255,255,255,0)), linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0, radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.28), rgba(15,23,42,0)), radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.28), rgba(15,23,42,0)) 100% 0; background-repeat: no-repeat; background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 1.5; hyphens: manual; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--rule); min-width: 9em; }
th { font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: #fff; border-bottom: 2px solid var(--rule-strong); hyphens: manual; }
tbody tr:nth-child(even) > td { background: var(--surface-2); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
td.key { font-weight: 600; white-space: nowrap; }
main.legal .table-wrap td.sub { white-space: normal; }
/* sub-item rows: the parent line matches the key cell above it (14 px, bold, 10 px dot), the name below is in the
   weight of the other columns (Marc, 19.09.2026) */
.sub-parent { display: block; color: var(--text); margin-bottom: 2px; }
.sub-name { font-weight: 400; }
.sub-name::before { content: "\21B3\00a0"; color: var(--text); }
tbody th.key { font-size: inherit; letter-spacing: 0; text-transform: none; color: var(--text); background: transparent; font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--rule); width: 12em; }
tbody tr:nth-child(even) > th.key { background: var(--surface-2); }
@media (min-width: 1080px) {
  .table-wrap.wide { overflow: visible; background: none; }
  .table-wrap.wide thead th { position: sticky; top: 0; z-index: 1; box-shadow: 0 2px 0 var(--rule-strong); border-bottom: 0; }
  .table-wrap.wide th, .table-wrap.wide td { min-width: 6em; padding: 10px 12px; hyphens: manual; overflow-wrap: anywhere; }
}
/* Records: tables with five or more columns (lists of processors and recipients) are always one card per row on
   screens, whatever the width (uniform rule, Marc 19.09.2026); the first column is the card title, the other cells show
   column name and value (data-th); the "Alle ausklappen" button (legal.js) belongs to them. Print shows tables. */
.records-toggle { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: #fff; border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; margin: 0 0 12px; }
.records-toggle:hover { background: var(--surface-2); }
@media screen {
  .table-wrap.records, .table-wrap.records.wide { overflow: visible; background: none; border-radius: 0; }
  .table-wrap.records table, .table-wrap.records tbody, .table-wrap.records tr, .table-wrap.records td { display: block; }
  .table-wrap.records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap.records thead th { position: absolute; }
  .table-wrap.records tr { border: 1px solid var(--rule); border-radius: var(--radius); padding: 8px 20px 10px; margin: 0 0 16px; }
  .table-wrap.records td, .table-wrap.records tbody tr:nth-child(even) > td { display: grid; grid-template-columns: 13em minmax(0, 1fr); gap: 2px 20px; padding: 9px 0; border-bottom: 1px solid var(--rule); min-width: 0; background: transparent !important; white-space: normal; hyphens: manual; overflow-wrap: anywhere; }
  .table-wrap.records td::before { content: attr(data-th); font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.5; padding-top: 1px; hyphens: manual; overflow-wrap: normal; }
  .table-wrap.records tbody tr > td:first-child, .table-wrap.records tbody tr:nth-child(even) > td:first-child { display: block; font-size: 17px; font-weight: 650; color: var(--ink); padding: 8px 0 10px; border-bottom: 1px solid var(--rule-strong); }
  .table-wrap.records tr > td:first-child::before { content: none; }
  .table-wrap.records tr > td:last-child { border-bottom: 0; }
  .table-wrap.records tr.dimmed { background: var(--dim-bg); border-color: var(--dim-border); }
  .table-wrap.records tr.dimmed > td:first-child { color: var(--muted); }
  .table-wrap.records tr.dimmed > td.module-cell::after { content: none; }
  /* dimmed cards carry the marker above the title (Marc, 19.09.2026) */
  .table-wrap.records tr.dimmed > td:first-child::before { content: "Nicht in Ihrer Auswahl"; display: block; margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
  /* accordion (legal.js): collapsed cards show only title and module line; the title toggles the card */
  .table-wrap.records.js-accordion tbody tr > td:first-child { cursor: pointer; padding-right: 32px; position: relative; }
  .table-wrap.records.js-accordion tbody tr > td:first-child::after { content: ""; position: absolute; right: 8px; top: 16px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
  .table-wrap.records.js-accordion tbody tr.collapsed > td:first-child::after { transform: rotate(-45deg); top: 19px; }
  .table-wrap.records.js-accordion tbody tr.collapsed > td:not(:first-child):not(.module-cell) { display: none; }
  .table-wrap.records.js-accordion tbody tr.collapsed > td.module-cell { border-bottom: 0; }
  .table-wrap.records.js-accordion tbody tr > td:first-child:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) { .table-wrap.records.js-accordion tbody tr > td:first-child::after { transition: none; } }
}

/* Colour dots: the same colour stands right before the module name everywhere (filter buttons as the legend,
   module headings, table of contents, module cells), so the bar colour is always tied to a name */
.module-filter button::before, div.module > h4::before, div.module > h3::before, nav.toc li[data-module] > a::before, .module-name::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); margin-right: 7px; vertical-align: 0; flex: none; }
/* "Alle Module" carries a neutral grey dot so that all four buttons align (Marc, 19.09.2026) */
.module-filter button[data-filter="all"]::before { background: var(--rule-strong); }
.module-filter button[data-filter="datev"]::before, div.module[data-module="datev"] > h4::before, div.module[data-module="datev"] > h3::before, nav.toc li[data-module="datev"] > a::before, .module-name[data-tone="datev"]::before { background: var(--datev-bar); }
.module-filter button[data-filter="erechnung"]::before, div.module[data-module="erechnung"] > h4::before, div.module[data-module="erechnung"] > h3::before, nav.toc li[data-module="erechnung"] > a::before, .module-name[data-tone="erechnung"]::before { background: var(--einvoice-bar); }
.module-filter button[data-filter="ki"]::before, div.module[data-module="ki"] > h4::before, div.module[data-module="ki"] > h3::before, nav.toc li[data-module="ki"] > a::before, .module-name[data-tone="ki"]::before { background: var(--ai-bar); }
nav.toc li[data-module~="datev"][data-module~="erechnung"] > a::before, nav.toc li[data-module~="datev"][data-module~="ki"] > a::before, nav.toc li[data-module~="erechnung"][data-module~="ki"] > a::before { content: none; }
@media (max-width: 1079px) { .module-filter button[aria-pressed="true"]::before { background: #fff !important; } }
div.module.dimmed > h4::before, div.module.dimmed > h3::before, .dimmed .module-name::before, nav.toc li.dimmed > a::before { background: var(--rule-strong) !important; }
div.module > h4::before, div.module > h3::before { width: 12px; height: 12px; margin-right: 4px; align-self: center; }
nav.toc li[data-module] > a::before { width: 8px; height: 8px; margin-right: 6px; }

/* Modules: bar on the left edge instead of a card; the module name is in the heading */
div.module { margin: 0 0 32px; }
div.module > h4, div.module > h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 14px; font-size: 21px; letter-spacing: -.01em; text-transform: none; color: var(--ink); font-weight: 650; }
main.legal h3.module { margin-top: 56px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; }

/* Trust note at the end of the sidebar as a label (pill with a thin grey border): flags on the left (several flags
   stack, the first in front, the next offset to the right), small bold title and grey line on the right; below
   1080 px the same pill after the page head. The German flag is pure CSS, the EU flag an inline SVG (twelve stars). */
.facts-box { margin: 20px 0 0; }
main.legal .facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; }
main.legal .fact { margin: 0; }
.fact { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: var(--radius); background: var(--surface-2); }
.fact-icons { flex: none; position: relative; display: block; height: 24px; width: 24px; }
.fact-icons:has(.fact-icon:nth-child(2)) { width: 34px; }
.fact-icon { position: absolute; top: 0; left: 0; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15,23,42,.06); }
.fact-icon:first-child { z-index: 1; box-shadow: 0 0 0 2px var(--surface-2), inset 0 0 0 1px rgba(15,23,42,.06); }
.fact-icon:nth-child(2) { left: 10px; }
.fact-icon[data-flag="de"] { background: linear-gradient(#000 0 33.4%, #dd0000 33.4% 66.7%, #ffce00 66.7% 100%); }
.fact-icon[data-flag="eu"] { background: #003399 url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2250%22 fill=%22%23003399%22/%3E%3Cpolygon points=%2280.0,44.0 81.3,48.1 85.7,48.1 82.2,50.7 83.5,54.9 80.0,52.3 76.5,54.9 77.8,50.7 74.3,48.1 78.7,48.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2276.0,59.0 77.3,63.1 81.7,63.1 78.2,65.7 79.5,69.9 76.0,67.3 72.5,69.9 73.8,65.7 70.3,63.1 74.6,63.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2265.0,70.0 66.3,74.1 70.7,74.1 67.2,76.7 68.5,80.8 65.0,78.3 61.5,80.8 62.8,76.7 59.3,74.1 63.7,74.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2250.0,74.0 51.3,78.1 55.7,78.1 52.2,80.7 53.5,84.9 50.0,82.3 46.5,84.9 47.8,80.7 44.3,78.1 48.7,78.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2235.0,70.0 36.3,74.1 40.7,74.1 37.2,76.7 38.5,80.8 35.0,78.3 31.5,80.8 32.8,76.7 29.3,74.1 33.7,74.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2224.0,59.0 25.4,63.1 29.7,63.1 26.2,65.7 27.5,69.9 24.0,67.3 20.5,69.9 21.8,65.7 18.3,63.1 22.7,63.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2220.0,44.0 21.3,48.1 25.7,48.1 22.2,50.7 23.5,54.9 20.0,52.3 16.5,54.9 17.8,50.7 14.3,48.1 18.7,48.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2224.0,29.0 25.4,33.1 29.7,33.1 26.2,35.7 27.5,39.9 24.0,37.3 20.5,39.9 21.8,35.7 18.3,33.1 22.7,33.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2235.0,18.0 36.3,22.2 40.7,22.2 37.2,24.7 38.5,28.9 35.0,26.3 31.5,28.9 32.8,24.7 29.3,22.2 33.7,22.2%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2250.0,14.0 51.3,18.1 55.7,18.1 52.2,20.7 53.5,24.9 50.0,22.3 46.5,24.9 47.8,20.7 44.3,18.1 48.7,18.1%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2265.0,18.0 66.3,22.2 70.7,22.2 67.2,24.7 68.5,28.9 65.0,26.3 61.5,28.9 62.8,24.7 59.3,22.2 63.7,22.2%22 fill=%22%23ffcc00%22/%3E%3Cpolygon points=%2276.0,29.0 77.3,33.1 81.7,33.1 78.2,35.7 79.5,39.9 76.0,37.3 72.5,39.9 73.8,35.7 70.3,33.1 74.6,33.1%22 fill=%22%23ffcc00%22/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.fact-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fact-link { display: inline-flex; align-items: center; gap: inherit; text-decoration: none; color: inherit; }
.fact-link:hover .fact-title { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.fact-title { font-weight: 700; color: var(--ink); font-size: 12px; line-height: 1.3; letter-spacing: -.02em; }
.fact-text { color: var(--muted); font-size: 12px; line-height: 1.45; }
@media (min-width: 1080px) {
  /* the label uses the whole sidebar width, not the 16 px indent of the lists */
  .facts-box { margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--rule); }
  .facts { display: block; }
  .fact { display: flex; width: 100%; }
  .fact + .fact { margin-top: 10px; }
  body.sidebar-collapsed .facts-box { display: none; }
}

/* Impressum on the overview: two white cards like the document cards (Anbieter, Geschäftsführung) in 14 px */
.content > .panels { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 8px 0 28px; }
/* after the card grid the section heading needs less air than in running text */
main.legal .cards + h2 { margin-top: 48px; }
.panel { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; font-size: 14px; line-height: 1.55; }
.panel > .toc-title { margin: 0 0 10px; }
main.legal .panel > p:not(.toc-title) { margin: 0 0 12px; }
main.legal .panel > p:last-child { margin-bottom: 0; }
main.legal .panel > .people { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
main.legal .person { display: flex; align-items: center; gap: 12px; margin: 0; }
.person img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); }
.person-body { display: flex; flex-direction: column; gap: 1px; }
.person-name { font-weight: 700; color: var(--ink); font-size: 15px; }
.person-role { color: var(--muted); font-size: 14px; }
.person-link { font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none; margin-top: 3px; }
.person-link::after { content: " \2197"; }
.person-link:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 720px) { .content > .panels { grid-template-columns: 1fr; } }

/* Overview and archive */
main.legal .content > ul.cards, main.legal .cards { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; max-width: none; }
.cards a { display: block; height: 100%; border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s; }
.cards a:hover { border-color: var(--rule-strong); box-shadow: 0 6px 20px rgba(15,23,42,.08); }
.card-title { display: block; font-weight: 700; color: var(--ink); font-size: 18px; margin-bottom: 4px; letter-spacing: -.01em; }
.card-meta { display: block; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.card-text { display: block; font-size: 15px; line-height: 1.55; }
.card-note { display: block; margin-top: 12px; font-size: 13px; line-height: 1.45; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }
ul.archive li { margin-bottom: 10px; }
@media (prefers-reduced-motion: reduce) { .cards a { transition: none; } }

/* Module filter (reading aid) as segmented buttons: legal.js sets "dimmed" on blocks outside the selection; they stay readable, nothing is hidden. Without JavaScript nothing changes. */
/* Module filter (reading aid): below 1080 px a segmented bar under the document chips, from 1080 px a list in the
   sidebar under the documents; its buttons with colour dots are also the legend of the module colours */
.module-filter { display: flex; flex-wrap: wrap; align-items: center; margin: 12px 0 0; }
.module-filter[hidden] { display: none; }
.module-filter .toc-title { flex-basis: 100%; margin-bottom: 8px; }
.module-filter button { font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border: 1px solid var(--rule-strong); margin-left: -1px; background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; }
.module-filter button:first-of-type { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.module-filter button:last-of-type { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.module-filter button:hover { background: var(--surface-2); }
.module-filter button:focus-visible { z-index: 2; }
@media (max-width: 1079px) {
  /* segmented bar: pressed buttons are filled (white text, white dot) */
  .module-filter button[aria-pressed="true"], .module-filter button[aria-pressed="true"]:hover { background: var(--ink); color: #fff; border-color: var(--ink); z-index: 1; font-weight: 600; }
  .module-filter button[data-filter="datev"][aria-pressed="true"] { background: var(--datev); border-color: var(--datev); }
  .module-filter button[data-filter="erechnung"][aria-pressed="true"] { background: var(--einvoice); border-color: var(--einvoice); }
  .module-filter button[data-filter="ki"][aria-pressed="true"] { background: var(--ai); border-color: var(--ai); }
}
main.legal .filter-note { flex-basis: 100%; box-sizing: border-box; padding-right: 30%; font-size: 14px; line-height: 1.5; color: var(--muted); margin: -2px 0 12px; }
@media (max-width: 1079px) {
  /* narrow screens: the sidebar (documents, filter) follows the page head, where the filter bar used to be */
  main.legal { display: flex; flex-direction: column; }
  main.legal > * { order: 2; }
  main.legal > .crumbs, main.legal > .page-head, main.legal > .notice, main.legal > .tools { order: 0; }
  main.legal > aside.sidebar { order: 1; }
}
@media (min-width: 1080px) {
  .module-filter { display: block; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.4; }
  aside.sidebar .toc-title { margin: 0 0 10px; }
  .module-filter button, .module-filter button:first-of-type, .module-filter button:last-of-type { display: flex; width: calc(100% - 16px); text-align: left; margin: 0 0 4px 16px; padding: 5px 10px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted); }
  /* sidebar list: all four buttons look alike, like the document list (hover light, pressed light and bold, dot keeps its colour) */
  .module-filter button:hover { background: var(--surface-2); color: var(--ink); }
  .module-filter button[aria-pressed="true"], .module-filter button[aria-pressed="true"]:hover { background: var(--surface-2); color: var(--ink); font-weight: 700; }
  main.legal .filter-note { font-size: 13px; line-height: 1.45; margin: -2px 0 12px 16px; padding-right: 0; }
  body.sidebar-collapsed .module-filter { display: none; }
}
/* hint of an active selection: a small box like the transition notice, right where reading starts */
main.legal .module-hint { font-size: 15px; line-height: 1.55; color: var(--text); margin: 0 0 28px; padding: 12px 16px; background: var(--surface-2); border-radius: var(--radius); }
.module-hint strong { color: var(--ink); }
.module-hint:empty { display: none; }
.dimmed { color: var(--muted); }
div.module.dimmed { color: var(--muted); }
div.module.dimmed > h4, div.module.dimmed > h3, h3.module.dimmed { color: var(--muted); }
div.module.dimmed > h4::after, div.module.dimmed > h3::after, h3.module.dimmed::after { content: "Nicht in Ihrer Auswahl"; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 1px 8px; }
.dimmed a { color: inherit; }
/* Table rows outside the selection: grey with a marker in the module cell */
tr.dimmed > td { color: var(--muted); background: var(--dim-bg) !important; }
tr.dimmed > td.module-cell::after { content: "Nicht in Ihrer Auswahl"; display: inline-block; margin-top: 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); padding: 0 6px; white-space: nowrap; }
@media print { .records-toggle { display: none !important; } .table-wrap.records tbody tr.collapsed > td { display: table-cell !important; } }

/* Phones: records with the column name above the value, segmented buttons stacked */
@media (max-width: 720px) {
  main.legal { padding: 28px 16px 56px; }
  main.legal h2 { font-size: 26px; margin-top: 56px; }
  main.legal h3 { font-size: 20px; }
  .toc ul { columns: 1; }
  main.legal .filter-note { padding-right: 0; }
  .module-filter button { font-size: 14px; padding: 7px 10px; flex-basis: 100%; margin-left: 0; margin-top: -1px; text-align: left; }
  .module-filter button:first-of-type { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
  .module-filter button:last-of-type { border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
  th, td { padding: 9px 10px; min-width: 8em; }
  p.para { padding-left: 2.4em; text-indent: -2.4em; }
  p.para b.num { width: 2.4em; }
  main.legal .content > ul, main.legal .content > ol, main.legal div.module > ul, main.legal div.module > ol, main.legal .box > ul, main.legal .box > ol { padding-left: 3.8em; }
  /* on phones every wide table becomes records as well (records tables are handled by the container queries above) */
  .table-wrap.wide:not(.records) { overflow: visible; background: none; }
  .table-wrap.wide:not(.records) table, .table-wrap.wide:not(.records) tbody, .table-wrap.wide:not(.records) tr, .table-wrap.wide:not(.records) td { display: block; }
  .table-wrap.wide:not(.records) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap.wide:not(.records) thead th { position: absolute; }
  .table-wrap.wide:not(.records) tr { border: 1px solid var(--rule); padding: 6px 14px 8px; margin: 0 0 16px; }
  .table-wrap.wide:not(.records) tr.dimmed { background: var(--dim-bg); border-color: var(--rule-strong); }
  .table-wrap.wide:not(.records) td, .table-wrap.wide:not(.records) tbody tr:nth-child(even) > td { display: block; padding: 8px 0; border-bottom: 1px solid var(--rule); min-width: 0; background: transparent !important; box-shadow: none; white-space: normal; hyphens: manual; overflow-wrap: break-word; }
  .table-wrap.wide:not(.records) td::before { content: attr(data-th); display: block; font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.5; hyphens: manual; overflow-wrap: normal; }
  .table-wrap.wide:not(.records) tbody tr > td:first-child, .table-wrap.wide:not(.records) tbody tr:nth-child(even) > td:first-child { font-size: 17px; font-weight: 650; color: var(--ink); padding: 8px 0 10px; border-bottom: 1px solid var(--rule-strong); }
  .table-wrap.wide:not(.records) tr > td:first-child::before { content: none; }
  .table-wrap.wide:not(.records) tr > td:last-child { border-bottom: 0; }
  .table-wrap.wide:not(.records) tr.dimmed > td:first-child { color: var(--muted); }
  .table-wrap.wide:not(.records) tr.dimmed > td.module-cell::after { display: inline-block; margin-top: 4px; }
}

/* Print: A4, 10.5 pt, nothing dimmed, no filter bar and no sidebar (user interface); addresses of other legal pages appear in short form; all tables print as tables */
@page { size: A4; margin: 20mm 18mm 22mm; @top-center { content: "Fizard GmbH · trust.fizard.com"; font: 8.5pt Inter, ui-sans-serif, system-ui, sans-serif; color: #555; } @bottom-center { content: "Seite " counter(page) " von " counter(pages); font: 8.5pt Inter, ui-sans-serif, system-ui, sans-serif; color: #555; } }
@media print {
  body { font-size: 10.5pt; line-height: 1.5; color: #000; }
  main.legal { display: block; max-width: none; padding: 0; }
  .site-header, .crumbs, .tools, .module-filter, .module-hint, .sidebar, .toc { display: none !important; }
  .page-head, .notice, .content > *, .content > .table-wrap:not(.wide) { max-width: none; }
  .page-head h1 { font-size: 20pt; }
  .page-head.hero { background: none; padding: 0; border-radius: 0; }
  .hero-canvas { display: none !important; }
  .status { font-size: 10pt; }
  .notice { background: none; padding: 0 0 0 4mm; font-size: 10pt; border-left: 2pt solid #999; border-radius: 0; }
  main.legal h2 { font-size: 16pt; margin: 14mm 0 4mm; break-after: avoid; }
  main.legal h3 { font-size: 12.5pt; margin: 8mm 0 3mm; break-after: avoid; }
  main.legal h4, div.module > h4, div.module > h3 { break-after: avoid; }
  main.legal p { orphans: 3; widows: 3; }
  p.para b.num { color: #000; }
  a { color: inherit; text-decoration: none; }
  a[href^="/"]:not([href="/"])::after { content: " (trust.fizard.com" attr(href) ")"; font-size: 9pt; color: #444; }
  .dimmed, div.module.dimmed, div.module.dimmed > h4, div.module.dimmed > h3, h3.module.dimmed, tr.dimmed > td { color: #000; }
  div.module > h4::after, div.module > h3::after, h3.module::after, tr > td.module-cell::after { content: none; }
  div.module > h4::before, div.module > h3::before, .module-name::before { background: #777 !important; }
  tr > td, tbody tr:nth-child(even) > td, tbody tr:nth-child(even) > th.key, tr.dimmed > td { background: transparent !important; box-shadow: none; }
  .table-wrap { overflow: visible; background: none; border-radius: 0; }
  table { font-size: 8.5pt; hyphens: auto; -webkit-hyphens: auto; }
  th, td { min-width: 0; border-color: #bbb; padding: 4pt 5pt; }
  th { border-bottom: 1.5pt solid #000; text-transform: none; letter-spacing: 0; font-size: 8.5pt; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
  td { overflow-wrap: break-word; }
  .table-wrap.wide thead th { position: static; box-shadow: none; }
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
  .box { background: none; border: 1px solid #999; break-inside: avoid; }
}