/* Auftragsdetails: gemeinsame Markenfarben, klare Abstände und ruhige Flächen. */
#hw-auftrag-modal {
    --akte-surface: var(--bg-card, #fff);
    --akte-background: #f6f7f9;
    --akte-text: #20252d;
    --akte-secondary: #535d69;
    --akte-muted: #68717d;
    --akte-border: #e6e8ec;
    --akte-blue: var(--primary, #0284c7);
    --akte-blue-soft: color-mix(in srgb, var(--akte-blue) 7%, var(--akte-surface));
    background: rgb(15 23 42 / 38%);
    backdrop-filter: blur(5px);
}
#hw-auftrag-modal .hw-modal-content {
    max-height: min(92dvh, 1100px);
    border: 1px solid var(--akte-border);
    border-radius: 20px;
    background: var(--akte-surface);
    color: var(--akte-text);
    box-shadow: 0 24px 80px rgb(15 23 42 / 18%);
}
#hw-auftrag-modal .hw-modal-header { flex-shrink: 0; gap: 20px; padding: 24px 28px; border-color: var(--akte-border); }
#hw-auftrag-modal .modal-title { min-width: 0; gap: 14px; color: var(--akte-text); font-family: var(--font-body); font-size: 22px; font-weight: 600; line-height: 1.4; }
#hw-auftrag-modal .modal-title > span:last-child { min-width: 0; overflow-wrap: anywhere; }
#hw-auftrag-modal .hw-modal-icon { width: 44px; height: 44px; border-radius: 12px; color: var(--akte-blue); background: var(--akte-blue-soft); }
#hw-auftrag-modal .hw-modal-subtitle { margin-top: 5px; color: var(--akte-muted); font-size: 12px; font-weight: 400; line-height: 1.5; }
#hw-auftrag-modal .modal-close { flex-shrink: 0; width: 36px; height: 36px; border-radius: 9px; color: var(--akte-muted); background: var(--akte-background); }
#hw-auftrag-modal .modal-close:hover { transform: none; color: var(--akte-text); background: var(--akte-border); }
#hw-auftrag-modal .hw-modal-body { padding: 24px 28px 28px; background: var(--akte-background); scrollbar-gutter: stable; }
#hw-auftrag-modal :is(button, input, select, textarea) { font-family: var(--font-body); }
#hw-auftrag-modal :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--akte-blue); outline-offset: 3px; }
#hw-auftrag-modal [class*="hw-akte-ton-"] { --akte-ton: var(--akte-blue); }

/* Informationszeile und zusammengehörige Kennzahlen. */
#hw-auftrag-modal .hw-akte-kopf { gap: 8px 12px; margin-bottom: 18px; }
#hw-auftrag-modal :is(.hw-akte-status, .hw-akte-chip) { min-height: 30px; padding: 6px 10px; border-radius: 7px; font-size: 12px; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
#hw-auftrag-modal .hw-akte-status { gap: 8px; border-color: transparent; background: color-mix(in srgb, var(--akte-farbe) 9%, var(--akte-surface)); }
#hw-auftrag-modal .hw-akte-status i { flex-shrink: 0; width: 6px; height: 6px; box-shadow: none; }
#hw-auftrag-modal .hw-akte-chip { min-width: 0; color: var(--akte-secondary); background: transparent; border-color: transparent; }
#hw-auftrag-modal .hw-akte-chip i { flex-shrink: 0; color: var(--akte-muted); }
#hw-auftrag-modal .hw-akte-chip-link { color: var(--akte-blue); }
#hw-auftrag-modal .hw-akte-chip-link i { color: inherit; }
#hw-auftrag-modal .hw-akte-chip-link:hover { background: var(--akte-blue-soft); border-color: transparent; }
#hw-auftrag-modal .hw-akte-zahlen { gap: 0; margin-bottom: 22px; overflow: hidden; border: 1px solid var(--akte-border); border-radius: 12px; background: var(--akte-surface); }
#hw-auftrag-modal .hw-akte-zahl { min-width: 0; gap: 14px; padding: 18px 20px; border: 0; border-right: 1px solid var(--akte-border); border-radius: 0; background: transparent; box-shadow: none; transform: none; transition: background .15s; }
#hw-auftrag-modal .hw-akte-zahl:last-child { border-right: 0; }
#hw-auftrag-modal .hw-akte-zahl:hover { background: var(--akte-blue-soft); box-shadow: none; transform: none; }
#hw-auftrag-modal .hw-akte-zahl:focus-visible { outline-offset: -3px; }
#hw-auftrag-modal .hw-akte-zahl strong { color: var(--akte-text); font-size: 24px; font-weight: 600; line-height: 1.25; }
#hw-auftrag-modal .hw-akte-zahl small { margin-top: 4px; color: var(--akte-muted); font-size: 12px; }
#hw-auftrag-modal :is(.hw-akte-zahl-icon, .hw-akte-karte-icon, .hw-akte-einstieg-icon, .hw-akte-aktion > span) { color: var(--akte-blue); background: var(--akte-blue-soft); }
#hw-auftrag-modal .hw-akte-zahl-icon { width: 38px; height: 38px; border-radius: 10px; font-size: 15px; }

