/* Stadt Leipzig — theme for Zammad 7.2 (assets/theming/apps/zammad, CD skill)
 * Leitfarbe blau · Absender "Medienpädagogisches Zentrum" · logo Stadt-Leipzig-Logo-2C-RGB-trim.png · built 2026-10-16 by build.sh.
 * Do not edit: change src/ or theme.conf and build again. */

/* ===== 1. tokens.css (CD skill, unchanged) ===== */
/* Stadt Leipzig corporate design — design tokens. SINGLE SOURCE OF TRUTH.
 *
 * tokens-version: 1.5.0
 *
 * Every value here is either quoted from the Markenportal (source noted) or
 * a documented project decision (marked DECISION — see references/decisions.md).
 * Copy into a project as-is. Do NOT edit locally: changes go into the skill,
 * otherwise projects drift apart. Bump tokens-version on every change and
 * re-run scripts/build_tokens.py to regenerate the Tailwind artefacts.
 *
 * Units
 *   - type scale in rem (respects the reader's browser font size — BITV)
 *   - spacing, radii, borders in px
 *   - --doc-* in pt/mm and --slide-* in pt/cm: consumed by audit_docx.py and
 *     audit_pptx.py; inert in the browser. They live here so print and Office
 *     share the same single source as the web.
 *
 * Non-negotiables baked into these tokens (Farben p.14, Typografie p.6/12,
 * Barrierefrei p.2): brand colours never colour text; colour goes on
 * surfaces. No gradients, no tints other than the six Helle Töne, no
 * shadows on text, no italics, no ALL CAPS, no hyphenation. A dark theme
 * exists for screens only (D117, D118 "Graphit"); print, Office, newsletters
 * and social media stay light.
 *
 * Two layers (DECISION D80): the brand identity above is fixed. Screen
 * interfaces additionally get the "Screen UI" block below — neutrals,
 * small radii, overlay shadows, a layout column — so apps look like
 * leipzig.de and follow common UI practice instead of transplanting print
 * rules (rectilinear, shadow-free, no greys) onto controls and cards.
 *
 * Four page switches (D88–D118, references/decisions.md), all on <html> or on
 * the root element of an embedded product — put all four on the SAME element:
 *   data-cd-mode   reading | task (task when absent)        D88, D89, D95, D98
 *   data-leitfarbe blau (default) | gold | waldgruen | kupfer | violett | porphyr
 *                  — the page's colour scheme                 D96, D97
 *   data-cta       gold | absent (reading pages only)         D90
 *   data-theme     dark | auto | absent = light (screens only) D117, D118
 *                  auto follows prefers-color-scheme; nested data-theme
 *                  values are not supported (one theme per product root)
 * The attribute blocks at the end of this file re-point the semantic aliases;
 * components read the aliases and never need to know the colour. A var()
 * inside a custom property resolves on the element that declares it, so every
 * block re-declares each derived alias — that keeps a wrapper below <html>
 * (an embedded product) correct too.
 */

:root {
  /* ---- Brand palette (Farben p.4–8) ------------------------------------ */
  /* Primärfarben */
  --color-blau: #0E3AB6;            /* Leipzig Blau · CMYK 100/70/0/0 · Pantone 293 C · text on it: white */
  --color-gold: #FFE500;            /* Leipzig Gold · CMYK 0/0/100/0 · Yellow PY12 C · text on it: black */
  /* Sekundärfarben */
  --color-waldgruen: #006647;       /* Leipzig Waldgrün · 90/0/70/40 · 342 C · text: white */
  --color-kupfer: #F07E26;          /* Leipzig Kupfer (Orange) · 0/55/90/0 · 151 C · text: BLACK */
  --color-violett: #5C2A6B;         /* Leipzig Violett · 65/100/0/10 · 259 C · text: white */
  --color-porphyr: #A11838;         /* Leipzig Porphyr · 20/100/60/10 · 7426 C · text: white */
  /* Helle Töne — the only permitted tints, one per parent colour (Farben p.7–8); text on all: black */
  --color-blau-hell: #C3E7FF;
  --color-gold-hell: #FFF6A6;
  --color-waldgruen-hell: #C5ECE0;
  --color-kupfer-hell: #FED27A;
  --color-violett-hell: #DC95FF;
  --color-porphyr-hell: #FFBAC4;
  /* Unbunt */
  --color-schwarz: #000000;
  --color-weiss: #FFFFFF;
  /* Logo-Blau lives ONLY inside the logo artwork (Farben p.4, Logo p.7). It is
     listed so the checker can recognise it and reject it in project code. */
  --color-logo-blau: #0040F0;
  /* Light grey: not part of the palette. Permitted as a logo background
     ("hellgrau", Logo p.6) and used by the city's own deck for placeholders.
     DECISION D10: the palette-adjacent neutral (table stripes, dividers,
     disabled, --color-ui-bg); screen
     UI adds the neutrals in the Screen UI block below (D84). */
  --color-grau-hell: #F2F2F2;

  /* ---- Semantic aliases (what code should actually reference) ---------- */
  --color-primary: var(--color-blau);
  --color-primary-hell: var(--color-blau-hell);
  --color-accent: var(--color-gold);           /* Gold is the Bürgerservice colour in the manual (Farben p.18). Screens: any product may take Gold as its Leitfarbe ([data-leitfarbe="gold"], D97), and reading pages may use the Gold CTA pill ([data-cta="gold"], D90, customer decision A3); pair rules (Gold + Gold hell, a Sekundärfarbe or Blau; never a foreign Helle Ton) and the two-colour cap D12 unchanged */
  --color-text: var(--color-schwarz);
  --color-text-inverse: var(--color-weiss);
  --color-bg: var(--color-weiss);
  --color-bg-subtle: var(--color-grau-hell);   /* DECISION */
  --color-border: var(--color-schwarz);        /* DECISION D10: 1px black for brand surfaces and documents; screen UI borders use --color-ui-line / --color-ui-line-strong (D84) */
  --color-divider: var(--color-grau-hell);     /* DECISION: soft separators */
  /* Status — DECISION, mapped onto the Sekundärfarben; text colour per palette rule */
  --color-success: var(--color-waldgruen);     /* text on it: white */
  --color-warning: var(--color-kupfer);        /* text on it: BLACK */
  --color-danger: var(--color-porphyr);        /* text on it: white */
  --color-info: var(--color-blau);             /* text on it: white */
  /* The four *-hell status tints are for DOCUMENTS AND SLIDES ONLY (D97,
     D110). Never a screen status background, badge or row fill: on screens
     status boxes and badges are neutral with icon + word (D97, D103), and a
     status word is never coloured text (D110). */
  --color-success-hell: var(--color-waldgruen-hell);
  --color-warning-hell: var(--color-kupfer-hell);
  --color-danger-hell: var(--color-porphyr-hell);
  --color-info-hell: var(--color-blau-hell);

  /* ---- Interaction (DECISION — Farben p.8 says web "Zwischentöne" exist but publishes none) */
  --color-link: var(--color-blau);             /* underlined; Blau on Blau pages, black in every other Leitfarbe block (D96, D97). NEVER #0040F0 */
  --color-link-visited: var(--color-link);     /* no separate visited colour (D96): Violett next to Blau would be a Sekundärfarbe pair */
  --link-underline: 1px;
  --link-underline-hover: 3px;                 /* hover changes weight, never colour */
  --link-underline-offset: 0.2em;              /* real text-decoration, never a gradient (D96) */
  --color-focus: var(--color-schwarz);
  --color-focus-halo: var(--color-weiss);      /* 2px black ring + 2px white halo = visible on every surface */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo); /* focus halo; --shadow-overlay is the one Screen-UI shadow (D83, D89) */
  --opacity-disabled: 0.5;                     /* documents only — not for screens: disabled controls use grau-hell + ui-line-strong + muted (D98) */
  --target-min: 44px;                          /* DECISION: minimum pointer target (WCAG 2.5.5 AAA); 2.5.8 AA would be 24px */
  --color-on-primary: var(--color-text-inverse); /* text on --color-primary; the [data-leitfarbe] blocks set it (black on Gold and Kupfer, D97) — never flip it by hand */
  --color-ink: var(--color-schwarz);           /* D118: the "ink" of controls — field edge on hover, focus and error, the pressed chip, the select chevron; white in the dark theme. Not a text colour */

  /* ---- Typography (Typografie p.2–11) ---------------------------------- */
  /* Leipzig Sans is the brand font. Arial is the only permitted substitute
     (Typografie p.11), Noto Sans only for non-Latin scripts. Web fonts:
     the city's official LeipzigSans-Regular/-Medium/-Bold .woff2/.woff ship
     unchanged in assets/fonts/web/ (never convert — licence; DECISION D31)
     — see assets/fonts/web/README.md. */
  --font-sans: 'Leipzig Sans', Arial, sans-serif;
  --font-sans-nonlatin: 'Noto Sans', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* DECISION: no brand mono exists */

  /* Weights the city owns and uses (print-indesign: Light/Regular/Medium/Bold; italics exist but are never used and Barrierefrei p.2 forbids them) */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;   /* headings in the official deck and templates */
  --weight-bold: 700;     /* URLs in the Absender row, H2/H3 in print */

  /* Type scale — D88: the city's measured screen sizes (leipzig.de), two
     modes. The values here are task mode, the fallback when data-cd-mode is
     missing; [data-cd-mode="reading"] below raises body and h1. Typografie p.5
     ratio 1:2 holds in task mode (32:16). html stays 16px (D101). */
  --text-display: 3rem;   /* 48px — brand-surface L-Form hero headline only (D88 item 8) */
  --text-h1: 2rem;        /* 32px in task mode; reading: clamp(2rem, 1.6rem + 1.6vw, 2.5rem) (D88) */
  --text-h2: 1.625rem;    /* 26px, both modes (D88) */
  --text-h3: 1.375rem;    /* 22px (D88) */
  --text-h4: 1.25rem;     /* 20px (D88) */
  --text-body-lg: 1.125rem; /* 18px — reading body, task question/lead, reading CTA label (D88); not "--text-lg": the Tailwind class text-lg is flagged by check_style */
  --text-body: 1rem;      /* 16px in task mode; reading: var(--text-body-lg) (D88) */
  --text-ui: 1rem;        /* 16px fixed in both modes: fields, labels, breadcrumb, table cells, footer (D88) */
  --text-meta: var(--text-ui); /* 16px dates, places, counts, help — both modes (D88, D91) */
  --text-small: 0.875rem; /* 14px ≈ 10.5pt — the floor, not a default: result counts, header tool labels < 1024px (D88; Barrierefrei p.2: ≥10pt) */
  --text-endorsement: 0.75rem; /* 12px — the only absolute web size the manual states (Endorsement p.12) */

  --leading-tight: 1.2;
  --leading-snug: 1.3;    /* endorsement line-height 130% (Endorsement p.12) */
  --leading-normal: 1.5;

  --tracking-normal: 0;
  --tracking-absender: 0.02em; /* Light Absender text, tracking +20 in the templates */

  /* ---- The layout unit x (Layout p.5–6, Logo p.12) ---------------------- */
  /* x = logo height / 3. Margins 2x top/bottom, 3x left/right — identical to
     the logo's Schutzzone, so the logo sits flush in the margin corner.
     Minimum gap between elements 2x; caption gap 1x. Digital logo min 30px.
     (Brand layouts; screen UI: --ui-column + --ui-gutter, D86.) */
  --logo-height: 48px;                 /* DECISION default for desktop; 30px is the floor (Logo p.13) */
  --logo-height-min: 30px;             /* brand layouts and print-derived canvases only */
  --logo-height-compact: 36px;         /* D112: the smallest header logo on screens — a dense host
                                          UI's own logo slot (core-only screens, theming.md §1);
                                          site and app headers use --ui-logo-height 44/48 (D92) */
  /* The delivered SVG/PNG canvas already contains the Schutzzone: artwork
     height × 2.2 ≈ canvas height (layout-logo B.14). Brand layouts: size the
     <img> by canvas; website/app headers use the artwork trimmed to its
     bounding box (D81). */
  --logo-canvas-ratio: 2.2;
  --x: calc(var(--logo-height) / 3);   /* 16px at the default */
  --margin-block: calc(2 * var(--x));  /* top / bottom */
  --margin-inline: calc(3 * var(--x)); /* left / right */
  --gap-min: calc(2 * var(--x));
  --gap-caption: var(--x);

  /* ---- Spacing scale (px, for component internals) ---------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;        /* 5 × 16 — leipzig.de's section rhythm (D95) */
  /* Spacing roles (D95); reading mode raises both to --space-9 below */
  --space-section: var(--space-6);  /* between sections: 32 task, 80 reading */
  --space-footer: var(--space-7);   /* content → footer: 48 task, 80 reading (D92) */

  /* ---- Radii: the CD is rectilinear (L-Form, tiles); Störer is a circle --- */
  --radius-none: 0;
  --radius-full: 9999px;  /* Störer; on screens also pill buttons (D82) */
  /* Screen UI (D82): leipzig.de rounds buttons (pill), images and cards */
  --radius-sm: 4px;       /* form fields, small chips */
  --radius-md: 8px;       /* cards, dialogs, menus */

  /* ---- Borders --------------------------------------------------------- */
  --border-width: 1px;
  --border-width-thick: 2px;

  /* ---- Elevation: the brand layouts use no shadows (Layout p.21, Störer p.8).
     Screen UI (D83, D89): open floating layers lift — menus, dialogs,
     toasts; cards never (hover darkens the border). Never on type, never on
     the L-Form, the Störer or the logo. */
  --shadow-none: none;
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12);    /* dropdowns, dialogs */
  --shadow-raised: 0 4px 16px rgb(14 58 182 / 0.12); /* deprecated: not for card hover — the border darkens instead (D89); unused on screens, kept through tokens 1.x for projects on 1.1.0, removed in 2.0 */

  /* ---- L-Form (L-Form p.3–8) ------------------------------------------- */
  /* Touches exactly two edges. One leg ends flush with the edge, the other
     stops short. Asymmetric — never equal legs. Min 5% of the format area.
     One L-Form colour per layout. Values below are the component defaults. */
  --lform-color: var(--color-primary);     /* follows data-leitfarbe (D97) */
  --lform-thickness: calc(3 * var(--x));   /* the thin leg */
  --lform-step: calc(6 * var(--x));        /* the thick leg */
  --lform-min-area: 5%;

  /* ---- Störer (Störer p.4–5) ------------------------------------------- */
  --stoerer-size-min: 30%;     /* of the format's short side */
  --stoerer-size-max: 70%;
  --stoerer-safe-inset: 10%;   /* of the diameter, measured inward */
  --stoerer-rotation-max: 10deg;

  /* ---- Endorsement bar, web (Endorsement p.12–13) ----------------------- */
  /* The manual's 18px/12px labels are cap-top/baseline distances of the 12px
     text, not paddings (VERIFICATION B2): a 40px bar with the text vertically
     centred reproduces the figure. */
  --endorsement-text: var(--text-endorsement);
  --endorsement-leading: 1.3;
  --endorsement-logo-block: 60px;
  --endorsement-bar-height: 40px;

  /* ---- Layout --------------------------------------------------------- */
  --container-max: 1200px;   /* DECISION D34 — brand-surface pages; screen UI uses --ui-column / --ui-column-wide (D86) */
  --measure: 33em;           /* D94: ≈ 48ch, 63–70 characters per line in either mode (594px at 18px). Never ch for this font: 72ch was ≈ 94–104 characters */

  /* ---- Screen UI (DECISION D80–D86) — app interfaces, not print --------- */
  /* Neutrals for UI chrome. They never replace a brand colour; text stays
     black except secondary text, which is --color-text-muted (8.45:1). */
  --color-ui-bg: var(--color-grau-hell);   /* page behind cards */
  --color-ui-line: #D6D6D6;                /* card borders, dividers — not text */
  --color-ui-line-strong: #767676;         /* form-field borders, 4.54:1 on white (WCAG 1.4.11) */
  --color-text-muted: #4D4D4D;             /* help, meta, captions: 8.45:1 white, 7.55:1 grau-hell */
  /* Semantic UI fills (D118, tokens 1.5.0) — components read these, never
     --color-grau-hell for a UI role, so the dark theme re-points one token
     instead of a component selector. --color-grau-hell keeps #F2F2F2 in both
     themes (the inverted pill's hover on a Vollton, the logo ground). */
  --color-ui-subtle: var(--color-grau-hell);        /* hover, readonly, disabled, table head, zebra, skeleton */
  --color-ui-overlay: var(--color-weiss);           /* menus, search panel, dialogs, toasts: lift by lightness in the dark */
  --color-ui-overlay-subtle: var(--color-grau-hell); /* hover inside an overlay */
  /* Light grounds inside any theme: the named Helle Töne stay light in the
     dark theme, so their links and field borders keep the light values. */
  --color-link-on-light: var(--color-blau);         /* = the light page link: Blau on Blau pages, black otherwise (D96) */
  --color-line-on-light: var(--color-ui-line-strong); /* field border on a named Helle Ton: #767676 in both themes */
  /* Graphit (D118, customer decision 2026-10-13): the dark theme's neutrals,
     hue-neutral (R = G = B), elevation by lightness. Used only by the
     [data-theme] blocks at the end of this file — never directly. */
  --color-graphit-page: #121212;           /* task page, form panel (--color-ui-bg) — white 18.73:1 */
  --color-graphit-surface: #1C1C1C;        /* cards, header, footer, reading page, fields (--color-bg) — white 17.04:1 */
  --color-graphit-raised: #262626;         /* hover, selected row, table head, tags, overlays — white 15.13:1 */
  --color-graphit-overlay: #303030;        /* hover inside an overlay — white 13.19:1 */
  --color-graphit-line: #3D3D3D;           /* card borders, dividers (decorative, like #D6D6D6) */
  --color-graphit-line-strong: #8F8F8F;    /* field borders, placeholder: 5.27:1 surface, 4.68:1 raised */
  --color-graphit-muted: #C4C4C4;          /* secondary text: ≥ 7.56:1 on every Graphit layer */
  /* Elements that belong to one theme only (the logo pair, D118):
     [data-theme-only="light|dark"] { display: var(--display-light|dark) } */
  --display-light: block;
  --display-dark: none;
  /* Hover/pressed shades, one per Vollton (D85, D97). Farben p.8 allows web
     Zwischentöne without publishing them: these are the skill's, with the
     label contrast measured (check_contrast.py). */
  --color-blau-hover: #0B2F94;             /* D85: white label 11.36:1 */
  --color-gold-hover: #F7DD00;             /* leipzig.de's Gold hover (D90): black label 15.30:1 */
  --color-waldgruen-hover: #005239;        /* Waldgrün × 0.8: white 9.27:1 */
  --color-kupfer-hover: #E97A25;           /* Kupfer × 0.97: black 7.28:1 */
  --color-violett-hover: #4A2256;          /* Violett × 0.8: white 12.69:1 */
  --color-porphyr-hover: #81132D;          /* Porphyr × 0.8: white 10.17:1 */
  --color-primary-hover: var(--color-blau-hover); /* hover/pressed of the filled primary; re-pointed per Leitfarbe (D97) */
  /* Call to action (D90): the Leitfarbe pill; Gold under [data-cd-mode="reading"][data-cta="gold"] */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover); /* black where the fill is Gold or Kupfer: fill vs hover only 1.08:1 / 1.06:1 (D97) */
  /* State colours that follow the Leitfarbe (D97, D99, D100) */
  --color-primary-indicator: var(--color-primary); /* progress fill, active-nav marker, list markers, checked box fill; black on Gold and Kupfer (WCAG 1.4.11) */
  --color-on-indicator: var(--color-weiss);        /* the mark on an indicator, always white (D97, D99) */
  --color-selected-bg: var(--color-primary-hell);  /* selected choice row, current nav item; white under data-cta="gold" (D90, D99) */
  --color-tag-bg: var(--color-primary-hell);       /* tag pills, always with a 1px --color-line-on-tint border; grau-hell under data-cta="gold" (D100) */
  --color-line-on-tint: var(--color-ui-line-strong); /* field, tag and box borders on the page's Helle Ton (and tag pills); black on Violett and Porphyr, where #767676 is 2.12 / 2.83:1 (D99, D100, 1.4.11) */
  --color-status-bar: var(--color-schwarz);        /* 4px inline-start bar of danger/warning boxes and field errors (D97, D99) */
  --color-chart-edge: var(--color-schwarz);        /* 1px outline of chart marks under 3:1 on the card (D107); white in the dark (D118) */
  /* The page's tint surface (D118): .surface-primary-hell, the tile default,
     the task intro band and the .l-form--tint hero. Light: the page's Helle
     Ton with black text and the page's link and pill. Dark: the Leitfarbe's
     Vollton with its mandated text and the inverted pill — never a grey or
     newly tinted band. Each [data-leitfarbe] block re-declares the set. */
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);   /* the infobox rule and tab on the tint (black on Gold, Kupfer) */
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  /* Status boxes are all neutral white boxes on screens; info carries a 4px
     --color-primary-indicator bar, no tint (D103) — 1.2.0's
     --color-status-info-bg is gone. */
  --color-backdrop: rgb(0 0 0 / 0.5);              /* modal dialog backdrop (::backdrop, D103): a scrim over the page, not a palette colour — never a surface for text or a brand area; the one translucent colour token */
  /* One column for header, content and footer so every left edge lines up */
  --ui-column: 40rem;                      /* D89: forms, surveys, logins, single-task flows (640px ≈ leipzig.de's form panel) */
  --ui-column-wide: 72rem;                 /* D89: reading pages (text capped by --measure), dashboards, lists */
  --ui-gutter: 16px;                       /* side margin of the column: 16 / 32 from 640px / 64 from 1024px in reading mode (D89) */
  --control-height: 48px;                  /* inputs, buttons; >= --target-min */
  --ui-header-height: 80px;                /* min-height of the first header row, never a fixed height (D92) */
  --ui-logo-height: 44px;                  /* trimmed header artwork; 48px from 1024px (D92) */
  /* Absender beside the header logo (D109): margin-block-start that puts the
     first baseline of 16px Leipzig Sans (ascent 1.016em + half-leading at
     line-height 1.3 = 1.04em) on the baseline of "Stadt", 0.453 x the trimmed
     artwork's height below its top: 3.4px at 44, 5.1px at 48. Use it inside a
     row aligned to flex-start; em resolves on the element that uses it. */
  --ui-absender-offset: calc(0.453 * var(--ui-logo-height) - 1.04em);
  /* Buttons (D98): heights are min-heights, labels wrap */
  --button-height: var(--control-height);  /* 48px — task mode, form panels, cards */
  --button-height-lg: 56px;                /* reading-mode buttons */
  --button-height-sm: var(--target-min);   /* 44px — header, toolbars, table rows */
  --button-icon-shift: 4px;                /* trailing arrow on hover/focus; 0 under reduced motion (D98, D25) */

  /* ---- Charts (D13, D97) — series order; the Leitfarbe blocks move their own
     colour to position 1 and keep the rest in D13 order. Charts are exempt
     from the two-colour cap but need a second cue; Gold, Kupfer and Blau hell
     marks on white need a 1px black outline, also with direct labels (3:1
     fails; D107). Hosts that cannot draw outlines: dataviz.md §2 fallback. */
  --chart-1: var(--color-blau);
  --chart-2: var(--color-gold);
  --chart-3: var(--color-waldgruen);
  --chart-4: var(--color-kupfer);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);

  /* ---- Motion — DECISION; nothing in the CD -------------------------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --easing: cubic-bezier(0.2, 0, 0, 1);

  /* ---- Documents (Word / PDF) — pt and mm -------------------------------- */
  /* DECISION derived from the print type scale (body 10/15, H1 Medium 30,
     H2 Bold 13.5, H3 Bold 11.5, captions 8 — print-indesign) and the
     Barrierefrei floor of 10pt for reading text. */
  --doc-title-size: 30pt;    /* Medium */
  --doc-h1-size: 24pt;       /* Medium */
  --doc-h2-size: 14pt;       /* Bold */
  --doc-h3-size: 12pt;       /* Bold */
  --doc-body-size: 11pt;     /* Regular, 1.35 leading */
  --doc-caption-size: 9pt;   /* Light/Regular — captions, footers, URLs */
  --doc-min-size: 9pt;       /* captions may not go below; body ≥ 10pt is checked separately */
  --doc-body-min-size: 10pt; /* Barrierefrei p.2 */
  /* Letter: anchored on the city's Briefpapier / Urkunde (office-slides): logo box
     38.9×15.6mm at 10.4mm from top, 15.5mm from the right edge; left 35mm. */
  --doc-margin-top: 40mm;
  --doc-margin-bottom: 20mm;
  --doc-margin-left: 35mm;
  --doc-margin-right: 20mm;
  /* Report: interior brochure Satzspiegel (print-indesign, A4) */
  --doc-report-margin-top: 25mm;
  --doc-report-margin-bottom: 20mm;
  --doc-report-margin-left: 20mm;
  --doc-report-margin-right: 20mm;
  --doc-logo-height: 12mm;   /* 100% = delivered artwork = 12mm (VERIFICATION B4); min 5mm */
  --doc-logo-min: 5mm;
  --doc-header-distance: 10mm;  /* Briefpapier logo top edge 10.4mm (office-slides §3.2) */
  --doc-footer-distance: 10mm;  /* DECISION */
  --doc-list-indent: 6.35mm;    /* Urkunde numbering.xml hanging indent, 360 twips */

  /* ---- Print (InDesign-class) — from the ten city templates (print-indesign) */
  --print-bleed: 3mm;
  --print-x-a4: 4mm;            /* unit x on A4/A5/square/DIN lang; A6 3mm; A3 6; A2 10; A1 12; A0 16 */
  --print-body-size: 10pt;      /* Regular, 15pt leading */
  --print-body-leading: 15pt;
  --print-h1-size: 30pt;        /* Medium, 33.75 */
  --print-h2-size: 13.5pt;      /* Bold, 15 */
  --print-h3-size: 11.5pt;      /* Bold, 15 */
  --print-caption-size: 9pt;    /* DECISION: templates use 8pt; ≥9pt for generated material */
  --print-baseline-grid: 3.75pt;

  /* ---- Slides (PowerPoint) — from the official deck (office-slides) ------ */
  --slide-width: 33.867cm;   /* 16:9 */
  --slide-height: 19.05cm;
  --slide-margin-left: 2.43cm;
  --slide-margin-right: 1.74cm;
  --slide-margin: 1.74cm;    /* generic safe area used by audit_pptx.py */
  --slide-h1-size: 48pt;     /* Medium — title slide */
  --slide-title-size: 28pt;  /* Medium — H3 slide title */
  --slide-h4-size: 18pt;
  --slide-body-size: 16pt;   /* Regular, 125% */
  --slide-small-size: 14pt;
  --slide-caption-size: 12pt;/* Light */
  --slide-footer-size: 10pt; /* footer strip only */
  --slide-min-size: 12pt;    /* DECISION: anything below except the footer is a finding */
  --slide-logo-width: 3.23cm;
  --slide-logo-height: 1.30cm;
}

