/* =====================================================================
   Shell — everything that is not a specific Vordruck.

   Loaded by every form page alongside exactly one form stylesheet
   (muster13.css, muster56.css). Holds the design tokens and every piece of
   shared chrome: toolbar, dialogs, context card, view toggle, friendly form
   and the three interactive primitives a form is built from.

   A form page scopes its own ink and paper onto `.vo-page`, so the shared
   primitives below never need to know which Vordruck they are drawing.
   ===================================================================== */
:root {
    /* Shell chrome */
    --bg-page: #e5e7eb;
    --bg-surface: #ffffff;
    --bg-section: #f3f4f6;
    --bg-row: #f9fafb;
    --bg-input-focus: #fff7f8;

    /* Text */
    --text: #1a1a1a;
    --text-soft: #4b5563;
    --text-muted: #6b7280;
    --text-on-dark: #ffffff;
    --text-th: #374151;
    --text-control: #1e293b;

    /* Status — success */
    --ok-bg: #d1fae5;
    --ok-fg: #065f46;
    --ok-border: #047857;
    --ok-accent: #10b981;

    /* Status — warning */
    --warn-bg: #fffbeb;
    --warn-fg: #92400e;
    --warn-border: #b45309;
    --warn-tag-bg: #fef3c7;

    /* Status — error */
    --err-bg: #fef2f2;
    --err-fg: #991b1b;
    --err-border: #b91c1c;
    --err-tag-bg: #fee2e2;
    --err-strong: #dc2626;

    /* Type scale. Every piece of chrome sizes its text from here, so a form's
       panel cannot end up with a scale of its own. */
    --fs-3xs: 10px;
    --fs-2xs: 11px;
    --fs-xs: 12px;
    --fs-sm: 13px;
    --fs-md: 14px;
    --fs-lg: 16px;
    --fs-xl: 22px;
    --fs-2xl: 24px;

    /* Misc */
    --border-soft: #e5e7eb;
    --border-row: #f1f5f9;
    --border-control: #cbd5e1;
    --focus-ring: #2563eb;

    --form-scale: 1;
    /* One printed hairline. Vo.Fit overrides it so that, whatever the zoom
       and the display's pixel ratio, a line always covers a whole number of
       device pixels: at a fractional zoom a 1 px line rounds up in one place
       and down in another, and the rules come out looking uneven. */
    --vo-hairline: 1px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Several panel parts set an explicit `display`, which would otherwise beat
   the user-agent rule for [hidden] and leave empty chips on screen. */
[hidden] {
    display: none !important;
}

/* =====================================================================
   Page layout — the Vordruck and its context card, side by side.

   `max-content` plus auto margins centres the pair when the window is wide
   enough and simply overflows to the right when it is not, so the form
   stays reachable by scrolling instead of being clipped on the left.
   ===================================================================== */
html {
    background: var(--bg-page);
    min-height: 100vh;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--vo-ink);
    -webkit-font-smoothing: antialiased;
    /* No min-height here: the first child's top margin would collapse out of
       body and push the document past the viewport, so the Vorschau could
       never quite fit. html already paints the full-height background. */
}

.vo-wrap {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    width: max-content;
    margin: 0 auto;
    /* Just enough room for the page's drop shadow. The rail's clearance is
       body padding, not padding here: `zoom` would scale it away exactly when
       the form is scaled down, which is when the two are closest. */
    padding: 16px 24px;
    /* voFit computes the factor so the Vorschau fills the window rather than
       scrolling. `zoom` reflows, so no empty scroll area is left behind. */
    zoom: var(--form-scale);
}