/* Formulare und Erfassungsabschnitte. */
#hw-auftrag-modal .hw-akte-karte { padding: 22px; margin-bottom: 22px; border-color: var(--akte-border); border-radius: 12px; box-shadow: none; scroll-margin-top: 16px; }
#hw-auftrag-modal .hw-akte-karte-kopf { gap: 12px; margin-bottom: 20px; }
#hw-auftrag-modal .hw-akte-karte-kopf h4 { gap: 10px; color: var(--akte-text); font-family: var(--font-body); font-size: 15px; font-weight: 600; }
#hw-auftrag-modal .hw-akte-karte-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
#hw-auftrag-modal .hw-form-grid { gap: 18px 20px; margin-bottom: 18px; }
#hw-auftrag-modal .hw-field { min-width: 0; gap: 7px; margin-bottom: 0; }
#hw-auftrag-modal .hw-field-label { color: var(--akte-secondary); font-size: 12px; font-weight: 500; }
#hw-auftrag-modal .hw-input { min-height: 44px; padding: 11px 12px; border-color: #d9dde3; border-radius: 8px; color: var(--akte-text); font-size: 13px; }
#hw-auftrag-modal .hw-input::placeholder { color: var(--akte-muted); opacity: 1; }
#hw-auftrag-modal .hw-input:focus { border-color: var(--akte-blue); box-shadow: 0 0 0 3px var(--akte-blue-soft); }
#hw-auftrag-modal .hw-textarea { min-height: 86px; }
#hw-auftrag-modal .hw-akte-leer { flex-direction: row; justify-content: flex-start; gap: 12px; padding: 18px; border: 1px solid var(--akte-border); border-radius: 9px; background: var(--akte-background); text-align: left; }
#hw-auftrag-modal .hw-akte-leer i { flex-shrink: 0; color: var(--akte-muted); font-size: 18px; }
#hw-auftrag-modal .hw-akte-leer p { max-width: 560px; color: var(--akte-muted); font-size: 12px; line-height: 1.6; }
#hw-auftrag-modal .hw-akte-leer strong { color: var(--akte-secondary); font-weight: 500; }
#hw-auftrag-modal :is(.hw-table, .hw-zeile) { color: var(--akte-secondary); font-size: 13px; }
#hw-auftrag-modal .hw-table th { color: var(--akte-muted); background: var(--akte-background); font-size: 11px; font-weight: 500; }

/* Aktionen mit lesbaren Bezeichnungen und einheitlichen Symbolen. */
#hw-auftrag-modal .hw-akte-titel { margin: 4px 0 12px; color: var(--akte-text); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
#hw-auftrag-modal .hw-akte-aktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 20px; }
#hw-auftrag-modal .hw-akte-aktion { position: relative; flex-direction: row; justify-content: flex-start; gap: 10px; min-width: 0; min-height: 64px; padding: 12px 26px 12px 12px; border-color: var(--akte-border); border-radius: 10px; color: var(--akte-secondary); font-size: 12px; font-weight: 500; line-height: 1.5; text-align: left; box-shadow: none; transition: background .15s, border-color .15s, color .15s; }
#hw-auftrag-modal .hw-akte-aktion > span { width: 32px; height: 32px; border-radius: 8px; font-size: 13px; transition: none; }
#hw-auftrag-modal .hw-akte-aktion::after { content: ''; position: absolute; right: 12px; width: 5px; height: 5px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); color: var(--akte-muted); }
#hw-auftrag-modal .hw-akte-aktion:hover { border-color: color-mix(in srgb, var(--akte-blue) 35%, var(--akte-border)); background: var(--akte-blue-soft); color: var(--akte-blue); box-shadow: none; transform: none; }
#hw-auftrag-modal .hw-akte-aktion:hover > span { transform: none; }
#hw-auftrag-modal .hw-akte-einstiege { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
#hw-auftrag-modal .hw-akte-einstieg { min-width: 0; padding: 18px; gap: 8px 12px; border-color: var(--akte-border); border-radius: 12px; background: var(--akte-surface); }
#hw-auftrag-modal .hw-akte-einstieg-icon { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }
#hw-auftrag-modal .hw-akte-einstieg strong { color: var(--akte-text); font-size: 13px; font-weight: 600; line-height: 1.5; }
#hw-auftrag-modal .hw-akte-einstieg p { margin-top: 5px; color: var(--akte-muted); font-size: 12px; line-height: 1.6; }
#hw-auftrag-modal .hw-akte-einstieg .hw-btn { max-width: 100%; min-height: 36px; margin-top: 4px; padding: 7px 10px; border-color: transparent; color: var(--akte-blue); background: var(--akte-blue-soft); box-shadow: none; font-size: 11px; white-space: normal; text-align: left; }
#hw-auftrag-modal .hw-akte-einstieg .hw-btn:hover { border-color: transparent; color: var(--primary-hover); background: var(--primary-light); transform: none; box-shadow: none; }

