/* ============================================================================
   Text2Motion v2 — MTM-UAS Kopf · Auswertung · Leiste · Faktor · WS   ·  v5
   ----------------------------------------------------------------------------
   NACH text2motion_v2_uas-editor.css einbinden.

    1. Ergebnisleiste   ·  2. Leiste          ·  3. Auswertung
    4. Analysekopf      ·  5. Kode-Lineal     ·  6. Prozessdefinition
    7. Faktor           ·  8. Wertschöpfung   ·  9. Dialog
   10. Tabellenbreiten  · 11. Vollbild        · 12. Schmale Geräte  · 13. Druck
   ============================================================================ */

/* ============================================================================
   1) ERGEBNISLEISTE
   text2motion_v2.css stapelt die Leiste ab 720 px in drei Reihen
   (flex-direction: column + .tm-result-slot { order: 3; flex-basis: 100% }).
   Das kostet auf dem Handy die halbe Höhe. Hier bleibt alles in einer Zeile,
   die Werkzeugleiste regelt den Platz über ihr Überlauf-Menü.
   ============================================================================ */
.tm-stage-result .tm-result-bar {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
}

.tm-stage-result .tm-result-slot {
    order: 0;
    flex: 1 1 auto;
    flex-basis: auto;
    min-width: 0;
}

.tm-stage-result .tm-result-tools {
    order: 0;
    margin-left: 0;
    flex: 0 0 auto;
}

/* MTMmotion® und MTM-UAS® dürfen nie umbrechen — das ® gehört zur Marke */
.tm-seg-btn {
    white-space: nowrap;
    min-width: 0;
}

.tm-segmented {
    flex: 0 0 auto;
}

/* ============================================================================
   2) LEISTE
   ============================================================================ */
.tm-uh-headgrp {
    flex: 0 0 auto;
    gap: 2px;
}

.tm-uh-headbtn .tm-uh-caret {
    flex: 0 0 auto;
    font-size: 9.5px;
    transition: transform .18s var(--tm-ease);
}

.tm-uh-headbtn:not(.is-on) .tm-uh-caret {
    transform: rotate(-90deg);
}

.tm-uh-headbtn.is-on,
.tm-uh-evalbtn.is-on {
    background: var(--tm-primary-tint);
    border-color: color-mix(in oklab, var(--tm-primary) 30%, transparent);
    color: var(--tm-primary);
}

.tm-uh-headbtn.is-on .tm-uh-caret {
    color: var(--tm-primary);
}

.tm-uh-hlabel {
    white-space: nowrap;
}

/* Punkt am Schalter, sobald ein Kode gesetzt ist — zeigt „hier steht
   etwas", ohne den Kode abgeschnitten anzureißen */
.tm-uh-headbtn.has-kode .tm-uh-hlabel::after {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--tm-primary);
    vertical-align: middle;
}

.tm-uh-htyp {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--tm-text-muted);
    line-height: 1;
}

.tm-uh-headbtn.is-on .tm-uh-htyp {
    background: var(--tm-surface);
    border-color: color-mix(in oklab, var(--tm-primary) 30%, transparent);
    color: var(--tm-primary);
}

/* Auswertungs-Schalter mit Mini-Balken: zeigt die Verteilung auch dann,
   wenn die Auswertung zugeklappt ist */
.tm-uh-evalbtn {
    gap: 7px;
}

.tm-uh-evmini {
    display: inline-flex;
    width: 30px;
    height: 7px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--tm-border-soft);
    flex: 0 0 auto;
}

.tm-uh-evmini i {
    display: block;
    width: var(--w, 0%);
    background: var(--vs, #94a3b8);
}

.tm-uh-evlabel {
    font-variant-numeric: tabular-nums;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
}

/* — Überlauf-Menü, optisch wie das Info-Menü im Header — */
.tm-uh-morewrap {
    position: relative;
    display: inline-flex;
}

.tm-uh-morewrap[hidden] {
    display: none;
}

.tm-uh-morebtn {
    padding: 0;
    width: 30px;
    justify-content: center;
}

.tm-uh-moremenu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 232px;
    padding: 6px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius, 12px);
    box-shadow: var(--tm-shadow-lg);
    z-index: 30;
    transform-origin: top right;
    animation: tm-menu-in .18s var(--tm-ease);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tm-uh-moremenu[hidden] {
    display: none;
}

