.filter-bar {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: var(--space-stack);
        min-width: 0;
      }
      .orders-channel-filter {
        flex-wrap: wrap;
        max-width: 100%;
      }
      .orders-channel-filter .segmented__item {
        white-space: nowrap;
      }
      #orders > .panel > .panel__head {
        flex-wrap: wrap;
      }
      #orders > .panel > .panel__head > .filter-bar {
        flex: 1 1 auto;
      }
      /* Leere Leisten bekämen als Flex-Kinder trotzdem ihren Zwischenraum. */
      .filter-bar > :empty {
        display: none;
      }

      /* Gefahren über `grid-template-columns` 0fr → 1fr, nicht `max-width`: eine animierte Breite rechnet jedes Bild das Layout neu. */
      .add-cards {
        display: flex;
        align-items: center;
      }
      /* Abstand am Knopf statt `gap` an der Leiste: ein eingefahrener Schlitz ist null breit und nimmt ihn mit. */
      .add-card-slot {
        display: grid;
        grid-template-columns: 0fr;
        overflow: hidden;
        transition: grid-template-columns var(--motion-slow) var(--ease-out);
      }
      .add-cards.show .add-card-slot {
        grid-template-columns: 1fr;
      }
      .add-card-slot > .add-card {
        min-width: 0;
        margin-left: var(--space-stack);
        opacity: 0;
        transition: opacity var(--motion-fast) var(--ease-out);
      }
      .add-cards.show .add-card-slot > .add-card {
        opacity: 1;
      }
      .add-card {
        white-space: nowrap;
      }
      .add-card svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
        flex: none;
      }
      .add-card .plus {
        color: var(--muted-foreground);
      }

      .active-chips {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
      }
      .active-chips .chip {
        cursor: pointer;
        font: inherit;
        font-size: var(--text-1);
      }
      .active-chips .chip:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      .active-chips .chip svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
      }
      .chip-group {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        border-radius: var(--radius-pill);
        background: var(--accent-surface);
      }
      .chip-group .chip {
        border-radius: var(--radius-pill) 0 0 var(--radius-pill);
      }
      .chip-group .chip__remove {
        display: inline-grid;
        place-items: center;
        width: var(--control-md);
        height: var(--control-md);
        padding: 0;
        border: 0;
        border-radius: 0 var(--radius-pill) var(--radius-pill) 0;
        background: transparent;
        color: var(--accent-text);
        cursor: pointer;
      }
      .chip-group .chip__remove:hover,
      .chip-group .chip__remove:focus-visible {
        background: var(--surface-hover);
      }
      .chip-group .chip__remove svg {
        width: 12px;
        height: 12px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2.4;
        stroke-linecap: round;
      }

      /* Von Hand fixiert positioniert, damit kein `overflow` des Kartenkopfs ihn abschneidet. */
      .dim-pop {
        position: fixed;
        z-index: 60;
        display: none;
        /* 360: die vier Statuswörter brauchen zusammen 290 px, dazu Polsterung und Abstände. */
        width: 360px;
        padding: var(--space-group);
        background: var(--popover);
        border: 0;
        border-radius: var(--radius-2);
        box-shadow: var(--shadow-float);
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .dim-pop.open {
        display: block;
      }
      .dim-pop::-webkit-scrollbar {
        width: 8px;
      }
      .dim-pop::-webkit-scrollbar-thumb {
        background: var(--border);
        border-radius: var(--radius-1);
      }
      /* Knöpfe so breit wie ihr Wort: ein Segment hat feste Höhe, eine umbrechende Beschriftung liefe heraus. */
      .dim-pop .segmented {
        display: flex;
        flex-wrap: wrap;
      }
      .dim-pop .segmented__item {
        flex: 0 1 auto;
        justify-content: center;
        white-space: nowrap;
      }

      .cal--inline {
        position: static;
        z-index: auto;
        width: auto;
        margin-top: var(--space-inset);
        padding: 0;
        background: none;
        box-shadow: none;
      }
      .cal__day--range {
        background: var(--accent-surface);
        border-radius: 0;
      }
      .cal__day--start {
        border-radius: var(--radius-2) 0 0 var(--radius-2);
      }
      .cal__day--end {
        border-radius: 0 var(--radius-2) var(--radius-2) 0;
      }
      .cal__foot {
        display: block;
        text-align: center;
        color: var(--muted-foreground);
        font-size: var(--text-1);
        line-height: var(--leading-1);
        font-variant-numeric: tabular-nums;
      }

      /* Im Fluss statt schwebend, sonst schneidet der Scroll des Editors sie ab. */
      .dropdown__pop--inline {
        position: static;
        display: none;
        min-width: 0;
        max-height: 180px;
        margin-top: var(--space-stack);
        box-shadow: none;
        background: var(--surface-hover);
      }
      .dropdown__pop--inline.open {
        display: block;
      }

      /* Mitbenutzt von `js/pages/glossar.js`. */
      .row-acts {
        display: flex;
        gap: var(--space-stack);
        justify-content: flex-end;
        opacity: 0;
        transition: opacity var(--motion-fast);
      }
      .clickrow:hover .row-acts,
      .clickrow:focus-within .row-acts,
      .clickrow.open .row-acts {
        opacity: 1;
      }
      .clickrow:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: -2px;
      }
      @media (hover: none) {
        .row-acts {
          opacity: 1;
        }
      }
      .row-act {
        display: inline-grid;
        place-items: center;
        width: var(--control-md);
        height: var(--control-md);
        padding: 0;
        border: 0;
        border-radius: var(--radius-2);
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
        transition:
          background var(--motion-fast),
          color var(--motion-fast);
      }
      .row-act svg {
        width: 15px;
        height: 15px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .row-act:hover {
        background: var(--surface-hover);
        color: var(--foreground);
      }
      .row-act:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      .row-act.submit {
        background: var(--primary);
        color: var(--primary-foreground);
      }
      .row-act.submit:hover {
        background: var(--primary-hover);
        color: var(--primary-foreground);
      }
      .row-act.retry {
        color: var(--danger-foreground);
      }
      .row-act.retry:hover {
        background: var(--surface-active);
        color: var(--danger-foreground);
      }
      .row-act:disabled,
      .btn:disabled {
        opacity: 0.5;
        cursor: wait;
        pointer-events: none;
      }
      /* Sonst verschwindet der ausgegraute Knopf unter dem Zeiger. */
      .row-acts:has(.row-act:disabled) {
        opacity: 1;
      }

      tr.clickrow {
        cursor: pointer;
        transition: background var(--motion-fast);
      }
      tr.clickrow.open {
        background: var(--surface-active);
      }
      .chev {
        display: inline-block;
        margin-right: var(--space-stack);
        color: var(--muted-foreground);
        font-size: var(--text-0);
        transition: transform var(--motion-base) var(--ease-out);
      }
      tr.clickrow.open .chev,
      .sc-head.open .chev {
        transform: rotate(90deg);
        color: var(--accent-text);
      }
      .sc-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-inset) 0;
        border-bottom: 1px solid var(--border-subtle);
        cursor: pointer;
        transition: background var(--motion-fast);
      }
      .sc-head:hover {
        background: var(--surface-hover);
      }
      .sc-detail {
        padding: 0 0 var(--space-group);
      }

      .acc {
        container-type: inline-size;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-inline) 0;
        align-items: stretch;
      }
      .det-products {
        padding-right: var(--space-page);
      }
      .det-meta {
        display: flex;
        flex-direction: column;
        padding-left: var(--space-page);
        border-left: 1px solid var(--border-subtle);
      }
      .det-footer {
        grid-column: 1 / -1;
      }
      .acc .det-meta .meta-acts {
        margin-top: auto;
        min-height: 42px;
        padding-top: var(--space-inline);
        align-items: center;
      }
      .acc .transcript {
        grid-column: 1 / -1;
      }

      /* Jede Zeile so hoch wie eine Produktzeile, damit Wert N neben Produktzeile N liegt. Mitbenutzt von `js/domains/campaigns.js`. */
      .mfield {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--space-inset);
        min-height: 48px;
      }
      .mlabel {
        flex: none;
        width: 92px;
        /* Lange Wörter trennen nur an der gesetzten Stelle (­ im Label),
           sonst bricht break-word als Netz, statt in den Wert zu laufen. */
        overflow-wrap: break-word;
        hyphens: manual;
        font-size: var(--text-0);
        line-height: var(--leading-0);
        letter-spacing: var(--tracking-0);
        text-transform: uppercase;
        color: var(--muted-foreground);
        font-weight: var(--weight-semibold);
      }
      .mval {
        flex: 1;
        min-width: 0;
        font-size: var(--text-2);
        line-height: var(--leading-2);
        color: var(--foreground);
      }
      .mval.order-error {
        color: var(--danger-foreground);
        font-weight: var(--weight-semibold);
      }
      .mfield .input {
        flex: 1;
        min-width: 0;
      }

      /* Spaltenbreiten als Variablen, weil `.pline-note` daraus denselben Einzug rechnet. */
      .acc .edit-lines,
      .acc .det-products {
        --sp-menge: 40px;
        --sp-einheit: 34px;
        --sp-nummer: 52px;
      }
      .acc .pline {
        display: flex;
        align-items: center;
        gap: var(--space-inset);
        min-height: 40px;
        padding: var(--space-inline) 0;
      }
      .acc .qin {
        width: 88px;
        padding-inline: var(--space-stack);
        flex: none;
        text-align: center;
        font-variant-numeric: tabular-nums;
      }
      .acc .pq {
        width: var(--sp-menge);
        flex: none;
        text-align: right;
        color: var(--muted-foreground);
        font-variant-numeric: tabular-nums;
      }
      .acc .pu {
        width: var(--sp-einheit);
        flex: none;
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }

      .acc .pnr {
        width: var(--sp-nummer);
        flex: none;
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .acc .pn {
        flex: 1;
        min-width: 0;
        font-weight: var(--weight-medium);
      }
      .acc .pe,
      .acc .pt {
        flex: none;
        text-align: right;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
      }
      .acc .pe {
        width: 132px;
        color: var(--muted-foreground);
        font-size: var(--text-1);
      }
      .acc .pt {
        width: 96px;
      }
      .acc .ptotal {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: var(--space-inset);
        margin-top: var(--space-inline);
        padding-top: var(--space-inline);
        border-top: 1px solid var(--border-subtle);
      }
      .acc .ptotal .mlabel {
        width: auto;
      }
      .acc .ptotal .pt {
        font-weight: var(--weight-semibold);
      }
      .acc.editing .ptotal {
        padding-right: calc(var(--control-sm) + var(--space-inset));
      }
      .acc .pline-note {
        padding-left: calc(
          var(--sp-menge) + var(--sp-einheit) + var(--sp-nummer) +
            3 * var(--space-inset)
        );
        padding-bottom: var(--space-inline);
        font-size: var(--text-1);
        line-height: var(--leading-1);
        color: var(--muted-foreground);
      }
      .acc .pline-note--bemerkung {
        color: var(--warning-foreground);
      }
      .acc .pline-note--warnung {
        color: var(--danger-foreground);
        font-weight: var(--weight-semibold);
      }

      .acc .acts {
        display: flex;
        gap: var(--space-section);
        margin-top: var(--space-group);
      }
      .acc .det-footer {
        flex-wrap: wrap;
      }
      .acc .det-footer .field__error {
        flex-basis: 100%;
      }
      .acc .acts button,
      .acc .acts a {
        display: inline-flex;
        align-items: center;
        gap: var(--space-inline);
        padding: 0;
        border: none;
        background: none;
        font: inherit;
        font-size: var(--text-1);
        line-height: var(--leading-1);
        font-weight: var(--weight-semibold);
        color: var(--muted-foreground);
        cursor: pointer;
        text-decoration: none;
        transition: color var(--motion-fast);
        min-height: var(--control-sm);
      }
      .acc .acts button:hover,
      .acc .acts a:hover {
        color: var(--accent-text);
      }
      .acc .acts button:focus-visible,
      .acc .acts a:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      .acc .acts button.save {
        color: var(--accent-text);
      }
      .acc .acts svg {
        width: 15px;
        height: 15px;
        stroke: currentColor;
        stroke-width: 1.6;
        fill: none;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .acc .transcript {
        display: none;
        margin-top: var(--space-inset);
        padding: var(--space-inset) var(--space-group);
        background: var(--surface);
        border-radius: var(--radius-2);
        font-size: var(--text-1);
        line-height: 1.7;
        max-height: 280px;
        overflow-y: auto;
        white-space: pre-wrap;
      }
      .acc .transcript.show {
        display: block;
      }

      /* Entfernen erscheint auch bei Fokus und ohne Zeiger, sonst fehlt es für die Tastatur. */
      .acc .pline .pn-select {
        flex: 1;
        min-width: 0;
      }
      .acc .pline .dropdown:has(.unit-select) {
        width: 92px;
        flex: none;
      }
      .acc .pline--new .dropdown:has(.pn-select) {
        flex: 1;
        min-width: 0;
      }
      .acc .line-rm {
        display: inline-grid;
        place-items: center;
        width: var(--control-sm);
        height: var(--control-sm);
        flex: none;
        padding: 0;
        border: none;
        border-radius: var(--radius-2);
        background: none;
        color: var(--muted-foreground);
        cursor: pointer;
        opacity: 0;
        transition:
          opacity var(--motion-fast),
          background var(--motion-fast),
          color var(--motion-fast);
      }
      .acc .pline:hover .line-rm,
      .acc .pline:focus-within .line-rm,
      .acc .line-rm:focus-visible {
        opacity: 1;
      }
      @media (hover: none) {
        .acc .line-rm {
          opacity: 1;
        }
      }
      .acc .line-rm:hover {
        background: var(--surface-active);
        color: var(--danger-foreground);
      }
      .acc .line-rm:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }
      .acc .line-rm svg {
        width: 14px;
        height: 14px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
      .acc .add-line {
        padding: var(--space-inset) 0 var(--space-inline);
        border: none;
        background: none;
        color: var(--accent-text);
        font: inherit;
        font-size: var(--text-1);
        line-height: var(--leading-1);
        font-weight: var(--weight-semibold);
        cursor: pointer;
      }
      .acc .add-line:hover {
        text-decoration: underline;
      }
      .acc .add-line:focus-visible {
        outline: 2px solid var(--ring);
        outline-offset: 2px;
      }

      @container (max-width: 1000px) {
        .acc > .det-products,
        .acc > .det-meta {
          grid-column: 1 / -1;
        }
        .acc > .det-products {
          padding-right: 0;
        }
        .acc > .det-meta {
          padding: var(--space-group) 0 0;
          border-left: 0;
          border-top: 1px solid var(--border-subtle);
        }
      }

      @media (max-width: 1000px) {
        .acc {
          grid-template-columns: minmax(0, 1fr);
          gap: var(--space-group);
        }
        .det-products {
          padding-right: 0;
        }
        .det-meta {
          padding-top: var(--space-group);
          padding-left: 0;
          border-top: 1px solid var(--border-subtle);
          border-left: 0;
        }
      }

      @media (max-width: 760px) {
        /* `display: contents` legt die Kinder der Filterleiste ins Kopf-Raster und behält IDs und Handler. */
        #orders > .panel > .panel__head {
          display: grid;
          grid-template-columns: minmax(0, 1fr) auto;
          align-items: start;
          gap: var(--space-stack);
        }
        #orders > .panel > .panel__head > .filter-bar {
          display: contents;
        }
        #orders > .panel > .panel__head > .filter-bar > #filter-btn {
          grid-column: 1;
          grid-row: 1;
          justify-self: start;
        }
        #orders > .panel > .panel__head > .filter-bar > .orders-channel-filter {
          grid-column: 1 / -1;
          grid-row: 2;
          width: 100%;
          justify-content: flex-start;
        }
        #orders > .panel > .panel__head > .btn {
          grid-column: 2;
          grid-row: 1;
          margin: 0;
          white-space: nowrap;
        }
        #orders > .panel > .panel__head > .filter-bar > .active-chips,
        #orders > .panel > .panel__head > .filter-bar > .add-cards {
          grid-column: 1 / -1;
          grid-row: 3;
          min-width: 0;
        }
        .det-products {
          overflow-x: auto;
        }
        .acc .edit-lines,
        .acc .add-line,
        .acc .ptotal {
          min-width: 800px;
        }
      }

      /* Ein Gerüststrich in einer Zelle ist ein Block — inline hätte er keine
         Höhe und wäre unsichtbar. */
      td > .skeleton {
        display: block;
      }
      .tbl-wrap .table td[colspan] {
        white-space: normal;
      }
      /* Die gemeinsame Tabellenregel gibt jeder Tabelle eine max-content-Breite; die Zustandszeile darf dadurch nicht breiter als das Fenster werden. */
      .orders-table:has(.orders-state-cell) {
        width: 100%;
        min-width: 0;
        table-layout: fixed;
      }
      .orders-state-cell {
        min-width: 0;
        width: 100%;
      }
      .orders-state-cell .state {
        width: 100%;
        min-width: 0;
      }
      .orders-state-cell .state__text {
        max-width: 100%;
        overflow-wrap: anywhere;
      }
      @media (max-width: 760px) {
        .orders-table:has(.orders-state-cell) {
          display: table;
          white-space: normal;
        }
      }
      .det-products > .field__error {
        display: block;
        margin-top: var(--space-stack);
      }

      .modal-overlay {
        position: fixed;
        inset: 0;
        z-index: 100;
        display: none;
        justify-content: center;
        padding: var(--space-page) var(--space-section);
        background: var(--overlay-scrim);
        overflow-y: auto;
      }
      .modal-overlay.open {
        display: flex;
      }
      /* `margin: auto` statt `align-items: center`: das kappt bei Kästen über Fensterhöhe die Oberkante. */
      .modal-overlay > .modal-box {
        margin: auto;
      }

      .no-line {
        display: flex;
        align-items: center;
        gap: var(--space-stack);
        margin-bottom: var(--space-stack);
      }
      .no-line .dropdown:first-child {
        flex: 1;
        min-width: 0;
      }
      .no-line .dropdown:has(.unit-select) {
        width: 92px;
        flex: none;
      }
      .no-line__qty {
        width: 80px;
        flex: none;
        text-align: center;
        font-variant-numeric: tabular-nums;
      }

.no-add-line {
  margin-top: var(--space-inline);
}