/* D93: never synthesise. Regular/Medium/Bold ship as the city's official web
   files; a weight without a face renders as the nearest declared face (700
   without Bold → Medium), never as faux bold, and a face whose file fails
   shows up in document.fonts as "error". Light 300 has no web file and
   renders as Regular. Never italics (Barrierefrei p.2). */
html { font-synthesis: none; }

/* Motion off when the reader asks for it. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --button-icon-shift: 0px;   /* D98 */
  }
}

/* ---- Responsive steps (D89, D92) --------------------------------------- */
@media (min-width: 640px) {
  :root,
  [data-cd-mode="task"] {
    --ui-gutter: 32px;
  }
}
@media (min-width: 1024px) {
  :root {
    --ui-logo-height: 48px;
  }
  [data-cd-mode="reading"] {
    --ui-gutter: 64px;          /* the 64px step is reading mode only (D89) */
  }
}

/* ---- Modes (D88, D95) — task is the fallback; reading raises body, h1 and
   the section rhythm. `--measure` is in em, so it follows the body size. */
[data-cd-mode="task"] {
  --text-h1: 2rem;
  --text-body: 1rem;
  --space-section: var(--space-6);
  --space-footer: var(--space-7);
}
[data-cd-mode="reading"] {
  --text-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);  /* 32px on phones, 40px from ≈ 900px (D88) */
  --text-body: var(--text-body-lg);                /* 18px (D88, customer decision A4) */
  --space-section: var(--space-9);                 /* 80px (D95) */
  --space-footer: var(--space-9);                  /* 80px (D92, D95) */
}

/* ---- Leitfarben (D97, customer decision plan §8.1) ----------------------
   Blau is the base; any Vollton may be a product's primary, Gold included.
   Pair rules stay (D12): the Leitfarbe with white and its own Helle Ton; for
   Blau also any Helle Ton; for Gold also a Sekundärfarbe or Blau — never Gold
   beside a foreign Helle Ton. Every block
   declares the full set so a wrapper below <html> resolves correctly.
   Links: Blau only on Blau pages, black elsewhere (D96). Indicators: black
   where the fill fails 3:1 on white (Gold 1.28, Kupfer 2.72). Borders on the
   Helle Ton: black where #767676 fails 3:1 on it (Violett hell, Porphyr hell). */
[data-leitfarbe="blau"] {
  --color-primary: var(--color-blau);
  --color-primary-hell: var(--color-blau-hell);
  --color-primary-hover: var(--color-blau-hover);
  --color-on-primary: var(--color-weiss);          /* 9.13:1, hover 11.36:1 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-blau);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-blau);
  --color-primary-indicator: var(--color-primary);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-blau);
  --chart-2: var(--color-gold);
  --chart-3: var(--color-waldgruen);
  --chart-4: var(--color-kupfer);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
}
[data-leitfarbe="gold"] {
  --color-primary: var(--color-gold);
  --color-primary-hell: var(--color-gold-hell);
  --color-primary-hover: var(--color-gold-hover);
  --color-on-primary: var(--color-schwarz);        /* 16.46:1, hover 15.30:1; white would be 1.28 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-schwarz);   /* fill vs hover only 1.08:1 */
  --color-link: var(--color-schwarz);   /* Blau links beside Gold + Gold hell would be a third colour (D96) */
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-schwarz);
  --color-primary-indicator: var(--color-schwarz); /* Gold on white 1.28:1 */
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-gold);
  --chart-2: var(--color-blau);
  --chart-3: var(--color-waldgruen);
  --chart-4: var(--color-kupfer);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
}
[data-leitfarbe="waldgruen"] {
  --color-primary: var(--color-waldgruen);
  --color-primary-hell: var(--color-waldgruen-hell);
  --color-primary-hover: var(--color-waldgruen-hover);
  --color-on-primary: var(--color-weiss);          /* 7.02:1, hover 9.27:1 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-schwarz);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-schwarz);
  --color-primary-indicator: var(--color-primary);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-waldgruen);
  --chart-2: var(--color-blau);
  --chart-3: var(--color-gold);
  --chart-4: var(--color-kupfer);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
}
[data-leitfarbe="kupfer"] {
  --color-primary: var(--color-kupfer);
  --color-primary-hell: var(--color-kupfer-hell);
  --color-primary-hover: var(--color-kupfer-hover);
  --color-on-primary: var(--color-schwarz);        /* 7.72:1, hover 7.28:1; white would be 2.72 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-schwarz);   /* fill vs hover only 1.06:1 */
  --color-link: var(--color-schwarz);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-schwarz);
  --color-primary-indicator: var(--color-schwarz); /* Kupfer on white 2.72:1 */
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-kupfer);
  --chart-2: var(--color-blau);
  --chart-3: var(--color-gold);
  --chart-4: var(--color-waldgruen);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
}
[data-leitfarbe="violett"] {
  --color-primary: var(--color-violett);
  --color-primary-hell: var(--color-violett-hell);
  --color-primary-hover: var(--color-violett-hover);
  --color-on-primary: var(--color-weiss);          /* 10.51:1, hover 12.69:1 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-schwarz);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-schwarz);
  --color-primary-indicator: var(--color-primary);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-schwarz);           /* #767676 on Violett hell 2.12:1 */
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-violett);
  --chart-2: var(--color-blau);
  --chart-3: var(--color-gold);
  --chart-4: var(--color-waldgruen);
  --chart-5: var(--color-kupfer);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
}
[data-leitfarbe="porphyr"] {
  --color-primary: var(--color-porphyr);
  --color-primary-hell: var(--color-porphyr-hell);
  --color-primary-hover: var(--color-porphyr-hover);
  --color-on-primary: var(--color-weiss);          /* 7.77:1, hover 10.17:1 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-schwarz);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-schwarz);
  --color-primary-indicator: var(--color-primary);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-schwarz);           /* #767676 on Porphyr hell 2.83:1 */
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-porphyr);
  --chart-2: var(--color-blau);
  --chart-3: var(--color-gold);
  --chart-4: var(--color-waldgruen);
  --chart-5: var(--color-kupfer);
  --chart-6: var(--color-violett);
  --chart-7: var(--color-blau-hell);
}

/* ---- Gold call to action (D90, customer decision A3) --------------------
   Only on a reading page whose whole colour budget is Gold-compatible: besides
   white, black and the neutrals at most Blau, one Sekundärfarbe Vollton, or
   Gold/Gold hell — no other Helle Ton anywhere on the page. The block turns
   every tint-bearing state neutral so no component can bring a foreign Helle
   Ton next to the pill at runtime. Scoped to reading mode: a task page cannot
   turn Gold by accident. Kept after the Leitfarbe blocks (it also outranks
   them by specificity). */
[data-cd-mode="reading"][data-cta="gold"] {
  --color-cta: var(--color-gold);
  --color-on-cta: var(--color-schwarz);            /* 16.46:1 */
  --color-cta-hover: var(--color-gold-hover);      /* black 15.30:1 */
  --color-cta-hover-border: var(--color-schwarz);   /* Gold vs hover only 1.08:1 */
  --color-selected-bg: var(--color-bg);
  --color-tag-bg: var(--color-grau-hell);
  /* the tint surface turns neutral grau-hell (D90): no Helle Ton beside Gold */
  --tint-bg: var(--color-grau-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
}

/* ==== Dark theme "Graphit" (D117, D118, customer decision 2026-10-13) ====
   Screens only: every block sits in @media screen, so print stays light
   (D117); Office, newsletters and social media never load it.
   Opt in with data-theme on the switch-carrying element:
     data-theme="dark"   always dark
     data-theme="auto"   dark when the reader's system asks for it
                         (prefers-color-scheme: dark), light otherwise
     no data-theme       light — the system setting is ignored
   The identity does not change: Volltöne keep their hex, their mandated
   label and the D97 hover shade. Only the neutral layer changes (Graphit,
   elevation by lightness), plus what sits ON it: links, indicators (the
   Leitfarbe's Helle Ton where the Vollton fails 3:1 on graphite), the
   inverted focus ring, white status bars and chart outlines. The page's
   tint surface (--tint-*) becomes the Vollton.
   Nested data-leitfarbe roots below a dark root are re-declared by
   :is([data-theme], [data-theme] *)[data-leitfarbe] (0,2,0), which beats
   the light Leitfarbe blocks (0,1,0). The "auto" blocks repeat the "dark"
   blocks exactly (build_tokens.py --check and the tests compare them). */
@media screen {
  [data-theme="dark"] {
    color-scheme: dark;                               /* native scrollbars, date pickers, autofill */
    --color-text: var(--color-weiss);                 /* 17.04:1 on the surface */
    --color-text-inverse: var(--color-schwarz);
    --color-bg: var(--color-graphit-surface);
    --color-bg-subtle: var(--color-graphit-raised);
    --color-border: var(--color-weiss);
    --color-divider: var(--color-graphit-line);
    --color-ink: var(--color-weiss);
    --color-ui-bg: var(--color-graphit-page);
    --color-ui-line: var(--color-graphit-line);
    --color-ui-line-strong: var(--color-graphit-line-strong);
    --color-text-muted: var(--color-graphit-muted);
    --color-ui-subtle: var(--color-graphit-raised);
    --color-ui-overlay: var(--color-graphit-raised);
    --color-ui-overlay-subtle: var(--color-graphit-overlay);
    --color-line-on-light: #767676;                   /* the light field border: named Helle Töne stay light */
    /* Focus, D21 inverted: 2 px white ring + 2 px black halo; one of the two
       reaches 3:1 on every surface. Never changed by the Leitfarbe. */
    --color-focus: var(--color-weiss);
    --color-focus-halo: var(--color-schwarz);
    --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo);
    /* Elevation: a 12 % shadow is invisible on graphite; overlays also lift to
       --color-ui-overlay. The backdrop dims more. */
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.6);
    --color-backdrop: rgb(0 0 0 / 0.7);
    --color-status-bar: var(--color-weiss);           /* danger/warning bar and field errors: white bar + icon, never Porphyr hell */
    --color-chart-edge: var(--color-weiss);           /* outlines the dark marks (Blau, Waldgrün, Violett, Porphyr) */
    --display-light: none;
    --display-dark: block;
  }
  /* blau first: also the default when data-leitfarbe is absent */
  [data-theme="dark"]:not([data-leitfarbe]),
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="blau"] {
    --color-on-primary: var(--color-weiss);       /* :root says text-inverse, black in the dark */
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-blau-hell);   /* Blau links only on Blau pages (D96): their dark twin */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-blau-hell);   /* Blau on graphite 1.86:1 — its own Helle Ton (Monochrom, Farben p.12–13) */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="gold"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold/Kupfer: fill vs hover 1.08 / 1.06:1 (D97) */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-gold);   /* Gold 13.35:1 on the surface */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-schwarz);
    --tint-accent: var(--color-schwarz);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="waldgruen"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-waldgruen-hell);   /* Waldgrün on graphite 2.42:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="kupfer"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold/Kupfer: fill vs hover 1.08 / 1.06:1 (D97) */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-kupfer);   /* Kupfer 6.26:1 on the surface */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-schwarz);
    --tint-accent: var(--color-schwarz);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="violett"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-violett-hell);   /* Violett on graphite 1.62:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-leitfarbe="porphyr"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-porphyr-hell);   /* Porphyr on graphite 2.19:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="dark"], [data-theme="dark"] *)[data-cd-mode="reading"][data-cta="gold"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold vs hover 1.08:1 */
    --color-link: var(--color-weiss);                 /* Blau hell beside the Gold pill would be a foreign Helle Ton (D90) */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-weiss);
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-ui-subtle);
    --tint-text: var(--color-text);
    --tint-link: var(--color-link);
    --tint-line: var(--color-ui-line-strong);
    --tint-cta: var(--color-cta);
    --tint-on-cta: var(--color-on-cta);
    --tint-cta-hover: var(--color-cta-hover);
    --tint-cta-hover-border: var(--color-cta-hover-border);
    --tint-cta-border: var(--color-cta);
    --tint-accent: var(--color-primary-indicator);
    --tint-lform-color: var(--color-primary);
    --tint-lform-text: var(--color-on-primary);
  }
}

/* High contrast (prefers-contrast: more): card lines reach 3:1 (#8F8F8F). */
@media screen and (prefers-contrast: more) {
  [data-theme="dark"] { --color-ui-line: var(--color-graphit-line-strong); }
}