.tm-uh-moremenu .tm-uas-tbtn {
    width: 100%;
    height: 34px;
    justify-content: flex-start;
    gap: 12px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 500;
}

.tm-uh-moremenu .tm-uas-tbtn i {
    width: 16px;
    text-align: center;
    flex: 0 0 16px;
    font-size: 13px;
}

.tm-uh-moremenu .tm-uas-tbtn:hover:not(:disabled) {
    background: var(--tm-surface-2);
    border-color: transparent;
}

.tm-uh-moremenu .tm-uas-tbtn:hover:not(:disabled) i {
    color: var(--tm-primary);
}

.tm-uh-mlabel {
    display: none;
}

.tm-uh-moremenu .tm-uh-mlabel {
    display: inline;
}

.tm-uh-moremenu .tm-uas-tbtn>span:not(.tm-uh-mlabel) {
    display: none;
}

.tm-uh-moremenu .tm-uas-unit,
.tm-uh-moremenu .tm-uas-zoom {
    width: 100%;
    margin: 3px 0;
}

.tm-uh-moremenu .tm-uas-unit-btn {
    flex: 1 1 0;
    padding: 6px 10px;
}

.tm-uh-moremenu .tm-uas-zoom .tm-uas-tbtn {
    width: auto;
    flex: 1 1 0;
    justify-content: center;
    height: 30px;
}

/* Spaltenliste klappt im Menü direkt auf, statt ein zweites Menü zu öffnen */
.tm-uh-moremenu .tm-uas-menu-wrap {
    width: 100%;
    display: block;
    position: static;
}

.tm-uh-moremenu .tm-uas-menu-wrap>.tm-uas-tbtn {
    display: none;
}

.tm-uh-moremenu .tm-uas-menu-wrap .tm-uas-menu {
    position: static;
    display: block !important;
    box-shadow: none;
    border: 0;
    padding: 2px 0 0;
    min-width: 0;
    background: transparent;
    animation: none;
}

.tm-uh-moremenu .tm-uas-menu[hidden] {
    display: block !important;
}

.tm-uh-moremenu .tm-uas-menu-h {
    padding: 8px 8px 4px;
}

.tm-uh-inmenu {
    flex: 0 0 auto;
}

#uasToolbar .tm-uas-grp[hidden] {
    display: none;
}

/* ============================================================================
   3) AUSWERTUNG
   Ein durchgehender Balken beantwortet die Kernfrage — wie viel der Zeit
   ist wertschöpfend — ohne dass man eine Legende lesen muss. Jeder
   Abschnitt ist zugleich Filter.
   ============================================================================ */
.tm-ev {
    margin-bottom: 10px;
    padding: 10px 12px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-uas-radius, 12px);
    box-shadow: var(--tm-shadow-sm);
}

.tm-ev.is-collapsed {
    display: none;
}

.tm-ev-bar-wrap {
    padding: 1px;
    border-radius: 8px;
    background: var(--tm-surface-2);
}

.tm-ev-bar {
    display: flex;
    height: 26px;
    border-radius: 7px;
    overflow: hidden;
    gap: 1px;
}

.tm-ev-seg {
    width: var(--w, 0%);
    min-width: 3px;
    border: 0;
    padding: 0;
    background: var(--vs, #94a3b8);
    color: #fff;
    font: inherit;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity .16s var(--tm-ease), filter .16s var(--tm-ease);
}

.tm-ev-seg:hover {
    filter: brightness(1.12);
}

.tm-ev-seg.is-dim {
    opacity: .26;
}

.tm-ev-seg.is-on {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .85);
}

.tm-ev-seg-pct {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    pointer-events: none;
}

.tm-ev-empty {
    width: 100%;
    height: 26px;
    border-radius: 7px;
    background: repeating-linear-gradient(45deg, var(--tm-surface-2) 0 6px, var(--tm-border-soft) 6px 12px);
}

/* — Legende — */
.tm-ev-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 8px;
}

.tm-ev-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 26px;
    padding: 0 9px;
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    background: var(--tm-surface-2);
    color: var(--tm-text);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s var(--tm-ease), border-color .14s var(--tm-ease);
}

.tm-ev-chip:hover {
    background: var(--tm-surface);
    border-color: color-mix(in oklab, var(--vs) 45%, var(--tm-border));
}