.vo-page,
.vo-card {
    position: relative;
    background: var(--bg-surface);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.vo-page {
    width: var(--vo-page-width);
    height: var(--vo-page-height);
    background: var(--vo-paper);
    overflow: hidden;
}

/* =====================================================================
   A Vordruck of two sheets shows both at once — the Antragsart is printed on
   one and the indication that qualifies it on the other, so neither sheet can
   be judged alone. The context card then has no column of its own: it covers
   the sheet that is *not* being worked on, and fades away again when the
   field is left, so the sheet is never gone for longer than it is being
   explained.
   ===================================================================== */
/* The card is positioned against the wrap until a field puts it over a sheet,
   so it stays inside the row either way. */
.vo-wrap--sheets {
    position: relative;
}

.vo-slot {
    position: relative;
    flex-shrink: 0;
}

.vo-wrap--sheets .vo-card {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    z-index: 4;
    opacity: 0;
    visibility: hidden;
    transition: opacity 160ms ease-out, visibility 0s linear 160ms;
    /* While it is merely following the pointer the card is a passing remark:
       it must not swallow the clicks meant for the sheet underneath. Once a
       field is focused the card is held, and its own actions become usable. */
    pointer-events: none;
}

.vo-wrap--sheets .vo-card[data-locked="true"] {
    pointer-events: auto;
}

.vo-wrap--sheets .vo-card[data-shown="true"] {
    opacity: 1;
    visibility: visible;
    transition: opacity 160ms ease-out;
}

/* The card's own actions belong to a field that is being filled in, not to one
   that happens to be under the pointer. */
.info-panel__fill-btn[data-locked="false"] {
    display: none;
}

/* The card stands the same height as the Vordruck beside it. Its width is
   what the form stylesheet asks for, unless Vo.Fit has to take some of it
   back so the Vordruck can still fill the window height.

   `--form-scale` is undone here: the card sits inside the zoomed row, so
   without this its text would be sized by whichever Vordruck it happens to
   stand next to — 20 px beside Muster 13 and 16 px beside the wider Muster 56,
   from the very same rule. Nested zoom multiplies, so the reciprocal leaves
   the card at 1:1 while the Vordruck scales. */
.vo-card {
    width: var(--vo-card-width, 460px);
    height: var(--vo-page-height);
}

/* The card sits inside the zoomed row, so without this its text would be sized
   by whichever Vordruck it happens to stand beside — the same rule rendering
   20 px next to Muster 13 and 16 px next to the wider Muster 56. Dividing the
   scale out of the type tokens holds every size in the card at what the token
   says, whatever the Vordruck is scaled to. The box itself keeps scaling with
   the form, so nothing about the layout moves. */
.vo-card {
    --fs-3xs: calc(10px / var(--form-scale));
    --fs-2xs: calc(11px / var(--form-scale));
    --fs-xs: calc(12px / var(--form-scale));
    --fs-sm: calc(13px / var(--form-scale));
    --fs-md: calc(14px / var(--form-scale));
    --fs-lg: calc(16px / var(--form-scale));
    --fs-xl: calc(22px / var(--form-scale));
    --fs-2xl: calc(24px / var(--form-scale));
}

/* Too narrow to be worth its width — the Vordruck gets the window to itself. */
body.vo-no-card .vo-card {
    display: none;
}

/* =====================================================================
   Interactive primitives

   The three controls every Vordruck is built from. Geometry comes from an
   inline style on each element; ink and paper from the `.vo-page` scope.
   ===================================================================== */
.vo-chk {
    position: absolute;
    border: var(--vo-hairline) solid var(--vo-line);
    background: var(--bg-surface);
    cursor: pointer;
    user-select: none;
}

.vo-chk:focus-visible,
.vo-in:focus-visible,
.vo-cell:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.vo-chk.ticked::after {
    content: '\2715';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink1);
    opacity: var(--ink-alpha);
    /* The cross is printed matter, not handwriting: none of the entry faces
       carries U+2715, and a fallback glyph would jump around. */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 1;
}

/* =====================================================================
   The entry layer — how what is filled in is drawn.

   A filled Vordruck is not a web form: the values went through a practice
   printer with a worn ribbon, or were written by hand. So an entry's glyphs
   take a gradient between two inks rather than one flat colour, and the noise
   filter below modulates the coverage along the line. At the default setting
   both inks are the same and the variance is zero, which is a plain, evenly
   inked value — the Formular panel is what moves it away from that.
   ===================================================================== */
:root {
    --ink1: #101418;
    --ink2: #101418;
    --ink-alpha: 1;
    --var-color: 0;

    --entry-font: Arial, Helvetica, sans-serif;
    --entry-size: 16px;
    --cell-size: 16px;
}

/* Each face carries the look of the machine it came out of; the panel's
   Deckkraft then overrides how heavily it printed. */
body[data-face="elite"] {
    --entry-font: 'Special Elite', monospace;
    --entry-size: 14px;
    --cell-size: 15px;
}

body[data-face="courier"] {
    --entry-font: 'Courier Prime', monospace;
    --entry-size: 15px;
    --cell-size: 16px;
}

body[data-face="sharetech"] {
    --entry-font: 'Share Tech Mono', monospace;
    --entry-size: 15px;
    --cell-size: 16px;
}

body[data-face="robotomono"] {
    --entry-font: 'Roboto Mono', monospace;
    --entry-size: 14px;
    --cell-size: 15px;
}

/* Every entry reads its ink from the same four properties; which set they
   point at is all that separates the Vordruck's filling from a Vordruck that
   also carries handwriting. */