@media screen and (prefers-color-scheme: dark) {
  [data-theme="auto"] {
    color-scheme: dark;                               /* native scrollbars, date pickers, autofill */
    --color-text: var(--color-weiss);                 /* 17.04:1 on the surface */
    --color-text-inverse: var(--color-schwarz);
    --color-bg: var(--color-graphit-surface);
    --color-bg-subtle: var(--color-graphit-raised);
    --color-border: var(--color-weiss);
    --color-divider: var(--color-graphit-line);
    --color-ink: var(--color-weiss);
    --color-ui-bg: var(--color-graphit-page);
    --color-ui-line: var(--color-graphit-line);
    --color-ui-line-strong: var(--color-graphit-line-strong);
    --color-text-muted: var(--color-graphit-muted);
    --color-ui-subtle: var(--color-graphit-raised);
    --color-ui-overlay: var(--color-graphit-raised);
    --color-ui-overlay-subtle: var(--color-graphit-overlay);
    --color-line-on-light: #767676;                   /* the light field border: named Helle Töne stay light */
    /* Focus, D21 inverted: 2 px white ring + 2 px black halo; one of the two
       reaches 3:1 on every surface. Never changed by the Leitfarbe. */
    --color-focus: var(--color-weiss);
    --color-focus-halo: var(--color-schwarz);
    --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo);
    /* Elevation: a 12 % shadow is invisible on graphite; overlays also lift to
       --color-ui-overlay. The backdrop dims more. */
    --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.6);
    --color-backdrop: rgb(0 0 0 / 0.7);
    --color-status-bar: var(--color-weiss);           /* danger/warning bar and field errors: white bar + icon, never Porphyr hell */
    --color-chart-edge: var(--color-weiss);           /* outlines the dark marks (Blau, Waldgrün, Violett, Porphyr) */
    --display-light: none;
    --display-dark: block;
  }
  /* blau first: also the default when data-leitfarbe is absent */
  [data-theme="auto"]:not([data-leitfarbe]),
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="blau"] {
    --color-on-primary: var(--color-weiss);       /* :root says text-inverse, black in the dark */
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-blau-hell);   /* Blau links only on Blau pages (D96): their dark twin */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-blau-hell);   /* Blau on graphite 1.86:1 — its own Helle Ton (Monochrom, Farben p.12–13) */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="gold"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold/Kupfer: fill vs hover 1.08 / 1.06:1 (D97) */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-gold);   /* Gold 13.35:1 on the surface */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-schwarz);
    --tint-accent: var(--color-schwarz);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="waldgruen"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-waldgruen-hell);   /* Waldgrün on graphite 2.42:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="kupfer"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold/Kupfer: fill vs hover 1.08 / 1.06:1 (D97) */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-kupfer);   /* Kupfer 6.26:1 on the surface */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-schwarz);
    --tint-accent: var(--color-schwarz);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="violett"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-violett-hell);   /* Violett on graphite 1.62:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-leitfarbe="porphyr"] {
    --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
    --color-link: var(--color-weiss);   /* black in the light theme */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-porphyr-hell);   /* Porphyr on graphite 2.19:1 */
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-primary);
    --tint-text: var(--color-on-primary);
    --tint-link: var(--color-on-primary);
    --tint-line: var(--color-on-primary);
    --tint-cta: var(--color-weiss);
    --tint-on-cta: var(--color-schwarz);
    --tint-cta-hover: var(--color-grau-hell);
    --tint-cta-hover-border: var(--color-schwarz);
    --tint-cta-border: var(--color-weiss);
    --tint-accent: var(--color-weiss);
    --tint-lform-color: var(--color-weiss);
    --tint-lform-text: var(--color-schwarz);
  }
  :is([data-theme="auto"], [data-theme="auto"] *)[data-cd-mode="reading"][data-cta="gold"] {
    --color-cta-hover-border: var(--color-schwarz);   /* Gold vs hover 1.08:1 */
    --color-link: var(--color-weiss);                 /* Blau hell beside the Gold pill would be a foreign Helle Ton (D90) */
    --color-link-visited: var(--color-link);
    --color-primary-indicator: var(--color-weiss);
    --color-on-indicator: var(--color-schwarz);
    --color-selected-bg: var(--color-graphit-raised);
    --color-tag-bg: var(--color-graphit-raised);
    --color-line-on-tint: var(--color-graphit-line-strong);
    --tint-bg: var(--color-ui-subtle);
    --tint-text: var(--color-text);
    --tint-link: var(--color-link);
    --tint-line: var(--color-ui-line-strong);
    --tint-cta: var(--color-cta);
    --tint-on-cta: var(--color-on-cta);
    --tint-cta-hover: var(--color-cta-hover);
    --tint-cta-hover-border: var(--color-cta-hover-border);
    --tint-cta-border: var(--color-cta);
    --tint-accent: var(--color-primary-indicator);
    --tint-lform-color: var(--color-primary);
    --tint-lform-text: var(--color-on-primary);
  }
}

@media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {
  [data-theme="auto"] { --color-ui-line: var(--color-graphit-line-strong); }
}

/* ===== 2. Parameters (generated by build.sh from theme.conf and tokens.css) ===== */
/* Leitfarbe blau: the [data-leitfarbe="blau"] block of tokens.css on :root, because
   nothing in Zammad can set the attribute (theming.md §4 item 2). */
:root:root {
  --color-primary: var(--color-blau);
  --color-primary-hell: var(--color-blau-hell);
  --color-primary-hover: var(--color-blau-hover);
  --color-on-primary: var(--color-weiss);          /* 9.13:1, hover 11.36:1 */
  --color-cta: var(--color-primary);
  --color-on-cta: var(--color-on-primary);
  --color-cta-hover: var(--color-primary-hover);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-blau);
  --color-link-visited: var(--color-link);
  --color-link-on-light: var(--color-blau);
  --color-primary-indicator: var(--color-primary);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --lform-color: var(--color-primary);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --chart-1: var(--color-blau);
  --chart-2: var(--color-gold);
  --chart-3: var(--color-waldgruen);
  --chart-4: var(--color-kupfer);
  --chart-5: var(--color-violett);
  --chart-6: var(--color-blau-hell);
  --chart-7: var(--color-porphyr);
  /* theme tokens (src/zammad-tokens.css), light */
  --cd-logo: url("Stadt-Leipzig-Logo-2C-RGB-trim.png");
  --cd-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
  --cd-filter-ink: brightness(0);
  --cd-filter-neutral: brightness(0) invert(46.27%);
  --cd-filter-subtle: brightness(0) invert(83.92%);
  --cd-status-good: var(--color-success);
  --cd-status-ok: var(--color-warning);
  --cd-status-bad: var(--color-danger);
  --cd-priority-high: var(--color-danger);
  --cd-article-customer-bg: #E7F4FF;
  --cd-article-customer-line: var(--color-blau-hell);
  --cd-nav-bg: #F5F6F7;
  --cd-nav-menu-bg: #E9EBED;
  --cd-nav-hover-bg: #DDE0E3;
  --cd-nav-line: #D6D9DC;
  --cd-field-line: #C9CCD0;
  --cd-host-dark-surface: var(--color-graphit-raised);
  --cd-toast-bg: var(--color-schwarz);
  --cd-toast-text: var(--color-text-inverse);
  --cd-absender: "Medienp\e4 dagogisches Zentrum";
  --cd-footer-line: "\a9  2026 Stadt Leipzig \b7  Medienp\e4 dagogisches Zentrum";
}
/* Dark theme "Graphit" (D117, D118): the [data-theme="dark"] block of tokens.css, its
   blau block and the dark theme tokens. Screens only (print stays light).
   a) The agent app and its sign-in screens: Zammad itself sets html[data-theme] to
      "dark" for the appearance "Dunkel" and for "Automatisch" on a dark system, to
      "light" for "Hell" (and "Automatisch" on a light system).
   b) The knowledge base and /mobile have no appearance setting: they follow the
      system (prefers-color-scheme), as tokens.css does for data-theme="auto". */
@media screen {
  :root:root[data-theme="dark"] {
      color-scheme: dark;                               /* native scrollbars, date pickers, autofill */
      --color-text: var(--color-weiss);                 /* 17.04:1 on the surface */
      --color-text-inverse: var(--color-schwarz);
      --color-bg: var(--color-graphit-surface);
      --color-bg-subtle: var(--color-graphit-raised);
      --color-border: var(--color-weiss);
      --color-divider: var(--color-graphit-line);
      --color-ink: var(--color-weiss);
      --color-ui-bg: var(--color-graphit-page);
      --color-ui-line: var(--color-graphit-line);
      --color-ui-line-strong: var(--color-graphit-line-strong);
      --color-text-muted: var(--color-graphit-muted);
      --color-ui-subtle: var(--color-graphit-raised);
      --color-ui-overlay: var(--color-graphit-raised);
      --color-ui-overlay-subtle: var(--color-graphit-overlay);
      --color-line-on-light: #767676;                   /* the light field border: named Helle Töne stay light */
      /* Focus, D21 inverted: 2 px white ring + 2 px black halo; one of the two
         reaches 3:1 on every surface. Never changed by the Leitfarbe. */
      --color-focus: var(--color-weiss);
      --color-focus-halo: var(--color-schwarz);
      --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo);
      /* Elevation: a 12 % shadow is invisible on graphite; overlays also lift to
         --color-ui-overlay. The backdrop dims more. */
      --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.6);
      --color-backdrop: rgb(0 0 0 / 0.7);
      --color-status-bar: var(--color-weiss);           /* danger/warning bar and field errors: white bar + icon, never Porphyr hell */
      --color-chart-edge: var(--color-weiss);           /* outlines the dark marks (Blau, Waldgrün, Violett, Porphyr) */
      --display-light: none;
      --display-dark: block;

      --color-on-primary: var(--color-weiss);       /* :root says text-inverse, black in the dark */
      --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
      --color-link: var(--color-blau-hell);   /* Blau links only on Blau pages (D96): their dark twin */
      --color-link-visited: var(--color-link);
      --color-primary-indicator: var(--color-blau-hell);   /* Blau on graphite 1.86:1 — its own Helle Ton (Monochrom, Farben p.12–13) */
      --color-on-indicator: var(--color-schwarz);
      --color-selected-bg: var(--color-graphit-raised);
      --color-tag-bg: var(--color-graphit-raised);
      --color-line-on-tint: var(--color-graphit-line-strong);
      --tint-bg: var(--color-primary);
      --tint-text: var(--color-on-primary);
      --tint-link: var(--color-on-primary);
      --tint-line: var(--color-on-primary);
      --tint-cta: var(--color-weiss);
      --tint-on-cta: var(--color-schwarz);
      --tint-cta-hover: var(--color-grau-hell);
      --tint-cta-hover-border: var(--color-schwarz);
      --tint-cta-border: var(--color-weiss);
      --tint-accent: var(--color-weiss);
      --tint-lform-color: var(--color-weiss);
      --tint-lform-text: var(--color-schwarz);
    /* theme tokens, dark */
    --cd-logo: url("Stadt-Leipzig-Logo-1C-Negativ-RGB-trim.png");
    --cd-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
    --cd-filter-ink: brightness(0) invert(100%);
    --cd-filter-neutral: brightness(0) invert(56.08%);
    --cd-filter-subtle: brightness(0) invert(23.92%);
    --cd-status-good: var(--color-waldgruen-hell);
    --cd-status-ok: var(--color-kupfer);
    --cd-status-bad: var(--color-porphyr-hell);
    --cd-priority-high: var(--color-status-bar);
    --cd-article-customer-bg: var(--color-graphit-overlay);
    --cd-article-customer-line: var(--color-link);
    --cd-nav-bg: #1B1C1F;
    --cd-nav-menu-bg: #18191B;
    --cd-nav-hover-bg: var(--color-graphit-raised);
    --cd-nav-line: var(--color-graphit-line);
    --cd-field-line: #55585D;
    --cd-host-dark-surface: var(--color-ui-overlay);
    --cd-toast-bg: var(--color-ui-overlay);
    --cd-toast-text: var(--color-text);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:root:is([data-available-locales], :has(> head > link[href*="/vite/assets/mobile-"])) {
      color-scheme: dark;                               /* native scrollbars, date pickers, autofill */
      --color-text: var(--color-weiss);                 /* 17.04:1 on the surface */
      --color-text-inverse: var(--color-schwarz);
      --color-bg: var(--color-graphit-surface);
      --color-bg-subtle: var(--color-graphit-raised);
      --color-border: var(--color-weiss);
      --color-divider: var(--color-graphit-line);
      --color-ink: var(--color-weiss);
      --color-ui-bg: var(--color-graphit-page);
      --color-ui-line: var(--color-graphit-line);
      --color-ui-line-strong: var(--color-graphit-line-strong);
      --color-text-muted: var(--color-graphit-muted);
      --color-ui-subtle: var(--color-graphit-raised);
      --color-ui-overlay: var(--color-graphit-raised);
      --color-ui-overlay-subtle: var(--color-graphit-overlay);
      --color-line-on-light: #767676;                   /* the light field border: named Helle Töne stay light */
      /* Focus, D21 inverted: 2 px white ring + 2 px black halo; one of the two
         reaches 3:1 on every surface. Never changed by the Leitfarbe. */
      --color-focus: var(--color-weiss);
      --color-focus-halo: var(--color-schwarz);
      --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo);
      /* Elevation: a 12 % shadow is invisible on graphite; overlays also lift to
         --color-ui-overlay. The backdrop dims more. */
      --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.6);
      --color-backdrop: rgb(0 0 0 / 0.7);
      --color-status-bar: var(--color-weiss);           /* danger/warning bar and field errors: white bar + icon, never Porphyr hell */
      --color-chart-edge: var(--color-weiss);           /* outlines the dark marks (Blau, Waldgrün, Violett, Porphyr) */
      --display-light: none;
      --display-dark: block;

      --color-on-primary: var(--color-weiss);       /* :root says text-inverse, black in the dark */
      --color-cta-hover-border: var(--color-weiss);   /* white hover rim, 17.04:1 on the card: the D97 shade alone changes only 1.2–1.3:1 on graphite */
      --color-link: var(--color-blau-hell);   /* Blau links only on Blau pages (D96): their dark twin */
      --color-link-visited: var(--color-link);
      --color-primary-indicator: var(--color-blau-hell);   /* Blau on graphite 1.86:1 — its own Helle Ton (Monochrom, Farben p.12–13) */
      --color-on-indicator: var(--color-schwarz);
      --color-selected-bg: var(--color-graphit-raised);
      --color-tag-bg: var(--color-graphit-raised);
      --color-line-on-tint: var(--color-graphit-line-strong);
      --tint-bg: var(--color-primary);
      --tint-text: var(--color-on-primary);
      --tint-link: var(--color-on-primary);
      --tint-line: var(--color-on-primary);
      --tint-cta: var(--color-weiss);
      --tint-on-cta: var(--color-schwarz);
      --tint-cta-hover: var(--color-grau-hell);
      --tint-cta-hover-border: var(--color-schwarz);
      --tint-cta-border: var(--color-weiss);
      --tint-accent: var(--color-weiss);
      --tint-lform-color: var(--color-weiss);
      --tint-lform-text: var(--color-schwarz);
    /* theme tokens, dark */
    --cd-logo: url("Stadt-Leipzig-Logo-1C-Negativ-RGB-trim.png");
    --cd-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
    --cd-filter-ink: brightness(0) invert(100%);
    --cd-filter-neutral: brightness(0) invert(56.08%);
    --cd-filter-subtle: brightness(0) invert(23.92%);
    --cd-status-good: var(--color-waldgruen-hell);
    --cd-status-ok: var(--color-kupfer);
    --cd-status-bad: var(--color-porphyr-hell);
    --cd-priority-high: var(--color-status-bar);
    --cd-article-customer-bg: var(--color-graphit-overlay);
    --cd-article-customer-line: var(--color-link);
    --cd-nav-bg: #1B1C1F;
    --cd-nav-menu-bg: #18191B;
    --cd-nav-hover-bg: var(--color-graphit-raised);
    --cd-nav-line: var(--color-graphit-line);
    --cd-field-line: #55585D;
    --cd-host-dark-surface: var(--color-ui-overlay);
    --cd-toast-bg: var(--color-ui-overlay);
    --cd-toast-text: var(--color-text);
  }
}
@media screen and (prefers-contrast: more) {
  :root:root[data-theme="dark"] { --color-ui-line: var(--color-graphit-line-strong); }
}
@media screen and (prefers-color-scheme: dark) and (prefers-contrast: more) {
  :root:root:is([data-available-locales], :has(> head > link[href*="/vite/assets/mobile-"])) { --color-ui-line: var(--color-graphit-line-strong); }
}
/* Knowledge-base answers are running text: the reading-mode block of tokens.css
   (18 px body, 40 px h1, D88); the gutter stays the KB's, so the column edge is the
   same on every KB page. */
html[data-available-locales]:has(.main--article) {
  --text-h1: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);  /* 32px on phones, 40px from ≈ 900px (D88) */
  --text-body: var(--text-body-lg);                /* 18px (D88, customer decision A4) */
  --space-section: var(--space-9);                 /* 80px (D95) */
  --space-footer: var(--space-9);                  /* 80px (D92, D95) */
}
/* House login pattern (D120, customer decision 2026-10-14): the sign-in screens look the
   same in light and dark (Leitfarbe page, white card). The light value of every token
   the dark layer above changes, re-declared on the sign-in roots (agent app
   #app > .fullscreen, the /mobile sign-in), then Zammad's colour variables of
   zammad-agent.css C1 / zammad-mobile.css D1 again, so they resolve against these. */