.tm-ev-chip.is-on {
    border-color: var(--vs);
    background: color-mix(in oklab, var(--vs) 12%, var(--tm-surface));
}

.tm-ev-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background: var(--vs, #94a3b8);
    flex: 0 0 auto;
}

.tm-ev-chip-l {
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-ev-chip-p {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.tm-ev-chip-t {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10.5px;
    color: var(--tm-text-muted);
    font-variant-numeric: tabular-nums;
}

.tm-ev-total {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    padding: 0 4px 0 10px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tm-ev-total-l {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tm-text-soft);
}

.tm-ev-total b {
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-text);
}

.tm-ev-total i {
    font-style: normal;
    font-size: 10.5px;
    color: var(--tm-text-muted);
}

.tm-ev-total-n {
    font-size: 10.5px;
    color: var(--tm-text-soft);
}

.tm-ev-manage {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    background: var(--tm-surface-2);
    color: var(--tm-text-muted);
    cursor: pointer;
    font-size: 11px;
    flex: 0 0 auto;
}

.tm-ev-manage:hover {
    background: var(--tm-surface);
    color: var(--tm-text);
}

.tm-ev-hint {
    font-size: 11.5px;
    color: var(--tm-text-soft);
}

/* Gefilterte Zeilen ausblenden. Die Summe bleibt die Gesamtsumme —
   die gefilterte Zeit steht in der Legende. */
.tm-uas-editable-table tbody tr.tm-uas-filtered {
    display: none;
}

.tm-uas-wrap.is-filtered {
    box-shadow: var(--tm-shadow-sm), inset 0 0 0 2px color-mix(in oklab, var(--tm-primary) 22%, transparent);
}

/* ============================================================================
   4) ANALYSEKOPF
   ============================================================================ */
.tm-uh {
    margin-bottom: 12px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-uas-radius, 12px);
    box-shadow: var(--tm-shadow-sm);
    overflow: hidden;
}

.tm-uh.is-collapsed {
    display: none;
}

.tm-uh-body {
    padding: 2px 14px 14px;
}

.tm-uh-sec+.tm-uh-sec {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px dashed var(--tm-border-soft);
}

.tm-uh-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0 10px;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tm-text-soft);
}

.tm-uh-linkbtn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--tm-primary);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
}

.tm-uh-linkbtn:hover {
    background: var(--tm-primary-tint);
    border-color: color-mix(in oklab, var(--tm-primary) 24%, transparent);
}

.tm-uh-linkbtn i {
    font-size: 10px;
}

.tm-uh-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 12px;
    padding-top: 12px;
}

.tm-uh-col-kode {
    grid-column: span 4;
}

.tm-uh-col-name {
    grid-column: span 4;
}

.tm-uh-col-typ {
    grid-column: span 3;
}

.tm-uh-col-sys {
    grid-column: span 1;
}

.tm-uh-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.tm-uh-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--tm-text-muted);
    line-height: 1.2;
    min-height: 16px;
}

.tm-uh-req {
    color: var(--tm-danger);
    font-weight: 700;
}

.tm-uh-mini {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 1px 6px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--tm-primary);
    font: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.tm-uh-mini:hover {
    background: var(--tm-primary-tint);
}

.tm-uh-mini[hidden] {
    display: none;
}

.tm-uh-input {
    width: 100%;
    padding: 7px 10px;
    font: inherit;
    font-size: 13px;
    color: var(--tm-text);
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    outline: none;
    transition: background .12s var(--tm-ease), border-color .12s var(--tm-ease), box-shadow .12s var(--tm-ease);
}

.tm-uh-input::placeholder {
    color: var(--tm-text-soft);
}

.tm-uh-input:hover {
    border-color: color-mix(in oklab, var(--tm-border) 60%, var(--tm-text-soft) 40%);
}

.tm-uh-input:focus {
    background: var(--tm-surface);
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-tint);
}

.tm-uh-input.is-missing {
    border-color: color-mix(in oklab, var(--tm-danger) 42%, var(--tm-border));
}

.tm-uh-input.is-missing:focus {
    border-color: var(--tm-danger);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.tm-uh-types {
    display: flex;
    gap: 2px;
    padding: 2px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 8px;
}

.tm-uh-type {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    flex: 1 1 0;
    min-width: 0;
    height: 32px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tm-text-muted);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    transition: background .14s var(--tm-ease), color .14s var(--tm-ease);
}

