/* REQ-UI-MODAL-HELP-UNIFICATION-001 (wave 20, client rule 63): the ONE modal component of the augite plugin family
 * (ARF_Modal / assets/js/modal.js). Loaded on every front-end page and every augite wp-admin page.
 * Slot order is fixed and stacked at full dialog width: header (kicker, title, close) -> hint (incl. "Erwartet") ->
 * fields -> actions -> help. Never title and fields side by side; inputs grow, buttons wrap below on narrow widths.
 * Selectors are prefixed with the component root (.augite-modal ...) and carry !important on layout properties,
 * because the surrounding page stylesheets (public.css body:not(.wp-admin) .arf-app ..., augite-ux.css
 * [role="dialog"]) contain broad !important element rules that would otherwise resize the dialog or its fields. */
.augite-modal{display:none;position:fixed!important;inset:0!important;z-index:100000;box-sizing:border-box;align-items:center;justify-content:center;padding:16px!important;margin:0!important;width:auto!important;max-width:none!important;background:transparent!important;border:0!important}
.augite-modal.is-open,html:not(.augite-modal-js) .augite-modal:target{display:flex!important}
html.augite-modal-open,html.augite-modal-open body{overflow:hidden!important}
.augite-modal .augite-modal__backdrop{position:absolute;inset:0;background:rgba(20,24,27,.5)}
.augite-modal .augite-modal__dialog{position:relative;box-sizing:border-box;display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:0!important;width:min(75vw,1100px)!important;max-width:100%!important;min-width:0!important;max-height:calc(100vh - 32px)!important;margin:0!important;padding:0!important;overflow:auto!important;overscroll-behavior:contain;background:#fff!important;color:#14181b;border:1px solid #d8dbde!important;border-top:4px solid #d9600a!important;border-radius:0!important;box-shadow:0 22px 60px rgba(20,24,27,.28)!important;transform:none!important;left:auto!important;top:auto!important}
/* Client instruction 2026-09-12 ("Die Modals ... muessen auf 75% der Seitenbreite initial gesetzt werden"): every dialog
 * starts at 75vw (capped at 1100px); below 820px it takes the full width (see the media query). --wide is kept as an alias. */
.augite-modal.augite-modal--wide .augite-modal__dialog{width:min(75vw,1100px)!important}
/* REQ-052: the Unified Asset Picker is a short identification task, not a
 * viewport-wide workspace. Keep its own desktop cap while the shared modal
 * continues to serve larger dialogs at the documented 75vw/1100px width. */
.augite-modal.arf-ops-scanner-modal .augite-modal__dialog{width:min(860px,100%)!important}
.augite-modal .augite-modal__dialog:focus{outline:0}
.augite-modal .augite-modal__dialog>*{flex:0 0 auto;min-width:0;width:auto!important;max-width:100%!important;box-sizing:border-box}
/* 1 header */
.augite-modal .augite-modal__header{display:flex!important;flex-direction:row!important;align-items:flex-start!important;justify-content:space-between!important;gap:16px!important;padding:18px 20px 6px!important;margin:0!important;border:0!important;background:transparent!important}
.augite-modal .augite-modal__heading{display:block!important;min-width:0;flex:1 1 auto}
.augite-modal .augite-modal__kicker{display:block;margin:0 0 4px!important;font-size:.72rem!important;font-weight:700!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#b84e08!important;line-height:1.3}
.augite-modal .augite-modal__kicker[hidden]{display:none!important}
.augite-modal .augite-modal__title{display:block!important;margin:0!important;padding:0!important;font-size:1.3rem!important;line-height:1.25!important;font-weight:700!important;letter-spacing:0!important;color:#14181b!important;overflow-wrap:anywhere}
.augite-modal .augite-modal__close{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 var(--augite-control-h)!important;width:var(--augite-control-h)!important;height:var(--augite-control-h)!important;min-width:var(--augite-control-h)!important;min-height:var(--augite-control-h)!important;margin:-6px -8px 0 0!important;padding:0!important;border:1px solid #d8dbde!important;border-radius:0!important;background:#fff!important;color:#14181b!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer}
.augite-modal .augite-modal__close:hover{border-color:#6b6f73!important}
.augite-modal .augite-modal__close:focus{outline:0}
.augite-modal .augite-modal__close:focus-visible{outline:2px solid #d9600a!important;outline-offset:2px!important}
/* 2 hint */
.augite-modal .augite-modal__hint{display:block!important;padding:0 20px 12px!important;margin:0!important;color:#3a3f44;font-size:.92rem;line-height:1.5}
.augite-modal .augite-modal__hint:empty{display:none!important}
.augite-modal .augite-modal__hint p{margin:0 0 6px!important;max-width:none!important}
.augite-modal .augite-modal__hint p:last-child{margin-bottom:0!important}
.augite-modal .augite-modal__hint [hidden]{display:none!important}
.augite-modal .augite-modal__expected{display:block;margin-top:8px!important;padding:8px 12px!important;border-left:4px solid #d9600a!important;background:#f4f5f6!important;color:#14181b!important;font-size:.95rem!important}
.augite-modal .augite-modal__expected-label{font-weight:700;color:#14181b}
/* REQ-INTERN-MODAL-EXPECTED-MONOSPACE-001 (2026-09-29, Auftraggeberbefund woertlich: "auf dem
   Abwesenheitsmodal ist aus unerfindlichem Grund oberhalb des Formulars der Hinweis zu 'Bisher
   xx.xx.xxxx bis' enthalten, welcher anders als ueberall sonst formuliert und dargestellt wurde").
   GEMESSEN am ausgelieferten Stand 0a31b20ef: in EINER Zeile brach die Schriftart - die
   Beschriftung "Bisher:" stand in Arial, der Datumswert daneben in Monospace, fett 700. Koerper,
   Titel und Feldbeschriftungen des Modals sind samtlich Arial.
   WARUM DAS MEHR IST ALS GESCHMACK: Monospace kam im gesamten Produkt-CSS an genau DREI Stellen
   vor - hier, in .augite-replay-results__value (Replay-Diagnose) und in .augri-technical-details
   ("technische Details"). Die anderen beiden markieren technischen Inhalt; ein Datum, das der
   Benutzer gerade bearbeitet, ist keiner. UX-DESIGN-GUIDELINES.md Zeile 140 verlangt, dass
   Typografie die Bedeutung der Inhalte erkennbar macht - eine Debug-Schrift an einem fachlichen
   Wert sagt etwas Falsches. Praezedenzfall im Haus: REQ-INTERN-MODAL-BEDIENELEMENTE-001 hat
   denselben Befund an den datetime-local-Feldern behoben (monospace 13,3 px -> Arial), weil
   Monospace dort der Browserstandard und nicht der Plattformstil war.
   Fett und overflow-wrap bleiben - der Wert soll weiterhin hervorstechen und lange Werte umbrechen,
   nur eben in der Schrift des Produkts. */
.augite-modal .augite-modal__expected-value{font-weight:700;overflow-wrap:anywhere}
/* REQ-INTERN-MODAL-BISHER-EIGENER-SCHLITZ-001 (2026-09-29): der "bisherige Wert" hat einen EIGENEN Schlitz
   neben "erwartet", statt dessen Beschriftung zu ueberschreiben. Optisch bewusst IDENTISCH zum expected-Kasten -
   der Auftraggeber hat nur die Darstellung des Hinweiskastens bemaengelt, nicht seine Gestalt; ein zweiter
   Kastenstil waere ein neuer Schriftbruch. Die drei Regeln spiegeln .augite-modal__expected, -label und -value
   Deklaration fuer Deklaration, und ein Pruefstand sichert die Gleichheit (test_req_intern_modal_bisher_schlitz_001.py).
   Wer eine der beiden Seiten aendert, aendert die andere mit. */
.augite-modal .augite-modal__current{display:block;margin-top:8px!important;padding:8px 12px!important;border-left:4px solid #d9600a!important;background:#f4f5f6!important;color:#14181b!important;font-size:.95rem!important}
.augite-modal .augite-modal__current-label{font-weight:700;color:#14181b}
.augite-modal .augite-modal__current-value{font-weight:700;overflow-wrap:anywhere}
/* 3 fields */
.augite-modal .augite-modal__form{display:block!important;margin:0!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;width:auto!important;max-width:100%!important;position:static!important;transform:none!important;grid-template-columns:none!important}
.augite-modal .augite-modal__fields{display:block!important;padding:4px 20px 16px!important;margin:0!important;min-width:0}
.augite-modal .augite-modal__fields input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.augite-modal .augite-modal__fields select,.augite-modal .augite-modal__fields textarea{box-sizing:border-box;max-width:100%!important;min-width:0}
/* Client decision 117 (wave 24, screenshot "Offene Zahlung verarbeiten": labels at different heights): the grid used
 * align-items:end, so a field with a helper line under its control (or a taller read-only box) pushed its own label and
 * control up relative to its neighbours. Root fix for every dialog grid: fields start on one line (labels on one
 * baseline, equal-height controls aligned), helper lines sit below their control in normal weight and never shift a
 * neighbour; one column below 820px. */
.augite-modal .augite-modal__grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))!important;gap:12px 16px!important;align-items:start!important}
.augite-modal .augite-modal__grid>label>small,.augite-modal .augite-modal__field>small{display:block;margin:0!important;font-weight:400!important;font-size:.82rem;line-height:1.4;color:#50575e}
/* REQ-DISPOSITION-INSTANCE-TRANSPORT-BLOCK-LAYOUT-001 / REQ-INTERN-BOOKING-DETAIL-VISUAL-CLARITY-001 (2026-09-21):
 * this is the rule that flips a dialog field to the column axis, so it also owns the CROSS axis. Without the two
 * resets below, a field that is ALSO a `.augite-form-row` (108 `<label class="augite-form-row">` call sites, plus
 * the AssetCore/RentalPayments/RentalInvoice ones) kept `align-items:flex-end` and `flex-wrap:wrap` from
 * backend-ui.css - both written for a row - and in column direction they mean something completely different:
 * flex-end right-aligns the caption over its left-aligned control (measured 188-970px offset in one and the same
 * dialog) and wrap lets a too-tall field spill into a SECOND column to the right (measured scrollWidth 571 vs
 * clientWidth 366 at 400px in wp-admin). `stretch` is not a new look: it is exactly what a plain <label> in the
 * same grid already renders as, so the form-row fields now line up with their neighbours instead of against them.
 * The row case in backend-ui.css is deliberately untouched - it is correct there. */
.augite-modal .augite-modal__grid>label,.augite-modal .augite-modal__field{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:5px!important;margin:0!important;min-width:0!important;font-weight:600}
.augite-modal .augite-modal__grid>label>input,.augite-modal .augite-modal__grid>label>select,.augite-modal .augite-modal__grid>label>textarea,.augite-modal .augite-modal__field>input,.augite-modal .augite-modal__field>select,.augite-modal .augite-modal__field>textarea{width:100%!important}
.augite-modal .augite-modal__wide{grid-column:1/-1!important}
/* REQ-DISPOSITION-INSTANCE-TRANSPORT-BLOCK-LAYOUT-001 crit. 3 (2026-09-21, bisected in the browser at 400px):
 * EVERY child of the dialog grid must be allowed to shrink. `.augite-modal__grid>label` already carried
 * min-width:0, but a wide field that is a <div> rather than a <label> (the either/or target group of the
 * "Sperrzeit anlegen"/"Sperrzeit bearbeiten" dialogs) kept the default min-width:auto. A grid item with an
 * automatic minimum size cannot be narrower than its own content, so the two long option lists inside it
 * stretched the whole 1fr track and with it every other field: measured at 400px, fields scrollWidth 584 vs
 * clientWidth 366 (wp-admin) and 462 vs 366 (/intern/), with the plain <input>s of neighbouring rows blown up
 * to 569px in a 366px dialog. Setting min-width:0 on this one item takes the dialog to 366 = 366; the group
 * rules below then only decide HOW the either/or wraps inside the space it now has. This is the second,
 * independent cause of that dialog's scrollbar - the help tooltip (help.css) was the first. */
.augite-modal .augite-modal__grid>*{min-width:0!important}
/* The group's own styling lives in admin.css (wp-admin only) and in public.css behind `.arf-app.arf-ops ...`,
 * and modal.js portals the dialog to <body>, so on /intern/ NEITHER applied - the group had no narrow
 * treatment at all on the surface where it is used most. It belongs here, in the stylesheet both surfaces load
 * and that the portal cannot detach it from: the two selects share one line while there is room and wrap onto
 * their own lines when there is not, and neither can push the dialog wider than itself. */
/* Same portal cause, visible half: on /intern/ the group had no gap, padding, frame or background either -
 * the "entweder/oder" grouping this REQ asked for existed only in wp-admin's admin.css, and the evidence
 * screenshot showed "Asset identifizierenoder" running together. The values are the ones public.css already
 * designed for the /intern/ surface (8px gap on the 4/8 spacing scale, square corners), so both surfaces now
 * render the same either/or group - criterion 3 of the REQ, which asks for ONE layout language on both. */
.augite-modal .arf-disposition-target-group{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:8px!important;box-sizing:border-box!important;max-width:100%!important;min-width:0!important;padding:8px 10px!important;border:1px solid #d8dadc!important;border-radius:0!important;background:#f8f9fa!important}
.augite-modal .arf-disposition-target-or{flex:0 0 auto!important;color:#50575e;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.augite-modal .arf-disposition-target-group>*{min-width:0!important;max-width:100%!important}
.augite-modal .arf-disposition-target-group>select{flex:1 1 11rem!important;width:auto!important}
.augite-modal .augite-modal__check{flex-direction:row!important;align-items:flex-start!important;gap:8px!important;font-weight:400}
/* scan / entry area: scan methods row, then the entry row whose input grows; the submit wraps below when the input
 * cannot keep 14rem (never a truncated input next to a fixed button). */
.augite-modal .augite-scan{display:flex!important;flex-direction:column!important;gap:12px!important;min-width:0}
.augite-modal .augite-scan__methods{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.augite-modal .augite-scan__methods>*{flex:0 1 auto!important;width:auto!important;margin:0!important;white-space:nowrap}
.augite-modal .augite-scan__entry{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0;position:relative;margin:0!important;font-weight:600}
.augite-modal .augite-scan__entry>label,.augite-modal .augite-scan__label{display:block!important;margin:0!important;font-size:.82rem!important;font-weight:700!important;line-height:1.2}
.augite-modal .augite-scan__row{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important;gap:8px!important;min-width:0;position:relative}
.augite-modal .augite-scan__row>input,.augite-modal .augite-scan__input{flex:1 1 14rem!important;width:auto!important;min-width:0!important;max-width:100%!important;min-height:var(--augite-control-h)!important;height:auto!important;margin:0!important;padding:var(--augite-control-pad)!important;font-size:var(--augite-field-font-size)!important;border:1px solid #6b6f73!important;border-radius:0!important;background:#fff!important}
.augite-modal .augite-scan__row>button,.augite-modal .augite-scan__row>.button{flex:0 0 auto!important;width:auto!important;min-height:var(--augite-control-h)!important;margin:0!important;white-space:nowrap}
.augite-modal .augite-scan__row .arf-asset-suggestions{top:calc(100% + 2px)!important;left:0!important;right:0!important}
.augite-modal .augite-scan__result:empty{display:none}
/* 4 actions: secondary first, primary last (right) */
.augite-modal .augite-modal__actions{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;justify-content:flex-end!important;align-items:center!important;gap:8px!important;padding:12px 20px 18px!important;margin:0!important;border-top:1px solid #d8dbde!important;background:#fbfbfa!important}
.augite-modal .augite-modal__actions>form{display:inline-flex!important;margin:0!important}
.augite-modal .augite-modal__actions>*{margin:0!important}
/* 5 help (rule 64: only visible while the page help toggle is ON - the blocks carry their own hidden attribute) */
.augite-modal .augite-modal__help{display:block!important;padding:0 20px 18px!important;margin:0!important}
.augite-modal .augite-modal__help:not(:has(> :not([hidden]))){display:none!important}
.augite-modal .augite-modal__help>*{margin:12px 0 0!important}
@media (max-width:820px){.augite-modal .augite-modal__dialog,.augite-modal.augite-modal--wide .augite-modal__dialog,.augite-modal.arf-ops-scanner-modal .augite-modal__dialog{width:100%!important}.augite-modal .augite-modal__grid{grid-template-columns:1fr!important}}
@media (max-width:600px){
 /* REQ-MODAL-KIT-NARROW-ACTIONS-BACKDROP-001 (client decision 2026-09-17): at most 100vw - 32px wide (16px margin per side). */
 .augite-modal{padding:16px!important;align-items:flex-start}
 .augite-modal .augite-modal__dialog,.augite-modal.augite-modal--wide .augite-modal__dialog{max-height:calc(100vh - 32px)!important}
 .augite-modal .augite-modal__header{padding:14px 14px 4px!important}
 .augite-modal .augite-modal__hint{padding:0 14px 10px!important}
 .augite-modal .augite-modal__fields{padding:4px 14px 14px!important}
 .augite-modal .augite-modal__actions{padding:10px 14px 14px!important}
 .augite-modal .augite-modal__actions>*{flex:1 1 100%!important;width:100%!important;justify-content:center}
 /* Stacked actions: the primary action first, cancel/close controls below (DOM order stays cancel-first for the wide row). */
 .augite-modal .augite-modal__actions>:is([data-augite-modal-close],[data-augite-dialog-cancel]){order:1}
 .augite-modal .augite-modal__help{padding:0 14px 14px!important}
 .augite-modal .augite-scan__methods>*{flex:1 1 100%!important;width:100%!important;justify-content:center}
 .augite-modal .augite-scan__row>button,.augite-modal .augite-scan__row>.button{flex:1 1 100%!important;width:100%!important}
 .augite-modal .augite-modal__grid{grid-template-columns:1fr!important}
 .augite-modal .augite-modal__check{grid-column:auto!important}
}
@media (prefers-reduced-motion:no-preference){.augite-modal.is-open .augite-modal__dialog{animation:augite-modal-in .14s ease-out}}
@keyframes augite-modal-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* RESP-001/WPADM-TOUCH-001 (pointer:coarse): touch targets of the component are at least 48px (close control, scan buttons, entry row, actions). */
@media (pointer:coarse){.augite-modal .augite-modal__close{flex-basis:var(--augite-control-h)!important;width:var(--augite-control-h)!important;height:var(--augite-control-h)!important;min-width:var(--augite-control-h)!important;min-height:var(--augite-control-h)!important}.augite-modal .augite-scan__methods>*,.augite-modal .augite-scan__row>input,.augite-modal .augite-scan__input,.augite-modal .augite-scan__row>button,.augite-modal .augite-modal__actions>button,.augite-modal .augite-modal__actions>.button,.augite-modal .augite-modal__actions>a{min-height:var(--augite-control-h)!important}}

/* REQ-SCAN-UNMATCHED-FEEDBACK-001 (wave 28, client decision 122): the one scan feedback box (assets/js/scan-feedback.js) in the
 * dialog's live region (square box without icon, no pill). Status colours from the existing tokens: amber (--augite-warning
 * #8a5a00 on --augite-warning-soft #fff8e5) for "read but not assigned" and "not expected", red (--augite-danger #b32d2e on
 * --augite-danger-soft #fcf0f1) only for real read/processing errors, the existing semantic success green. */
.augite-scan-feedback{display:flex;flex-direction:column;gap:4px;margin:0;padding:10px 12px;border:1px solid currentColor;border-left-width:5px;border-radius:0;line-height:1.4;overflow-wrap:anywhere}
.augite-scan-feedback__title{display:block;font-weight:700}
.augite-scan-feedback__detail{display:block;color:#3a3f44;font-weight:400}
.augite-scan-feedback--success{color:#26734d;background:#edf8f1}
.augite-scan-feedback--unassigned,.augite-scan-feedback--not_expected{color:var(--augite-warning,#8a5a00);background:var(--augite-warning-soft,#fff8e5)}
.augite-scan-feedback--unreadable,.augite-scan-feedback--error{color:var(--augite-danger,#b32d2e);background:var(--augite-danger-soft,#fcf0f1)}
.augite-scan-feedback__action{align-self:flex-start;display:inline-flex;align-items:center;min-height:var(--augite-control-h);margin-top:4px;padding:var(--augite-button-pad);border:1px solid #14181b;border-radius:0;background:#fff;color:#14181b;font-weight:var(--augite-button-weight);text-decoration:none}
.augite-scan-feedback__action:hover,.augite-scan-feedback__action:focus-visible{background:#14181b;color:#fff}
.augite-scan-feedback__action:focus-visible{outline:2px solid #d9600a;outline-offset:2px}
.augite-scan-feedback+.arf-resolve-card,.augite-scan-feedback+.arf-help-block{margin-top:8px}
/* REQ-UI-BROWSER-DIALOGS-TO-MODAL-001 (wave 32, client decision 155): dialogs replacing the browser's alert/confirm/prompt
 * (AugiteModal.confirm/prompt/alert, declarative [data-augite-confirm]). Compact width, own square buttons (the dialog is
 * appended to <body>, outside wp-admin .button / front-end .arf-ops-* scopes): secondary = weiss/orange umrandet (zentrale Token aus backend-ui.css, REQ-UI-BUTTON-SECONDARY-UNIFIED-001), primary =
 * accent-strong surface with white text (decision 49), danger = the semantic danger colour (destructive actions only);
 * the prompt's validation error and an error message are boxes inside the dialog. No icons on the buttons. */
.augite-modal.augite-modal--dialog .augite-modal__dialog{width:min(560px,100%)!important}
.augite-modal.augite-modal--dialog .augite-modal__lead{white-space:pre-line}
.augite-modal.augite-modal--dialog .augite-modal__fields:empty{display:none!important}
.augite-modal .augite-modal__button{display:inline-flex!important;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--augite-control-h);margin:0!important;padding:var(--augite-button-pad)!important;border:1px solid var(--augite-btn-secondary-border,#d9600a)!important;border-radius:0!important;background:var(--augite-btn-secondary-bg,#fff)!important;color:var(--augite-btn-secondary-text,#b84e08)!important;font-family:inherit;font-size:var(--augite-control-font-size);line-height:var(--augite-control-line-height);font-weight:var(--augite-button-weight);font-size:var(--augite-control-font-size)!important;font-weight:var(--augite-button-weight)!important;line-height:1.2!important;text-decoration:none!important;box-shadow:none!important;cursor:pointer;white-space:normal;text-align:center}
.augite-modal .augite-modal__button:hover{border-color:var(--augite-btn-secondary-hover-border,#b84e08)!important;background:var(--augite-btn-secondary-hover-bg,#fdf3ec)!important}
.augite-modal .augite-modal__button--primary{border-color:#b84e08!important;background:#b84e08!important;color:#fff!important}
.augite-modal .augite-modal__button--primary:hover{border-color:#9a4307!important;background:#9a4307!important}
.augite-modal .augite-modal__button--danger{border-color:var(--augite-danger,#b32d2e)!important;background:var(--augite-danger,#b32d2e)!important;color:#fff!important}
.augite-modal .augite-modal__button--danger:hover{border-color:#14181b!important;background:#14181b!important}
.augite-modal .augite-modal__button:focus{outline:0}
.augite-modal .augite-modal__button:focus-visible{outline:2px solid #d9600a!important;outline-offset:2px!important}
.augite-modal .augite-modal__prompt>label{font-weight:700}
.augite-modal .augite-modal__prompt input,.augite-modal .augite-modal__prompt textarea{min-height:var(--augite-control-h);padding:var(--augite-control-pad-area)!important;border:1px solid #6b6f73!important;border-radius:0!important;background:#fff!important;font-size:var(--augite-field-font-size)!important}
.augite-modal .augite-modal__prompt [aria-invalid="true"]{border-color:var(--augite-danger,#b32d2e)!important}
.augite-modal .augite-modal__error[hidden]{display:none!important}
.augite-modal .augite-modal__error,.augite-modal .augite-modal__notice--error{display:block;margin:0!important;padding:8px 12px!important;border:1px solid var(--augite-danger,#b32d2e);border-radius:0;background:var(--augite-danger-soft,#fcf0f1);color:var(--augite-danger,#b32d2e);font-weight:600;line-height:1.4;overflow-wrap:anywhere}
@media (max-width:600px){.augite-modal .augite-modal__actions>.augite-modal__button{flex:1 1 100%!important;width:100%!important}}
/* REQ-SCAN-SOUND-SWITCH-OFFLINE-RESULTS-001 (wave 32, client decision 156): result list of replayed offline scans - one
 * scan feedback box per scan (same outcome colours as the live scan dialog), problems first. */
.augite-replay-results{display:flex;flex-direction:column;gap:8px;margin:0!important;padding:0!important;list-style:none!important}
.augite-replay-results>li{margin:0!important}
.augite-replay-results .augite-replay-results__value{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
/* REQ-SCAN-DIALOG-LAYOUT-SAFARI-001 (wave 33, client decision 165 "Fehler beim Layout, Piktogramme viel zu gross"): the scan
 * methods are compact text buttons with a small monochrome pictogram - the unsized icon SVGs grew to ~300 px because
 * public.css ".arf-ops svg{width:100%;height:100%}" matched them inside an auto-width button. Every pictogram that sits
 * directly in a button/link of any dialog is 18 px (existing button icon size, never above 20 px); the close control keeps its
 * 20 px glyph. The camera preview is a 4:3 box of at most 480 px with an aiming frame ("Code in den Rahmen halten"). Order in
 * the dialog: title -> hint -> method choice -> entry field -> preview -> result. */
.augite-modal .augite-modal__dialog :is(button,a,.button,[role="button"])>svg{display:block;width:18px!important;height:18px!important;min-width:18px!important;max-width:20px!important;max-height:20px!important;flex:0 0 18px!important;margin:0!important}
.augite-modal .augite-modal__dialog .augite-modal__close>svg{width:20px!important;height:20px!important;min-width:20px!important;flex-basis:20px!important}
.augite-modal .augite-scan__methods>:is(button,a,.button){display:inline-flex!important;align-items:center!important;justify-content:center;gap:8px!important;height:auto!important;min-height:var(--augite-control-h);padding:var(--augite-button-pad)!important;font-size:var(--augite-control-font-size)!important;line-height:1.25!important;white-space:nowrap}
.augite-modal .augite-scan__methods>*>span{display:inline;margin:0!important}
.augite-modal .augite-scan__preview{position:relative!important;display:block!important;box-sizing:border-box;width:100%!important;max-width:100%!important;aspect-ratio:16/9;max-height:min(46vh,520px);height:auto!important;margin:0!important;padding:0!important;overflow:hidden!important;background:#14181b!important;border:0!important}
.augite-modal .augite-scan__preview[hidden]{display:none!important}
.augite-modal .augite-scan video,.augite-modal .augite-scan__preview>video{display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:none!important;margin:0!important;object-fit:cover!important;background:#14181b!important}
.augite-modal .augite-scan video[hidden]{display:none!important}
.augite-modal .augite-scan__frame{position:absolute;top:50%;left:50%;width:auto;height:72%;aspect-ratio:1/1;transform:translate(-50%,-50%);box-sizing:border-box;border:2px solid #fff;border-radius:0;box-shadow:0 0 0 999px rgba(20,24,27,.38);pointer-events:none}

/* REQ-OPS-TABLET-NO-AUTO-KEYBOARD-001 (wave 33, client decision 167): "Tastatur" toggle next to a hand-scanner field on touch-only
 * devices (inserted by assets/js/modal.js) - square text button, pressed state inverted. */
.augite-scan__keyboard{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--augite-control-h);margin:0;padding:var(--augite-button-pad);border:1px solid #6b6f73;border-radius:0;background:#fff;color:#14181b;font-family:inherit;font-size:var(--augite-control-font-size);line-height:var(--augite-control-line-height);font-weight:var(--augite-button-weight);font-size:var(--augite-control-font-size);font-weight:var(--augite-button-weight);line-height:1.2;cursor:pointer;white-space:nowrap}
.augite-scan__keyboard[aria-pressed="true"]{border-color:#14181b;background:#14181b;color:#fff}
.augite-scan__keyboard:focus{outline:0}
.augite-scan__keyboard:focus-visible{outline:2px solid #d9600a;outline-offset:2px}
.augite-modal .augite-scan__row>.augite-scan__keyboard{flex:0 0 auto!important;width:auto!important;min-height:var(--augite-control-h)!important;margin:0!important}

/* REQ-OPS-WALKIN-DIALOG-ORDER-001 (wave 33, client decision 166 + follow-up "Checkbox fuer 'vor Ort' ist ebenfalls nicht korrekt
 * positioniert"). (1) Checkbox/radio rows in every dialog: the grid-field rule ".augite-modal .augite-modal__grid>label" (flex
 * column, controls 100% wide) out-specified ".augite-modal__check", so the checkbox sat alone above its text. Now box left, text
 * right, the 18 px box vertically centred on the first 24 px text line (margin 3 px), wrapped text indented under the text, the
 * whole label clickable. (2) Grouped field rows: Mietartikel + Menge and Beginn + Rueckgabe side by side, Standort on its own row.
 * (3) Equal control heights: a native select ignores min-height/padding in Safari (menulist appearance) and rendered lower than
 * the inputs next to it; menulist-button keeps the arrow and honours the same box as the inputs. */
.augite-modal .augite-modal__grid>label.augite-modal__check,.augite-modal label.augite-modal__check,.augite-modal .augite-modal__grid>label:has(>input:is([type="checkbox"],[type="radio"]):first-child){display:grid!important;grid-template-columns:18px minmax(0,1fr)!important;grid-auto-flow:row!important;align-items:start!important;justify-items:start;column-gap:10px!important;row-gap:0!important;flex-direction:row!important;line-height:24px!important;font-weight:var(--augite-control-weight)!important;cursor:pointer}
.augite-modal .augite-modal__grid>label.augite-modal__check>input:is([type="checkbox"],[type="radio"]),.augite-modal label.augite-modal__check>input:is([type="checkbox"],[type="radio"]),.augite-modal .augite-modal__grid>label>input:is([type="checkbox"],[type="radio"]):first-child{grid-column:1!important;grid-row:1!important;width:18px!important;height:18px!important;min-width:18px!important;min-height:0!important;max-width:18px!important;margin:3px 0 0!important;padding:0!important;flex:none!important;align-self:start!important;cursor:pointer}
.augite-modal .augite-modal__grid>label.augite-modal__check>span,.augite-modal label.augite-modal__check>span{grid-column:2!important;grid-row:1!important;display:block!important;min-width:0;margin:0!important;line-height:24px!important;font-weight:500}
.augite-modal .augite-modal__fields select{-webkit-appearance:menulist-button;appearance:menulist-button;box-sizing:border-box}
/* REQ-OPS-WALKIN-DIALOG-ORDER-001 live follow-up (2026-09-21): explicit border-box height removes the native
 * line-height difference measured between select (46 px), number (46.8 px) and datetime-local (48.8 px).
 * Scope stays inside the walk-in modal; textareas and choice controls retain their content-driven sizes. */
.augite-modal .arf-ops-walkin-row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px 16px!important;align-items:start!important;margin:0!important;padding:0!important;border:0!important;min-width:0}
.augite-modal .arf-ops-walkin-row--article{grid-template-columns:6rem minmax(16rem,1fr) auto!important;align-items:end!important}
.augite-modal .arf-ops-walkin-items__head{margin:0 0 5px!important;align-items:end!important;font-weight:600}
.augite-modal .arf-ops-walkin-row>label{display:flex!important;flex-direction:column!important;gap:5px!important;margin:0!important;min-width:0!important;font-weight:600}
.augite-modal .arf-ops-walkin-row>label>:is(input,select){width:100%!important}
.augite-modal .arf-ops-walkin-item{display:grid;gap:5px;min-width:0;margin:0 0 12px}
.augite-modal .arf-ops-walkin-item-actions{display:flex;align-items:center;gap:6px;min-width:max-content}
.augite-modal .arf-ops-walkin-item-actions .augite-icon-btn{margin:0!important}
.augite-modal .arf-ops-walkin-preview:empty{display:none}
.augite-modal .arf-ops-walkin-modal-form select[aria-busy="true"]{color:#50575e!important;background-color:#f4f5f6!important}
/* REQ-013 tablet-first follow-up (live finding T3, 2026-09-21): /intern/rentalflow/ is the
 * physical-yard surface. A real coarse pointer gets a deliberate single-column Walk-in flow at
 * every tablet width; mouse/desktop retains the compact multi-column dialog. */
@media (pointer:coarse){.augite-modal.arf-ops-walkin-modal .augite-modal__grid{grid-template-columns:1fr!important}}
@media (max-width:600px){.augite-modal .arf-ops-walkin-row{grid-template-columns:1fr!important}}
@media (max-width:600px){.augite-modal #arf-ops-walkin-items.arf-ops-walkin-items .arf-ops-walkin-items__head,.augite-modal #arf-ops-walkin-items.arf-ops-walkin-items .arf-ops-walkin-item .arf-ops-walkin-row--article{grid-template-columns:5.5rem minmax(0,1fr)!important}.augite-modal #arf-ops-walkin-items.arf-ops-walkin-items .arf-ops-walkin-items__head>span:last-child{display:none}.augite-modal #arf-ops-walkin-items.arf-ops-walkin-items .arf-ops-walkin-item .arf-ops-walkin-item-actions{grid-column:1/-1!important;justify-self:end}}
/* Wave 37 / REQ-INTERN-IN1-QUICKFIXES-001 (client decision 219): walk-in customer search - search field + "Neuer Kunde" in one row, the
 * suggestion list (same square list style as the asset suggestions) directly below the field, the active suggestion outlined in the
 * accent; one column below 600 px. */
.augite-modal .arf-ops-walkin-customer__row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:8px 12px!important;align-items:start!important;margin:0!important;min-width:0}
.augite-modal .arf-ops-walkin-customer__box{position:relative;min-width:0}
.augite-modal .arf-ops-walkin-customer__box>input{width:100%!important;box-sizing:border-box}
/* 2026-09-28 (REQ-PRUEFSTAND-ROTBESTAND-ABBAUEN-001): REPARIERT - commit 01bfc677e ("fix(walkin):
 * vereinheitliche Feldhoehen auf 48 px (#538)") hat die Feldhoehe der Direktvermietung auf 48 px
 * vereinheitlicht (Zeile 214 dieser Datei), ohne diese Button-Regel anzufassen; die "Neuer Kunde"-
 * Schaltflaeche blieb bei fine-pointer/Desktop (1440 px) bei 46 px - 2 px niedriger als das
 * Suchfeld daneben. Auf 48 px angehoben, der pointer:coarse-Override darunter ist damit ueberall
 * gleich und entfaellt. */
.augite-modal .arf-ops-walkin-customer__list{top:calc(100% + 2px)!important;left:0!important;right:0!important}
.augite-modal .arf-ops-walkin-customer__list [role="option"][aria-selected="true"]{background:#f2f3f5;outline:2px solid #d9600a;outline-offset:-2px}
.augite-modal .arf-ops-walkin-customer__status{display:block;font-weight:400!important;font-size:.82rem;line-height:1.4;color:#50575e}
.augite-modal .arf-ops-walkin-customer__status:empty{display:none}
@media (max-width:600px){.augite-modal .arf-ops-walkin-customer__row{grid-template-columns:1fr!important}.augite-modal .arf-ops-walkin-customer__row>button{justify-self:start}}
/* RESP-001/WPADM-TOUCH-001, Live-Abnahme Paket 4B (2026-09-20): der coarse-pointer-Block in Zeile 97
 * deckt Schliessen-Bedienelement, Scanzeile und Aktionsleiste ab, aber NICHT die Kontrollkaestchen-
 * Labels der Modale. Real gemessen auf dem Tablet 834x1194 mit echtem grobem Zeiger
 * (matchMedia('(pointer:coarse)') = true, hover = false) im Dialog "Direktvermietung erfassen":
 * ".augite-modal__check" traegt "- Kein Kunde - (Barverkauf, ohne Kundenmail)" mit einer wirksamen
 * Trefferhoehe von 24 px und "Kunde nicht vor Ort - Angebot per E-Mail senden" mit 46 px - beide
 * unter dem Projekt-Touchbudget von 48 px, das Kaestchen selbst ist nur 18 px. Ursache ist das
 * Grid-Layout in Zeile 172 (grid-template-columns:18px minmax(0,1fr), line-height:24px): die
 * Zeilenhoehe bestimmt die Labelhoehe, und die 48px-Regel fuer input greift bewusst nicht fuer
 * checkbox/radio (public.css:1794), weil die Trefferflaeche vom umgebenden Label kommen soll -
 * genau das Muster, das ".arf-touch-choice label>span" fuer die Auswahlchips bereits umsetzt.
 * Nur unter grobem Zeiger wird die Labelhoehe deshalb auf 48 px angehoben; align-content zentriert
 * die Gridzeile im hoeheren Kasten, damit Kaestchen und Text optisch gepaart bleiben. Das
 * Feinzeiger-Layout (24 px) bleibt unveraendert. Spezifitaet (0,2,1) entspricht Zeile 172, die
 * Regel steht spaeter in derselben Datei und gewinnt daher ueber die Quellreihenfolge. */
@media (pointer:coarse){.augite-modal .augite-modal__grid>label.augite-modal__check,.augite-modal label.augite-modal__check{min-height:var(--augite-control-h)!important;align-content:center!important}}

/* REQ-INTERN-MODAL-FELDLAYOUT-001 (2026-09-28, Auftraggeberbefund woertlich: "Hier ist nicht das
   sonst uebliche Design/Layout fuer Formularfelder, Verteilung und aehnliches eingebettet!" -
   Screenshots von "Rechnung erfassen", "Zahlung erfassen", "Kaution erfassen").
   Sichtbar war: "EURUmsatzsteuer" und "EURDavon einbehalten" liefen zusammen, Beschriftung und
   Feld standen ohne Abstand nebeneinander, die Einheit klebte an der naechsten Beschriftung.

   URSACHE, gezaehlt: von 71 Modalaufrufen setzen nur 21 'fields_class' => 'augite-modal__grid'.
   SAEMTLICHE Feldregeln dieser Datei haengen aber an genau dieser Klasse - die uebrigen ~50
   Modale rendern ihre Felder deshalb voellig OHNE Layoutregel, also im Fliesstext.

   Der Auftraggeber hat den Massstab selbst benannt: "Modal zu Neuer Vorgang / Direktvermietung
   erfassen ist ansatzweise in die Richtung wie ein Modal aussehen soll" - und genau dieses
   Modal ist eines der 21 mit Gitterklasse. Es sah nicht zufaellig besser aus.

   Die Regeln gelten deshalb ab jetzt fuer .augite-modal__fields, den Behaelter, den JEDES Modal
   hat. 'augite-modal__grid' bleibt gueltig und aendert nichts - es ist nur nicht mehr die
   Bedingung dafuer, dass ueberhaupt ein Layout entsteht. Additiv: keine bestehende Regel wurde
   entfernt oder umgeschrieben. */

/* REQ-INTERN-MODAL-FELDZEILE-LUECKE-001 (2026-09-29, Auftraggeberbefund woertlich: "Ist auch
   immer noch nicht im korrekten Layout/Design", Screenshot von /intern/abwesenheiten/, Modal
   "Abwesenheit aendern").
   SICHTBAR WAR: neben "Von" und "Bis" stand rechts eine leere Flaeche von einer Feldbreite.
   GEMESSEN (live, 1280x900): das Raster bildete bei 918 px Inhaltsbreite DREI Spuren zu je
   295,33 px; "Von" belegte Spur 1, "Bis" Spur 2, Spur 3 blieb leer.
   URSACHE: nicht auto-fit. Eine Kontrollprobe mit derselben Regel in einem 918 px breiten
   Hilfskasten ergab bei ZWEI Elementen "451px 451px 0px" - auto-fit klappt leere Spuren also
   sehr wohl ein. Es klappt sie nur dann ein, wenn sie in KEINER Zeile belegt sind, und das
   ueberspannende Feld ("Hinweis", grid-column 1/-1) belegte auch die dritte.
   WARUM FLEX STATT EINES SPALTENDECKELS: ein Deckel auf zwei Spalten haette jedes Modal mit
   vier kurzen Feldern doppelt so hoch gemacht, darunter den vom Auftraggeber selbst benannten
   Massstab "Neuer Vorgang / Direktvermietung erfassen". Eine serverseitige Spaltenzahl schied
   aus, weil ARF_Modal::begin() die Felder nur streamt und ihre Zahl nicht kennt - sie waere ein
   Opt-in geworden, das 71 Aufrufer einzeln setzen muessten. Genau diese Bauart hat den
   Vorlaeufer-Defekt verursacht (21 von 71 riefen die Gitterklasse ab).
   In einer umbrechenden Flex-Zeile gibt es keine Spuren: die Felder einer Zeile teilen sich
   deren Breite, ein Feld mit flex-basis 100% nimmt eine eigene Zeile und bestimmt die Breite
   der anderen nicht mit. Damit verschwindet die Luecke, ohne die Feldzahl je Zeile zu deckeln.

   DER WACHSTUMSDECKEL (max-width:calc(50% - 8px)) und warum er nicht willkuerlich ist: ohne ihn
   streckt sich ein VEREINZELTES letztes Feld auf die volle Zeilenbreite - gemessen 295/295/295/918
   statt 295/295/295/295 beim Raster. Die beiden Ziele "eine Zeile mit zwei Feldern wird gefuellt"
   und "ein allein stehendes letztes Feld bleibt schmal" werden von DERSELBEN Regel bedient; CSS
   kann eine Zeile mit zwei Feldern nicht von einer mit einem unterscheiden. Nachgemessen (918 px
   Inhaltsbreite): ein Deckel bei 33 Prozent stellt das Rasterverhalten exakt wieder her, holt aber
   den gemeldeten Fehler zurueck (zwei Felder wieder 295/295 mit 312 px Luecke). Der Deckel bei 50
   Prozent behebt den Fehler (451/451, Luecke 0) und begrenzt das vereinzelte Feld auf 451 statt
   918. Auftraggeberentscheidung 2026-09-29 nach Vorlage dieser Messung.
   Breite Felder sind ausgenommen (max-width:100%), sonst klemmt der Deckel sie auf halbe Breite. */
.augite-modal .augite-modal__fields{display:flex!important;flex-wrap:wrap!important;gap:12px 16px!important;align-items:flex-start!important}
.augite-modal .augite-modal__fields>*{flex:1 1 220px;min-width:0;max-width:calc(50% - 8px)}
.augite-modal .augite-modal__fields>label{display:flex!important;flex-direction:column!important;align-items:stretch!important;flex-wrap:nowrap!important;gap:5px!important;margin:0!important;min-width:0}
.augite-modal .augite-modal__fields>label>small{display:block;margin:0!important;font-weight:400!important;font-size:.82rem;line-height:1.4;color:#50575e}
.augite-modal .augite-modal__fields>label>input,.augite-modal .augite-modal__fields>label>select,.augite-modal .augite-modal__fields>label>textarea{width:100%!important;box-sizing:border-box!important}
/* Ein Feld, das ueber die ganze Breite gehoert (Freitext, Beschreibung), behaelt das auch hier. */
.augite-modal .augite-modal__fields>.augite-modal__wide,.augite-modal .augite-modal__fields>.arf-field-wide{flex:1 1 100%!important;width:100%!important;max-width:100%!important}
@media (max-width:820px){.augite-modal .augite-modal__fields>*{flex-basis:100%!important;max-width:100%!important}}

/* REQ-INTERN-WALKIN-FELDHOEHEN-001 (2026-09-28, Auftraggeberbefund woertlich: "Wobei auch in
   Neuer Vorgang / Direktvermietung erfassen aus unerfindlichem Grund die Boxen zu 'Menge' und
   'Kunde' groesser sind als andere Felder und die Buttons dahinter. Korrigieren!").

   GEMESSEN IN DER QUELLE: die Eingabefelder dieses Modals waren per !important auf 48 px
   gezwungen (Zeile 214, urspruenglich um die nativen Hoehenunterschiede zwischen select 46 px,
   number 46,8 px und datetime-local 48,8 px einzuebnen). Die Positionsknoepfe daneben - "Position
   hinzufuegen" und "Position entfernen" - stehen als augite-icon-btn--md auf --augite-control-h,
   also 36 px. In derselben Zeile: 48 gegen 36, zwoelf Pixel Unterschied.

   Die frueheren Reparaturen sind immer der Feldhoehe HINTERHERGEZOGEN (commit 01bfc677e hob die
   Felder auf 48, eine spaetere Runde hob die "Neuer Kunde"-Schaltflaeche nach). Damit wuchs das
   ganze Modal ueber das Mass der uebrigen Bedienelemente der Plattform hinaus - und genau das
   sieht der Auftraggeber.

   Auftraggeberentscheidung (Fragebox, 2026-09-28): das Plattformmass 44 px gilt, und zwar fuer
   BEIDE Seiten - Felder herunter von 48, Knoepfe hoch von 36. 44 px ist die Hoehe, die die
   uebrigen Modale fuer Bedienelemente fuehren (augite-modal__button, Schliessen-Knopf, Prompt-
   Felder). Der pointer:coarse-Block weiter oben hebt Beruehrungsziele unveraendert auf 48 an;
   das Tablet verliert also nichts. */
/* REQ-INTERN-SCANNER-MODAL-EINE-ZEILE-001 (Auftraggeber 2026-09-29, mit Bildschirmfoto): im Dialog
   "Asset identifizieren" stehen Kamera- und NFC-Schaltflaeche, Eingabefeld und "Uebernehmen" in EINER
   Zeile; nur die eingeblendete Kamera-Vorschau und das Ergebnis liegen darunter.
   URSACHE (live gemessen, 1280px): die Feldzeilenregel `.augite-modal__fields>*{max-width:calc(50% - 8px)}`
   (REQ-INTERN-MODAL-FELDZEILE-LUECKE-001) deckelte den einzigen Kindknoten .augite-scan auf 281px - so
   breit wie das Eingabefeld. Die beiden Schaltflaechen (200+112px) brachen um und standen untereinander.
   Der Scanner ist kein Formularfeld, sondern ein eigener Baustein und nimmt die volle Breite. Auf
   schmalen Anzeigen bricht die Zeile von selbst um (Eintragsbereich mindestens 20rem). */
.augite-modal.arf-ops-scanner-modal .augite-modal__fields>.augite-scan{flex:1 1 100%;max-width:100%}
.augite-modal.arf-ops-scanner-modal .augite-scan{flex-direction:row!important;flex-wrap:wrap!important;align-items:flex-end!important;gap:12px 16px!important}
.augite-modal.arf-ops-scanner-modal .augite-scan__methods{flex:0 0 auto!important}
.augite-modal.arf-ops-scanner-modal .augite-scan__entry{flex:1 1 20rem!important}
.augite-modal.arf-ops-scanner-modal .augite-scan__preview,.augite-modal.arf-ops-scanner-modal .augite-scan__result{flex:1 1 100%!important}
/* REQ-INTERN-DIALOG-SUCHE-TREFFER-IM-FLUSS-001 (Auftraggeber 2026-09-29, Screenshot "Kunde oder Buchung finden": "Will einen Scrollbalken
   aufsetzen, damit die Kundenliste angezeigt wird. Das geht nicht. Modal muss groesser, Auswahl dann darin."). Die Trefferliste ist auf der
   Seite ein Dropdown (public.css: position:absolute, max-height 360px). Im Dialog ragte sie aus dem Dialogkoerper heraus: der Dialog blieb bei 163px
   (gemessen), waehrend die Liste 360px hoch war - der Dialogkoerper scrollte innerlich (scrollHeight 506 bei clientHeight 158). Im Dialog steht sie
   deshalb im normalen Fluss; der Dialog waechst mit der Liste bis zur Fensterhoehe (max-height calc(100vh - 32px)), erst die Liste scrollt. */
.augite-modal .arf-ops-global-results{position:static!important;margin-top:8px;max-height:min(50vh,420px);box-shadow:none}
/* REQ-INTERN-KAMERABILD-DIALOGBREITE-001 (Auftraggeber 2026-09-29, Screenshot Asset identifizieren mit Kamera): "Das Kamerabild muss von der Breite
   her in das Modal passen. Ggfs. irrelevante Bereiche oben/unten abschneiden." Die Vorschau war auf 480px gedeckelt (4:3), das Bild fuellte in einem
   860px breiten Dialog nur etwa die halbe Breite. Jetzt: volle Dialogbreite, Seitenverhaeltnis 16:9 (object-fit:cover schneidet oben/unten ab), Hoehe
   hoechstens 46vh bzw. 520px; der Zielrahmen richtet sich nach der Hoehe (72%), nicht mehr nach der Breite - sonst waere er im Breitbild groesser
   als das Bild. Die Erkennung liest weiter den vollen Videostrom; nur die Anzeige wird zugeschnitten. */
/* REQ-INTERN-FELDBREITEN-NACH-INHALT-001 (Auftraggeber 2026-09-29, Screenshot Person zuordnen: "Ein Eingabefeld, das doppelt so lang/breit ist wie das
   fuer die E-Mail, ergibt keinen Sinn! Systematisch ueber alle Felder bzgl. Inhalt/Semantik pruefen!"). Die Feldzeilenregel (REQ-INTERN-MODAL-FELDZEILE-LUECKE-001)
   fuellt Luecken, indem sie das letzte Feld einer Zeile bis auf 50% wachsen laesst - dadurch stand die Telefonnummer doppelt so breit wie die E-Mail. Die
   Breite richtet sich jetzt nach dem INHALT: kurze Angaben (Zahl, Betrag, Menge, PLZ, Tage) 11-12rem, mittlere (Telefon, Datum/Uhrzeit, IBAN, Referenz) 16-18rem,
   Lang-Text (Name, E-Mail, Adresse), Auswahl und Freitext behalten die Zeilenbreite. Angewendet nach Feldtyp und Feldname, damit auch kuenftige Dialoge ohne
   Handarbeit stimmen. Live gemessen (25 zu breite kurze Felder, alle in Dialogen): Datum/Uhrzeit 451/918px, Betraege 420px, Telefon 451px. */
.augite-modal .augite-modal__fields>label:has(input[type=number],input[name*="quantity" i],input[name*="qty" i],input[name*="amount" i],input[name*="betrag" i],input[name*="cost" i],input[name*="price" i],input[name*="zip" i],input[name*="plz" i],input[name*="postal" i],input[name*="days" i],input[name*="hours" i],input[name*="percent" i]){flex:0 1 11rem!important;max-width:12rem!important;justify-self:start!important}
.augite-modal .augite-modal__fields>label:has(input[type=tel],input[name*="phone" i],input[name*="telefon" i],input[name*="mobile" i],input[type=date],input[type=datetime-local],input[type=time],input[type=month],input[name*="iban" i],input[name*="reference" i],input[name*="tracking" i]){flex:0 1 16rem!important;max-width:18rem!important;justify-self:start!important}
/* REQ-INTERN-SCAN-ODER-WAEHLEN-EINE-ZEILE-001 (Dialogfassung): die Dialogregel `.augite-modal .augite-modal__grid>label{display:flex!important;flex-direction:column!important}` schlaegt die
   allgemeine Regel aus backend-ui.css (gleiche Spezifitaet, spaeter geladen). Deshalb hier mit hoeherer Spezifitaet: Beschriftung ueber die volle Breite, Auswahlfeld und
   Ausloeser "Asset identifizieren" in EINER Zeile, Hinweis darunter (Entweder/Oder: Scannen oder direkt waehlen). */
.augite-modal .augite-modal__fields label.augite-form-row:has(>.arf-admin-asset-picker-trigger){display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;column-gap:8px!important;row-gap:5px!important;align-items:center!important;flex-direction:initial!important}
.augite-modal .augite-modal__fields label.augite-form-row:has(>.arf-admin-asset-picker-trigger)>span:first-child,.augite-modal .augite-modal__fields label.augite-form-row:has(>.arf-admin-asset-picker-trigger)>.description{grid-column:1/-1!important}
.augite-modal .augite-modal__fields label.augite-form-row:has(>.arf-admin-asset-picker-trigger)>.arf-admin-asset-picker-trigger{margin:0!important;display:inline-flex!important;align-items:center!important}
/* REQ-INTERN-DIALOG-BLOECKE-VOLLE-BREITE-001 (Auftraggeber 2026-09-29, Screenshot Kartenterminal verwalten: "das hat einen zu schmalen Content und die Tabelle muesste ueber die ganze
   Modalbreite gehen. Plane das Modal so gross, dass theoretische 4 Kartenleser funktionieren"). Die Feldzeilenregel `.augite-modal__fields>*{max-width:calc(50% - 8px)}` ist fuer
   FELDER gedacht (zwei je Zeile) und deckelte auch Listenkarten und Tabellen im Dialog auf die halbe Breite (Tabelle 608 von 918px, rechts leer, Spalten abgeschnitten).
   Bloecke, die keine Felder sind (Abschnitt/Karte, Tabellenumhuellung, Tabelle, Hinweiskasten, Liste), nehmen die volle Zeilenbreite. */
.augite-modal .augite-modal__fields>:is(section,article,details,.augite-list-card,.arf-admin-table-scroll,.augite-table-wrap,table,.arp-callout,.notice,.augite-modal__note,ul,ol){flex:1 1 100%!important;max-width:100%!important;width:100%!important;grid-column:1/-1!important;box-sizing:border-box}


/* REQ-INTERN-DIALOG-TEXTBREITE-001 (Auftraggeber 2026-09-30): Inhalte, die KEINE Eingabefelder sind (Absaetze, Listen, Tabellen, Hinweiskaesten, Abschnitte, Ueberschriften),
   nutzen die volle Dialogbreite. Der Wachstumsdeckel calc(50% - 8px) gilt nur fuer Feldzeilen; ohne diese Regel brach ein einzelner Textblock bei halber Breite um. */
.augite-modal .augite-modal__fields>:is(p,ul,ol,table,aside,section,details,figure,pre,blockquote,hr,h2,h3,h4,.arf-message-body){flex:1 1 100%!important;width:100%!important;max-width:100%!important;box-sizing:border-box}

/* REQ-HIDDEN-ATTRIBUT-GUARD-001: das HTML-Attribut hidden gilt immer. Zeilen mit eigener display-Regel (display:grid!important der
   Modal-Checkboxzeile, display:flex der Formularzeilen) ueberschrieben es bisher und zeigten z. B. die Kuerzungs-Bestaetigung des
   Laufzeit-Dialogs schon bei einer Verlaengerung. Die ID im :not() hebt die Spezifitaet ueber jede Klassenregel des Dialogs. */
.augite-modal [hidden]:not(#augite-hidden-guard){display:none!important}

/* REQ-UI-MODAL-TABELLEN-001 (Auftraggeber 2026-09-30: "Es duerfen in Modals solche Tabellen nicht existieren! Die muessen immer Modalbreit sein und keine
   Scrollbalken o.ae. enthalten! Systemweit pruefen und korrigieren!"): EINE Regel fuer JEDE Tabelle im Modalinhalt, ueber den Modalinhalt selektiert und nicht
   je Einzeltabelle (kein Wrapper-Klassenkatalog, der beim naechsten Wrapper wieder luecken haette).
   Ursachen, die vorher zusammenkamen: (1) Tabellenhuellen (.augite-table-scroll, .arf-admin-table-scroll, .arf-ops-table-wrap, .arf-portal-table-wrap,
   .arf-workshop-table-wrap, .arf-legal-matrix-wrap ...) tragen overflow:auto und machten jede breite Tabelle zur Scrollflaeche; (2) Mindestbreiten am <table>
   (.arf-admin-table 640px, .arf-portal-table 680-760px, .arf-ops-table 920px, .arf-workshop-table 1080px, .arf-booking-items-table 780px) sprengten schmale
   Dialoge; (3) nowrap in Kopf- und Datenzellen hielt jede Spalte auf ihrer Inhaltsbreite; (4) die Feldzeilenregel `.augite-modal__fields>*{max-width:calc(50% - 8px)}`
   halbierte jeden Block, der nur EINE Tabelle traegt (Fassungsverlauf, Tarifvorschlaege), sodass die Tabelle schmal und linksbuendig stand.
   Regel: die Tabelle ist 100 % Modalinhaltsbreite, kein Element auf dem Weg dorthin ist eine Scrollflaeche (overflow sichtbar), Spalten passen sich an
   (Zellen brechen um, lange Woerter trennen sich, Geld bleibt durch das geschuetzte Leerzeichen vor der Waehrung zusammen), Bedienfelder in Zellen sind hoechstens so
   breit wie ihre Zelle. Ein Modal mit sehr vielen Zeilen scrollt wie bisher senkrecht als Ganzes (overflow des Dialogs), nie die Tabelle selbst.
   Schmales Fenster (<= 640px): dichteres Zellpolster und Aktionen duerfen umbrechen; gestapelte Zeilen (Kopfzeile ausgeblendet, je Zelle Beschriftung | Wert) stellt modal.js
   beim Oeffnen bereit (data-label aus der Kopfzeile); ohne Kopfzeile oder ohne JavaScript bleibt es bei umbrechenden Spalten. */
.augite-modal .augite-modal__fields>:has(table),.augite-modal .augite-modal__grid>:has(table){flex:1 1 100%!important;width:100%!important;max-width:100%!important;grid-column:1/-1!important;box-sizing:border-box}
.augite-modal :has(table):not(.augite-modal):not(.augite-modal__dialog){overflow:visible!important;max-height:none!important;min-width:0!important;max-width:100%!important}
.augite-modal :is(div,section,article):has(>table){width:100%!important;box-sizing:border-box}
.augite-modal table{width:100%!important;min-width:0!important;max-width:100%!important;table-layout:auto!important;box-sizing:border-box}
.augite-modal table :is(th,td){min-width:0;padding-inline:8px!important;white-space:normal!important;overflow-wrap:break-word;hyphens:auto}
/* REQ-ERP-CONTROLLING-STANDARDZEITRAUM-001 (Nachtest 01.10.2026): "AK-TIO-NEN". Spalten mit festem Inhalt (Aktionen, Status, Zahl, Geld; Datum darf umbrechen, aber ohne Trennstrich) trennen nie mit Silbentrennung und brechen nicht um. */
.augite-modal table :is(th,td):is(.augite-col--actions,.augite-col--status,.augite-col--number,.augite-col--money){hyphens:none;overflow-wrap:normal;white-space:nowrap!important}
.augite-modal table :is(th,td).augite-col--date{hyphens:none}
/* Ein Wort bricht nie mitten in der Zahl oder im Namen ("01.01.202|6"): Zellen behalten ihr laengstes Wort. Nur Zellen mit einem unteilbaren Langwort (ab 16 Zeichen: Pruefsumme,
   Dateiname, E-Mail; modal.js setzt data-augite-long beim Oeffnen) und Code/Links duerfen mitten im Wort trennen - dadurch schrumpft die Spalte statt die Tabelle zu ueberlaufen. */
.augite-modal table :is(th,td)[data-augite-long],.augite-modal table :is(code,kbd,a){overflow-wrap:anywhere}
.augite-modal table :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea,img){max-width:100%!important;min-width:0!important;box-sizing:border-box}
.augite-modal table :is(input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=number]):not([type=button]):not([type=submit]):not([type=file]),select,textarea){width:100%!important}
.augite-modal table .augite-row-actions{flex-wrap:wrap!important;max-width:100%}
@media (max-width:640px){
  .augite-modal table.augite-table{--augite-t-pad:6px 5px;--augite-t-th:10px}
  .augite-modal table th{font-size:10px!important;letter-spacing:0!important}
  .augite-modal table.augite-table :is(th,td){letter-spacing:0}
  /* Gestapelte Zeilen (Marke und data-label setzt modal.js beim Oeffnen): Kopfzeile entfaellt (die Beschriftung steht als ::before an jeder Zelle), je Zeile eine Karte, je Zelle Beschriftung | Wert. */
  .augite-modal table[data-augite-stack]>thead{display:none!important}
  .augite-modal table[data-augite-stack],.augite-modal table[data-augite-stack]>tbody,.augite-modal table[data-augite-stack]>tbody>tr{display:block!important;width:100%!important}
  .augite-modal table[data-augite-stack]>tbody>tr{box-sizing:border-box;padding:4px 0;border-bottom:2px solid #dcdcde}
  .augite-modal table[data-augite-stack]>tbody>tr>td{display:grid!important;grid-template-columns:minmax(0,34%) minmax(0,1fr);column-gap:8px;align-items:start;box-sizing:border-box;width:100%!important;border:0!important;text-align:left!important}
  .augite-modal table[data-augite-stack]>tbody>tr>td:not([data-label]){display:block!important}
  .augite-modal table[data-augite-stack]>tbody>tr>td[data-label]::before{content:attr(data-label);color:#50575e;font-size:10px;font-weight:700;letter-spacing:0;text-transform:uppercase;overflow-wrap:anywhere}
  .augite-modal table th:not(.augite-col--date):not(.augite-col--number):not(.augite-col--money):not(.augite-col--status):not(.augite-col--actions):not(.augite-nowrap){overflow-wrap:anywhere}
}
/* AUGITE-CONTROL-TOKENS:BEGIN - REQ-UI-STEUERELEMENTE-EINHEITLICH-001 (Auftraggeberentscheidung 2026-09-30, Fragebox).
 * EINE Definition aller Steuerelement-Masse fuer /intern/, wp-admin (RentalCore, AssetCore, Invoice, Payments, Procurement) und
 * das Kundenportal. Der Block steht byte-gleich in backend-ui.css (kanonisch), public.css und modal.css - jede Flaeche laedt
 * mindestens eine dieser Dateien; der Pruefstand test_req_ui_steuerelemente_einheitlich_001 erzwingt die Gleichheit.
 * Oeffentliche Website/Theme bleiben ausgenommen. Ausser in diesem Block steht in den erfassten Dateien kein Hoehen-,
 * Schrift-, Innenabstands- oder Radius-Literal fuer Steuerelemente. Hoehe: 40px mit Maus/Stift, 48px bei grobem Zeiger (Touch). Feldschrift (Felder, Selects, Textbereiche): 14px, bei Touch 16px
 * (gegen den iOS-Fokuszoom, Auftraggeber 2026-10-01); Schaltflaechen bleiben 14px. */
:root{--augite-control-h:40px;--augite-control-font-size:14px;--augite-field-font-size:14px;--augite-control-weight:400;--augite-button-weight:600;--augite-control-line-height:1.3;--augite-control-pad-x:12px;--augite-control-pad:0 var(--augite-control-pad-x);--augite-control-pad-area:8px var(--augite-control-pad-x);--augite-button-pad:0 16px;--augite-control-radius:0;--augite-control-border-width:1px;--augite-field-gap:12px;--augite-group-gap:16px;--augite-focus-ring-width:2px;--augite-focus-ring-offset:2px;--augite-control-hover-border:var(--augite-accent-strong,#b84e08);--augite-control-disabled-opacity:.55;--augite-control-error-border:var(--augite-danger,#b32d2e)}
@media (pointer:coarse){:root{--augite-control-h:48px;--augite-field-font-size:16px}}
/* Basisvertrag (Element-Ebene, bewusst niedrige Spezifitaet: jede Spezialregel nennt dieselben Token, daher gleiche Masse).
 * Felder/Selects: Hoehe, Schrift 14px/400, Innenabstand, Radius. Schaltflaechen: Mindesthoehe, 14px/600. Fokusring einheitlich. */
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,:where(body.wp-admin #wpbody-content)) :is(input:where(:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]):not([type=file]):not([type=image]):not([type=submit]):not([type=button]):not([type=reset])),select){box-sizing:border-box;height:var(--augite-control-h);min-height:var(--augite-control-h);padding:var(--augite-control-pad);border-radius:var(--augite-control-radius);font-family:inherit;font-size:var(--augite-field-font-size);font-weight:var(--augite-control-weight);line-height:var(--augite-control-line-height)}
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,body.wp-admin #wpbody-content) textarea{box-sizing:border-box;padding:var(--augite-control-pad-area);border-radius:var(--augite-control-radius);font-family:inherit;font-size:var(--augite-field-font-size);font-weight:var(--augite-control-weight);line-height:var(--augite-control-line-height)}
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,:where(body.wp-admin #wpbody-content)) :is(.button,.augite-btn,.augite-icon-btn,.arf-ops-primary,.arf-ops-secondary,.arf-ops-icon-button,.augite-modal__button,input[type=submit],input[type=button],input[type=reset]),.augite-modal:not(.arf-cart-period-dialog) :is(button,[role=button]){box-sizing:border-box;min-height:var(--augite-control-h);border-radius:var(--augite-control-radius);font-family:inherit;font-size:var(--augite-control-font-size);font-weight:var(--augite-button-weight);line-height:var(--augite-control-line-height)}
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,:where(body.wp-admin #wpbody-content)) :is(input,select,textarea,button,.button):focus-visible{outline:var(--augite-focus-ring-width) solid var(--augite-accent,#d9600a);outline-offset:var(--augite-focus-ring-offset)}
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,:where(body.wp-admin #wpbody-content)) :is(input,select,textarea,button,.button):disabled{opacity:var(--augite-control-disabled-opacity);cursor:not-allowed}
:is(.augite-modal:not(.arf-cart-period-dialog),.arf-ops,.arf-portal,:where(body.wp-admin #wpbody-content)) :is(input,select,textarea):is(:user-invalid,[aria-invalid=true]){border-color:var(--augite-control-error-border)}
/* AUGITE-CONTROL-TOKENS:END */