.vo-in,
.vo-cell {
    --i1: var(--ink1);
    --i2: var(--ink2);
    --ia: var(--ink-alpha);
    --vc: var(--var-color);

    --c1: color-mix(in srgb, var(--i1) calc(var(--ia) * 100%), transparent);
    --c2: color-mix(in srgb, var(--i2) calc(var(--ia) * 100%), transparent);
    /* where this field starts, and how far the run inside its letters goes */
    --c-a: color-mix(in srgb, var(--c1), var(--c2)
                     calc(var(--vc) * var(--jh, .5) * 1%));
    --c-b: color-mix(in srgb, var(--c1), var(--c2) calc(var(--vc) * 1%));

    background-color: transparent;
    background-image: linear-gradient(var(--ja, 120deg),
        var(--c-a) 0%,
        var(--c-b) calc(38% + var(--jg, 0%)),
        var(--c-a) 70%,
        var(--c-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    caret-color: var(--i1);
    filter: url(#vo-pen);
    font-family: var(--entry-font);
}

/* Free text, transparent and borderless so only what the user types shows. */
.vo-in {
    position: absolute;
    border: none;
    font-size: var(--entry-size);
    outline: none;
    padding: 0;
    text-align: left;
}

input.vo-in {
    display: flex;
    align-items: flex-end;
    line-height: 1;
}

textarea.vo-in {
    resize: none;
    line-height: 1.2;
    vertical-align: top;
}

/* One character per printed cell — an IK digit, a date digit, a count.
   Borderless by default: most Vordrucke already print the cell's box, and a
   form that does not (Muster 13's IK row) draws its own. */
.vo-cell {
    position: absolute;
    border: none;
    font-size: var(--cell-size);
    font-weight: 600;
    text-align: center;
    outline: none;
    padding: 0;
    text-transform: uppercase;
}

/* The glyphs are painted through a background, so focus cannot be shown with
   one — it would be clipped away with everything that is not a letter. */
.vo-in:focus,
.vo-cell:focus {
    outline: 1px solid var(--focus-ring);
    outline-offset: 0;
}

/* A focused entry comes to the front, so an overlapping neighbour cannot
   swallow the text being typed. */
.vo-in:focus {
    z-index: 4;
}

/* Controls sit above the printed layer so a click always lands on them,
   never on a label or rule that happens to overlap. */
.vo-chk,
.vo-in,
.vo-cell {
    z-index: 1;
    scroll-margin: 72px 0;
}

/* =====================================================================
   Context-aware help panel (inside .vo-card)
   ===================================================================== */
.info-panel {
    position: absolute;
    left: 31px;
    top: 31px;
    right: 48px;
    bottom: 48px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    overflow: auto;
}

.info-panel__header {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-bottom: 18px;
    border-bottom: 2px solid var(--vo-ink);
}

.info-panel__title {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--vo-ink);
    flex: 1;
    line-height: 1.2;
}

.info-panel__badge {
    font-size: var(--fs-3xs);
    font-weight: 700;
    padding: 5px 16px;
    border-radius: 5px;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.info-panel__badge[data-mandatory="true"] {
    background: #fde2e5;
    color: var(--vo-ink);
}

.info-panel__badge[data-mandatory="false"] {
    background: var(--bg-page);
    color: var(--text-soft);
}

.info-panel__section-title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-muted);
    margin-bottom: 12px;
}

.info-panel__section-body {
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--text);
    white-space: pre-wrap;
}

.info-panel__examples {
    list-style: none;
    padding: 0;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.info-panel__examples li {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--fs-xs);
    padding: 6px 14px;
    background: var(--ok-bg);
    border-left: 4px solid var(--ok-accent);
    border-radius: 3px;
    white-space: pre-wrap;
    color: var(--ok-fg);
}

.info-panel__fill-btn {
    align-self: flex-start;
    margin-top: 12px;
    padding: 8px 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    background: var(--vo-ink);
    color: var(--text-on-dark);
    border: 1px solid var(--vo-ink);
    border-radius: 6px;
    cursor: pointer;
}

.info-panel__fill-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.info-panel__fill-btn:disabled {
    background: var(--bg-section);
    color: var(--text-muted);
    border-color: var(--border-control);
    cursor: not-allowed;
}

.info-panel__validation-status {
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 8px 18px;
    border-radius: 5px;
}