.tm-uh-type:hover {
    background: var(--tm-surface);
    color: var(--tm-text);
}

.tm-uh-type.is-on {
    background: var(--tm-surface);
    color: var(--tm-primary);
    box-shadow: var(--tm-shadow-sm);
}

.tm-uh-type-k {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 700;
    font-size: 11px;
    flex: 0 0 auto;
}

.tm-uh-type.is-on .tm-uh-type-k {
    color: var(--tm-primary);
}

.tm-uh-type-l {
    overflow: hidden;
    text-overflow: ellipsis;
}

.tm-uh-locked {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 10px;
    border: 1px dashed var(--tm-border);
    border-radius: 7px;
    color: var(--tm-text-muted);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
}

.tm-uh-locked i {
    font-size: 9.5px;
    opacity: .55;
    flex: 0 0 auto;
}

.tm-uh-locked span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ============================================================================
   5) KODE-LINEAL
   Das Feld ist dicktengleich gesetzt, deshalb entspricht 1ch genau einer
   Zeichenbreite. Lineal und Feld teilen Schrift, Schriftgrad und linken
   Innenabstand — nur so stehen Marke und Zeichen übereinander.
   ============================================================================ */
.tm-uh-kode-wrap {
    position: relative;
}

.tm-uh-input-kode {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    padding-bottom: 6px;
}

.tm-uh-ruler {
    position: relative;
    margin-top: 2px;
    padding: 2px 10px 0;
    overflow: hidden;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1;
    user-select: none;
    pointer-events: none;
}

.tm-uh-ruler-ticks,
.tm-uh-ruler-nums {
    display: flex;
    white-space: pre;
}

.tm-uh-ruler-ticks i,
.tm-uh-ruler-nums i {
    flex: 0 0 1ch;
    width: 1ch;
    text-align: center;
    font-style: normal;
    display: inline-block;
}

.tm-uh-ruler-ticks {
    color: var(--tm-border);
    font-size: 11px;
    height: 11px;
}

.tm-uh-ruler-ticks i.is-five {
    color: var(--tm-text-soft);
}

.tm-uh-ruler-ticks i.is-ten {
    color: var(--tm-text-muted);
    font-weight: 700;
}

.tm-uh-ruler-ticks i.is-active {
    color: var(--tm-primary);
    opacity: .9;
}

.tm-uh-ruler-nums {
    margin-top: 1px;
    color: var(--tm-text-soft);
    font-size: 8.5px;
    height: 10px;
    font-variant-numeric: tabular-nums;
}

.tm-uh-ruler-caret {
    position: absolute;
    top: 0;
    left: 10px;
    width: 1ch;
    height: 13px;
    border-left: 2px solid var(--tm-primary);
    transition: transform .08s linear, opacity .14s var(--tm-ease);
}

.tm-uh-ruler-caret.is-idle {
    opacity: 0;
}

.tm-uh-ruler-caret.is-end {
    border-left-color: var(--tm-danger);
}

.tm-uh-kmeta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-weight: 500;
    font-size: 10px;
    color: var(--tm-text-soft);
    font-variant-numeric: tabular-nums;
}

.tm-uh-kpos b {
    color: var(--tm-primary);
    font-weight: 700;
}

.tm-uh-klen {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--tm-text-muted);
}

.tm-uh-klen i {
    font-style: normal;
    opacity: .5;
}

.tm-uh-klen.is-tight {
    color: var(--tm-warn);
    font-weight: 700;
}

/* ============================================================================
   6) PROZESSDEFINITION · zweispaltig
   Beginn, Ende und Begrenzung sind Einzeiler, der Inhalt ist der lange
   Text. Nebeneinander füllt der Inhalt genau die Höhe der drei kurzen
   Felder — untereinander bliebe rechts eine leere Fläche und der Inhalt
   bekäme trotzdem zu wenig Platz.
   ============================================================================ */
.tm-uh-proc {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 12px 16px;
    align-items: stretch;
}