/* Die wichtigste Aktion bleibt beim Scrollen erreichbar. */
#hw-auftrag-modal .hw-modal-footer { flex-shrink: 0; align-items: center; gap: 8px; padding: 16px 28px; border-color: var(--akte-border); background: var(--akte-surface); }
#hw-auftrag-modal .hw-btn { min-height: 40px; padding: 9px 12px; border-color: var(--akte-border); border-radius: 8px; font-size: 12px; font-weight: 500; }
#hw-auftrag-modal .hw-btn:hover { transform: none; box-shadow: none; }
#hw-auftrag-modal .hw-btn-primary { border-color: var(--akte-blue); background: var(--akte-blue); color: #fff; box-shadow: none; }
#hw-auftrag-modal .hw-btn-primary:hover { border-color: var(--primary-hover); background: var(--primary-hover); }
#hw-auftrag-modal .hw-modal-footer .hw-btn-primary { min-width: 118px; font-weight: 600; }
#hw-auftrag-modal .hw-btn-danger-soft { border-color: transparent; background: transparent; color: #c03939; }
#hw-auftrag-modal .hw-btn-danger-soft:hover { border-color: transparent; background: var(--danger-bg); color: #a52e2e; }
#hw-auftrag-modal .hw-btn-ghost { border-color: transparent; color: var(--akte-blue); background: transparent; }
#hw-auftrag-modal .hw-btn-ghost:hover { background: var(--akte-blue-soft); }

@media (max-width: 800px) {
    #hw-auftrag-modal .hw-akte-zahl { gap: 10px; padding: 16px; }
    #hw-auftrag-modal .hw-akte-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    #hw-auftrag-modal { padding: 0; align-items: flex-end; }
    #hw-auftrag-modal .hw-modal-content { max-height: 96dvh; border-radius: 16px 16px 0 0; }
    #hw-auftrag-modal .hw-modal-header { padding: 18px 16px; gap: 12px; }
    #hw-auftrag-modal .modal-title { gap: 10px; font-size: 18px; }
    #hw-auftrag-modal .hw-modal-icon { width: 36px; height: 36px; border-radius: 9px; }
    #hw-auftrag-modal .hw-modal-subtitle { font-size: 11px; }
    #hw-auftrag-modal .modal-close { width: 36px; height: 36px; }
    #hw-auftrag-modal .hw-modal-body { padding: 18px 14px 22px; }
    #hw-auftrag-modal .hw-akte-kopf { gap: 5px; margin-bottom: 14px; }
    #hw-auftrag-modal :is(.hw-akte-status, .hw-akte-chip) { padding: 5px 7px; font-size: 11px; }
    #hw-auftrag-modal .hw-akte-zahlen { margin-bottom: 18px; }
    #hw-auftrag-modal .hw-akte-zahl { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 12px; }
    #hw-auftrag-modal .hw-akte-zahl-icon { width: 30px; height: 30px; font-size: 12px; }
    #hw-auftrag-modal .hw-akte-zahl strong { font-size: 21px; }
    #hw-auftrag-modal .hw-akte-zahl small { font-size: 11px; }
    #hw-auftrag-modal .hw-akte-karte { padding: 16px; margin-bottom: 18px; }
    #hw-auftrag-modal .hw-form-grid-2 { grid-template-columns: 1fr; }
    #hw-auftrag-modal .hw-input { font-size: 16px; }
    #hw-auftrag-modal .hw-akte-aktionen, #hw-auftrag-modal .hw-akte-einstiege { grid-template-columns: 1fr; }
    #hw-auftrag-modal .hw-akte-aktion { min-height: 52px; padding: 10px 30px 10px 12px; font-size: 12px; }
    #hw-auftrag-modal .hw-akte-einstieg { padding: 16px; }
    #hw-auftrag-modal .hw-akte-karte-aktionen { width: 100%; }
    #hw-auftrag-modal .hw-akte-karte-aktionen .hw-btn { min-height: 44px; }
    #hw-auftrag-modal .hw-modal-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 14px max(12px, env(safe-area-inset-bottom)); }
    #hw-auftrag-modal .hw-modal-footer .hw-btn { justify-content: center; min-height: 44px; margin: 0; padding-inline: 8px; font-size: 11px; }
    #hw-auftrag-modal .hw-akte-links { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
    #hw-auftrag-modal, #hw-auftrag-modal .hw-modal-content, #hw-auftrag-modal .hw-akte-blitz { animation: none; transition: none; }
}