.info-panel__validation-status[data-valid="true"] {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.info-panel__validation-status[data-valid="false"] {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.info-panel__validation-hint {
    font-size: var(--fs-3xs);
    color: var(--text-muted);
    margin-top: 8px;
}

.info-panel--empty .info-panel__title {
    color: #9ca3af;
}

/* Änderung auf der Verordnung — per-category items */
.info-panel__aenderung {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-panel__aenderung li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: var(--fs-lg);
    line-height: 1.5;
    color: var(--text);
    padding: 12px 14px;
    border-radius: 4px;
    border-left: 4px solid #9ca3af;
    background: var(--bg-row);
}

.info-panel__aenderung-tag {
    align-self: flex-start;
    font-size: var(--fs-3xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
}

.info-panel__aenderung li[data-typ="unterschrift"] {
    border-left-color: var(--err-border);
    background: var(--err-bg);
}

.info-panel__aenderung li[data-typ="unterschrift"] .info-panel__aenderung-tag {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.info-panel__aenderung li[data-typ="einvernehmen"] {
    border-left-color: var(--warn-border);
    background: var(--warn-bg);
}

.info-panel__aenderung li[data-typ="einvernehmen"] .info-panel__aenderung-tag {
    background: var(--warn-tag-bg);
    color: var(--warn-fg);
}

.info-panel__aenderung li[data-typ="information"] {
    border-left-color: var(--ok-border);
    background: var(--ok-bg);
}

.info-panel__aenderung li[data-typ="information"] .info-panel__aenderung-tag {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

/* =====================================================================
   Dialog primitives — shared by every dialog the shell builds
   ===================================================================== */
.vo-dialog__hint {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    margin: 0;
}

.vo-dialog__btn {
    padding: 8px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.vo-dialog__btn--primary {
    background: var(--vo-ink);
    color: var(--text-on-dark);
    border: none;
}

.vo-dialog__btn--ghost {
    background: var(--bg-surface);
    color: var(--text-control);
    border: 1px solid var(--border-control);
}

.vo-dialog__btn:hover {
    opacity: 0.9;
}

/* Export picker: PDF and image, each with one full-width button per preset. */
.export-dialog__group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.export-dialog__group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.export-dialog__options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Which sheet the picture should be — only shown where there is a choice. */
.export-dialog__sheets {
    display: flex;
    gap: 6px;
}

.export-dialog__sheets:empty {
    display: none;
}

.export-dialog__sheet {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    font-size: var(--fs-sm);
    color: var(--text-control);
    cursor: pointer;
}

.export-dialog__sheet:has(input:checked) {
    border-color: var(--vo-ink);
    color: var(--vo-ink);
    font-weight: 600;
}

.export-dialog__options .vo-dialog__btn {
    text-align: center;
}

/* =====================================================================
   Control rail

   Desktop: a fixed column at the left edge holding the view toggle, the
   action buttons and the reference slider. Keeping them out of the flow is
   what lets the Vordruck use the full window height.
   Mobile: see the media block — it becomes a top bar and Vo.Rail moves the
   toolbar and the slider into the actions dialog.
   ===================================================================== */
.vo-rail {
    position: fixed;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    width: 176px;
    z-index: 100;
}

/* The dialog opener is mobile-only; on desktop every action is on the rail. */
.vo-rail__actions {
    display: none;
}

/* One box, two labelled groups: which Vordruck, and what to do with it. */
.vo-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.vo-nav__group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vo-nav__title {
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Both switches are the same control; inside the box they fill its width. */
.vo-nav .mview-toggle {
    width: 100%;
}

.vo-nav .mview-toggle__btn {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

.vo-nav__slot {
    display: flex;
}

/* =====================================================================
   Formular panel — how what is filled in is drawn.

   At the right edge, opposite the navigation: this belongs to the Vordruck on
   screen, not to getting around the app. Fixed like the rail, so it costs the
   Vordruck only the width the wrap's padding keeps free.
   ===================================================================== */
.vo-set {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 210px;
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: var(--bg-surface);
    border-left: 1px solid var(--border-soft);
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-xs);
    color: var(--text-soft);
    overflow-y: auto;
}

.vo-set__title {
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}

.vo-set__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vo-set__row--inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.vo-set__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vo-set__group[hidden] {
    display: none;
}

.vo-set__sep {
    height: 1px;
    background: var(--border-soft);
}

.vo-set select {
    font: inherit;
    padding: 3px 6px;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    background: var(--bg-surface);
    color: var(--text-control);
}

.vo-set input[type="range"] {
    width: 100%;
    accent-color: var(--vo-ink);
}

.vo-set input[type="color"] {
    width: 42px;
    height: 22px;
    padding: 0;
    border: 1px solid var(--border-control);
    border-radius: 4px;
    background: var(--bg-surface);
}

/* =====================================================================
   Toolbar
   ===================================================================== */
.toolbar {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toolbar__link {
    text-decoration: none;
}

.toolbar button,
.toolbar__link {
    padding: 8px 12px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-control);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-control);
    width: 100%;
    text-align: left;
}

.toolbar button:hover {
    background: #f1f5f9;
}

.toolbar button:disabled {
    opacity: 0.5;
    cursor: wait;
}

/* =====================================================================
   Invalid-field marking
   ===================================================================== */
.vo-in.invalid {
    outline: 2px solid var(--err-strong);
    outline-offset: -2px;
    background: rgba(254, 226, 226, 0.65);
}

.vo-cell.invalid {
    outline: 2px solid var(--err-strong);
    outline-offset: -1px;
    background: rgba(254, 226, 226, 0.65);
}

.vo-chk.invalid {
    border-color: var(--err-strong);
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.45);
}

/* =====================================================================
   Modal dialog (shared by validate dialog and examples picker)
   ===================================================================== */
.validate-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: flex-start;
    justify-content: center;
    z-index: 1000;
    padding: 60px 16px;
    overflow: auto;
}

.validate-overlay[data-open="true"] {
    display: flex;
}

.validate-dialog {
    background: var(--bg-surface);
    border-radius: 8px;
    width: 640px;
    max-width: 100%;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--text);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.validate-dialog__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--vo-ink);
    line-height: 1.2;
}

.validate-dialog__summary {
    font-size: 15px;
    font-weight: 600;
    padding: 12px 14px;
    border-radius: 4px;
    line-height: 1.4;
}

.validate-dialog__summary[data-ok="true"] {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.validate-dialog__summary[data-ok="false"] {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.validate-dialog__toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.validate-dialog__toggle input {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.validate-dialog__empty {
    font-size: 15px;
    font-weight: 600;
    padding: 14px;
    border-radius: 4px;
    background: var(--ok-bg);
    color: var(--ok-fg);
    text-align: center;
}

.validate-dialog__table-wrap {
    overflow: auto;
    max-height: 60vh;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
}

.validate-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.4;
}

.validate-table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-section);
    color: var(--text-th);
    text-align: left;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-soft);
}

.validate-table tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-row);
    vertical-align: top;
    color: var(--text);
}