.tm-uh-proc-left {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.tm-uh-proc-right {
    display: flex;
    min-width: 0;
}

.tm-uh-field-grow {
    flex: 1 1 auto;
}

/* Das Textfeld wächst mit der linken Spalte mit, statt eine feste Höhe
   zu haben — dadurch schließen beide Spalten unten bündig ab. */
.tm-uh-area {
    flex: 1 1 auto;
    min-height: 116px;
    resize: vertical;
    line-height: 1.55;
    font-size: 12.5px;
    overflow-y: auto;
}

/* ============================================================================
   7) SPALTE FAKTOR
   Steht neben A × H und sieht bewusst gleich aus — derselbe Rechenweg,
   nur ein dritter Multiplikator.
   ============================================================================ */
.tm-uas-editable-table th[data-key="factor"],
.tm-uas-editable-table td[data-key="factor"] {
    width: 72px;
    text-align: center;
}

.tm-uas-f {
    justify-content: center;
}

.tm-uas-f .tm-uas-input-num {
    width: 100%;
    flex: 1 1 auto;
}

.tm-th-f {
    font-style: italic;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.05em;
}

/* ============================================================================
   8) SPALTE WERTSCHÖPFUNG
   Nur ein Farbpunkt: die Bezeichnung steht in der Legende der Auswertung,
   in der Zeile zählt die Zuordnung auf einen Blick.

   Setzen: Klick öffnet die Liste · Rechtsklick setzt die zuletzt genutzte
   Art · Ziehen über mehrere Punkte malt durch · Tasten 1–9.
   ============================================================================ */
.tm-uas-editable-table th[data-key="vs"],
.tm-uas-editable-table td[data-key="vs"] {
    width: 32px;
    padding-left: 3px;
    padding-right: 3px;
    text-align: center;
}

.tm-th-vs {
    font-size: .92em;
    letter-spacing: .04em;
}

.tm-uas-vscell {
    position: relative;
}

.tm-uas-vs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    transition: background .12s var(--tm-ease);
}

.tm-uas-vs:hover {
    background: var(--tm-surface-2);
}

.tm-uas-vs:hover .tm-uas-vs-dot {
    transform: scale(1.18);
}

.tm-uas-vs-dot {
    width: 11px;
    height: 11px;
    border-radius: 3.5px;
    background: var(--vs, #94a3b8);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
    transition: transform .12s var(--tm-ease);
}

.tm-uas-vs.is-none .tm-uas-vs-dot {
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--tm-border);
}

/* — Auswahl-Aufklapper — */
.tm-uas-vspop {
    position: fixed;
    z-index: 60;
    min-width: 244px;
    padding: 6px;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius, 12px);
    box-shadow: var(--tm-shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1px;
    animation: tm-menu-in .16s var(--tm-ease);
}

.tm-uas-vspop-h {
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tm-text-soft);
    padding: 5px 8px 7px;
}

.tm-uas-vsopt {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 32px;
    padding: 0 9px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tm-text);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

.tm-uas-vsopt:hover {
    background: var(--tm-surface-2);
}

.tm-uas-vsopt-l {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tm-uas-vsopt kbd {
    flex: 0 0 auto;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    color: var(--tm-text-soft);
    box-shadow: none;
}

.tm-uas-vspop-sep {
    height: 1px;
    margin: 5px 4px;
    background: var(--tm-border-soft);
}

.tm-uas-vsopt-edit {
    color: var(--tm-text-muted);
    font-size: 12.5px;
}

.tm-uas-vsopt-edit i {
    width: 12px;
    font-size: 11px;
}

/* ============================================================================
   9) DIALOG · ARTEN VERWALTEN
   ============================================================================ */
.tm-vsd-backdrop {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .42);
    backdrop-filter: blur(3px);
    animation: tm-fade-in .14s var(--tm-ease);
}

.tm-vsd {
    width: 100%;
    max-width: 520px;
    max-height: calc(100dvh - 60px);
    display: flex;
    flex-direction: column;
    background: var(--tm-surface);
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg, 16px);
    box-shadow: var(--tm-shadow-lg);
    overflow: hidden;
    animation: tm-modal-in .25s var(--tm-ease);
}

.tm-vsd-head {
    display: flex;
    align-items: center;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--tm-border-soft);
}

.tm-vsd-head h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.tm-vsd-x {
    margin-left: auto;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--tm-text-muted);
    cursor: pointer;
}

.tm-vsd-x:hover {
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

.tm-vsd-note {
    margin: 12px 16px 4px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--tm-text-muted);
}

.tm-vsd-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

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

.tm-vsd-key {
    flex: 0 0 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 10px;
    font-weight: 700;
    color: var(--tm-text-soft);
}

