/* Web-only foundation. PDF documents never load this file or use .app-ui. */
body.app-ui {
    --app-primary: #0757a6;
    --app-primary-hover: #064a8e;
    --app-primary-soft: #eaf6fd;
    --app-brand-blue: #00a0f5;
    --app-accent: #f07300;
    --app-accent-ink: #b65300;
    --app-canvas: #f7f9fa;
    --app-surface: #ffffff;
    --app-soft: #f3f7fa;
    --app-line: #e4ebf0;
    --app-input-line: #a9b9c7;
    --app-ink: #102a43;
    --app-muted: #536779;
    --app-success: #256f46;
    --app-success-soft: #e8f5ec;
    --app-warning: #805600;
    --app-warning-soft: #fff4dc;
    --app-error: #a83232;
    --app-error-soft: #fdebec;
    --app-info: #1d63a8;
    --app-info-soft: #e8f2fc;
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 24px;
    --app-space-6: 32px;
    --app-radius-control: 10px;
    --app-radius-section: 20px;
    --app-rail-width: 88px;
    --app-page-gutter: clamp(24px, 3.1vw, 48px);
    --app-shadow: 0 5px 24px rgb(16 42 67 / 4%);
    margin: 0;
    background: var(--app-canvas);
    color: var(--app-ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.app-ui *, .app-ui *::before, .app-ui *::after { box-sizing: border-box; }
.app-ui [hidden] { display: none !important; }
.app-ui a { color: var(--app-primary); text-underline-offset: 3px; }
.app-ui img { max-width: 100%; }
.app-ui h1, .app-ui h2, .app-ui h3 {
    color: var(--app-ink);
    font-weight: 650;
    line-height: 1.3;
    letter-spacing: -.45px;
}
.app-ui h1 { font-size: clamp(28px, 2.7vw, 40px); }
.app-ui h2 { font-size: 24px; margin: 0 0 var(--app-space-5); }
.app-ui h3 { font-size: 18px; margin: 0 0 var(--app-space-4); }
.app-ui p { line-height: 1.6; }
.app-ui hr { border: 0; border-top: 1px solid var(--app-line); }
.app-ui :is(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--app-primary);
    outline-offset: 3px;
}
.app-ui .app-skip-link {
    position: fixed;
    z-index: 10002;
    top: 12px;
    left: 104px;
    padding: 12px 20px;
    border-radius: var(--app-radius-control);
    background: var(--app-primary);
    color: white;
    transform: translateY(-160%);
}
.app-ui .app-skip-link:focus { transform: translateY(0); }

/* Shared app shell. All original content, forms and dialogs stay in place. */
.app-ui .app-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 30;
    width: var(--app-rail-width);
    padding: 24px 10px;
    border-right: 1px solid var(--app-line);
    background: var(--app-surface);
    display: flex;
    align-items: center;
    flex-direction: column;
}
.app-ui .app-sidebar svg, .app-ui .app-menu-toggle svg, .app-ui .app-drawer-close svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}
.app-ui .app-rail-brand {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    color: var(--app-brand-blue);
    background: var(--app-primary-soft);
    border-radius: 14px;
}
.app-ui .app-rail-brand svg { width: 28px; height: 28px; }
.app-ui .app-rail-links {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 12px;
    margin-top: 48px;
}
.app-ui .app-rail-link {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    padding: 10px 2px;
    border-radius: 14px;
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}
.app-ui .app-rail-link:hover { background: var(--app-primary-soft); color: var(--app-brand-blue); }
.app-ui .app-rail-link:focus-visible { outline-color: var(--app-brand-blue); }
.app-ui .app-rail-link.is-current { background: var(--app-brand-blue); color: white; }
.app-ui .app-rail-caption { margin-top: auto; font-size: 11px; font-weight: 700; letter-spacing: 1px; color: var(--app-muted); }
.app-ui .app-drawer-heading { display: none; }
.app-ui .app-workspace { margin-left: var(--app-rail-width); min-width: 0; min-height: 100dvh; display: flex; flex-direction: column; }
.app-ui .app-header { padding: 0; color: var(--app-ink); background: var(--app-canvas); border-bottom: 1px solid var(--app-line); box-shadow: none; }
.app-ui .app-header .main-nav {
    min-height: 88px;
    height: auto;
    max-width: 1600px;
    width: 100%;
    padding: 16px var(--app-page-gutter);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 24px;
}
.app-ui .app-header-title { display: flex; flex-direction: column; gap: 2px; white-space: nowrap; }
.app-ui .app-header-title strong { font-size: 16px; font-weight: 650; }
.app-ui .app-header-title span { font-size: 12px; color: var(--app-muted); }
.app-ui .app-header-logo { margin: 0; margin-left: auto; min-width: 0; }
.app-ui .app-header-logo a { display: flex; align-items: center; }
.app-ui .app-header-logo img { height: auto; max-height: 48px; width: auto; max-width: 195px; object-fit: contain; }
.app-ui .app-header .nav-links { display: block; margin: 0; padding: 0; position: static; width: auto; background: transparent; }
.app-ui .app-header .nav-links ul { display: flex; flex-direction: row; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.app-ui .app-header :is(.updates-nav-btn, .logout-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-control);
    background: transparent;
    color: var(--app-muted);
    box-shadow: none;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.app-ui .app-header :is(.updates-nav-btn, .logout-btn):hover { background: #fff1e5; color: var(--app-accent); }
.app-ui .app-header :is(.updates-nav-btn, .logout-btn):focus-visible { outline-color: var(--app-accent); background: #fff1e5; color: var(--app-accent); }
.app-ui .updates-badge { min-width: 20px; height: 20px; display: inline-grid; place-items: center; background: var(--app-primary); color: white; border-radius: 20px; font-size: 11px; padding: 0 5px; }
.app-ui :is(.app-menu-toggle, .app-drawer-close) { width: 44px; min-width: 44px; height: 44px; padding: 10px; background: transparent; color: var(--app-ink); border: 1px solid var(--app-line); box-shadow: none; border-radius: var(--app-radius-control); }
.app-ui :is(.app-menu-toggle, .app-drawer-close):hover { background: var(--app-soft); color: var(--app-primary); }
.app-ui main.container {
    width: calc(100% - 2 * var(--app-page-gutter));
    max-width: 1504px;
    min-width: 0;
    margin: 32px auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}
.app-ui .app-page-intro { margin-bottom: 32px; }
.app-ui .app-page-intro .app-eyebrow { margin: 0 0 8px; color: var(--app-muted); font-size: 13px; }
.app-ui .app-page-intro h1 { margin: 0; letter-spacing: -1.2px; }
.app-ui .app-page-intro h1 span { color: var(--app-accent-ink); }
.app-ui .app-page-intro > p:last-child { margin: 12px 0 0; color: var(--app-muted); font-size: 14px; }
.app-ui .app-footer { max-width: 1600px; width: 100%; margin: 0 auto; padding: 20px var(--app-page-gutter); border-top: 1px solid var(--app-line); background: transparent; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; }
.app-ui .app-footer .logo-container { display: flex; align-items: center; gap: 20px; margin: 0; }
.app-ui .app-footer img { height: auto; max-height: 26px; width: auto; max-width: 108px; object-fit: contain; }
.app-ui .app-footer p { margin: 0; font-size: 12px; color: var(--app-muted); text-align: right; }

/* Reusable sections and form layout, without changing fields or visibility. */
.app-ui form { margin-top: 0; }
.app-ui :is(.form-section, .card, .updates-page, .update-card, .updates-modal-card) {
    padding: var(--app-space-5);
    border: 1px solid var(--app-line);
    border-radius: var(--app-radius-section);
    background: var(--app-surface);
    box-shadow: var(--app-shadow);
    margin-bottom: var(--app-space-5);
    min-width: 0;
}
.app-ui .form-section .form-section { background: var(--app-soft); box-shadow: none; border-radius: 14px; }
.app-ui form > .form-section:has(> .form-group) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 4px; }
.app-ui form > .form-section > :is(h2, h3, .form-section, .form-row, .row, .image-preview-container) { grid-column: 1 / -1; }
.app-ui .form-row { display: flex; flex-wrap: wrap; gap: 24px; margin: 0; }
.app-ui .form-row > .form-group { flex: 1 1 250px; width: auto; padding: 0; }
.app-ui .form-group { margin-bottom: 20px; min-width: 0; }
.app-ui .form-group > label, .app-ui form > label { display: block; margin-bottom: 8px; color: var(--app-ink); font-size: 13px; font-weight: 600; line-height: 1.5; }
.app-ui .form-group :is(.helptext, small), .app-ui .text-muted { color: var(--app-muted); font-size: 12px; line-height: 1.55; }
.app-ui :is(input, select, textarea) { font-family: inherit; }
.app-ui :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])),
.app-ui .form-group :is(input, select, textarea):not(:where([type="hidden"], [type="checkbox"], [type="radio"], [type="submit"], [type="button"])) {
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 11px 12px;
    border: 1px solid var(--app-input-line);
    border-radius: var(--app-radius-control);
    color: var(--app-ink);
    background-color: var(--app-surface);
    font-size: 14px;
    line-height: 1.45;
    box-shadow: none;
}
.app-ui .form-group :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { width: 100%; }
.app-ui textarea { min-height: 112px; resize: vertical; }
.app-ui input::placeholder, .app-ui textarea::placeholder { color: var(--app-muted); opacity: 1; }
.app-ui :is(input, select, textarea):hover:not(:disabled):not([readonly]) { border-color: var(--app-primary); }
.app-ui :is(input, select, textarea):focus-visible { outline-offset: 1px; border-color: var(--app-primary); }
.app-ui :is(input, textarea)[readonly] { background-color: var(--app-soft); color: var(--app-muted); }
.app-ui :is(input, select, textarea):disabled { background-color: var(--app-soft); color: var(--app-muted); cursor: not-allowed; opacity: .7; }
.app-ui :is(input, select, textarea)[aria-invalid="true"], .app-ui :is(input, select, textarea).is-invalid { border-color: var(--app-error); background-color: #fffafa; }
.app-ui .errorlist { margin: 8px 0 0; padding-left: 18px; color: var(--app-error); font-size: 13px; line-height: 1.6; }
.app-ui .form-group:has(.errorlist) > :is(input, select, textarea) { border-color: var(--app-error); }
.app-ui input:is([type="checkbox"], [type="radio"]) { accent-color: var(--app-primary); width: 18px; height: 18px; vertical-align: middle; margin: 0 8px 0 0; flex: 0 0 auto; }
.app-ui .form-group label:has(input:is([type="checkbox"], [type="radio"])) { min-height: 44px; display: flex; align-items: center; font-weight: 400; }
.app-ui input[type="file"] { padding: 6px; min-height: 48px; }
.app-ui input[type="file"]::file-selector-button { margin-right: 12px; padding: 8px 12px; border: 0; border-radius: 6px; color: var(--app-primary); background: var(--app-primary-soft); font: inherit; cursor: pointer; }
.app-ui .signature-pad { border-color: var(--app-input-line); border-radius: 12px; background: var(--app-surface); }
.app-ui .signature-pad canvas { border-radius: 0; }

/* Repair signatures stay in the form, with the notice above the full-width pad. */
.app-ui form > .form-section.repair-signature-section { grid-template-columns: minmax(0, 1fr); }
.app-ui .repair-signature-section .form-group:last-child { margin-bottom: 0; }
.app-ui .repair-signature-notice { margin: 0; max-width: 100ch; color: var(--app-muted); font-size: 14px; line-height: 1.65; }
.app-ui .repair-signature-section .signature-pad { margin: 0; }
.app-ui .repair-signature-section .signature-pad canvas { border-bottom: 1px solid var(--app-line); }
.app-ui .repair-signature-section .clear-signature { margin: 12px; }

/* Buttons retain their original element, name, type and event bindings. */
.app-ui button, .app-ui .button, .app-ui input[type="submit"], .app-ui input[type="button"] {
    min-height: 44px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: var(--app-radius-control);
    background: var(--app-primary);
    color: white;
    box-shadow: none;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s;
}
.app-ui button:hover:not(:disabled):not(.disabled), .app-ui .button:hover:not(:disabled):not(.disabled), .app-ui input[type="submit"]:hover:not(:disabled), .app-ui input[type="button"]:hover:not(:disabled) { background: var(--app-primary-hover); transform: none; box-shadow: none; }
.app-ui :is(.button-secondary, .secondary, .clear-signature, .table-fullscreen-btn, .btn-secondary) { background: var(--app-soft); color: var(--app-primary); border-color: var(--app-line); }
.app-ui :is(.button-secondary, .secondary, .clear-signature, .table-fullscreen-btn, .btn-secondary):hover:not(:disabled):not(.disabled) { background: var(--app-primary-soft); color: var(--app-primary-hover); }
.app-ui :is(#dropdown-btn, #dropdown-btn-logistik) { min-height: 44px; padding: 12px 18px; border: 1px solid transparent; border-radius: var(--app-radius-control); background: var(--app-primary); color: white; font-size: 14px; font-weight: 600; box-shadow: none; }
.app-ui :is(#dropdown-btn, #dropdown-btn-logistik):hover { background: var(--app-primary-hover); box-shadow: none; }
.app-ui .button-success { background-color: var(--app-success) !important; color: white !important; }
.app-ui .button-success:hover { background-color: #1e5e3a !important; }
.app-ui :is(.danger, .btn-danger) { background: var(--app-error-soft); color: var(--app-error); }
.app-ui :is(.danger, .btn-danger):hover:not(:disabled) { background: #f8d9d9; }
.app-ui :is(button, .button, input[type="submit"], input[type="button"]):disabled, .app-ui .disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.app-ui :is(.actions, .left-buttons, .right-buttons) { gap: 12px; flex-wrap: wrap; align-items: center; }
.app-ui .actions { margin-top: 24px; }
.app-ui .app-create-actions { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 12px; }
.app-ui .app-create-actions > .dropdown-container:empty { display: none; }
.app-ui .dropdown-menu { padding: 8px; border: 1px solid var(--app-line); border-radius: 12px; box-shadow: 0 12px 32px rgb(16 42 67 / 12%); background: var(--app-surface); max-width: calc(100vw - 32px); }
.app-ui .dropdown-menu a { padding: 12px; min-height: 44px; border-radius: 6px; color: var(--app-ink); font-size: 13px; line-height: 1.5; }
.app-ui .dropdown-menu a:hover { background: var(--app-primary-soft); color: var(--app-primary); }

/* Semantic status classes remain the source of color; no status values change. */
.app-ui :is(.status-badge, .badge, .status-select) { border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.app-ui select.status-select { min-height: 40px; padding: 8px 10px; border-color: transparent; width: auto; max-width: 100%; cursor: pointer; }
.app-ui :is(.status-eingegangen, .status-befundet), .app-ui select:is(.status-eingegangen, .status-befundet) { color: var(--app-info); background-color: var(--app-info-soft); }
.app-ui :is(.status-in_bearbeitung, .status-beauftragt), .app-ui select:is(.status-in_bearbeitung, .status-beauftragt) { color: var(--app-warning); background-color: var(--app-warning-soft); }
.app-ui :is(.status-abgeschlossen, .status-fertig), .app-ui select:is(.status-abgeschlossen, .status-fertig) { color: var(--app-success); background-color: var(--app-success-soft); }
.app-ui :is(.status-storniert, .status-verschrotten), .app-ui select:is(.status-storniert, .status-verschrotten) { color: var(--app-error); background-color: var(--app-error-soft); }
.app-ui .status-nicht_befundet, .app-ui select.status-nicht_befundet { color: var(--app-muted); background-color: var(--app-soft); }
.app-ui .status-select option { color: var(--app-ink); background: var(--app-surface); }
.app-ui .alert { padding: 14px 18px; border-radius: 12px; margin: 16px 0; font-size: 14px; }
.app-ui .alert-success { color: var(--app-success); background: var(--app-success-soft); border-color: #b8d8c5; }
.app-ui .alert-info { color: var(--app-info); background: var(--app-info-soft); border-color: #bdd5ec; }
.app-ui .alert-warning { color: var(--app-warning); background: var(--app-warning-soft); border-color: #e4cea2; }
.app-ui :is(.alert-error, .alert-danger) { color: var(--app-error); background: var(--app-error-soft); border-color: #e8bdbd; }
.app-ui .updates-modal { z-index: 10000; }
.app-ui .updates-modal-card { max-height: 85dvh; overflow: auto; }

/* Shared overflow containment preserves all existing table columns and tabs. */
.app-ui .tab-content { max-width: 100%; overflow-x: auto; }
.app-ui :is(#content1, #content2, #content3) { overflow-x: auto; border-color: var(--app-line); border-radius: 12px; box-shadow: none; scrollbar-width: thin !important; }
.app-ui :is(#content1, #content2, #content3)::-webkit-scrollbar { display: block !important; width: 8px !important; height: 8px !important; }
.app-ui :is(#content1, #content2, #content3)::-webkit-scrollbar-thumb { background: var(--app-input-line); border-radius: 8px; }
.app-ui .col-md-6:has(> table) { overflow-x: auto; min-width: 0; }
.app-ui .col-md-6 > .table { min-width: 560px; }
.app-ui .table input.form-control { width: 100%; min-width: 0; }
.app-ui .table-fullscreen-btn { display: inline-flex; align-items: center; justify-content: center; }
.app-ui #tabs { padding: 24px; }
.app-ui #tabs > label { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; margin: 0 4px 12px 0; border: 0; border-radius: 9px; background: var(--app-soft); color: var(--app-muted); font-size: 13px; }
.app-ui #tabs > input:checked + label { color: var(--app-primary); background: var(--app-primary-soft); box-shadow: inset 0 -2px var(--app-primary); }
.app-ui table { font-family: inherit; }
.app-ui td, .app-ui th { border-color: var(--app-line); }
.app-ui .table-fullscreen-wrapper.is-fullscreen { z-index: 9999; border-radius: 0; }
.app-ui .app-header-logo a:hover { filter: none; }
.app-ui .app-footer .logo-container { width: auto; }
.app-ui .form-section h2 { font-size: 24px; border-bottom-color: var(--app-line); }

/* Tablet landscape: rail retained, header and spacing tailored to its height. */
@media (min-width: 961px) and (max-width: 1279px) {
    body.app-ui { --app-page-gutter: 28px; }
    .app-ui .app-header .main-nav { min-height: 72px; padding-top: 12px; padding-bottom: 12px; gap: 16px; }
    .app-ui .app-header-logo img { max-height: 40px; max-width: 164px; }
    .app-ui main.container { margin-top: 24px; margin-bottom: 24px; }
    .app-ui .app-page-intro { margin-bottom: 24px; }
    .app-ui .app-page-intro h1 { font-size: 34px; }
}

/* Tablet portrait: real drawer navigation, touch controls and generous content. */
@media (max-width: 960px) {
    body.app-ui { --app-page-gutter: 28px; }
    .app-ui .app-workspace { margin-left: 0; }
    .app-ui .app-sidebar { position: static; width: 100%; flex-direction: row; padding: 12px 28px; border-right: 0; border-bottom: 1px solid var(--app-line); }
    .app-ui .app-rail-links { flex-direction: row; margin: 0 0 0 24px; gap: 12px; }
    .app-ui .app-rail-link { flex-direction: row; min-height: 44px; padding: 10px 14px; font-size: 13px; }
    .app-ui .app-rail-caption { display: none; }
    .app-ui.app-nav-enhanced .app-sidebar { position: fixed; width: 290px; max-width: calc(100vw - 40px); height: 100dvh; inset: 0 auto 0 0; z-index: 10001; align-items: stretch; flex-direction: column; padding: 24px 20px; border-right: 1px solid var(--app-line); transform: translateX(-100%); visibility: hidden; overflow-y: auto; }
    .app-ui.app-nav-open { overflow: hidden; }
    .app-ui.app-nav-open .app-sidebar { transform: translateX(0); visibility: visible; }
    .app-ui.app-nav-enhanced .app-rail-brand { display: none; }
    .app-ui.app-nav-enhanced .app-drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .app-ui.app-nav-enhanced .app-rail-links { flex-direction: column; margin: 32px 0 0; gap: 12px; }
    .app-ui.app-nav-enhanced .app-rail-link { justify-content: flex-start; min-height: 52px; padding: 14px 16px; gap: 16px; font-size: 14px; }
    .app-ui .app-nav-backdrop { position: fixed; inset: 0; z-index: 10000; background: rgb(16 42 67 / 35%); }
    .app-ui .app-header .main-nav { min-height: 88px; gap: 16px; }
    .app-ui .app-header-logo img { max-height: 40px; max-width: 160px; }
    .app-ui .app-header .logout-btn span { display: none; }
    .app-ui .app-header .logout-btn { padding: 11px; width: 44px; }
    .app-ui main.container { margin-top: 28px; }
    .app-ui :is(button, .button, select, input[type="submit"]) { min-height: 48px; }
    .app-ui :is(#dropdown-btn, #dropdown-btn-logistik) { min-height: 48px; }
    .app-ui .app-menu-toggle, .app-ui .app-drawer-close { min-height: 44px; padding: 10px; }
    .app-ui .form-section { padding: 24px; }
    .app-ui .app-footer { flex-wrap: wrap; padding-top: 24px; padding-bottom: 24px; }
}

/* Mobile: compact header, comfortable fields, single-column groups. */
@media (max-width: 600px) {
    body.app-ui { --app-page-gutter: 16px; }
    .app-ui .app-header .main-nav { min-height: 76px; gap: 8px; padding-top: 12px; padding-bottom: 12px; }
    .app-ui .app-header-title { display: none; }
    .app-ui .app-header-logo { margin-left: 4px; margin-right: auto; }
    .app-ui .app-header-logo img { max-width: 120px; max-height: 36px; }
    .app-ui .app-header .nav-links ul { gap: 2px; }
    .app-ui .app-header .updates-nav-btn { font-size: 12px; padding: 10px 8px; }
    .app-ui main.container { margin-top: 24px; margin-bottom: 24px; }
    .app-ui .app-page-intro { margin-bottom: 24px; }
    .app-ui .app-page-intro h1 { font-size: 30px; letter-spacing: -.9px; }
    .app-ui .app-page-intro > p:last-child { max-width: 32ch; font-size: 13px; }
    .app-ui h2 { font-size: 22px; }
    .app-ui .form-section h2 { font-size: 22px; }
    .app-ui .form-section { padding: 20px 16px; margin-bottom: 20px; border-radius: 16px; }
    .app-ui form > .form-section:has(> .form-group) { grid-template-columns: minmax(0, 1fr); }
    .app-ui .form-row { gap: 0; }
    .app-ui .form-row > .form-group { flex-basis: 100%; }
    .app-ui .form-group { margin-bottom: 20px; }
    .app-ui .form-group :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { font-size: 16px; min-height: 48px; }
    .app-ui #tabs { padding: 16px 12px; }
    .app-ui #tabs > label { padding: 10px 9px; font-size: 12px; margin-right: 2px; }
    .app-ui :is(.actions, .left-buttons, .right-buttons) { width: 100%; }
    .app-ui .actions :is(button, .button) { flex: 1 1 auto; }
    .app-ui .app-footer { flex-direction: column; align-items: flex-start; gap: 16px; }
    .app-ui .app-footer p { font-size: 11px; text-align: left; }
    .app-ui .app-skip-link { left: 16px; }
    .app-ui :is(#dropdown-btn, #dropdown-btn-logistik) { padding: 11px 12px; font-size: 13px; white-space: normal; }
    .app-ui .app-create-actions > .dropdown-container:not(:empty) { flex: 1 1 150px; }
    .app-ui .app-create-actions > .dropdown-container > button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .app-ui *, .app-ui *::before, .app-ui *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}