.validate-table tbody tr:last-child td {
    border-bottom: none;
}

.validate-table tbody tr[data-status="fail"] td {
    background: var(--err-bg);
}

.validate-row--clickable {
    cursor: pointer;
}

.validate-row--clickable:hover td {
    filter: brightness(0.97);
}

.validate-row__message {
    font-size: 13px;
    font-weight: 600;
    color: var(--err-fg);
    margin-top: 4px;
}

.validate-status {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.validate-status--pass {
    background: var(--ok-bg);
    color: var(--ok-fg);
}

.validate-status--fail {
    background: var(--err-tag-bg);
    color: var(--err-fg);
}

.validate-dialog__close {
    align-self: flex-end;
    padding: 8px 18px;
    background: var(--vo-ink);
    color: var(--text-on-dark);
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.validate-dialog__close:hover {
    opacity: 0.9;
}

/* =====================================================================
   Examples picker (uses the same overlay/dialog shell)
   ===================================================================== */
.examples-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.examples-list li {
    padding: 14px 16px;
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    background: var(--bg-surface);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.examples-list li:hover {
    background: var(--bg-row);
    border-color: var(--vo-ink);
}

.examples-list__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
    line-height: 1.3;
}

.examples-list__desc {
    font-size: 13px;
    line-height: 1.45;
    color: var(--text-soft);
}

/* =====================================================================
   First-run intro dialog
   ===================================================================== */
.intro-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
    overflow: auto;
}

.intro-overlay[hidden] {
    display: none;
}

.intro-dialog {
    background: var(--bg-surface);
    color: var(--text);
    border-radius: 12px;
    max-width: 520px;
    width: 100%;
    padding: 24px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
    font-family: Arial, Helvetica, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 90vh;
    max-height: 90dvh;
    overflow: auto;
}

.intro-dialog__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--vo-ink);
    margin: 0;
}

.intro-dialog__body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
}

.intro-dialog__body p {
    margin: 0 0 12px;
}

.intro-dialog__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.intro-dialog__list li {
    padding: 10px 12px;
    background: var(--bg-section);
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.45;
}

.intro-dialog__list strong {
    color: var(--vo-ink);
}

.intro-dialog__actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.intro-dialog__btn {
    padding: 10px 16px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    min-height: 44px;
}

.intro-dialog__btn--primary {
    background: var(--vo-ink);
    color: var(--text-on-dark);
    border: 1px solid var(--vo-ink);
}

.intro-dialog__btn--primary:hover {
    filter: brightness(0.95);
}

.intro-dialog__btn--ghost {
    background: transparent;
    color: var(--text-soft);
    border: 1px solid var(--border-control);
}

.intro-dialog__btn--ghost:hover {
    background: var(--bg-section);
}

body.intro-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    .intro-overlay {
        padding: 12px;
        align-items: flex-end;
    }

    .intro-dialog {
        padding: 18px;
        max-height: 85dvh;
        border-radius: 14px;
    }

    .intro-dialog__title {
        font-size: 18px;
    }

    .intro-dialog__actions {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .intro-dialog__btn {
        width: 100%;
    }
}

/* =====================================================================
   Default state for mobile-introduced elements (apply at any viewport).
   These are toggled per-view by `body[data-view=...]` selectors below.
   ===================================================================== */
#mobile-help-sheet,
#mobile-help-backdrop {
    display: none;
}

.mform-root {
    display: none;
}

/* Fill view (any viewport): hide the canonical .vo-page, show the friendly form. */
body[data-view="fill"] .vo-page {
    display: none;
}

/* Unless that sheet has no friendly form to show instead — a sheet without a
   section manifest stays printed in both views. */