.tm-vsd-color {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    padding: 2px;
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    background: var(--tm-surface-2);
    cursor: pointer;
}

.tm-vsd-label {
    flex: 1 1 auto;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    font: inherit;
    font-size: 13px;
    color: var(--tm-text);
    background: var(--tm-surface-2);
    border: 1px solid var(--tm-border);
    border-radius: 7px;
    outline: none;
}

.tm-vsd-label:focus {
    background: var(--tm-surface);
    border-color: var(--tm-primary);
    box-shadow: 0 0 0 3px var(--tm-primary-tint);
}

.tm-vsd-ops {
    display: inline-flex;
    gap: 2px;
    flex: 0 0 auto;
}

.tm-vsd-op {
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tm-text-muted);
    cursor: pointer;
    font-size: 10.5px;
}

.tm-vsd-op:hover:not(:disabled) {
    background: var(--tm-surface-2);
    color: var(--tm-text);
}

.tm-vsd-op:disabled {
    opacity: .3;
    cursor: default;
}

.tm-vsd-op-del:hover {
    background: rgba(220, 38, 38, .1);
    color: var(--tm-danger);
}

.tm-vsd-op.is-warn {
    color: var(--tm-warn);
}

.tm-vsd-add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px 12px;
}

.tm-vsd-addbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 11px;
    border: 1px dashed var(--tm-border);
    border-radius: 7px;
    background: transparent;
    color: var(--tm-primary);
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.tm-vsd-addbtn:hover {
    background: var(--tm-primary-tint);
    border-style: solid;
    border-color: color-mix(in oklab, var(--tm-primary) 30%, transparent);
}

.tm-vsd-reset {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--tm-text-soft);
    font: inherit;
    font-size: 11.5px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tm-vsd-reset:hover {
    color: var(--tm-danger);
}

.tm-vsd-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--tm-border-soft);
    background: var(--tm-surface-2);
}

.tm-vsd-hint {
    font-size: 11px;
    color: var(--tm-text-soft);
    margin-right: auto;
}

.tm-vsd-btn {
    height: 34px;
    padding: 0 15px;
    border: 1px solid var(--tm-border);
    border-radius: 8px;
    background: var(--tm-surface);
    color: var(--tm-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.tm-vsd-btn:hover {
    background: var(--tm-surface-2);
}

.tm-vsd-btn-primary {
    background: var(--tm-primary);
    border-color: var(--tm-primary);
    color: #fff;
}

.tm-vsd-btn-primary:hover {
    filter: brightness(1.06);
    background: var(--tm-primary);
}

/* ============================================================================
   10) TABELLENBREITEN
   Die Beschreibung trägt den Inhalt, der Kommentar ist ein Zusatz. Vorher
   waren beide fast gleich breit — dadurch stand die Beschreibung im
   Ellipsen-Abbruch, während daneben leerer Notizraum lag.
   ============================================================================ */
.tm-uas-editable-table th[data-key="description"],
.tm-uas-editable-table td[data-key="description"] {
    width: auto;
    min-width: 220px;
}

.tm-uas-editable-table th[data-key="comment"],
.tm-uas-editable-table td[data-key="comment"] {
    width: 130px;
}

/* ============================================================================
   11) VOLLBILD
   Das Vollbild-Element ist #stageResult, nicht #viewUas — nur so kommt
   die Werkzeugleiste mit und die Tabelle bleibt bedienbar. Das JS-Modul
   lenkt den Vollbild-Knopf entsprechend um.
   ============================================================================ */
#stageResult:fullscreen {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 16px;
    background: var(--tm-bg);
    color: var(--tm-text);
    overflow: hidden;
}

#stageResult:fullscreen::backdrop {
    background: var(--tm-bg);
}

/* Die Leiste klebt nicht mehr, sie steht einfach oben — im Vollbild
   scrollt nur die Tabelle, nicht die Seite */
#stageResult:fullscreen .tm-result-bar {
    position: static;
    flex: 0 0 auto;
    margin-bottom: 10px;
    background: transparent;
    backdrop-filter: none;
    border-bottom: 1px solid var(--tm-border-soft);
}

/* Die Ansichtsumschaltung ist im Vollbild gegenstandslos — man ist
   bereits in der gewählten Ansicht. Der Platz gehört der Werkzeugleiste. */