#app > .fullscreen,
:root:has(> head > link[href*="/vite/assets/mobile-"]) #app > div:has(> div > main #signin) {
  color-scheme: light;
  --color-text: var(--color-schwarz);
  --color-text-inverse: var(--color-weiss);
  --color-bg: var(--color-weiss);
  --color-bg-subtle: var(--color-grau-hell);
  --color-border: var(--color-schwarz);
  --color-divider: var(--color-grau-hell);
  --color-ink: var(--color-schwarz);
  --color-ui-bg: var(--color-grau-hell);
  --color-ui-line: #D6D6D6;
  --color-ui-line-strong: #767676;
  --color-text-muted: #4D4D4D;
  --color-ui-subtle: var(--color-grau-hell);
  --color-ui-overlay: var(--color-weiss);
  --color-ui-overlay-subtle: var(--color-grau-hell);
  --color-line-on-light: var(--color-ui-line-strong);
  --color-focus: var(--color-schwarz);
  --color-focus-halo: var(--color-weiss);
  --shadow-focus-halo: 0 0 0 var(--focus-ring-offset) var(--color-focus-halo);
  --shadow-overlay: 0 8px 24px rgb(0 0 0 / 0.12);
  --color-backdrop: rgb(0 0 0 / 0.5);
  --color-status-bar: var(--color-schwarz);
  --color-chart-edge: var(--color-schwarz);
  --display-light: block;
  --display-dark: none;
  --color-on-primary: var(--color-weiss);
  --color-cta-hover-border: var(--color-cta-hover);
  --color-link: var(--color-blau);
  --color-link-visited: var(--color-link);
  --color-primary-indicator: var(--color-primary);
  --color-on-indicator: var(--color-weiss);
  --color-selected-bg: var(--color-primary-hell);
  --color-tag-bg: var(--color-primary-hell);
  --color-line-on-tint: var(--color-ui-line-strong);
  --tint-bg: var(--color-primary-hell);
  --tint-text: var(--color-schwarz);
  --tint-link: var(--color-link);
  --tint-line: var(--color-line-on-tint);
  --tint-cta: var(--color-cta);
  --tint-on-cta: var(--color-on-cta);
  --tint-cta-hover: var(--color-cta-hover);
  --tint-cta-hover-border: var(--color-cta-hover-border);
  --tint-cta-border: var(--color-cta);
  --tint-accent: var(--color-primary-indicator);
  --tint-lform-color: var(--color-primary);
  --tint-lform-text: var(--color-on-primary);
  --cd-logo: url("Stadt-Leipzig-Logo-2C-RGB-trim.png");
  --cd-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4 4 9-9'/%3E%3C/svg%3E");
  --cd-filter-ink: brightness(0);
  --cd-filter-neutral: brightness(0) invert(46.27%);
  --cd-filter-subtle: brightness(0) invert(83.92%);
  --cd-status-good: var(--color-success);
  --cd-status-ok: var(--color-warning);
  --cd-status-bad: var(--color-danger);
  --cd-priority-high: var(--color-danger);
  --cd-article-customer-bg: #E7F4FF;
  --cd-article-customer-line: var(--color-blau-hell);
  --cd-nav-bg: #F5F6F7;
  --cd-nav-menu-bg: #E9EBED;
  --cd-nav-hover-bg: #DDE0E3;
  --cd-nav-line: #D6D9DC;
  --cd-field-line: #C9CCD0;
  --cd-host-dark-surface: var(--color-graphit-raised);
  --cd-toast-bg: var(--color-schwarz);
  --cd-toast-text: var(--color-text-inverse);
}
#app > .fullscreen {
  --button-primary-background: var(--color-cta);
  --button-primary-background-active: var(--color-cta-hover);
  --button-primary-text: var(--color-on-cta);
  --button-background: var(--color-bg);
  --button-background-active: var(--color-ui-subtle);
  --button-active: var(--color-ink);
  --button-active-active: var(--color-ink);
  --button-action-color: var(--color-text-muted);
  --text-button-primary: var(--color-link);
  --text-button-primary-active: var(--color-link);
  --text-button-secondary: var(--color-text-muted);
  --header-primary: var(--color-text);
  --header-secondary: var(--color-text-muted);
  --text-normal: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-muted-alt: var(--color-text-muted);
  --text-muted-highlight: var(--color-text-muted);
  --text-link: var(--color-link);
  --text-nav: var(--color-link);
  --text-inverted: var(--color-weiss);
  --text-active: var(--color-text-inverse);
  --interactive-primary: var(--color-text);
  --interactive-muted: var(--color-text-muted);
  --interactive-muted-active: var(--color-text-muted);
  --interactive-muted-alt: var(--color-ui-line-strong);
  --interactive-muted-alt-selected: var(--color-text);
  --nav-icon: var(--color-text-muted);
  --highlight: var(--color-primary-indicator);
  --background-primary: var(--color-ui-bg);
  --background-primary-alt: var(--color-ui-bg);
  --background-secondary: var(--color-bg);
  --background-secondary-hover: var(--color-ui-subtle);
  --background-active: var(--color-ink);
  --background-highlight: var(--color-selected-bg);
  --background-popover: var(--color-ui-overlay);
  --background-article-meta: var(--color-bg);
  --background-article-customer: var(--cd-article-customer-bg);
  --background-article-customer-meta: var(--cd-article-customer-bg);
  --background-tertiary: var(--cd-host-dark-surface);
  --background-quaternary: var(--cd-host-dark-surface);
  --background-quaternary-alt: var(--color-ui-subtle);
  --background-modifier-hover: var(--color-ui-subtle);
  --fullscreen-background: var(--color-ui-bg);
  --fullscreen-text: var(--color-text);
  --fullscreen-text-link: var(--color-link);
  --fullscreen-text-muted: var(--color-text-muted);
  --file-icon-background: var(--color-bg);
  --file-icon-color: var(--color-ui-line-strong);
  --tag-text: var(--color-text);
  --tag-background: var(--color-tag-bg);
  --table-border: var(--color-ui-line);
  --table-header-background: var(--color-ui-subtle);
  --border: var(--color-ui-line);
  --border-alt: var(--color-ui-line);
  --border-highlight: var(--color-ink);
  --shadow-highlight: var(--color-focus-halo);
  --border-article-customer: var(--cd-article-customer-line);
  --border-article-customer-selected: var(--color-ui-line-strong);
  --supergood-color: var(--cd-status-good);
  --good-color: var(--cd-status-good);
  --ok-color: var(--cd-status-ok);
  --bad-color: var(--cd-status-ok);
  --superbad-color: var(--cd-status-bad);
  --danger-color: var(--cd-status-bad);
  --pending-color: var(--color-ui-line-strong);
  --ghost-color: var(--color-text-muted);
  --elevation-stroke: 0 0 0 transparent;
  --elevation-low: none;
  --elevation-high: var(--shadow-overlay);
  --menu-text: var(--color-text);
  --menu-text-active: var(--color-text);
  --menu-text-open: var(--color-text);
  --menu-text-closed: var(--color-text);
  --menu-text-escalating: var(--color-text);
  --menu-background-active: var(--color-selected-bg);
  --menu-icon: var(--color-text-muted);
  --menu-icon-secondary: var(--color-text-muted);
  --menu-icon-secondary-hover-background: var(--cd-nav-hover-bg);
  --menu-switch-background: var(--color-ui-line-strong);
  --menu-switch-pointer: var(--color-bg);
  --menu-switch-pointer-active: var(--color-bg);
  --menu-background-primary: var(--cd-nav-menu-bg);
  --menu-background-primary-hover: var(--cd-nav-hover-bg);
  --menu-background-secondary: var(--cd-nav-bg);
  --menu-close-tab-background: var(--color-text-muted);
  --menu-close-tab-opacity: 1;
}
:root:has(> head > link[href*="/vite/assets/mobile-"]) #app > div:has(> div > main #signin) {
  --color-black: var(--color-bg);
  --color-black-full: var(--color-bg);
  --color-white: var(--color-text);
  --color-gray: var(--color-text-muted);
  --color-gray-100: var(--color-text-muted);
  --color-gray-150: var(--color-text-muted);
  --color-gray-200: var(--color-ui-line-strong);
  --color-gray-300: var(--color-ui-line-strong);
  --color-gray-400: var(--color-ui-line);
  --color-gray-500: var(--color-ui-subtle);
  --color-gray-600: var(--color-ui-subtle);
  --color-gray-light: var(--color-ui-subtle);
  --color-gray-highlight: var(--color-ui-subtle);
  --color-yellow: var(--color-primary);
  --color-yellow-highlight: var(--color-selected-bg);
  --color-blue: var(--color-primary);
  --color-blue-dark: var(--color-primary-hover);
  --color-blue-highlight: var(--color-selected-bg);
  --color-pink: var(--color-primary);
  --color-red: var(--color-danger);
  --color-red-bright: var(--color-danger);
  --color-red-dark: var(--color-ui-subtle);
  --color-red-highlight: var(--color-ui-subtle);
  --color-green: var(--color-success);
  --color-green-highlight: var(--color-ui-subtle);
  --color-orange: var(--color-warning);
  --text-xs: var(--text-small);
  --text-xs--line-height: var(--leading-normal);
  --text-sm: var(--text-small);
  --text-sm--line-height: var(--leading-normal);
}

/* ===== 3. base-overrides.css (CD skill; font paths and scopes for this bundle) ===== */
/* Stadt Leipzig corporate design — base overrides for third-party apps.
 *
 * theming-base-version: 1.2.0 (needs tokens.css 1.2.0 or later)
 *
 * The first layer of a theme for an app the city does not build itself
 * (LimeSurvey, Zammad, Moodle, Wiki.js, GitLab, Grafana …). It fixes what
 * every host gets wrong in the same way and leaves the app's own look to the
 * theme file that follows it. Procedure, per-app notes: references/theming.md.
 *
 * Load order (one <link> each, or concatenated in this order where the app
 * takes a single CSS field):
 *
 *     tokens.css            assets/tokens.css, unchanged
 *     base-overrides.css    this file, unchanged
 *     <app>-theme.css       your rules for the app's own classes, last
 *
 * Fonts: section 1 loads Leipzig Sans from fonts/ — keep `fonts/web/`
 * as a sibling of the folder that holds this file (the skill's layout, D93).
 * A url() resolves against the stylesheet the browser fetched, not the file
 * it was written in, so CONCATENATING this file into a bundle (branding.css)
 * or pasting it into an app's CSS field breaks the paths unless you either
 *   1. copy the fonts next to the bundle in the same layout: the bundle in a
 *      folder (theming/branding.css), fonts/web/ beside that folder — the
 *      layout nginx-inject.conf.template serves; or
 *   2. rewrite the three url()s while concatenating, to the font folder
 *      relative to the bundle (flat folder: sed 's#\.\./fonts/web/#fonts/#g').
 *      CSS the app inlines into a <style> element resolves against each
 *      page's address: there use the proxy path from the site root
 *      (/cd-branding/fonts/…), the one exception, named in the hand-over.
 * Check: the font requests answer 200 font/woff2; check_layout T3/T4.
 * Never a third-party CDN. Details: references/theming.md §8.
 *
 * Scopes. Three kinds of rules, in this order:
 *   §2 Floor, not scoped: root 100 %, font-synthesis, the focus ring. They
 *      must reach every page the file is loaded on, as in leipzig.css (D21,
 *      D93, D101). Do not load the file where they must not apply.
 *   §3 Theme scope `.cd-theme` or `[data-cd-theme]` on <html> or <body>:
 *      Leipzig Sans on all text, monospace kept, no italics. Set it in the
 *      app's layout template, or let nginx add the attribute
 *      (nginx-inject.conf.template). An app that only takes CSS cannot set it:
 *      replace `html` with `html` (one search, every
 *      occurrence).
 *   §4–§6 Opt-in classes `cd-*` for templates you control, and the content
 *      scope `.richtext-content, html[data-available-locales] .article-content` for author content (Word
 *      pastes). Where you cannot add a class, replace `.cd-content,
 *      [data-cd-content]` with the app's own content selectors, e.g.
 *      `.question-text, .survey-welcome` (LimeSurvey) or `.contents` (Wiki.js).
 *
 * Specificity. Hosts style with classes and Bootstrap utilities that carry
 * !important. Rules here therefore sit at one class (0,1,x) or more and win
 * by source order, because the file loads after the app's CSS. !important is
 * used only where the opponent is an inline style (Word) or a host
 * !important utility (.mb-3), and is commented there.
 *
 * Values come only from tokens.css. check_style.py reports 0 findings.
 */

/* --- 1. Fonts (D31, D93) ---------------------------------------------------- */
/* The city's official web files, unchanged (never convert, D31). The licence
   covers the city's and the leipzig.schule / MPZ services (customer decision
   A2): serve them from the same host as the app, next to this file. */
@font-face {
  font-family: 'Leipzig Sans';
  src: url('fonts/LeipzigSans-Regular.woff2') format('woff2'),
       url('fonts/LeipzigSans-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Leipzig Sans';
  src: url('fonts/LeipzigSans-Medium.woff2') format('woff2'),
       url('fonts/LeipzigSans-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Leipzig Sans';
  src: url('fonts/LeipzigSans-Bold.woff2') format('woff2'),
       url('fonts/LeipzigSans-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --- 2. Floor (not scoped) -------------------------------------------------- */
/* Root 16 px (customer decision 2026-09-25, D101). Hosts shrink it:
   Bootstrap 5 builds such as LimeSurvey set --bs-root-font-size to 14 px,
   leipzig.de's own build and Passbolt use 62.5 % (1 rem = 10 px). Every rem
   token would shrink with it. :root:root (0,2,0) beats `html` and `:root`.
   A host whose own chrome is built on a 10 px root grows by 1.6 with this
   rule: restyle that chrome in tokens, or record the exception
   (references/theming.md §4.1). */
:root:root {
  --bs-root-font-size: 100%;   /* Bootstrap 5 reads it for :root { font-size } */
  font-size: 100%;
  font-synthesis: none;        /* a missing face renders as the nearest real one, never faux bold (D93) */
}

/* Focus (D21): 2 px black ring + 2 px white halo on every focusable element.
   Hosts remove the outline on :focus, or swap it for a coloured glow on
   .btn:focus-visible, with up to two classes; the ring is the accessibility
   floor, so it wins with !important. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus) !important;   /* floor: beats host `outline: 0` */
  outline-offset: var(--focus-ring-offset) !important;
  box-shadow: var(--shadow-focus-halo) !important;                        /* replaces coloured host glows */
}

/* --- 3. Theme scope: type ----------------------------------------------------- */
/* Leipzig Sans on every text node (T3), except code and icon fonts. The :not()
   list keeps icon fonts that are set on the element itself (Font Awesome,
   Material Design Icons, Material Symbols, Remix, Bootstrap Icons — on <i>
   and <span> only, so a button whose class says "icon" still gets the brand
   font on its label) and aria-hidden decorations. Add the app's own icon
   class to the list. */
:is(html),
:is(html) :not(code, kbd, pre, samp, tt, [aria-hidden="true"], [data-font], .material-icons, [class*="material-symbols"], .fa, .fas, .far, .fab, :is(i, span)[class*="icon"], :is(i, span)[class*="mdi"], :is(i, span)[class*="fa-"], :is(i, span)[class*="ri-"], :is(i, span)[class*="bi-"]) {
  font-family: var(--font-sans);
}
/* Body text 16 px (task mode, D88). A host built on a 10 px root sizes its body
   in rem (1.4rem means 14 px there) and would read 22.4 px after §2. */
:is(html) body,
body:is(html) {
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}
:is(html) :is(code, kbd, pre, samp, tt) {
  font-family: var(--font-mono);   /* fixed width is right for code (T3 skips it) */
}
:is(html) :is(em, i, cite, dfn, address, var):not([class]) {
  font-style: normal;              /* no italics (Barrierefrei p.2); emphasis is Bold */
}
:is(html) :is(em, cite, dfn):not([class]) {
  font-weight: var(--weight-bold);
}
:is(html) :is(h1, h2, h3, h4, h5, h6, p, li, td, th, dd, dt, label, legend) {
  hyphens: manual;                 /* never hyphenate (Barrierefrei p.2, D40) */
}
/* Browser defaults that every host page inherits where the app sets nothing:
   form controls at 13.33 px (T2) and Bold headings (R8: Medium). :where()
   keeps these at zero specificity, so any rule of the app or its theme wins. */
:where(html) :where(button, input, select, textarea) {
  font-size: inherit;
}
:where(html) :where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--weight-medium);
}
/* Line breaks without breaking words (D50: a heading stays at two lines or fewer;
   D94: words are never split). Balanced headings do not leave one word alone on a
   second line; running text avoids a lone last word. Zero specificity, like above. */
:where(html) :where(h1, h2, h3) {
  text-wrap: balance;
}
:where(html) :where(p, li, dd, blockquote, figcaption) {
  text-wrap: pretty;
}

/* --- 4. Links (D96) ------------------------------------------------------------ */
/* Prose links — links in author content and `.cd-link`: --color-link
   (data-leitfarbe sets it: Blau on Blau pages, black otherwise), underline
   1 px, 3 px on hover and focus, colour never changes, visited = link colour.
   A link with a class is a host component (button, tab, menu row) and keeps
   the theme's own rule. */
:is(.richtext-content, html[data-available-locales] .article-content) a:not([class]),
.cd-link {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
  text-decoration-skip-ink: auto;
}
:is(.richtext-content, html[data-available-locales] .article-content) a:not([class]):visited,
.cd-link:visited {
  color: var(--color-link-visited);
}
:is(.richtext-content, html[data-available-locales] .article-content) a:not([class]):is(:hover, :focus-visible),
.cd-link:is(:hover, :focus-visible) {
  color: var(--color-link);
  text-decoration-thickness: var(--link-underline-hover);
}

/* --- 5. Layout helpers (opt-in classes) --------------------------------------- */
/* One column (D89): put .cd-column on the header inner, the main wrapper and
   the footer inner alike, so every left edge is the same. Task pages
   (forms, surveys, logins) take --ui-column 40rem; add .cd-column--wide for
   lists, dashboards and reading pages (72rem). */
.cd-column {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--cd-column, var(--ui-column)) + 2 * var(--ui-gutter));
  margin-inline: auto;
  padding-inline: var(--ui-gutter);
}
.cd-column--wide {
  --cd-column: var(--ui-column-wide);
}

/* Nested framework containers: hosts stack .container > .row (negative
   margins) > .col (padding) several levels deep, and each level moves the
   left edge. .cd-flat on an ancestor flattens every level below it; the one
   .cd-column above it sets the edge. Not for real multi-column grids (it also
   removes the gap between columns): put .cd-flat below the grid, or not at all. */
.cd-flat :is(.container, .container-fluid, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl) {
  max-inline-size: none;
  inline-size: auto;
  margin-inline: 0;
  padding-inline: 0;
}
.cd-flat .row {
  --bs-gutter-x: 0;                /* Bootstrap 5: the gutter is a variable on the row */
  margin-inline: 0;
}
.cd-flat :is(.col, [class^="col-"], [class*=" col-"]) {
  padding-inline: 0;
}

/* Stacked spacing: core CSS adds margin-bottom, `.mb-3` and empty help or
   validation blocks with margins, and the gaps add up differently in every
   card. .cd-stack makes the element one flex column with one gap and zeroes
   the children's block margins. --cd-stack-gap picks the role (web.md §0.2 C:
   16 inside a card, 24 intro → first card, 32 between sections). */
.cd-stack {
  display: flex;
  flex-direction: column;
  gap: var(--cd-stack-gap, var(--space-4));
}
.cd-stack > * {
  margin-block: 0 !important;      /* beats Bootstrap's !important spacing utilities (.mb-3, .my-2) */
}
/* gap still counts an empty child: hide the ones without any content. Only
   :empty here — `:not(:has(*))` would also hide a <div> that holds plain
   text, so use it only on containers you know hold elements (validation
   slots), in the app theme. */
.cd-stack > :is(div, p, span, section):empty {
  display: none;
}

/* --- 6. Author content (Word pastes) ----------------------------------------- */
/* Text pasted from Word carries Calibri at 12 pt, a line height, a colour,
   an 11 px bottom margin and empty <p>&nbsp;</p> as inline styles. CSS can override the styles; only strip-word-paste.js can remove
   the empty paragraphs (CSS cannot see &nbsp;) and the styles themselves. */