body[data-view="fill"] .vo-slot:not(.vo-slot--friendly) .vo-page {
    display: block;
}

body[data-view="fill"] .mform-root {
    display: block;
    background: var(--bg-surface);
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
}

/* During PDF export, force the canonical layout regardless of view so
   html2canvas can rasterize `.vo-page`. Brief visual flash is acceptable. */
/* Export pins the zoom to 1, so a hairline is a true pixel again. */
body.rendering-pdf {
    --vo-hairline: 1px;
}

body.rendering-pdf .vo-page {
    display: block !important;
}

/* Full size too: the fitted preview is a screen convenience, and exporting
   at that zoom would rasterize a shrunken Vordruck into the PDF. */
body.rendering-pdf .vo-wrap {
    display: flex !important;
    zoom: 1 !important;
}

body.rendering-pdf .mform-root {
    display: none !important;
}

/* The entry layer paints its glyphs with a gradient clipped to the text, which
   the rasteriser can neither parse (`color-mix`) nor clip (`background-clip:
   text`) — it threw on the first and would have drawn nothing for the second,
   which is why an export produced no file at all. For the export the entries
   are laid down as flat ink instead: the face, the size and the colour are
   what an export carries; the ribbon's unevenness is a screen effect. */
body.rendering-pdf .vo-in,
body.rendering-pdf .vo-cell {
    background-image: none;
    color: var(--ink1);
    -webkit-text-fill-color: var(--ink1);
    opacity: var(--ink-alpha);
    filter: none;
}

/* =====================================================================
   View toggle (Ausfüllen / Vorschau) — visible at every viewport.
   Desktop: the top item of the fixed rail, so it costs the Vordruck no
   vertical space. Mobile media query below turns it into a top bar.
   ===================================================================== */
.mview-toggle {
    display: flex;
    width: max-content;
    margin: 0;
    gap: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}

.mview-toggle__btn {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    height: 24px;
    padding: 0 8px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--bg-surface);
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    line-height: 1;
}

.mview-toggle__btn:first-child {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.mview-toggle__btn:last-child {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.mview-toggle__btn--active {
    background: var(--vo-ink);
    color: var(--text-on-dark);
}


/* =====================================================================
   Friendly form layout (.mform-root) — applies at any viewport when
   visible. Desktop sizes it as a 704×1000 box (the .vo-page footprint);
   mobile-specific overrides live in the @media block.
   ===================================================================== */
.mform__section {
    background: var(--bg-surface);
    border-radius: 12px;
    margin: 0 0 16px;
    padding: 14px 14px 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.mform__section-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vo-ink);
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-soft);
}

.mform__row {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
}

.mform__row + .mform__row {
    border-top: 1px solid var(--border-row);
}

.mform__row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
}

.mform__label {
    flex: 1 1 auto;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mform__badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--bg-section);
    color: var(--text-muted);
}

.mform__badge--doctor {
    background: var(--warn-tag-bg);
    color: var(--warn-fg);
}

.mform__help {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    border: 1px solid var(--border-control);
    background: var(--bg-surface);
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.mform__help:hover,
.mform__help:active {
    background: var(--bg-section);
}

.mform__input,
.mform__textarea {
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: var(--text);
    padding: 10px 12px;
    border: 1px solid var(--border-control);
    border-radius: 8px;
    background: var(--bg-surface);
    min-height: 44px;
}

.mform__textarea {
    resize: vertical;
}

.mform__input:focus,
.mform__textarea:focus {
    outline: 2px solid var(--focus-ring);
    outline-offset: -1px;
    background: var(--bg-input-focus);
}

.mform__input--doctor {
    background: var(--bg-row);
    color: var(--text-soft);
}

.mform__row--doctor .mform__label {
    color: var(--text-soft);
}

.mform__hint {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.4;
    margin: 0;
}

.mform__multi {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mform__checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mform__checkbox {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--text);
    min-height: 44px;
}

.mform__checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--vo-ink);
    flex: 0 0 auto;
}

.mform__choice {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mform__choice-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-control);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text);
    background: var(--bg-surface);
    min-height: 44px;
    cursor: pointer;
}

.mform__choice-item input[type="radio"] {
    width: 22px;
    height: 22px;
    accent-color: var(--vo-ink);
    flex: 0 0 auto;
}

.mform__choice-item:has(input:checked) {
    background: var(--bg-input-focus);
    border-color: var(--vo-ink);
}

.mform__row--paired .mform__pair {
    display: flex;
    gap: 8px;
}

.mform__input--grow {
    flex: 1 1 auto;
}

.mform__input--be {
    flex: 0 0 96px;
    text-align: center;
}

/* Desktop: friendly form sits in `.vo-wrap` as a flex sibling alongside
   `.vo-card`, sized like the canonical `.vo-page` it temporarily replaces.
   The per-field "?" button is redundant on desktop — the right-side help
   card already updates on hover/focus — so hide it. */