#stageResult:fullscreen .tm-segmented {
    display: none;
}

#stageResult:fullscreen .tm-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

#stageResult:fullscreen .tm-view-uas {
    flex-direction: column;
}

#stageResult:fullscreen .tm-ev,
#stageResult:fullscreen .tm-uh {
    flex: 0 0 auto;
}

#stageResult:fullscreen .tm-uh {
    max-height: 40vh;
    overflow-y: auto;
}

#stageResult:fullscreen .tm-uas-split {
    flex: 1 1 auto;
    min-height: 0;
}

/* Im Vollbild darf die Tabelle die volle Resthöhe nutzen */
#stageResult:fullscreen .tm-uas-wrap,
#stageResult:fullscreen .tm-dc.is-docked {
    max-height: 100%;
    height: 100%;
}

#stageResult:fullscreen .tm-report-frame {
    height: 100%;
    min-height: 0;
}

/* ============================================================================
   12) SCHMALE GERÄTE
   Grundsatz: je enger, desto weniger — aber alles bleibt über das Menü
   erreichbar. Ausgeblendet wird nur, was auf dem Gerät ohnehin nicht
   bedienbar ist.
   ============================================================================ */
@media (max-width: 1180px) {
    .tm-uh-col-kode {
        grid-column: span 6;
    }

    .tm-uh-col-name {
        grid-column: span 6;
    }

    .tm-uh-col-typ {
        grid-column: span 8;
    }

    .tm-uh-col-sys {
        grid-column: span 4;
    }
}

@media (max-width: 980px) {

    /* Prozessdefinition einspaltig — nebeneinander wären beide zu schmal */
    .tm-uh-proc {
        grid-template-columns: minmax(0, 1fr);
    }

    .tm-uh-area {
        min-height: 96px;
    }
}

@media (max-width: 900px) {
    .tm-uas-toolbar {
        flex-wrap: nowrap;
    }

    .tm-ev-chip-t {
        display: none;
    }

    /* Vollbild ist auf dem Handy sinnlos — der Browser ist schon Vollbild */
    #btnFullscreen {
        display: none;
    }
}

@media (max-width: 820px) {

    .tm-uh-col-kode,
    .tm-uh-col-name,
    .tm-uh-col-typ,
    .tm-uh-col-sys {
        grid-column: 1 / -1;
    }

    .tm-uh-type-l {
        display: none;
    }

    .tm-uh-body {
        padding: 2px 10px 12px;
    }

    .tm-ev {
        padding: 8px 10px;
    }

    .tm-ev-total {
        margin-left: 0;
    }
}

@media (max-width: 620px) {

    /* Nur noch das Nötigste in der Leiste */
    .tm-uh-hlabel,
    .tm-uh-evlabel {
        display: none;
    }

    .tm-uh-headbtn,
    .tm-uh-evalbtn {
        padding: 0 8px;
    }

    .tm-uh-headbtn.has-kode .tm-uh-htyp {
        box-shadow: 0 0 0 2px var(--tm-primary-tint);
    }

    .tm-ev-legend {
        gap: 4px;
    }

    .tm-ev-chip-l {
        max-width: 104px;
    }

    .tm-uh-ruler-nums,
    .tm-uh-kpos {
        display: none;
    }

    /* Faktor braucht auf dem Handy keinen Platz — über das Menü
       jederzeit wieder einblendbar */
    .tm-uas-editable-table th[data-key="factor"],
    .tm-uas-editable-table td[data-key="factor"] {
        display: none;
    }

    .tm-uas-editable-table th[data-key="description"],
    .tm-uas-editable-table td[data-key="description"] {
        min-width: 160px;
    }
}

/* ============================================================================
   13) DRUCK
   ============================================================================ */
@media print {

    #uasToolbar,
    .tm-uh-ruler,
    .tm-ev-manage,
    .tm-uh-linkbtn,
    .tm-uh-mini {
        display: none !important;
    }

    /* Zum Drucken gehören Kopf und Auswertung dazu, auch wenn sie am
       Schirm zugeklappt sind */
    .tm-uh,
    .tm-uh.is-collapsed,
    .tm-ev,
    .tm-ev.is-collapsed {
        display: block !important;
        box-shadow: none;
        break-inside: avoid;
    }

    .tm-uh-type:not(.is-on) {
        display: none;
    }

    .tm-ev-seg {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}