:is(.richtext-content, html[data-available-locales] .article-content) {
  font-family: var(--font-sans);
  overflow-wrap: break-word;       /* last resort for a single word wider than the line (D94) */
}
:is(.richtext-content, html[data-available-locales] .article-content) :not(code, kbd, pre, samp, tt):is([style*="font-family"], font[face]) {
  font-family: var(--font-sans) !important; /* beats the inline style */
}
:is(.richtext-content, html[data-available-locales] .article-content) :not(h1, h2, h3, h4, h5, h6):is([style*="font-size"], font[size]) {
  font-size: inherit !important;   /* Word's 12pt → the surrounding token size */
}
:is(.richtext-content, html[data-available-locales] .article-content) h2[style*="font-size"] { font-size: var(--text-h2) !important; }
:is(.richtext-content, html[data-available-locales] .article-content) h3[style*="font-size"] { font-size: var(--text-h3) !important; }
:is(.richtext-content, html[data-available-locales] .article-content) :is(h4, h5, h6)[style*="font-size"] { font-size: var(--text-h4) !important; }
:is(.richtext-content, html[data-available-locales] .article-content) [style*="line-height"] {
  line-height: inherit !important;
}
:is(.richtext-content, html[data-available-locales] .article-content) :not(a):is([style*="color"], font[color]) {
  color: inherit !important;       /* text is black or white (Farben p.14); Word's dark blue is not */
}
:is(.richtext-content, html[data-available-locales] .article-content) [style*="background"]:not(img, picture, video, svg) {
  background: transparent !important; /* Word highlights are off-palette */
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(p, ul, ol, blockquote, table) {
  margin-block: 0 var(--space-4);
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(p, li, div)[style*="margin"],
:is(.richtext-content, html[data-available-locales] .article-content) .MsoNormal {
  margin-block: 0 var(--space-4) !important; /* Word's inline 11 px bottom margin */
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(p, ul, ol, blockquote, table):last-child,
:is(.richtext-content, html[data-available-locales] .article-content) :is(p, li, div)[style*="margin"]:last-child {
  margin-block-end: 0 !important;
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(p, li, blockquote) {
  max-inline-size: var(--measure); /* 63–70 characters per line (D94) */
}
/* Code blocks end on the same measure as the paragraphs around them (D94) and
   scroll inside themselves. --cd-measure is registered as a length, so it is
   computed once on the content area (16 or 18 px body text) and <pre> inherits
   that width — `var(--measure)` itself is 33em and would resolve against the
   smaller monospace size of the <pre>. Without @property support the block is
   only a little narrower. Tables are not capped (D94). */
@property --cd-measure {
  syntax: '<length>';
  inherits: true;
  initial-value: 0;
}
:is(.richtext-content, html[data-available-locales] .article-content) {
  --cd-measure: var(--measure);
}
:is(.richtext-content, html[data-available-locales] .article-content) pre {
  max-inline-size: var(--cd-measure, var(--measure));
  overflow-x: auto;
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(a[href*="://"], a[href^="mailto:"], code, .url) {
  overflow-wrap: anywhere;         /* a URL is not a word: it may break, prose never (D94) */
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(img, video, iframe) {
  max-inline-size: 100%;
  block-size: auto;
}

/* Wide tables scroll inside their own box, never the page (D94, D100).
   strip-word-paste.js wraps content tables in .cd-table-scroll; in templates
   you control, write the wrapper yourself:
   <div class="cd-table-scroll" role="region" aria-label="Tabelle" tabindex="0">. */
.cd-table-scroll {
  max-inline-size: 100%;
  overflow-x: auto;
}
.cd-table-scroll > table {
  margin-block-end: 0;
}
/* Tables in author content (Word, a CMS editor): the browser draws them with
   2 px cell spacing and 1 px padding, so the text sits 3 px off the column
   edge (L1) and the grid lines are Word's. Same look as leipzig.css .table
   (D100): collapsed, 12/16 px cells, ui-line rules, Bold th, no vertical rules.
   strip-word-paste.js removes Word's inline borders and widths first. */
/* Words in cells are never split (D94). Hosts squeeze columns below their
   longest word with `table-layout: fixed` (an editor's "fixed width cells"
   option) or `word-break: break-word` / `break-all` on the cells, often with
   two classes (WordPress core: .wp-block-table .has-fixed-layout td), and a
   390 px phone then shows "gebührenfr|ei". Auto layout keeps every column at
   least one word wide; a table wider than the column scrolls in its box
   (.cd-table-scroll or the host's own scroll wrapper, D100). Both win with
   !important: the host rule has more classes than this file uses. */
:is(.richtext-content, html[data-available-locales] .article-content) table {
  table-layout: auto !important;   /* beats a host's two-class fixed layout (D94) */
  border-collapse: collapse;
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}
:is(.richtext-content, html[data-available-locales] .article-content) caption {
  caption-side: top;
  padding-block-end: var(--space-2);
  font-weight: var(--weight-medium);
  text-align: start;
}
:is(.richtext-content, html[data-available-locales] .article-content) :is(th, td) {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: top;
  border: 0;
  border-block-end: var(--border-width) solid var(--color-ui-line);
  word-break: normal !important;   /* beats a host's two-class break-word / break-all (D94) */
}
/* In a cell, `overflow-wrap: anywhere` would lower the column's minimum width
   to one character: auto layout then squeezes the column and a URL or a code
   token stacks letter by letter. In cells they break only where they must
   (break-word keeps the minimum at the longest token) and the table scrolls
   in its box instead (D94, D100). */
:is(.richtext-content, html[data-available-locales] .article-content) :is(th, td) :is(a[href*="://"], a[href^="mailto:"], code, .url) {
  overflow-wrap: break-word;
}
:is(.richtext-content, html[data-available-locales] .article-content) th {
  font-weight: var(--weight-bold);
}

/* ===== 4. agent app: type, every appearance ===== */
/* =============================================================================
 * Stadt Leipzig theme for Zammad 7.2 — C0. agent app, TYPE layer (every appearance)
 *
 * Applies in every appearance (light and dark). html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) is replaced by build.sh with
 * the agent app's <html>: html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])
 * — the only front end that links Zammad's application.css (the knowledge base and /mobile
 * do not). Not html[data-theme]: a test harness or a page script may drop that attribute,
 * and the light look must not depend on it. Leipzig Sans comes from the base layer; this
 * file removes what Zammad adds to it — capitals, letter-spacing, italics, off weights — and
 * holds the 14 px floor and the focus ring inside clipped containers. No colours here:
 * those are in zammad-agent.css.
 * ============================================================================= */

/* Dense work tool: Zammad's 14 px body and controls instead of the 16 px task size (D88);
   16 px made every screen "zu groß" for agents who work in it all day (team feedback
   2026-10-15). Meta lines and counters 13 px. Headings keep their sizes. */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) {
  --text-body: 0.875rem;
  --text-ui: 0.875rem;
  --text-small: 0.8125rem;
}
/* the sign-in screens (house login pattern, D120) keep the 16 px of the other services */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app > .fullscreen {
  --text-body: 1rem;
  --text-ui: 1rem;
  --text-small: 0.875rem;
}

/* No capitals, no letter-spacing, no italics (Typografie p.6, Barrierefrei p.2).
   (1,1,3) beats Zammad's class rules; SVG text is left alone. */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app *:not(svg, svg *) {
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  font-style: normal;
}
/* Headings Medium (D88); Zammad sets them to its own weights */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :is(h1, h2, h3, h4, h5, h6, .ticket-title-update, .page-header-title) {
  font-weight: var(--weight-medium);
}
/* Zammad's light (300) and semibold (600) cuts have no Leipzig Sans file: Regular and
   Bold (D88, D93) */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :is(.activity-counter, .stat-amount, .ticket-number-copy-header) {
  font-weight: var(--weight-regular);
}
/* Field labels and table headers: black Medium, no longer grey capitals (D99, D100) */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :is(.formGroup-label label, .table > thead > tr > th) {
  font-weight: var(--weight-medium);
}
/* Controls in the 16 px UI size (D88): Zammad sets 13–14 px on buttons, fields and selects.
   File inputs keep Zammad's size: their oversized invisible text is the click area of the
   drop zone's "Dateien wählen…". */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :where(button, input:not([type="file"]), select, textarea) {
  font-size: var(--text-ui);
}

/* 14 px floor (D88; Barrierefrei p.2): Zammad's 9–13 px meta lines, labels, counters */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :is(small, .small, .task-subline, .ticket-number-copy-header, .humanTimeFromNow,
       .formGroup-label label, .label, .article-action, .btn--action, .badge,
       .stat-title, .stat-label, .stat-detail, .activity-time, .help-block, .help-message,
       .table > thead > tr > th, .article-meta-key, .article-meta-value,
       .tabsSidebar-tab-count, .activity-counter, .textBubble-letterCount, .tab-badge,
       .sidebar-content label, .avatar--unique) {
  font-size: max(var(--text-small), 1em);
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app :is(.formGroup-label label, .table > thead > tr > th, .btn--action, .badge, .label,
       .tabsSidebar-tab-count, .activity-counter, .article-action, .stat-title, .stat-label,
       .stat-detail, .tab-badge, .sidebar-content label, .avatar--unique) {
  font-size: var(--text-small);
}

/* Overview names in the overview list are short labels: they wrap instead of ending in
   "…" now that 16 px Leipzig Sans is wider than Zammad's 14 px (theming.md §4 item 17) */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .sidebar .nav-pills > li > a {
  block-size: auto;
  min-block-size: var(--space-6);
  padding-block: var(--space-2);
  line-height: var(--leading-snug);
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .sidebar .nav-pills > li > a .u-textTruncate {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* The ticket's action bar below 1024 px (Zammad's unsupported range, phones get /mobile):
   14 px labels like header tools there (D92), so "Aktualisieren" and "Tab beibehalten"
   keep their whole word in the host's fixed bar */
@media (max-width: 1023px) {
  html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .attributeBar .btn {
    font-size: var(--text-small);
  }
}

/* Focus inside clipped containers (D21): the navigation clips everything outside its
   items, so the ring and its white halo are drawn inside the element there — same 2 px
   black + 2 px white. The base layer draws them outside with !important, so these need
   it too. */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #navigation :is(a, button, input, [tabindex]):focus-visible {
  outline-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset))) !important; /* inside the clipped item */
  box-shadow: inset 0 0 0 var(--focus-ring-offset) var(--color-focus-halo) !important; /* check-style: ignore — the D21 white halo, drawn inside because the container clips */
}

/* Token fields (An, CC, Kunde, Tags): the bordered box is the .tokenfield, its <input>
   only fills the rest of the line after the tokens. The ring on that input drew a second
   field inside the field (colleague's screenshot of "An", 2026-10-16); the ring goes on
   the whole field instead. */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .tokenfield input:focus-visible {
  outline: none !important; /* check-style: ignore — focus stays visible: the same ring is drawn on the whole .tokenfield below */
  box-shadow: none !important; /* check-style: ignore — no halo on the inner input, the field carries it */
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .tokenfield:has(input:focus-visible) {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  box-shadow: var(--shadow-focus-halo);
}

/* Names for icon-only controls (A4): Zammad hides the article action names below
   1359 px; keep them for screen readers, visually hidden */
@media screen and (max-width: 1358px) {
  html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .main:not(.is-closed) .article-action-name {
    display: inline;
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .article-action {
  position: relative;
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) #app .js-openDropdownMacro::after {
  content: "" / "Makros";
}

/* ===== 5. agent app: colours, every appearance (the tokens switch light/dark) ===== */
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) {
  
  --button-primary-background: var(--color-cta);
  --button-primary-background-active: var(--color-cta-hover);
  --button-primary-text: var(--color-on-cta);
  --button-background: var(--color-bg);
  --button-background-active: var(--color-ui-subtle);
  --button-active: var(--color-ink);                /* the selected segment: black fill (D100), white in the dark */
  --button-active-active: var(--color-ink);
  --button-action-color: var(--color-text-muted);
  --text-button-primary: var(--color-link);
  --text-button-primary-active: var(--color-link);
  --text-button-secondary: var(--color-text-muted);

  
  --header-primary: var(--color-text);
  --header-secondary: var(--color-text-muted);
  --text-normal: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-muted-alt: var(--color-text-muted);
  --text-muted-highlight: var(--color-text-muted);
  --text-link: var(--color-link);
  --text-nav: var(--color-link);
  --text-inverted: var(--color-weiss);             /* Zammad: words on its dark menus and on
                                                      filled controls, light in both of its
                                                      themes; filled controls set their own
                                                      on-colour below (C3, C4) */
  --text-active: var(--color-text-inverse);
  --interactive-primary: var(--color-text);
  --interactive-muted: var(--color-text-muted);
  --interactive-muted-active: var(--color-text-muted);
  --interactive-muted-alt: var(--color-ui-line-strong);
  --interactive-muted-alt-selected: var(--color-text);
  --nav-icon: var(--color-text-muted);

  
  --highlight: var(--color-primary-indicator);
  --background-primary: var(--color-ui-bg);
  --background-primary-alt: var(--color-ui-bg);
  --background-secondary: var(--color-bg);
  --background-secondary-hover: var(--color-ui-subtle);
  --background-active: var(--color-ink);
  --background-highlight: var(--color-selected-bg);
  --background-popover: var(--color-ui-overlay);
  --background-article-meta: var(--color-bg);
  --background-article-customer: var(--cd-article-customer-bg);
  --background-article-customer-meta: var(--cd-article-customer-bg);
  
  --background-tertiary: var(--cd-host-dark-surface);
  --background-quaternary: var(--cd-host-dark-surface);
  --background-quaternary-alt: var(--color-ui-subtle);
  --background-modifier-hover: var(--color-ui-subtle);
  --fullscreen-background: var(--color-ui-bg);
  --fullscreen-text: var(--color-text);
  --fullscreen-text-link: var(--color-link);
  --fullscreen-text-muted: var(--color-text-muted);
  --file-icon-background: var(--color-bg);
  --file-icon-color: var(--color-ui-line-strong);
  --tag-text: var(--color-text);
  --tag-background: var(--color-tag-bg);
  --table-border: var(--color-ui-line);
  --table-header-background: var(--color-ui-subtle);

  
  --border: var(--color-ui-line);
  --border-alt: var(--color-ui-line);
  --border-highlight: var(--color-ink);             /* field focus: black (white in the dark); the ring comes from the base layer */
  --shadow-highlight: var(--color-focus-halo);
  --border-article-customer: var(--cd-article-customer-line);
  --border-article-customer-selected: var(--color-ui-line-strong);

  
  --supergood-color: var(--cd-status-good);
  --good-color: var(--cd-status-good);
  --ok-color: var(--cd-status-ok);
  --bad-color: var(--cd-status-ok);
  --superbad-color: var(--cd-status-bad);
  --danger-color: var(--cd-status-bad);
  --pending-color: var(--color-ui-line-strong);    /* "warten": a light ring, apart from the closed disc (C4) */
  --ghost-color: var(--color-text-muted);

  
  --elevation-stroke: 0 0 0 transparent;
  --elevation-low: none;
  --elevation-high: var(--shadow-overlay);

  
  --menu-text: var(--color-text);
  --menu-text-active: var(--color-text);
  --menu-text-open: var(--color-text);
  --menu-text-closed: var(--color-text);
  --menu-text-escalating: var(--color-text);
  --menu-background-active: var(--color-selected-bg);
  --menu-icon: var(--color-text-muted);
  --menu-icon-secondary: var(--color-text-muted);
  --menu-icon-secondary-hover-background: var(--cd-nav-hover-bg);
  --menu-switch-background: var(--color-ui-line-strong);
  --menu-switch-pointer: var(--color-bg);
  --menu-switch-pointer-active: var(--color-bg);
  --menu-background-primary: var(--cd-nav-menu-bg);
  --menu-background-primary-hover: var(--cd-nav-hover-bg);
  --menu-background-secondary: var(--cd-nav-bg);
  --menu-close-tab-background: var(--color-text-muted);
  --menu-close-tab-opacity: 1;
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"]) {
  --color-text: #333333; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-text-muted: #6B6B6B; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) — 5.0:1 on the page grey */
  --color-ui-line: #E3E3E3; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-ui-bg: #F5F6F7; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
}
html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])[data-theme="dark"] {
  --color-graphit-page: #1F2023; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-surface: #26282B; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-raised: #303236; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-overlay: #383A3E; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-line: #3E4045; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-line-strong: #85878B; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-graphit-muted: #A9ABAE; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-text: #E3E3E3; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) — 12.3:1 on the surface instead of 17:1 */
  --color-link: #A9D4F5; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
  --color-primary-indicator: #A9D4F5; /* check-style: ignore — work-tool profile, off-palette on purpose (team feedback 2026-10-15) */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation {
  --color-ui-line: var(--cd-nav-line);
  border-inline-end: var(--border-width) solid var(--cd-nav-line);
  background-color: var(--cd-nav-bg);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation::before,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation :is(.search, .menu, .menu-item:not(.is-active)) {
  background-color: var(--cd-nav-menu-bg);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .global-search-menu {
  inset-block-start: calc(var(--space-8) + 53px); /* check-style: ignore — Zammad's own search row height (53 px) below the logo row */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app.navigation-collapsed #navigation .global-search-menu {
  inset-block-start: 53px; /* check-style: ignore — Zammad's own value: no logo row in the collapsed navigation */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation::before {
  content: "" / "Stadt Leipzig";
  order: -1;
  flex: none;
  display: block;
  block-size: var(--space-8);
  border-block-end: var(--border-width) solid var(--color-ui-line);
  background-image: var(--cd-logo);
  background-position: var(--space-4) center;
  background-repeat: no-repeat;
  background-size: auto var(--logo-height-compact);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app.navigation-collapsed #navigation::before {
  display: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation :is(.menu-item, .tasks-navigation .nav-tab),
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation :is(.menu-item, .tasks-navigation .nav-tab):hover {
  border-block-end-color: var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .menu-item-navigation-toggle-button {
  border-block-start-color: var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation :is(.menu-item.is-active, .nav-tab.is-active),
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .nav-tab:is(.task-state-open, .task-state-closed, .task-state-escalating, .task-state-pending).is-active {
  background-color: var(--color-primary-indicator);
  box-shadow: none;
  color: var(--color-on-indicator);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation :is(.menu-item.is-active, .nav-tab.is-active) :is(.icon, .nav-tab-name, .menu-item-name) {
  color: var(--color-on-indicator);
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .nav-tab.is-active .icon-task-state {
  fill: var(--color-on-indicator);
  stroke: var(--color-on-indicator);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .nav-tab-close:hover .nav-tab-close-inner {
  background-color: var(--color-ink);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .nav-tab-close svg {
  fill: var(--color-text-inverse);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search input[type="search"] {
  border: var(--border-width) solid var(--color-ui-line-strong);
  background-color: var(--color-bg);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search input[type="search"]::placeholder {
  color: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search .icon {
  fill: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search .logo .icon-logo {
  visibility: hidden;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search .logo::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  background-color: var(--color-text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9a6 6 0 0 1 12 0c0 6 2.5 7.5 2.5 7.5h-17S6 15 6 9z'/%3E%3Cpath d='M10 20a2 2 0 0 0 4 0'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .search .logo {
  position: relative;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .activity-counter {
  border-color: var(--cd-nav-menu-bg);
  background: var(--color-porphyr);
  color: var(--color-weiss);
  text-shadow: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu > li {
  border-block-start: var(--border-width) solid var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu-icon.icon-plus {
  fill: var(--color-primary-indicator);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu li.add:is(:hover, .is-active, .is-hovered) .list-button::before {
  background: var(--color-cta);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu > li.add:is(:hover, .is-hovered, .is-active) .user-menu-icon.icon-plus {
  fill: var(--color-on-cta);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu .dropdown-menu {
  border-radius: var(--radius-md);
  background-color: var(--color-ui-overlay);
  box-shadow: var(--shadow-overlay);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu .dropdown-menu li > a,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu .dropdown-menu li > div {
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #navigation .user-menu .dropdown-menu .divider {
  background: var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn:not(.btn--text, .btn--action, .btn--icon-only, .btn--quad, .btn--split, .btn--split--first, .btn--split--last, .btn--slim) {
  border-radius: var(--radius-full);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.btn--primary, .btn--success, .btn--positive, .btn--create) {
  border-color: var(--color-cta);
  background: var(--color-cta);
  color: var(--color-on-cta);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.btn--primary, .btn--success, .btn--positive, .btn--create):is(:hover, :active) {
  border-color: var(--color-cta-hover-border);
  background: var(--color-cta-hover);
  color: var(--color-on-cta);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--danger,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--danger:active {
  background: var(--color-danger);
  color: var(--color-weiss);                       /* Porphyr's label is white in both themes (D97) */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.btn--active, .nav-tabs li.active, .nav-tabs li.active > a) {
  color: var(--color-text-inverse);
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.dropdown li:hover, .dropdown li.is-active, .ui-menu .ui-menu-item.ui-state-focus, .token.active, .pop-selectable:hover, .datepicker .day.active, .datepicker .month.active, .datepicker .year.active),
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.dropdown li:hover, .dropdown li.is-active, .ui-menu .ui-menu-item.ui-state-focus, .token.active) :is(a, span, .icon) {
  color: var(--color-on-indicator);
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--split--first {
  border-start-start-radius: var(--radius-full);
  border-end-start-radius: var(--radius-full);
  border-start-end-radius: 0;
  border-end-end-radius: 0;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--split--last {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-start-end-radius: var(--radius-full);
  border-end-end-radius: var(--radius-full);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.btn--primary, .btn--success).btn--split--last {
  border-inline-start: var(--border-width) solid var(--color-on-cta);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--text:not(.btn--subtle) {
  color: var(--color-link);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .btn--text.btn--subtle {
  color: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tab.active {
  background: var(--color-ink);
  color: var(--color-text-inverse);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tab.active :is(.icon, .tab-icon) {
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li > a,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li > a:is(:hover, :focus) {
  color: var(--color-link);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li.active > a,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li.active > a:is(:hover, :focus) {
  background: var(--color-primary-indicator);
  box-shadow: none;
  color: var(--color-on-indicator);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li > a .badge {
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .nav-pills > li.active > a :is(*, .badge) {
  color: var(--color-on-indicator);
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table > thead > tr > th {
  border-block-start-color: var(--color-ui-line);
  background: var(--color-ui-subtle);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table > tbody > tr > td {
  border-block-start-color: var(--color-ui-line);
  color: var(--color-text-muted);                  /* the title link leads, the other columns step back */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table-hover > tbody > tr:is(:hover, .is-hover) {
  background: var(--color-ui-subtle);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table td > a {
  padding-block: 2px; /* check-style: ignore — 20 px link line + 2 × 2 px = the WCAG 2.5.8 AA floor of 24 px (D112; 44 px elsewhere, D26) */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table a {
  color: var(--color-link);
  text-decoration-line: none;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table a:is(:hover, :focus-visible) {
  text-decoration-line: underline;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .icon-task-state.closed {
  stroke: var(--supergood-color);
  stroke-width: 4px; /* check-style: ignore — fills the ring of Zammad's 16 px state icon into a disc */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.item--high-priority, .item--low-priority) a {
  color: var(--color-link);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table > tbody > tr.item--high-priority > td:first-child {
  box-shadow: inset 4px 0 0 var(--cd-priority-high); /* check-style: ignore — 4 px status bar drawn inset (D110 row bar), keeps the host row geometry */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .table > tbody > tr.item--low-priority > td:first-child {
  box-shadow: inset 4px 0 0 var(--color-ui-line-strong); /* check-style: ignore — 4 px status bar drawn inset (D110 row bar), keeps the host row geometry */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .badge {
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .badge.badge--text {
  background: none;
  color: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .badge.badge--primary {
  background: var(--color-primary);
  color: var(--color-on-primary);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.badge.badge--warning, .badge.badge--new) {
  background: var(--color-gold);
  color: var(--color-schwarz);                     /* Gold's label is black in both themes (D97) */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .badge.badge--closed {
  background: var(--color-success);
  color: var(--color-weiss);                       /* Waldgrün's label is white in both themes (D97) */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .badge.badge--ghost {
  background: var(--color-ui-subtle);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .sidebar-content > :is(.js-tags, .js-links, .js-linkKbAnswers, .js-timeUnit, .js-subscriptions):has(> label) {
  margin-block-start: var(--space-3);
  padding-block-start: var(--space-3);
  border-block-start: var(--border-width) solid var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .sidebar-content > :is(.js-tags, .js-links, .js-linkKbAnswers, .js-timeUnit, .js-subscriptions) > label {
  color: var(--color-text);
  font-weight: var(--weight-medium);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count {
  opacity: 1;
  background: var(--color-text-muted);
  color: var(--color-text-inverse);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count::after {
  border-inline-end-color: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count:is(.tabsSidebar-tab-count--info, .tabsSidebar-tab-count--success, .tabsSidebar-tab-count--warning, .tabsSidebar-tab-count--danger) {
  opacity: 1;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count.tabsSidebar-tab-count--info { background: var(--color-primary); color: var(--color-on-primary); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count.tabsSidebar-tab-count--success { background: var(--color-success); color: var(--color-weiss); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count.tabsSidebar-tab-count--warning { background: var(--color-gold); color: var(--color-schwarz); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-count.tabsSidebar-tab-count--danger { background: var(--color-danger); color: var(--color-weiss); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab.active {
  background: var(--color-bg);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tabsSidebar-tab-dot {
  background: var(--color-primary-indicator);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.tag:not(.form-group), .list--sidebar .list-item.tag) { 
  border: var(--border-width) solid var(--color-line-on-tint);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tags .list-item-name,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .tags .list-item-name:is(:hover, :focus) {
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .buttonDropdown > .btn--text,
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .buttonDropdown > .btn--text :is(span, .icon) {
  color: var(--color-text);
  fill: currentColor;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .attachmentPlaceholder-label {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .attachmentPlaceholder-label:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .avatar--unique {
  background-image: none;
  background-color: var(--color-ui-subtle);
  box-shadow: inset 0 0 0 var(--border-width) var(--color-ui-line-strong); /* check-style: ignore — 1 px ring drawn inset so the avatar keeps its host size */
  color: var(--color-text);
  text-shadow: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app [class*="avatar--group-color-"] {
  background: var(--color-ui-subtle);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .textBubble {
  border-radius: var(--radius-md);
  box-shadow: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .richtext-content a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .article-action {
  color: var(--color-text-muted);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .ticket-article-item > a:has(> .task-subline) {
  display: block;
  min-block-size: var(--space-5);
  color: var(--color-text-muted);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .ticket-article-item > a:has(> .task-subline) .task-subline {
  color: inherit;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(input[type="text"], input[type="password"], input[type="email"], input[type="date"], input[type="url"], input[type="tel"], input[type="number"], textarea, select, .form-control, .tokenfield, .searchableSelect-main) {
  border-color: var(--cd-field-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .sidebar :is(.form-control, .searchableSelect-main, .tokenfield, input[type="text"], select, textarea) {
  background-color: var(--color-bg);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.checkbox-replacement, .radio-replacement) .icon-unchecked {
  color: var(--color-ui-line-strong); /* check-style: ignore — colour of an SVG checkbox icon (currentColor), not text */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.checkbox-replacement, .radio-replacement) .icon-checked {
  color: var(--color-primary-indicator); /* check-style: ignore — colour of an SVG checkbox icon (currentColor), not text */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.modal-content, .popover, .dropdown-menu) {
  border-radius: var(--radius-md);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app :is(.modal-content, .popover) {
  box-shadow: var(--shadow-overlay);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])):not([data-theme="dark"]) #app :is(.ui-menu, .dropdown-menu, .datepicker, .dropdown-menu--has-submenu ul) {
  --background-tertiary: var(--color-ui-overlay);
  --text-inverted: var(--color-text);
  border: var(--border-width) solid var(--color-ui-line-strong);
  background: var(--color-ui-overlay);
  box-shadow: var(--shadow-overlay);
  color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-bars .stat-bar {
  background-color: var(--color-ui-line-strong);
  color: var(--color-ui-line-strong); /* check-style: ignore — Zammad colours the bar's legend dot with currentColor, not text */
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-stopwatch .stopwatch-icon {
  filter: var(--cd-filter-neutral);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .time.stat-widget .stat-dial {
  filter: var(--cd-filter-subtle);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .time.stat-widget .stat-amount {
  color: var(--color-text);
  text-shadow: none;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-widget .mood-icon {
  filter: var(--cd-filter-ink);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-tickets .total-tickets {
  color: var(--color-bg);
  fill: var(--color-ui-line);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> :is(.in-process-icon, .reopening-icon)) {
  position: relative;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic > :is(.in-process-icon, .reopening-icon) {
  filter: var(--cd-filter-neutral);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> :is(.in-process-icon, .reopening-icon))::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  pointer-events: none;
  background-color: var(--color-text);
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> .in-process-icon)::after {
  inline-size: 64px; /* check-style: ignore — the host icon's own size (.in-process-icon 64 × 64), the overlay must cover it exactly */
  block-size: 64px; /* check-style: ignore — the host icon's own size */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' d='M7.997 43.981a644.16 644.16 0 0 0 0-11.995c-2.244.046-4.129-.852-5.998-2.998C.793 27.84 0 25.945 0 23.99V7.997C0 3.792 3.77 0 7.997 0h30.988c5.153 0 8.922 3.592 8.996 7.997.025 5.474.025 10.563 0 15.993-.173 4.45-3.942 8.042-8.996 7.996-5.857.046-11.907.046-17.993 0-.56.046-1.353.345-2 1-3.519 3.436-6.99 7.228-10.995 10.995.335.025.235.025 0 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill-rule='evenodd' d='M7.997 43.981a644.16 644.16 0 0 0 0-11.995c-2.244.046-4.129-.852-5.998-2.998C.793 27.84 0 25.945 0 23.99V7.997C0 3.792 3.77 0 7.997 0h30.988c5.153 0 8.922 3.592 8.996 7.997.025 5.474.025 10.563 0 15.993-.173 4.45-3.942 8.042-8.996 7.996-5.857.046-11.907.046-17.993 0-.56.046-1.353.345-2 1-3.519 3.436-6.99 7.228-10.995 10.995.335.025.235.025 0 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> .reopening-icon)::after {
  inline-size: 68px; /* check-style: ignore — the host icon's own size (.reopening-icon 68 × 47), the overlay must cover it exactly */
  block-size: 47px; /* check-style: ignore — the host icon's own size */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 47'%3E%3Cpath fill-rule='evenodd' d='M39.3 18.7h21.1c3.6 0 6.4 2.3 7.3 5.7.1.6.2 1.1.2 1.7v13.8c0 3.4-2.8 6.4-6.1 6.9-.4.1-.8.1-1.2.1H38.7c-3.7 0-6.7-2.5-7.3-6.1-.1-.5-.1-.9-.1-1.4V26.2c0-2.4.9-4.3 2.8-5.8.3-.2.3-.4.3-.7v-8.2c0-5.4 3.7-10 8.9-11.2.8-.2 1.6-.3 2.4-.3h7.9C59.8 0 65 5.2 64.9 11.5c0 1.4-1.1 2.5-2.4 2.5-1.4.1-2.6-.9-2.7-2.2-.1-1.1-.2-2.2-.7-3.2-1.2-2.1-2.9-3.3-5.3-3.3-2.8-.1-5.6-.1-8.4 0-2.7 0-5.4 2.4-5.6 5.1-.6 2.6-.5 5.5-.5 8.3Zm7.9 12c.2.7.1 1.4-.1 2-.2.8-.4 1.5-.6 2.3-.2.5 0 1 .3 1.3 1.7 1.5 3.4 1.6 5.1-.1.3-.3.4-.7.3-1.2-.3-1-.6-2.1-.8-3.1-.1-.3 0-.6 0-.8.6-1.4-.5-3-2-3-1.4 0-2.6 1.3-2.2 2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 47'%3E%3Cpath fill-rule='evenodd' d='M39.3 18.7h21.1c3.6 0 6.4 2.3 7.3 5.7.1.6.2 1.1.2 1.7v13.8c0 3.4-2.8 6.4-6.1 6.9-.4.1-.8.1-1.2.1H38.7c-3.7 0-6.7-2.5-7.3-6.1-.1-.5-.1-.9-.1-1.4V26.2c0-2.4.9-4.3 2.8-5.8.3-.2.3-.4.3-.7v-8.2c0-5.4 3.7-10 8.9-11.2.8-.2 1.6-.3 2.4-.3h7.9C59.8 0 65 5.2 64.9 11.5c0 1.4-1.1 2.5-2.4 2.5-1.4.1-2.6-.9-2.7-2.2-.1-1.1-.2-2.2-.7-3.2-1.2-2.1-2.9-3.3-5.3-3.3-2.8-.1-5.6-.1-8.4 0-2.7 0-5.4 2.4-5.6 5.1-.6 2.6-.5 5.5-.5 8.3Zm7.9 12c.2.7.1 1.4-.1 2-.2.8-.4 1.5-.6 2.3-.2.5 0 1 .3 1.3 1.7 1.5 3.4 1.6 5.1-.1.3-.3.4-.7.3-1.2-.3-1-.6-2.1-.8-3.1-.1-.3 0-.6 0-.8.6-1.4-.5-3-2-3-1.4 0-2.6 1.3-2.2 2.6Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> :is(.supergood-color, .good-color))::after { background-color: var(--cd-status-good); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> :is(.ok-color, .bad-color))::after { background-color: var(--cd-status-ok); }
:where(html:has(> head > link[rel="stylesheet"][href^="/assets/application-"])) #app .stat-graphic:has(> .superbad-color)::after { background-color: var(--cd-status-bad); }

/* ===== 6. mobile app /mobile ===== */
html:has(> head > link[href*="/vite/assets/mobile-"]) {
  color-scheme: light;                          /* the generated dark layer says dark */
  background-color: var(--color-bg);           /* Zammad paints the page itself near-black */
  --color-black: var(--color-bg);               /* the app's page background */
  --color-black-full: var(--color-bg);
  --color-white: var(--color-text);             /* the app's text colour */
  --color-gray: var(--color-text-muted);
  --color-gray-100: var(--color-text-muted);
  --color-gray-150: var(--color-text-muted);
  --color-gray-200: var(--color-ui-line-strong);
  --color-gray-300: var(--color-ui-line-strong);
  --color-gray-400: var(--color-ui-line);
  --color-gray-500: var(--color-ui-subtle);     /* lists, fields, cards */
  --color-gray-600: var(--color-ui-subtle);
  --color-gray-light: var(--color-ui-subtle);
  --color-gray-highlight: var(--color-ui-subtle);
  --color-yellow: var(--color-primary);
  --color-yellow-highlight: var(--color-selected-bg); /* the Helle Ton; raised neutral in the dark */
  --color-blue: var(--color-primary);
  --color-blue-dark: var(--color-primary-hover);
  --color-blue-highlight: var(--color-selected-bg);
  --color-pink: var(--color-primary);
  --color-red: var(--color-danger);
  --color-red-bright: var(--color-danger);
  --color-red-dark: var(--color-ui-subtle);
  --color-red-highlight: var(--color-ui-subtle);
  --color-green: var(--color-success);
  --color-green-highlight: var(--color-ui-subtle);
  --color-orange: var(--color-warning);
  --text-xs: var(--text-small);                 /* Tailwind's 12 px step → the 14 px floor (D88) */
  --text-xs--line-height: var(--leading-normal);
  --text-sm: var(--text-small);
  --text-sm--line-height: var(--leading-normal);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) body {
  background-color: var(--color-bg);
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) [data-zammad-target="AppMobile"] {
  font-size: var(--text-body);                  /* body 16 px (task mode, D88) */
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) :is(.bg-yellow, .bg-blue, .bg-pink),
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) :is(.bg-yellow, .bg-blue, .bg-pink) :is(.text-white, .text-black) {
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) :is([data-variant="primary"], [data-variant="secondary"], [data-variant="submit"]) > button.formkit-input {
  --color-white: var(--color-on-primary);
  --color-black: var(--color-on-primary);
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) :is([data-variant="primary"], [data-variant="secondary"], [data-variant="submit"]) > button.formkit-input {
  border-radius: var(--radius-full);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(.text-blue, .text-yellow, .text-pink) {
  color: var(--color-link);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(.bg-yellow-highlight, .bg-blue-highlight, .bg-red-highlight, .bg-green-highlight, .bg-gray-highlight),
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(.bg-yellow-highlight, .bg-blue-highlight, .bg-red-highlight, .bg-green-highlight, .bg-gray-highlight) * {
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(.bg-yellow-highlight, .bg-blue-highlight, .bg-red-highlight, .bg-green-highlight, .bg-gray-highlight) {
  box-shadow: inset 0 0 0 var(--border-width) var(--color-line-on-tint); /* check-style: ignore — 1 px badge line drawn inset, keeps the host badge size */
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is([class*="text-white/"], [class*="text-black/"], [class*="text-gray/"]) {
  color: var(--color-text-muted);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(.uppercase, .tracking-wide) {
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app :is(button, input, select, textarea) {
  font-size: var(--text-ui);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main a.text-blue {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app [data-zammad-target="CommonAvatar"] {
  background-color: var(--color-ui-subtle);
  background-image: none;
  box-shadow: inset 0 0 0 var(--border-width) var(--color-ui-line-strong); /* check-style: ignore — 1 px ring drawn inset so the avatar keeps its host size */
  color: var(--color-text);
  font-size: var(--text-small);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #Notifications ol > li > *,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #Notifications :is(.bg-red, .bg-green, .bg-yellow, .bg-blue) {
  background-color: var(--cd-toast-bg);
  color: var(--cd-toast-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app [data-zammad-target="CommonSectionMenu"] a:focus-visible,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main [class*="rounded-xl"] :is(a, button):focus-visible {
  outline-offset: calc(-1 * (var(--focus-ring-width) + var(--focus-ring-offset))) !important; /* inside the clipped row */
  box-shadow: inset 0 0 0 var(--focus-ring-offset) var(--color-focus-halo) !important; /* check-style: ignore — the D21 white halo, drawn inside because the list clips */
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Article :is(.content, button).Agent {
  border-color: var(--color-ui-line-strong);
  background-color: var(--color-bg);
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Article :is(.content, button).Customer {
  border-color: var(--cd-article-customer-bg);
  background-color: var(--cd-article-customer-bg);
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Article :is(.content, button).Customer :is(a, svg) {
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Border {
  background: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Internal :is(.content, button) {
  border-color: var(--color-ui-line-strong);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .Internal .content {
  border: var(--border-width-thick) dashed var(--color-ui-line-strong);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .bottom-navigation a[href$="/notifications"]::after {
  content: "" / "Benachrichtigungen";
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app .bottom-navigation a[href$="/notifications"] > [role="status"] {
  background-color: var(--color-porphyr);
  box-shadow: 0 0 0 2px var(--color-ui-subtle); /* check-style: ignore — 2 px cut-out ring in the bar colour, separates the badge from the bell */
  color: var(--color-weiss);
  font-weight: var(--weight-medium);
  
  inset-block-start: -6px; /* check-style: ignore — lifts the counter over the bell's top corner */
  block-size: 20px; /* check-style: ignore — counter pill between the scale steps (16 too small, 24 covers the bell) */
  min-inline-size: 20px; /* check-style: ignore — round for one figure */
  padding: 0 var(--space-1);
  line-height: 20px; /* check-style: ignore — the figure centred in the 20 px pill */
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main a[data-zammad-target="CommonLink"]:has(> svg:only-child) {
  min-inline-size: var(--space-5);
  min-block-size: var(--space-5);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div:has(> div > main #signin) {
  block-size: auto;
  min-block-size: 100vh;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) body:has(#app > div > div > main #signin) {
  background-color: var(--color-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) {
  position: relative;
  box-sizing: border-box;
  align-items: center;
  overflow-x: clip;
  padding: var(--space-6) var(--ui-gutter) var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::before,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::after {
  content: "";
  position: absolute;
  z-index: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: color-mix(in srgb, var(--color-on-primary) 5%, transparent); /* check-style: ignore — house login pattern (D120): the translucent L-angle, decorative */
  pointer-events: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: min(26.5vw, 340px);
  block-size: min(26.5vw, 340px);
  border-inline-start-width: min(10.6vw, 136px);
  border-block-end-width: min(10.6vw, 136px);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: min(20.3vw, 260px);
  block-size: min(20.3vw, 260px);
  border-block-start-width: min(11.9vw, 152px);
  border-inline-end-width: min(11.9vw, 152px);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > * {
  position: relative;
  z-index: 1;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > main {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 28rem;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > main > div > div:has(> #signin) {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: var(--space-7);
  border: var(--border-width) solid var(--color-ui-line);
  border-radius: var(--radius-sm); /* house login pattern (D120): 4 px card */
  background-color: var(--color-bg);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.28); /* check-style: ignore — house login pattern (D120): the soft card shadow of the wiki and git sign-ins */
  color: var(--color-text);
}
@media (max-width: 479px) {
  :where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > main > div > div:has(> #signin) {
    padding: var(--space-6) var(--space-5);
  }
  :where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::before,
  :where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin)::after {
    display: none;
  }
  :where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) {
    padding-block-start: calc(var(--space-6) + env(safe-area-inset-top, 0px));
    padding-block-end: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  }
  :where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer {
    margin-block-start: var(--space-6);
  }
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main > div > div:has(> #signin) > div:has(> img) {
  display: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main > div > div:has(> #signin)::before {
  content: "" / "Stadt Leipzig";
  display: block;
  flex: none;
  block-size: var(--ui-logo-height);
  background-image: var(--cd-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app main > div > div:has(> #signin) > h1 {
  justify-content: center;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  text-align: center;
  text-wrap: balance;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin > div:has(> .form-group) {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin > div:has(> .form-group) > div:not(.form-group) {
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  margin-block-start: 0;
  white-space: nowrap;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .form-group {
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background-color: transparent;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] {
  padding: 0;
  background-color: transparent;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] .formkit-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] .formkit-label,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"]:focus-within .formkit-label,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"][data-populated] .formkit-label {
  position: static;
  display: block;
  block-size: auto;
  padding: 0;
  translate: none;
  scale: none;
  opacity: 1;
  transition: none;
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] .formkit-label::after {
  content: none;
  display: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] .formkit-inner {
  position: relative;
  padding: 0;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] input.formkit-input,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"][data-populated] input.formkit-input,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] input.formkit-input:focus-within {
  box-sizing: border-box;
  block-size: var(--control-height);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-ui-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"][data-suffix-icon] input.formkit-input {
  padding-inline-end: calc(var(--target-min) + var(--space-1));
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-outer[data-family="text"] input.formkit-input:hover {
  border-color: var(--color-ink);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-input,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin [data-family="box"] .formkit-label {
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-suffix-icon {
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  inset-inline-end: 0;
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin input::placeholder {
  color: transparent;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin :is(.text-white, .text-gray) {
  color: var(--color-text);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin [data-family="box"] label {
  block-size: auto !important; /* the host fixes the row height with !h-6 */
  min-block-size: var(--target-min);
  padding-inline-start: 0;
  font-size: var(--text-ui);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin input[type="checkbox"] {
  inline-size: var(--space-5);
  block-size: var(--space-5);
  border: var(--border-width-thick) solid var(--color-ui-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin input[type="checkbox"]:checked {
  border-color: var(--color-primary-indicator);
  background-color: var(--color-primary-indicator);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-decorator {
  inset-inline-start: calc(-1 * var(--space-5));  /* the host offsets its 16 px tick by -1rem for its 16 px box */
  color: var(--color-on-indicator);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin .formkit-decorator-icon {
  inset-block-start: calc((var(--space-5) - 16px) / 2); /* check-style: ignore — the host's 16 px tick icon */
  inset-inline-start: calc((var(--space-5) - 16px) / 2); /* check-style: ignore — the host's 16 px tick icon */
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin a,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin a.text-white {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-link);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin a:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin > div:not([data-family]):not(:has(> .form-group)) {
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-1);
  margin-block-start: 0;
  color: var(--color-text);
  font-size: var(--text-ui);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin [data-family="button"] .formkit-wrapper {
  justify-content: stretch;
  margin: 0;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin button[type="submit"] {
  inline-size: 100%;
  block-size: auto;
  min-block-size: var(--button-height);
  padding: var(--space-2) var(--space-5);
  border: var(--border-width-thick) solid var(--color-cta);
  border-radius: var(--radius-sm); /* house login pattern (D120): the field radius, not the pill (D98) */
  background-color: var(--color-cta);
  color: var(--color-on-cta);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app form#signin button[type="submit"]:is(:hover, :active) {
  border-color: var(--color-cta-hover-border);
  background-color: var(--color-cta-hover);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > a,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > nav a,
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-on-primary);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) :is(> a, > nav a, > footer a):hover {
  text-decoration-thickness: var(--link-underline-hover);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > a {
  margin-block-start: var(--space-5);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > nav {
  justify-content: center;
  gap: 0 var(--space-5);
  max-inline-size: 28rem;
  margin: var(--space-2) 0 0;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > nav a::after {
  content: none;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer {
  box-sizing: border-box;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-1);
  inline-size: 100%;
  max-inline-size: 28rem;
  margin: var(--space-footer) 0 0;
  padding: 0;
  border: 0;
  color: var(--color-on-primary);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  text-align: center;
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer::before {
  content: var(--cd-footer-line);
  flex: 0 0 100%;
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer span {
  color: var(--color-on-primary);
}
:where(html:has(> head > link[href*="/vite/assets/mobile-"])) #app > div > div:has(> main #signin) > footer a:has(> :is(svg, img):only-child) {
  display: none;            /* the bird: an icon-only second link to zammad.org */
}

/* ===== 7. agent app: sign-in family ===== */
/* =============================================================================
 * Stadt Leipzig theme for Zammad 7.2 — A. sign-in family of the agent app
 *
 * Screens: #login, #password_reset (and the "check your mailbox" state after it,
 * reset_sent / reset_failed), #signup (and its "Registrierung erfolgreich!" state) — every
 * full-screen page of the agent app (#app > .fullscreen). Depth: full, task mode.
 *
 * HOUSE LOGIN PATTERN (customer decision 2026-10-14, D120). The sign-in screens of the
 * leipzig.schule services share one look: wiki.leipzig.schule (Waldgrün), git.leipzig.schule
 * (Kupfer) and this one in the product's Leitfarbe (Leipzig Blau for ticket.leipzig.schule):
 *
 *   full-bleed Leitfarbe page · two translucent L-angles in the top-right and bottom-left
 *   corners · one centred white card: the city logo (trimmed 2C artwork) centred on the
 *   card, the title (the Absender, e.g. "Medienpädagogisches Zentrum") and the screen's own
 *   line ("Bei … anmelden", "Passwort vergessen?") below it, then the form: labels above the
 *   fields, a full-width Leitfarbe button, "Passwort vergessen?" · below the card, on the
 *   Leitfarbe in its on-colour (white on Blau): the legal row (Zammad's "Öffentliche
 *   Links") and the footer line "© <Jahr> Stadt Leipzig · <Absender>" with "Unterstützt
 *   von Zammad".
 *
 * Deliberate deviations from the strict screen rules — the customer's house standard for
 * leipzig.schule logins, kept identical to wiki/git (D120 replaces the D92 header layout on
 * these screens only):
 *   - full-bleed Leitfarbe instead of the white header strip and the grey task page (D92)
 *   - the logo centred on the card instead of top-left in a header (D92)
 *   - card radius --radius-sm (4 px, the house's 3–5 px) instead of --radius-md, and a soft
 *     drop shadow (Layout p.21 / D83 allow no card shadows)
 *   - translucent on-colour L-angles (decorative, aria-hidden by construction; the L-Form
 *     itself is a brand-surface element, here a quiet echo of it)
 *   - the button full width with the small field radius instead of the pill (D98)
 *   - no required-field hint and no "*" on the labels (D99's convention, not on these screens)
 *   Everything else inside the card stays on the D99 form rules (16 px labels above 48 px
 *   fields, 44 px targets, the D21 focus ring).
 *
 * LIGHT AND DARK: these screens look the same in both (blue page, white card), like the
 * wiki and git sign-ins. Zammad sets html[data-theme="dark"] on a dark system, and the
 * generated layer puts the Graphit tokens there; build.sh therefore re-declares the light
 * value of every token the dark layer changes on #app > .fullscreen (and on the /mobile
 * sign-in root), plus Zammad's colour variables of zammad-agent.css C1 — the "light lock"
 * in layer 2 of branding.css. Nothing in this file names a theme.
 *
 * Values only from tokens.css and the generated parameter layer (build.sh):
 *   --cd-absender      the Absender as a CSS string, or `none`
 *   --cd-footer-line   "© <Jahr> Stadt Leipzig · <Absender>"
 *   --cd-logo          the trimmed 2C (or 1C Positiv) artwork (zammad-tokens.css, locked
 *                      light here, so never the 1C Negativ on the white card)
 * Lines marked "check-style: ignore — house login pattern (D120)" are the deviations above.
 * ============================================================================= */

/* --- A1. Page: full-bleed Leitfarbe, L-angles, one centred column ------------ */
/* Zammad draws these screens in an absolutely positioned box that scrolls inside the
   window; the page scrolls as a whole instead (the footer is reached by the window's own
   scrolling). Zammad's 1024 px minimum width is for the agent app; these screens fit any
   width, so it is lifted here (no sideways scrolling at 390 or 768 px). */
#app:has(> .fullscreen) {
  position: static;
  display: block;                 /* Zammad's flex row would cap the screen at the window height */
  min-inline-size: 0;
  block-size: auto;
  min-block-size: 100vh;
  overflow: visible;
}
/* the canvas behind the page (overscroll, a short window) in the Leitfarbe too */
body:has(> #app > .fullscreen) {
  background-color: var(--color-primary);
}
#app > .fullscreen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  box-sizing: border-box;
  block-size: auto;
  min-block-size: 100vh;
  padding: 0;
  overflow: visible;
  overflow-x: clip;
  background-color: var(--color-primary);
  background-image: none;
  color: var(--color-on-primary);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}

/* The two L-angles (house pattern, the wiki's geometry: a 340 px angle with 136 px bars
   top right, a 260 px angle with 152 px bars bottom left at 1280 px; both scale down with
   the window). Decorative pseudo-elements: no content, no name, no pointer. */
#app > .fullscreen::before,
#app > .fullscreen::after {
  content: "";
  position: fixed;
  z-index: 0;
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  border-color: color-mix(in srgb, var(--color-on-primary) 5%, transparent); /* check-style: ignore — house login pattern (D120): the translucent L-angle, decorative */
  pointer-events: none;
}
#app > .fullscreen::before {
  inset-block-start: 0;
  inset-inline-end: 0;
  inline-size: min(26.5vw, 340px);
  block-size: min(26.5vw, 340px);
  border-inline-start-width: min(10.6vw, 136px);
  border-block-end-width: min(10.6vw, 136px);
}
#app > .fullscreen::after {
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: min(20.3vw, 260px);
  block-size: min(20.3vw, 260px);
  border-block-start-width: min(11.9vw, 152px);
  border-inline-end-width: min(11.9vw, 152px);
}

/* A bookmark of …/#login makes the browser jump to <form id="login">; on a phone the card
   is taller than the window, so the jump would hide the logo and the title. A scroll margin
   of one window height keeps every fragment target of these screens at scroll position 0. */
#app > .fullscreen [id]:not(input, select, textarea, button, a) {
  scroll-margin-block-start: 100vh;
}
/* Zammad's <img> is the uploaded product logo, named after the product; the card paints
   the delivered artwork itself, named "Stadt Leipzig" (D52), on every screen of the family */
#app > .fullscreen .hero-unit .company-logo {
  display: none;
}

/* The column: card, legal row and footer centred; the card sits in the vertical middle of
   the window when the window is taller than the content (as on the wiki and git). */
#app > .fullscreen .fullscreen-center {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  max-inline-size: none;
  margin: 0;
  padding: var(--space-8) var(--ui-gutter) 0;
}
@media (max-width: 479px) {
  #app > .fullscreen .fullscreen-center {
    padding-block-start: var(--space-6);
  }
}

/* --- A2. The card ------------------------------------------------------------ */
/* Two shapes in Zammad's templates:
   - #login: .fullscreen-body holds the line "Bei … anmelden", the maintenance alerts, the
     .hero-unit with the form, and .js-footer (help text, then <hr> + the legal row). The
     card is drawn by .fullscreen-body::before across the first four grid rows (line, two
     alerts, form); .js-footer dissolves into the grid (display: contents), so its help
     text and the legal row follow the card, on the Leitfarbe (the card holds the form
     only, as on the wiki and git).
   - every other screen: .hero-unit.fullscreen-body is the card (heading, text, form), the
     legal row is the <p> after it. */
#app > .fullscreen .fullscreen-body:not(.hero-unit),
#app > .fullscreen .hero-unit.fullscreen-body {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 28rem;         /* the house card: 448 px, as on the wiki and git */
  margin: 0 auto;
  color: var(--color-text);
  text-align: start;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit)::before,
#app > .fullscreen .hero-unit.fullscreen-body {
  border: var(--border-width) solid var(--color-ui-line);
  border-radius: var(--radius-sm); /* house login pattern (D120): 4 px card */
  background-color: var(--color-bg);
  box-shadow: 0 18px 44px rgb(0 0 0 / 0.28); /* check-style: ignore — house login pattern (D120): the soft card shadow of the wiki and git sign-ins */
}
/* #login: the card surface with the logo, behind rows 1–4; its text alternative
   "Stadt Leipzig" is read first, as the logo is seen first */
#app > .fullscreen .fullscreen-body:not(.hero-unit)::before {
  content: "" / "Stadt Leipzig";
  grid-row: 1 / 5;
  grid-column: 1;
  background-image: var(--cd-logo);
  background-position: center var(--space-7);
  background-repeat: no-repeat;
  background-size: auto var(--ui-logo-height);
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > p:first-child {
  grid-row: 1;
  grid-column: 1;
  padding: calc(var(--space-7) + var(--ui-logo-height) + var(--space-5)) var(--space-7) 0;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-maintenanceMode {
  grid-row: 2;
  grid-column: 1;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-maintenanceLogin {
  grid-row: 3;
  grid-column: 1;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .hero-unit:not(.alert) {
  grid-row: 4;
  grid-column: 1;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer {
  display: contents;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > p:not(hr + p) {
  grid-row: 5;
  grid-column: 1;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > hr + p {
  grid-row: 6;
  grid-column: 1;
}
/* anything else Zammad may add to the body is placed after these, below the card */
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > hr {
  display: none;
}
/* the maintenance alerts sit in the card between the title and the form */
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .hero-unit.alert {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  inline-size: auto;
  margin: var(--space-5) var(--space-7) 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: var(--text-ui);
}
/* the other screens: the logo heads the card */
#app > .fullscreen .hero-unit.fullscreen-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-7);
}
#app > .fullscreen .hero-unit.fullscreen-body::before {
  content: "" / "Stadt Leipzig";
  display: block;
  flex: none;
  block-size: var(--ui-logo-height);
  background-image: var(--cd-logo);
  background-position: center;
  background-repeat: no-repeat;
  background-size: auto 100%;
}
@media (max-width: 479px) {
  #app > .fullscreen .hero-unit.fullscreen-body {
    padding: var(--space-6) var(--space-5);
  }
  #app > .fullscreen .fullscreen-body:not(.hero-unit)::before {
    background-position: center var(--space-6);
  }
  #app > .fullscreen .fullscreen-body:not(.hero-unit) > p:first-child {
    padding: calc(var(--space-6) + var(--ui-logo-height) + var(--space-5)) var(--space-5) 0;
  }
  #app > .fullscreen .fullscreen-body:not(.hero-unit) > .hero-unit.alert {
    margin-inline: var(--space-5);
  }
}

/* --- A3. Title: the Absender, then the screen's own line ---------------------- */
/* #login: Zammad's line "Bei … anmelden" (a <p>) under the Absender as the title;
   reset screens: their <h2> ("Passwort vergessen?", "Anweisungen … gesendet") likewise.
   #signup names the product itself ("Medienpädagogisches Zentrum beitreten",
   "Registrierung erfolgreich!"): its <h1> is the title, without a second Absender. */
/* (.fullscreen twice on the <h2>: above the agent type layer's Medium headings, (1,3,3)) */
#app > .fullscreen .fullscreen-body:not(.hero-unit) > p:first-child,
#app > .fullscreen.fullscreen .hero-unit.fullscreen-body > h2 {
  position: relative;
  z-index: 1;
  max-inline-size: none;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > p:first-child::before,
#app > .fullscreen .hero-unit.fullscreen-body > h2::before {
  content: var(--cd-absender);
  display: block;
  margin-block-end: var(--space-1);
  color: var(--color-text);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}
#app > .fullscreen .hero-unit.fullscreen-body > h1 {
  max-inline-size: none;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  text-transform: none;
  text-wrap: balance;
}
#app > .fullscreen .hero-unit h2 small:empty {
  display: none;
}
/* running text in the card (reset_sent, signup verify, reset_failed) */
#app > .fullscreen .hero-unit.fullscreen-body > p {
  max-inline-size: none;
  margin: 0;
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
  text-align: start;
}

/* --- A4. The form (D99) -------------------------------------------------------- */
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .hero-unit:not(.alert) {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: block;
  inline-size: auto;
  margin: 0;
  padding: var(--space-6) var(--space-7) var(--space-7);
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
}
@media (max-width: 479px) {
  #app > .fullscreen .fullscreen-body:not(.hero-unit) > .hero-unit:not(.alert) {
    padding: var(--space-5) var(--space-5) var(--space-6);
  }
}
/* inside the card one flex column with one gap, no stacked margins (theming.md §4 item 4) */
#app > .fullscreen .hero-unit form,
#app > .fullscreen .hero-unit fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  border: 0;
}
#app > .fullscreen .hero-unit .js-password,
#app > .fullscreen .hero-unit .js-password > fieldset {
  display: contents;
}
/* Zammad's clearfix after the fieldset would be one more (empty) flex item: a second gap */
#app > .fullscreen .hero-unit :is(.js-password > fieldset, fieldset)::after {
  display: none;
}
#app > .fullscreen .hero-unit .form-group {
  float: none;
  inline-size: auto;
  margin: 0;
  padding: 0;
}
#app > .fullscreen .hero-unit .alert.hide,
#app > .fullscreen .hero-unit .help-inline:empty,
#app > .fullscreen .hero-unit .help-block:empty {
  display: none;
}

/* Labels: 16 px Medium black, 8 px above the field (D99) */
#app > .fullscreen .hero-unit .formGroup-label {
  margin: 0 0 var(--space-2);
  padding: 0;
}
/* (.fullscreen twice: above the agent type layer's 14 px label rule, (1,3,4)) */
#app > .fullscreen.fullscreen .hero-unit .formGroup-label label {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  /* Zammad's reset label is a whole sentence ("Bitte geben Sie Ihren Benutzernamen oder
     E-Mail-Adresse ein"): balanced lines break it between words (D113) */
  text-wrap: balance;
}
/* No required-field hint and no "*" (D120: the house sign-in has neither, like the wiki
   and git; a two-field sign-in needs no legend). The reset and sign-up templates write
   the "*" themselves (a <span> in the label): hidden; the fields keep their `required`
   attribute, so assistive technology still announces them as required. */
#app > .fullscreen .hero-unit .formGroup-label label span {
  display: none;
}

/* Fields: 48 px, 1 px ui-line-strong (4.54:1, WCAG 1.4.11), radius-sm, white; hover black */
#app > .fullscreen .hero-unit .form-control {
  box-sizing: border-box;
  inline-size: 100%;
  block-size: var(--control-height);
  margin: 0;
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-ui-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  box-shadow: none;
  color: var(--color-text);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
}
#app > .fullscreen .hero-unit .form-control:hover {
  border-color: var(--color-ink);
}
#app > .fullscreen .hero-unit .form-control:focus {
  border-color: var(--color-ink);
}
#app > .fullscreen .hero-unit .controls {
  margin: 0;
}
/* field errors and the captcha line: black words (status by word, D110) */
#app > .fullscreen .hero-unit :is(.help-inline, .help-block, .js-intake-shield-altcha) {
  color: var(--color-text);
  font-size: var(--text-ui);
}
/* the captcha check ("Verified", Zammad's intake shield): a neutral box with mark and word
   instead of the host's green tint (D103, D110); no margins of its own in the flex column */
#app > .fullscreen .hero-unit .js-intake-shield-captcha {
  margin: 0;
}
#app > .fullscreen .hero-unit .js-intake-shield-altcha {
  border-color: var(--color-ui-line);
  background-color: var(--color-ui-subtle);
}

/* "An mich erinnern": a 48 px choice row, the 24 px box on the fields' edge (D99) */
#app > .fullscreen .hero-unit .checkbox-replacement {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  min-block-size: var(--control-height);
  margin: 0;
  padding: 0;
  color: var(--color-text);
  font-size: var(--text-ui);
  cursor: pointer;
}
/* The box is the real input, drawn like leipzig.css .choice__input (D99); Zammad's two
   SVG boxes are hidden. */
#app > .fullscreen .hero-unit .checkbox-replacement > .icon {
  display: none;
}
#app > .fullscreen .hero-unit .checkbox-replacement input[type="checkbox"] {
  position: static;
  flex: none;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin: 0;
  border: var(--border-width-thick) solid var(--color-ui-line-strong);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  opacity: 1;
  appearance: none;
  cursor: pointer;
}
#app > .fullscreen .hero-unit .checkbox-replacement input[type="checkbox"]:checked {
  border-color: var(--color-primary-indicator);
  background-color: var(--color-primary-indicator);
  /* the mark in --color-on-indicator (white on the Vollton, D97), as leipzig.css draws it */
  background-image: var(--cd-check-mark);
}
#app > .fullscreen .hero-unit .label-text {
  margin: 0;
}

/* --- A5. Actions --------------------------------------------------------------- */
/* House pattern: the primary button spans the card, in the Leitfarbe with its on-colour,
   the small field radius; hover and active take the precomputed --color-cta-hover (D85:
   Blau #0B2F94, white label 11.36:1). The DOM's order is kept (visual order = Tab order,
   WCAG 2.4.3): on #login the button, then "Passwort vergessen?" centred below it; where a
   back action comes first (reset screens, sign-up: "Abbrechen & Zurück"), back left and the
   button filling the rest of the row — on a narrow card the row wraps and the button spans
   the card below the back link. */
#app > .fullscreen .hero-unit .form-controls {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4) var(--space-5);
  margin: 0;
}
#app > .fullscreen .hero-unit .form-controls::after {
  display: none;
}
#app > .fullscreen #login .form-controls {
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);
}
#app > .fullscreen .form-controls .btn {
  margin: 0;
}
#app > .fullscreen .form-controls .btn.align-right {
  margin-inline-start: 0;
}
#app > .fullscreen .btn--primary {
  display: inline-flex;
  flex: 1 1 10rem;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  inline-size: 100%;
  min-block-size: var(--button-height);
  margin: 0;
  padding: var(--space-2) var(--space-5);
  border: var(--border-width-thick) solid var(--color-cta);
  border-radius: var(--radius-sm); /* house login pattern (D120): the button takes the field radius, not the pill (D98) */
  background-color: var(--color-cta);
  background-image: none;
  box-shadow: none;
  color: var(--color-on-cta);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-normal);
  text-shadow: none;
  text-transform: none;
  white-space: nowrap;            /* a label that does not fit wraps the row, not itself */
}
#app > .fullscreen #login .btn--primary {
  flex: none;
}
#app > .fullscreen .btn--primary:is(:hover, :active) {
  border-color: var(--color-cta-hover-border);
  background-color: var(--color-cta-hover);
  color: var(--color-on-cta);
}
/* Text buttons: tertiary, a 44 px target, the link colour, underlined (D96, D98) */
#app > .fullscreen .hero-unit .btn--text {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-link);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
  text-transform: none;
  overflow: visible;
}
#app > .fullscreen #login .btn--text {
  align-self: center;
}
#app > .fullscreen .hero-unit .btn--text:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
/* links inside the card: the link colour on white (D96) */
#app > .fullscreen .hero-unit a:not(.btn) {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
#app > .fullscreen .hero-unit a:not(.btn):hover {
  text-decoration-thickness: var(--link-underline-hover);
}

/* --- A6. Below the card: help text, legal row and footer, on the Leitfarbe ------- */
/* #login: Zammad's help text ("Sie sind bereits … registriert … Passwort hier anfordern")
   under the card, centred, in the on-colour (white on Blau, 8.59:1), its link underlined */
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > p:not(hr + p) {
  max-inline-size: none;
  margin: var(--space-5) 0 0;
  padding: 0;
  color: var(--color-on-primary);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
  text-align: center;
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > p:not(hr + p) a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-on-primary);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
#app > .fullscreen .fullscreen-body:not(.hero-unit) > .js-footer > p:not(hr + p) a:hover {
  text-decoration-thickness: var(--link-underline-hover);
}

/* The legal links are Zammad's "Öffentliche Links": the <p> after the <hr> in .js-footer on
   #login, the <p> after the card on the other screens. Centred under the card, in the
   on-colour (white on Blau, 8.59:1), underlined; Zammad's "|" text separators are hidden
   (font-size 0 on the row, the links set their own size and are separated by the gap). */
#app > .fullscreen .js-footer hr + p,
#app > .fullscreen .fullscreen-center > .hero-unit ~ p {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--space-5);
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 28rem;
  margin: var(--space-4) auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-on-primary);
  font-size: 0; /* check-style: ignore — hides Zammad's "|" text separators between the links (no type size: the links set theirs) */
  text-align: center;
}
#app > .fullscreen :is(.js-footer hr + p, .fullscreen-center > .hero-unit ~ p) a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-on-primary);
  font-size: var(--text-ui);
  line-height: var(--leading-snug);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
#app > .fullscreen :is(.js-footer hr + p, .fullscreen-center > .hero-unit ~ p) a:hover {
  text-decoration-thickness: var(--link-underline-hover);
}

/* Footer: "© <Jahr> Stadt Leipzig · <Absender>", then Zammad's "Unterstützt von Zammad"
   (theming.md §4 item 17), centred, in the on-colour; 48 px below the content (D92). */
#app > .fullscreen .poweredBy {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 var(--space-2);
  margin: 0;
  padding: var(--space-footer) var(--ui-gutter) var(--space-5);
  border: 0;
  background: none;
  color: var(--color-on-primary);
  font-size: var(--text-ui);
  line-height: var(--leading-normal);
  text-align: center;
  opacity: 1;
}
#app > .fullscreen .poweredBy::before {
  content: var(--cd-footer-line);
  flex: 0 0 100%;
  color: var(--color-on-primary);
}
#app > .fullscreen .poweredBy a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-on-primary);
  text-decoration: none;
}
/* Two links to zammad.org: the bird (an icon-only duplicate) is dropped, the word mark
   becomes the text "Zammad", so the link has a name and no foreign colour mark (A4, D112). */
#app > .fullscreen .poweredBy a:has(.icon-logo) {
  display: none;
}
#app > .fullscreen .poweredBy a .logotype {
  display: none;
}
#app > .fullscreen .poweredBy a:has(.logotype)::after {
  content: "Zammad";
  color: var(--color-on-primary);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
#app > .fullscreen .poweredBy a:has(.logotype):hover::after {
  text-decoration-thickness: var(--link-underline-hover);
}

/* ===== 8. public knowledge base ===== */
/* =============================================================================
 * Stadt Leipzig theme for Zammad 7.2 — B. public knowledge base (/help/…)
 *
 * Server-rendered; every page has html[data-available-locales]. Depth: full.
 * Home, categories, search and 404 are task pages (16 px body); answers are running
 * text: reading mode (18 px body, 40 px h1) through the generated block
 * html[data-available-locales]:has(.main--article) in build.sh (D88; nothing in Zammad
 * sets data-cd-mode). One 72rem column for header, breadcrumb, content and footer on
 * every KB page (D89; web.md §0.2 B7: task pages inside a reading site keep its column).
 *
 * Settings that belong to Zammad, set by install.sh (and backed up): the KB colours
 * (link, header) in the KB's own inline <style>, the footer text and the legal row (KB
 * menu "Fußzeile"). This layer does type, header strip, logo and Absender, search band,
 * tiles, lists, breadcrumb, answers and footer.
 *
 * Dark (D117, D118): the knowledge base has no appearance setting; the generated layer
 * puts the Graphit palette on its <html> when the reader's system is dark
 * (prefers-color-scheme), and the tokens below switch. The search band is the page's tint
 * surface: the Helle Ton in the light, the Leitfarbe's Vollton in the dark (--tint-*).
 * ============================================================================= */

html[data-available-locales] {
  color: var(--color-text);
  line-height: var(--leading-normal);
}
html[data-available-locales] body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}
html[data-available-locales] .container {
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: calc(var(--ui-column-wide) + 2 * var(--ui-gutter)); /* check-style: ignore — the knowledge base (72rem) is another site than the agent app's 40rem sign-in in the same bundle */
  margin-inline: auto;
  padding-inline: var(--ui-gutter);
}

/* --- B1. Header: the 80 px white strip with logo and Absender (D92, D109) ----- */
html[data-available-locales] .header {
  isolation: isolate;
  overflow-x: clip;
  padding: 0;
  border-block-end: var(--border-width) solid var(--color-ui-line);
  background-color: var(--color-bg);
}
html[data-available-locales] .header > .container:first-child {
  position: relative;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: var(--ui-header-height);
}
/* the header line, full width under the first row */
html[data-available-locales] .header > .container:first-child::after {
  content: "";
  position: absolute;
  inset-inline: calc(50% - 50vw);
  inset-block-end: 0;
  block-size: var(--border-width);
  background-color: var(--color-ui-line);
}
html[data-available-locales] .header .logo {
  display: flex;
  align-items: flex-start;
  gap: var(--ui-logo-height);
  min-inline-size: 0;
}
html[data-available-locales] .header .logo a {
  display: block;
  flex: none;
}
/* The logo: painted from the theme's copy of the delivered artwork, so the link's name is
   "Stadt Leipzig" (D52); Zammad's <img> (the product logo, without alt) is hidden. */
html[data-available-locales] .header .logo a::before {
  content: "" / "Stadt Leipzig";
  display: block;
  block-size: var(--ui-logo-height);
  aspect-ratio: 5 / 2;            /* the trimmed artwork: 375 × 150 px */
  background-image: var(--cd-logo);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}
html[data-available-locales] .header .logo img {
  display: none;
}
/* Absender in the logo row from 768 px: one logo height away, first baseline on the
   baseline of "Stadt" (D109) */
html[data-available-locales] .header .logo::after {
  content: var(--cd-absender);
  margin-block-start: var(--ui-absender-offset);
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
}
html[data-available-locales] .header .menu:empty {
  display: none;
}
html[data-available-locales] .header .menu-item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  color: var(--color-link);
  font-size: var(--text-ui);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}

/* --- B2. Search band: the page intro on the tint surface (D111; D118: the Helle Ton in
   the light, the Vollton with its own text colour in the dark) ----------------------- */
html[data-available-locales] .header > .container:nth-child(2) {
  position: relative;
  padding-block: var(--space-6);
}
html[data-available-locales] .header > .container:nth-child(2)::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(50% - 50vw);
  z-index: -1;
  background-color: var(--tint-bg);
}
html[data-available-locales] .search {
  margin: 0;
}
html[data-available-locales] .search-field {
  font-size: var(--text-ui);
}
html[data-available-locales] .search-field input[type="search"] {
  box-sizing: border-box;
  block-size: var(--control-height);
  padding-block: 0;
  border: var(--border-width) solid var(--tint-line);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg);
  box-shadow: none;
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-regular);
  text-overflow: ellipsis;
}
html[data-available-locales] .search-field input[type="search"]:hover {
  border-color: var(--color-text);
}
html[data-available-locales] .search-field input[type="search"]::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}
html[data-available-locales] .search-field .icon {
  fill: var(--color-text);
}
html[data-available-locales] .search-results {
  margin: 0;
  padding: var(--space-2) 0 0;
}
html[data-available-locales] .search-results .result a {
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  color: var(--color-text);
}
html[data-available-locales] .result-title {
  color: var(--color-text);
  font-weight: var(--weight-bold);
}
html[data-available-locales] :is(.result-category, .result-preview, .search-message) {
  color: var(--color-text-muted);
  font-size: var(--text-ui);
}

/* Below 768 px the Absender leaves the logo row and opens the page intro, in the band
   above the search field (D92, D109) */
@media (max-width: 767px) {
  html[data-available-locales] .header .logo::after {
    content: none;
  }
  html[data-available-locales] .header > .container:nth-child(2) {
    padding-block: var(--space-5);
  }
  html[data-available-locales] .header > .container:nth-child(2) .search::before {
    content: var(--cd-absender);
    display: block;
    margin-block-end: var(--space-3);
    color: var(--tint-text);
    font-size: var(--text-ui);
    line-height: var(--leading-normal);
  }
}

/* --- B3. Breadcrumb: 16 px, underlined, one row (D100, D103) ------------------ */
html[data-available-locales] .breadcrumbs {
  font-size: var(--text-ui);
}
html[data-available-locales] .breadcrumbs .container {
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
  padding-block: var(--space-5) 0;
  border-block-end: 0;
}
html[data-available-locales] .breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  min-inline-size: 0;
  padding: 0 var(--space-4) 0 0;
  color: var(--color-link);
  line-height: var(--leading-snug);
}
html[data-available-locales] .breadcrumb:first-child {
  padding-inline-start: 0;
}
/* the host hides the home link's text up to 920 px and leaves an icon-only link */
html[data-available-locales] .breadcrumb .icon-knowledge-base + span {
  display: inline;
}
html[data-available-locales] .breadcrumb span {
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .breadcrumb[href]:hover {
  color: var(--color-link);
}
html[data-available-locales] .breadcrumb[href]:hover span {
  text-decoration-thickness: var(--link-underline-hover);
}
html[data-available-locales] .breadcrumb:last-child {
  color: var(--color-text);
}
html[data-available-locales] .breadcrumb:last-child span {
  text-decoration: none;
}
/* icons black, as leipzig.de's (only the words are the link) */
html[data-available-locales] .breadcrumb :is(.icon, [data-font]) {
  margin: 0;
  opacity: 1;
  color: var(--color-text);
  fill: var(--color-text);
}
/* Separator: a small chevron in the text colour, as leipzig.de's breadcrumb (D100), instead
   of Zammad's two 40 %-high rotated lines; drawn in the item's end padding. */
html[data-available-locales] .breadcrumb::after {
  display: none;
}
html[data-available-locales] .breadcrumb::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: auto 0;
  inline-size: var(--space-3);
  block-size: var(--space-3);
  margin-block: auto;
  background-color: var(--color-text);
  opacity: 1;
  transform: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}
html[dir="rtl"][data-available-locales] .breadcrumb::before {
  transform: scaleX(-1);
}
html[data-available-locales] .breadcrumb:last-child::before {
  display: none;
}
/* The whole trail fits one row only from 1024 px at 16 px: below, only the parent link
   with a chevron (D103) */
@media (max-width: 1023px) {
  html[data-available-locales] .breadcrumb:not(:nth-last-child(2)) {
    display: none;
  }
  html[data-available-locales] .breadcrumb:nth-last-child(2) {
    padding-inline-end: 0;
  }
  html[data-available-locales] .breadcrumb:nth-last-child(2)::after {
    display: none;
  }
  html[data-available-locales] .breadcrumb:nth-last-child(2)::before {
    content: "‹";
    position: static;
    inline-size: auto;
    block-size: auto;
    margin: 0;
    background: none;
    transform: none;
    opacity: 1;
    color: currentColor;
    -webkit-mask: none;
            mask: none;
  }
  html[data-available-locales] .breadcrumb:nth-last-child(2) :is(.icon, [data-font]) {
    display: none;
  }
}

/* --- B4. Main content ------------------------------------------------------- */
html[data-available-locales] .main {
  margin: 0;
  padding-block: var(--space-6) 0;
}
html[data-available-locales] .breadcrumbs + .main {
  padding-block-start: var(--space-5);
}
html[data-available-locales] .main .container {
  gap: 0;
}
html[data-available-locales] h1 {
  margin: 0 0 var(--space-6);
  color: var(--color-text);
  font-size: var(--text-h1);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
}
html[data-available-locales] h2 {
  margin: var(--space-6) 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-h2);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
}
html[data-available-locales] h3 {
  margin: var(--space-6) 0 var(--space-4);
  color: var(--color-text);
  font-size: var(--text-h3);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-normal);
}
html[data-available-locales] h4 {
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text);
  font-size: var(--text-h4);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
}
html[data-available-locales] :is(strong, b) {
  font-weight: var(--weight-bold);
}
html[data-available-locales] .main--categories h1 .icon-hashtag {
  fill: var(--color-ui-line-strong);
}

/* Category tiles (home): framed cards — white, 1 px line, radius-md, no shadow — with a
   linked title, Bold black (D89, D96) */
html[data-available-locales] .sections:first-child {
  margin-block-start: 0;
}
html[data-available-locales] .sections--grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin: 0;
}
html[data-available-locales] .sections--grid .section {
  inline-size: auto;
}
html[data-available-locales] .sections--grid .section a {
  block-size: 100%;
  padding: 0;
  color: var(--color-text);
  text-decoration: none;
}
html[data-available-locales] .sections--grid .section-inner {
  position: static;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4);
  block-size: 100%;
  margin: 0;
  padding: var(--space-5);
  border: var(--border-width) solid var(--color-ui-line);
  border-radius: var(--radius-md);
  background-color: var(--color-bg);
  box-shadow: none;
  color: var(--color-text);
  text-align: start;
}
html[data-available-locales] .sections--grid .section-inner > span {
  padding: 0;
}
html[data-available-locales] .sections--grid .section-inner :is([data-font], .icon) {
  inline-size: auto;
  margin: 0;
  color: var(--color-text);
  fill: currentColor;
  font-size: var(--text-h2);
}
html[data-available-locales] .sections--grid .section-inner .title {
  display: block;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
/* the linked title's trailing arrow in the link colour (D96, web.md §0.2 B5) */
html[data-available-locales] .sections--grid .section-inner .title::after {
  content: "";
  display: inline-block;
  inline-size: var(--space-5);
  block-size: var(--space-5);
  margin-inline-start: var(--space-2);
  vertical-align: text-bottom;
  background-color: var(--color-link);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--duration-fast);
}
html[data-available-locales] .sections--grid .section a:is(:hover, :focus-visible) .title::after {
  transform: translateX(var(--button-icon-shift));
}
html[data-available-locales] .sections--grid .section a:hover .section-inner {
  border-color: var(--color-ui-line-strong);
}
html[data-available-locales] .sections--grid .section a:hover .title {
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .section > a:hover {
  color: var(--color-text);
}

/* Answer lists (category): a result list with 1 px separators, no boxes (D89) */
html[data-available-locales] .sections--list {
  border-block-start: var(--border-width) solid var(--color-ui-line);
}
html[data-available-locales] .sections--list .section a {
  color: var(--color-text);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .sections--list .section-inner {
  box-sizing: border-box;
  align-items: center;
  gap: var(--space-3);
  min-block-size: var(--control-height);
  margin: 0;
  padding: var(--space-3) 0;
  border-block-end: var(--border-width) solid var(--color-ui-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}
html[data-available-locales] .sections--list .section-inner :is(.icon, [data-font]) {
  inline-size: var(--space-5);
  margin: 0;
  color: var(--color-text-muted);
  fill: var(--color-text-muted);
}
html[data-available-locales] .sections--list .section a:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
html[data-available-locales] .sections-empty {
  border-color: var(--color-ui-line-strong);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
}
html[data-available-locales] .sections + hr {
  border-block-start-color: var(--color-ui-line);
}

/* --- B5. Answers: reading mode (18 px body, text on the measure, D88, D94) ----- */
html[data-available-locales] .main--article h1 {
  max-inline-size: var(--measure);
}
html[data-available-locales] .article {
  color: var(--color-text);
}
html[data-available-locales] .article-content {
  max-inline-size: var(--measure);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
}
html[data-available-locales] .main .container .article-content :is(ul, ol) {
  padding-inline-start: var(--space-5);
}
html[data-available-locales] .article-content li + li {
  margin-block-start: var(--space-2);
}
html[data-available-locales] .article-content a {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .article-content a:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
html[data-available-locales] .article-content th {
  background-color: var(--color-ui-subtle);
}
html[data-available-locales] .article-content blockquote {
  border-inline-start: var(--border-width-thick) solid var(--color-ui-line-strong);
}
html[data-available-locales] .article-content :is(code, pre) {
  background-color: var(--color-ui-subtle);
  font-size: var(--text-ui);
}
html[data-available-locales] .article-meta {
  margin-block-start: var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-meta);
}
html[data-available-locales] .article-nav-adjacent {
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-block-start: var(--space-4);
  font-size: var(--text-ui);
}
/* both links with left-aligned text (Typografie p.10); "next" keeps its place right */
html[data-available-locales] .article-nav-adjacent :is(.article-nav-adjacent-previous, .article-nav-adjacent-next) {
  text-align: start;
}
html[data-available-locales] .article-nav-adjacent a {
  min-block-size: var(--target-min);
  color: var(--color-link);
  fill: currentColor;
}
html[data-available-locales] .article-nav-adjacent a span {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .article-nav-adjacent a:hover {
  color: var(--color-link);
  fill: currentColor;
}
html[data-available-locales] .article-nav-adjacent a:hover span {
  text-decoration-thickness: var(--link-underline-hover);
}
html[data-available-locales] .article-accessories {
  border-block-start-color: var(--color-ui-line);
}
html[data-available-locales] .article-accessories-title {
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
html[data-available-locales] .article-accessories .icon {
  fill: var(--color-text-muted);
}
html[data-available-locales] .attachment {
  color: var(--color-link);
  font-size: var(--text-ui);
  text-decoration-line: underline;
}
html[data-available-locales] .attachment-size {
  color: var(--color-text-muted);
}
/* Tags: 32 px pills, 1 px border on the Helle Ton, black words (D100) */
html[data-available-locales] .tag {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--space-6);
  padding: 0 var(--space-3);
  border: var(--border-width) solid var(--color-line-on-tint);
  border-radius: var(--radius-full);
  background-color: var(--color-tag-bg);
  color: var(--color-text);
  font-size: var(--text-ui);
}

/* 404 */
html[data-available-locales] .main--error {
  text-align: start;
}
html[data-available-locales] .main--error .container {
  align-items: flex-start;
  margin: 0 auto;
}
html[data-available-locales] .main--error .container > .icon {
  display: none;
}
html[data-available-locales] .main--error p {
  max-inline-size: var(--measure);
}
html[data-available-locales] .main--error a:not([class]) {
  color: var(--color-link);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}

/* --- B6. Footer: white, 1 px top line, legal row (KB menu "Fußzeile"), copyright
   (KB footer text), language switch (D92, D109) ------------------------------- */
html[data-available-locales] .main {
  padding-block-end: var(--space-footer);
}
html[data-available-locales] .footer {
  margin-block-start: auto;
  padding-block-start: 0;
  border-block-start: var(--border-width) solid var(--color-ui-line);
  background: none;
  color: var(--color-text);
  font-size: var(--text-ui);
}
html[data-available-locales] .footer > .container {
  border-block-start: 0;
}
html[data-available-locales] .footer-menu {
  position: relative;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-4) var(--space-6);
  padding: var(--space-6) 0;
}
html[data-available-locales] .footer .copyright {
  order: 2;
  color: var(--color-text);
}
html[data-available-locales] .footer .menu {
  order: 1;
  flex: 1 1 100%;
  justify-content: flex-start;
  gap: 0 var(--space-5);
  min-block-size: 0;
  font-size: var(--text-ui);
}
html[data-available-locales] .footer .menu:empty {
  display: none;
}
html[data-available-locales] .footer .menu-item {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  padding: 0;
  color: var(--color-link);
  line-height: var(--leading-snug);
  text-decoration-line: underline;
  text-decoration-thickness: var(--link-underline);
  text-underline-offset: var(--link-underline-offset);
}
html[data-available-locales] .footer .menu-item:hover {
  text-decoration-thickness: var(--link-underline-hover);
}
html[data-available-locales] .footer .language-picker {
  order: 3;
  margin-inline-start: auto;
}
@media (max-width: 639px) {
  html[data-available-locales] .footer .language-picker {
    flex: 1 1 100%;
    margin-inline-start: 0;
  }
}
/* Language switch: a secondary pill, 44 px (D98) */
html[data-available-locales] .btn {
  box-sizing: border-box;
  min-block-size: var(--button-height-sm);
  border: var(--border-width-thick) solid var(--color-link);
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-link);
  font-size: var(--text-ui);
  font-weight: var(--weight-medium);
}
html[data-available-locales] .btn--action {
  block-size: auto;
  padding: var(--space-2) var(--space-4) !important; /* the host sets this padding with !important */
  letter-spacing: var(--tracking-normal);
  text-transform: none;
}
html[data-available-locales] .btn:hover {
  background-color: var(--color-ui-subtle);
}
html[data-available-locales] .btn .icon {
  fill: currentColor;
}
html[data-available-locales] .dropdown-menu {
  border-radius: var(--radius-md);
  background-color: var(--color-ui-overlay);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-ui);
}
html[data-available-locales] .dropdown-menu a {
  min-block-size: var(--target-min);
  color: var(--color-text);
}