@media (min-width: 769px) {
    /* Keeps the two fixed columns clear of the Vordruck: on the left 16 px
       inset + the rail's 176 px + a gap, on the right the Formular panel's
       210 px. Outside the zoomed wrap, so the gaps survive a scaled-down
       preview. */
    body {
        padding-left: 216px;
        padding-right: 226px;
    }

    /* The same box as the sheet it stands for — same width, same height, same
       place — so switching between Ausfüllen and Vorschau moves nothing. */
    body[data-view="fill"] .mform-root {
        width: var(--vo-page-width);
        height: var(--vo-page-height);
        flex-shrink: 0;
        overflow: auto;
        padding: 24px;
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
        align-self: flex-start;
    }

    .mform__help {
        display: none;
    }
}

/* =====================================================================
   Mobile breakpoint (<= 768px)
   The canonical `.vo-page` is hidden via the `body[data-view="fill"]` rule
   above; the friendly roots are shown. In `data-view="preview"`, the form
   returns to flow read-only and they are hidden.
   ===================================================================== */
@media (max-width: 768px) {
    html,
    body {
        overflow: auto;
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        color: var(--text);
    }

    /* Make room for the fixed top toggle. */
    body {
        padding-top: calc(40px + env(safe-area-inset-top));
    }

    /* Mobile preview view: pixel-exact form in flow, no help card. */
    body[data-view="preview"] .vo-wrap {
        position: static;
        padding: 8px 8px 16px;
        gap: 8px;
        pointer-events: auto;
        justify-content: flex-start;
        transform: none;
        width: max-content;
        min-width: 100%;
    }
    body[data-view="preview"] .vo-card {
        display: none;
    }

    /* Mobile fill view: hide the entire desktop chrome — the friendly roots
       were relocated by JS to body flow. Keep `.vo-wrap` rendered for
       PDF export by toggling display via `body.rendering-pdf`. */
    body[data-view="fill"] .vo-wrap {
        display: none;
    }

    /* The rail becomes the sticky top bar: view toggle on the left, the
       button that opens the actions dialog on the right. Everything else
       has been moved into that dialog by Vo.Rail. */
    .vo-rail {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: auto;
        transform: none;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: max(5px, env(safe-area-inset-top)) 8px 5px;
        background: var(--bg-page);
        border-bottom: 1px solid var(--border-soft);
    }

    .vo-rail__actions {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 28px;
        padding: 0;
        background: var(--bg-surface);
        border: 1px solid var(--border-control);
        border-radius: 4px;
        cursor: pointer;
    }

    /* Three bars, drawn rather than typed, so the icon does not depend on a
       glyph the device may not have. */
    .vo-rail__actions-icon,
    .vo-rail__actions-icon::before,
    .vo-rail__actions-icon::after {
        display: block;
        width: 16px;
        height: 2px;
        background: var(--text-control);
        border-radius: 1px;
    }

    .vo-rail__actions-icon {
        position: relative;
    }

    .vo-rail__actions-icon::before,
    .vo-rail__actions-icon::after {
        content: '';
        position: absolute;
        left: 0;
    }

    .vo-rail__actions-icon::before {
        top: -5px;
    }

    .vo-rail__actions-icon::after {
        top: 5px;
    }

    .mview-toggle {
        flex: 0 1 auto;
    }

    .mview-toggle__btn {
        flex: 0 1 96px;
        height: 28px;
        padding: 0 10px;
        font-size: 11px;
    }

    /* In the dialog the actions are a plain list, not a rail or a dock. */
    .actions-dialog__slot {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Mobile friendly form: full-width, scrolls in body flow.
       (Vo.Friendly moves the roots to be body children on mobile.) */
    body[data-view="fill"] .mform-root {
        padding: 16px 16px calc(24px + env(safe-area-inset-bottom));
        max-width: 640px;
        margin: 0 auto;
    }

    /* The Formular panel joins the actions in the dialog. */
    .vo-set {
        position: static;
        width: auto;
        border-left: none;
        padding: 0;
        overflow: visible;
    }

    /* The nav box is the dialog's body on mobile: no second frame around it. */
    .vo-nav {
        border: none;
        box-shadow: none;
        padding: 0;
        gap: 18px;
    }

    /* Toolbar: a column of full-width rows inside the actions dialog. */
    .toolbar {
        gap: 8px;
    }

    .toolbar__link {
        text-align: center;
        text-decoration: none;
    }

    .toolbar button,
    .toolbar__link {
        width: 100%;
        min-width: 0;
        text-align: center;
        font-size: 14px;
        padding: 10px 6px;
        min-height: 44px;
    }

    /* Validate / examples dialogs */
    .validate-overlay {
        padding: 24px 12px;
    }

    .validate-dialog {
        width: 100%;
        max-height: calc(100vh - 48px);
        max-height: calc(100dvh - 48px);
        overflow: auto;
        padding: 16px;
        gap: 12px;
    }

    .validate-dialog__table-wrap {
        max-height: 50vh;
        max-height: 50dvh;
        overflow: auto;
    }

    .validate-table {
        font-size: 13px;
    }

    .validate-table thead th,
    .validate-table tbody td {
        padding: 8px 10px;
        vertical-align: top;
    }

    .validate-table tbody td:nth-child(3) {
        word-break: break-word;
    }

    .examples-list li {
        padding: 16px 14px;
        min-height: 56px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .examples-list__title {
        font-size: 15px;
    }

    .examples-list__desc {
        font-size: 13px;
    }

    /* Bottom-sheet help: visible, slides in via data-open="true" */
    #mobile-help-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(0, 0, 0, 0.4);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease-out;
    }

    #mobile-help-backdrop[data-open="true"] {
        opacity: 1;
        pointer-events: auto;
    }

    #mobile-help-sheet {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        background: var(--bg-surface);
        color: var(--text);
        font-family: Arial, Helvetica, sans-serif;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.28);
        padding: 8px 16px calc(20px + env(safe-area-inset-bottom));
        max-height: 70vh;
        max-height: 70dvh;
        transform: translateY(100%);
        transition: transform 200ms ease-out;
    }

    #mobile-help-sheet[data-open="true"] {
        transform: translateY(0);
    }

    .mobile-help__handle {
        align-self: center;
        width: 80px;
        height: 24px;
        padding: 10px 20px;
        margin: -4px 0 4px;
        cursor: grab;
        background-clip: content-box;
        background-color: var(--border-control);
        border-radius: 2px;
        touch-action: none;
    }

    .mobile-help__handle:active {
        cursor: grabbing;
    }

    .mobile-help__header {
        display: flex;
        align-items: center;
        gap: 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--border-soft);
    }

    .mobile-help__title {
        flex: 1 1 auto;
        font-size: var(--fs-lg);
        font-weight: 700;
        color: var(--vo-ink);
        margin: 0;
    }

    .mobile-help__badge {
        font-size: var(--fs-2xs);
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 999px;
        background: var(--bg-section);
        color: var(--text-soft);
    }

    .mobile-help__badge[data-mandatory="true"] {
        background: var(--err-tag-bg);
        color: var(--err-fg);
    }

    .mobile-help__close {
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        border: none;
        background: transparent;
        font-size: 24px;
        line-height: 1;
        color: var(--text-soft);
        cursor: pointer;
        border-radius: 8px;
    }

    .mobile-help__close:active {
        background: var(--bg-section);
    }

    .mobile-help__body {
        overflow: auto;
        padding-top: 10px;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .mobile-help__explanation {
        font-size: var(--fs-md);
        line-height: 1.45;
        color: var(--text);
        margin: 0;
    }

    .mobile-help__section h3 {
        font-size: var(--fs-xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--text-muted);
        margin: 0 0 6px;
    }

    .mobile-help__allowed-desc {
        font-size: var(--fs-md);
        line-height: 1.45;
        color: var(--text);
        margin: 0 0 6px;
    }

    .mobile-help__examples {
        list-style: disc inside;
        font-size: var(--fs-sm);
        line-height: 1.5;
        color: var(--text-soft);
        padding: 0;
        margin: 0;
    }

    .mobile-help__fill-btn {
        margin-top: 12px;
        padding: 10px 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-size: var(--fs-md);
        font-weight: 600;
        background: var(--vo-ink);
        color: var(--text-on-dark);
        border: 1px solid var(--vo-ink);
        border-radius: 8px;
        cursor: pointer;
        width: 100%;
        min-height: 44px;
    }

    .mobile-help__fill-btn:disabled {
        background: var(--bg-section);
        color: var(--text-muted);
        border-color: var(--border-control);
        cursor: not-allowed;
    }

    .mobile-help__aenderung-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-help__aenderung-list li {
        font-size: var(--fs-sm);
        line-height: 1.4;
        color: var(--text);
        display: flex;
        flex-direction: column;
        gap: 4px;
        padding: 8px 10px;
        border-radius: 6px;
        background: var(--bg-section);
    }

    .mobile-help__aenderung-list li[data-typ="unterschrift"] {
        background: var(--err-tag-bg);
        color: var(--err-fg);
    }

    .mobile-help__aenderung-list li[data-typ="einvernehmen"] {
        background: var(--warn-tag-bg);
        color: var(--warn-fg);
    }

    .mobile-help__aenderung-list li[data-typ="information"] {
        background: var(--ok-bg);
        color: var(--ok-fg);
    }

    .mobile-help__aenderung-tag {
        font-size: var(--fs-2xs);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

}