/* ═══════════════════════════════════════════════════════════════
   STEP2DXF — Smartphone & Touch
   ───────────────────────────────────────────────────────────────
   Ergänzt app.css, ohne das PC-Layout anzufassen. Drei Ebenen:
     1. immer:        Handy-Leiste ausgeblendet, Werkzeug-Wrapper neutral
     2. Touch-Geräte: Knöpfe, die am PC erst beim Überfahren erscheinen,
                      sind sichtbar; Zeichenflächen reagieren auf Gesten
     3. Handy-Layout: eine Spalte, Navigationsleiste unten, Liste ⇄ Ansicht
                      (mobile.js schaltet um), Dialoge vollflächig,
                      Auftrag als Karten, Tippflächen ≥ 36 px
   Die Handy-Bedingung steht identisch in mobile.js (MOBILE_MQ):
     (max-width: 760px), (max-height: 500px) and (pointer: coarse)
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Immer ── */
.m-tabbar, .m-meas-toggle { display: none; }
.vt-tools { display: contents; }          /* PC: Knöpfe bleiben direkte Leisten-Elemente */
.touch-only { display: none !important; }

/* ── 2. Touch-Geräte (Handy + Tablet) ── */
@media (hover: none) and (pointer: coarse) {
    /* am PC nur bei Hover sichtbar → auf Touch nie erreichbar gewesen */
    .part-item .dl-btn, .group-header .dl-btn, .part-item .unfold-btn,
    .del-part-btn, .dup-part-btn { opacity: 1 !important; }

    /* Zeichenflächen: Gesten gehören der Fläche (touch_bridge.js), nicht dem Browser */
    #canvasWrap, #dwgLassoCanvasWrap, #_dlOverview, #_cadWrap, #viewer3D {
        touch-action: none;
        -webkit-user-select: none; user-select: none;
        -webkit-touch-callout: none;
    }
    .touch-only { display: revert !important; }
    .mouse-only { display: none !important; }
    button, .m-tab, .part-item, .group-header, .assembly-header { -webkit-tap-highlight-color: rgba(0, 212, 255, 0.15); }
}

/* ── 3. Handy-Layout ── */
@media (max-width: 760px), (max-height: 500px) and (pointer: coarse) {
    :root {
        --header-h: 48px;
        --m-tabbar-h: 58px;
        --m-safe-b: env(safe-area-inset-bottom, 0px);
    }

    /* iOS zoomt beim Antippen von Feldern unter 16 px die ganze Seite heran */
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select, textarea { font-size: 16px !important; }
    /* Die Seite selbst scrollt nie (nur die Bereiche darin) — kein Gummiband, kein
       Wegrutschen der Leisten, kein versehentliches „Neu laden" per Herunterziehen */
    html { height: 100%; overflow: hidden; overscroll-behavior: none; }
    body { height: 100%; min-height: 0; overscroll-behavior: none; }

    /* ── Login + kleine Dialoge ── */
    .login-card { width: min(380px, calc(100vw - 28px)); padding: 30px 22px; }
    .modal-card { width: min(360px, calc(100vw - 28px)); padding: 22px 18px; }

    /* Testumgebungs-Banner: nur ein kleines Schild statt eines Streifens über dem Kopf */
    #stageBanner { font-size: 0 !important; padding: 1px 10px 2px !important; }
    #stageBanner::after { content: "\1F9EA  TEST"; font: 700 10px/1.5 var(--font); }

    /* ── Grundraster: Kopf · Inhalt · Navigationsleiste ── */
    #appShell.visible {
        width: 100%;
        height: 100vh; height: 100dvh;
        /* switchMode() setzt die Spalten inline → hier überstimmen */
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: var(--header-h) minmax(0, 1fr) calc(var(--m-tabbar-h) + var(--m-safe-b));
        grid-template-areas: "header" "content" "tabbar";
        overflow: hidden;
    }
    .platform-status, .sidebar-resize-handle { display: none !important; }
    .platform-sidebar, .platform-main {
        grid-area: content;
        min-width: 0; min-height: 0;
        border-right: none;
        transition: transform .2s ease, visibility 0s linear 0s;
    }
    /* Liste ⇄ Ansicht: beide liegen übereinander, die verdeckte gleitet hinaus.
       visibility statt display:none → Leinwände behalten ihre Größe (2D-Einpassen,
       3D-Kamera stimmen sofort) und die Scrollposition der Liste bleibt stehen. */
    #appShell.m-pane-view .platform-sidebar,
    #appShell.m-pane-list .platform-main {
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }
    #appShell.m-pane-view .platform-sidebar { transform: translateX(-100%); }
    #appShell.m-pane-list .platform-main { transform: translateX(100%); }
    /* Konstrukteur: nur der Hauptbereich (Chat), die Seitenleiste ist ohnehin zu */
    #appShell[data-m-mode="konstrukteur"] .platform-main { transform: none; visibility: visible; transition: none; }
    /* Verwaltung/Dateien: Formular oben, Tabelle darunter — beides sichtbar */
    #appShell[data-m-mode="admin"], #appShell[data-m-mode="dateien"] {
        grid-template-rows: var(--header-h) auto minmax(0, 1fr) calc(var(--m-tabbar-h) + var(--m-safe-b));
        grid-template-areas: "header" "sidebar" "main" "tabbar";
    }
    #appShell[data-m-mode="admin"] .platform-sidebar, #appShell[data-m-mode="dateien"] .platform-sidebar {
        grid-area: sidebar; transform: none; visibility: visible; transition: none;
        max-height: 42vh; overflow-y: auto; border-bottom: 1px solid var(--border);
    }
    #appShell[data-m-mode="admin"] .platform-main, #appShell[data-m-mode="dateien"] .platform-main {
        grid-area: main; transform: none; visibility: visible; transition: none;
    }

    /* ── Kopfzeile: Navigation wandert in die Leiste unten ── */
    .platform-header { padding: 0 8px 0 12px; gap: 6px; }
    .header-nav { display: none; }
    .header-brand { margin-right: auto; }
    .header-brand h1 { font-size: 1rem; }
    .user-trigger { height: 40px; padding: 4px 8px; gap: 4px; }
    .user-trigger .user-name { display: none; }
    .user-avatar { width: 28px; height: 28px; font-size: 0.75rem; }
    .admin-btn { width: 40px; height: 40px; font-size: 1.05rem; }
    #helpBtn { display: flex; }   /* .admin-btn blendet ihn sonst aus (auch am PC) */
    .user-dropdown-item { padding: 14px 16px; font-size: 0.95rem; }

    /* ── Navigationsleiste ── */
    .m-tabbar {
        grid-area: tabbar;
        display: flex;
        background: var(--bg-1);
        border-top: 1px solid var(--border);
        padding-bottom: var(--m-safe-b);
        z-index: 120;
        -webkit-user-select: none; user-select: none;
    }
    .m-tab {
        flex: 1 1 0; min-width: 0;
        position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        background: none; border: none; padding: 4px 2px;
        color: var(--text-2); font: 500 11px/1.1 var(--font);
        cursor: pointer;
    }
    .m-tab-ico { position: relative; font-size: 20px; line-height: 1; filter: grayscale(0.7); opacity: 0.75; }
    .m-tab-lbl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .m-tab.active { color: var(--accent); }
    .m-tab.active .m-tab-ico { filter: none; opacity: 1; }
    .m-tab.active::before {
        content: ""; position: absolute; top: -1px; left: 24%; right: 24%;
        height: 3px; border-radius: 0 0 3px 3px; background: var(--accent);
    }
    .m-tab-badge {
        position: absolute; top: -7px; left: 14px;
        min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
        background: #16a34a; color: #fff; font: 700 10px/18px var(--font); text-align: center;
        filter: none;
    }

    /* ── Import: die ganze Seitenleiste scrollt als EINE Liste ── */
    .sidebar-panel[data-mode="import"].active {
        overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    }
    .sidebar-panel[data-mode="import"] > .app,
    .sidebar-panel[data-mode="import"] .sidebar,
    .sidebar-panel[data-mode="import"] .sidebar-body,
    .sidebar-panel[data-mode="import"] .sidebar-bottom,
    .sidebar-panel[data-mode="import"] .tab-content.platform-active,
    .sidebar-panel[data-mode="import"] .results.show,
    .sidebar-panel[data-mode="import"] .part-list {
        flex: none; min-height: 0; height: auto !important; overflow: visible;
    }
    /* einziger Knopf dort ist „Teile / STEP“ (Bild-Modus ist ausgeblendet) */
    .sidebar-panel[data-mode="import"] .sidebar-header { display: none; }
    .sidebar-top { padding: 12px; height: auto !important; min-height: 0; overflow: visible; }
    .sidebar-hsplit { display: none; }
    .sidebar-bottom { padding: 0 10px 20px; }

    /* Hochladen: zwei große Knöpfe statt „hierher ziehen“ */
    .dropzone-compact { padding: 12px; border-style: solid; border-color: rgba(0, 212, 255, 0.3); }
    .dropzone-compact .dropzone-text { display: none; }
    .dropzone-links { display: flex; gap: 8px; margin: 0; }
    .dropzone-links .sep { display: none; }
    .dropzone-links a {
        flex: 1 1 0; display: flex; align-items: center; justify-content: center;
        min-height: 46px; padding: 8px; border-radius: 8px;
        font-size: 0.95rem; font-weight: 600; text-decoration: none !important;
    }
    #lnkPickFiles { background: var(--accent); color: var(--bg-0); }
    #lnkPickFiles::before { content: "\1F4C4\00A0"; }
    #lnkPickFolder { background: var(--bg-3); color: var(--text-1); border: 1px solid var(--border); }
    #lnkPickFolder::before { content: "\1F4C1\00A0"; }
    .dropzone-formats { margin-top: 8px; font-size: 0.75rem; }
    #btnDxfLibrary { min-height: 44px; font-size: 0.9rem !important; }
    .options { margin-top: 12px; }
    .btn { min-height: 46px; }
    /* „Einlesen“ braucht es erst, wenn eine STEP-Datei gewählt ist */
    #convertBtn:disabled { display: none; }
    .file-info .name { overflow-wrap: anywhere; }
    #jobHistorySelect { min-height: 42px; }

    /* Ergebnis-Kopf + Suche + Filter */
    .result-header { flex-wrap: wrap; gap: 6px; font-size: 0.9rem; }
    .result-header > button, .result-header > a {
        min-height: 38px; padding: 6px 10px !important; font-size: 0.8rem !important;
        display: inline-flex; align-items: center; justify-content: center;
    }
    #resultSummary { flex: 1 1 60%; }
    .search-box input { min-height: 42px; }
    .search-box button { min-width: 42px; min-height: 42px; font-size: 0.85rem !important; }
    .part-filter-chip { min-height: 34px; padding: 4px 12px !important; font-size: 0.8rem !important; }
    #assemblyBar { flex-wrap: wrap; row-gap: 6px; }
    #assemblyBar button { min-height: 38px; }

    /* Teile-Zeilen: Name bekommt eine eigene Zeile, Knöpfe fingergerecht */
    .part-list { border-radius: 10px; }
    .part-item { padding: 10px 10px; gap: 6px 8px; font-size: 0.88rem; }
    .part-item .name { flex: 1 1 60%; min-width: 55%; white-space: normal; overflow-wrap: anywhere; }
    .part-item .dims { font-size: 0.72rem; }
    .part-item .part-check { width: 22px; height: 22px; }
    .part-item button, .group-header button, .assembly-header button {
        min-width: 38px; min-height: 36px; padding: 4px 8px !important;
        font-size: 0.85rem !important; line-height: 1 !important;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 6px;
    }
    .part-item .add-to-order-btn { min-width: 44px; font-size: 1rem !important; }
    .group-header, .assembly-header { padding: 12px 10px; font-size: 0.88rem; }

    /* ── Viewer ── */
    .viewer-empty { padding: 24px; text-align: center; }
    .viewer-toolbar { padding: 6px 8px 0; gap: 6px; }
    .viewer-toolbar .part-title { flex: 1 1 0; max-width: none; font-size: 0.9rem; }
    .viewer .viewer-toolbar .viewer-dims { display: inline; flex: 0 1 auto; font-size: 0.72rem; }
    /* Werkzeuge: eigene, waagerecht wischbare Zeile — mit Beschriftung, weil es
       auf dem Handy keine Tooltips gibt */
    .vt-tools {
        display: flex; flex: 1 0 100%;
        gap: 6px; margin: 0 -8px; padding: 4px 8px 8px;
        overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; -webkit-user-select: none; user-select: none;
    }
    .vt-tools::-webkit-scrollbar, .viewer-3d-controls::-webkit-scrollbar { display: none; }
    .viewer-toolbar .vt-tools > button {
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        min-width: 60px; height: 52px; padding: 4px 6px;
        font-size: 18px; line-height: 1; border-radius: 8px;
    }
    .viewer-toolbar .vt-tools .btn-label { display: block; font-size: 10.5px; line-height: 1.1; }
    .viewer-toolbar .vt-tools #btnBendMode { margin-left: 0; }
    .vt-tools #drillDiaWrap, .vt-tools #holeDiaWrap, .vt-tools #splitFreeWrap { flex: 0 0 auto; }
    .vt-tools input[type="text"] { width: 58px !important; padding: 4px 6px !important; }

    /* Hinweise/Maße über der Zeichnung dürfen die Fläche nicht zudecken */
    /* Werkzeug-Hinweis oben statt unten — unten liegt das Maß-Panel */
    #bendModeHint {
        white-space: normal !important; width: calc(100% - 16px); text-align: center;
        top: 8px; bottom: auto !important; font-size: 11.5px !important; line-height: 1.35;
        padding: 5px 10px !important; opacity: 0.92;
    }
    #viewerMeasurements {
        max-width: calc(100% - 16px); font-size: 10.5px !important; padding: 5px 8px !important;
        bottom: 52px !important;   /* Platz für den Einklapp-Knopf darunter */
    }
    #canvasWrap.m-meas-collapsed #viewerMeasurements { display: none !important; }
    .m-meas-toggle:not([hidden]) {
        display: inline-flex; align-items: center; gap: 4px;
        position: absolute; left: 8px; bottom: 8px; z-index: 11;
        min-height: 38px; padding: 6px 12px; border-radius: 19px;
        background: rgba(14, 21, 32, 0.92); border: 1px solid var(--border);
        color: var(--text-2); font: 600 12px/1 var(--font); cursor: pointer;
    }
    .viewer-legend { bottom: 8px; right: 8px; padding: 4px 8px; font-size: 10px; }
    #canvasWrap .viewer-legend { display: none; }
    /* 3D-Bedienfelder als wischbare Leiste unten statt einer Spalte über dem Modell */
    .viewer-3d-controls {
        top: auto; bottom: 8px; left: 8px; right: 8px;
        flex-direction: row; align-items: flex-end; gap: 6px;
        max-height: none; overflow-x: auto; scrollbar-width: none;
    }
    .ctrl-group { flex: 0 0 auto; }
    .ctrl-btn { min-height: 38px; padding: 6px 10px; font-size: 0.8rem; }
    .ctrl-axis-btn { min-width: 34px; min-height: 34px; }
    #canvas3DWrap > .viewer-legend { display: none; }

    /* ── Kalkulation ── */
    #kalkSidebarContent { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
    .kalk-panel { padding: 10px 10px 24px; gap: 10px; }
    .kalk-actions { flex-wrap: wrap; gap: 6px; }
    .kalk-actions .kalk-action-btn { flex: 1 1 calc(33.33% - 6px); min-height: 44px; padding: 8px 6px; font-size: 0.8rem; }
    #calcLoadedBadge, #calcDirtyBadge {
        flex: 1 0 100%; margin-left: 0 !important; text-align: center;
        white-space: normal !important; padding: 5px 9px !important;
    }
    .kalk-section { padding: 10px; }
    .kalk-section h3 { font-size: 0.9rem; }
    .kalk-row { font-size: 0.88rem; }
    .kalk-select { min-height: 42px; }
    .kalk-action-btn { min-height: 40px; }
    .kalk-panel input[type="checkbox"], .kalk-panel input[type="radio"] { width: 20px; height: 20px; flex: 0 0 auto; }
    .kalk-panel label { line-height: 1.35; }
    #orderMetaSection input { min-height: 40px; }
    #workNumberInput { flex: 1; width: auto !important; }
    input[type="range"] { min-height: 30px; }
    .nesting-info { gap: 4px 14px; font-size: 0.8rem; }
    .cost-table { font-size: 0.82rem; }
    .cost-table td { padding: 6px 4px; }
    .cost-table td:first-child { overflow-wrap: anywhere; }

    /* Auftrag: jede Position als Karte statt 9 schmaler Spalten */
    #orderTable, #orderTable > tbody { display: block; width: 100%; }
    #orderTable > thead { display: none; }
    #orderBody > tr[data-part-idx] {
        display: grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-areas:
            "name name name name name rm"
            "mat  mat  mat  mat  mat  mat"
            "qty  qty  bend bend weld weld"
            "dims dims cut  cut  grav grav";
        gap: 8px 8px;
        margin: 0 0 10px; padding: 10px;
        background: var(--bg); border: 1px solid var(--border); border-radius: 10px;
    }
    #orderBody > tr[data-part-idx]:not([data-single]) { margin-left: 12px; border-left: 3px solid #f97316; }
    #orderBody > tr[data-part-idx] > td {
        display: block; padding: 0; border: none; min-width: 0;
        white-space: normal; overflow: visible;
    }
    #orderBody > tr[data-part-idx] > td:nth-child(1) { grid-area: name; max-width: none; font-size: 0.9rem; }
    #orderBody > tr[data-part-idx] > td:nth-child(1) > span:first-child { max-width: none !important; }
    #orderBody > tr[data-part-idx] > td:nth-child(2) { grid-area: qty; }
    #orderBody > tr[data-part-idx] > td:nth-child(3) { grid-area: mat; display: flex; gap: 6px; align-items: stretch; }
    #orderBody > tr[data-part-idx] > td:nth-child(3) > * { flex: 1 1 0; min-width: 0; margin: 0 !important; }
    #orderBody > tr[data-part-idx] > td:nth-child(4) { grid-area: dims; }
    #orderBody > tr[data-part-idx] > td:nth-child(5) { grid-area: cut; }
    #orderBody > tr[data-part-idx] > td:nth-child(6) { grid-area: grav; }
    #orderBody > tr[data-part-idx] > td:nth-child(7) { grid-area: bend; text-align: left !important; }
    #orderBody > tr[data-part-idx] > td:nth-child(8) { grid-area: weld; }
    #orderBody > tr[data-part-idx] > td:nth-child(9) { grid-area: rm; justify-self: end; align-self: start; }
    #orderBody > tr[data-part-idx] > td:nth-child(n+2):nth-child(-n+8)::before {
        display: block; margin-bottom: 3px;
        color: var(--text-dim); font: 600 10px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.04em;
    }
    #orderBody > tr[data-part-idx] > td:nth-child(2)::before { content: "Anzahl"; }
    #orderBody > tr[data-part-idx] > td:nth-child(3)::before { content: none; }
    #orderBody > tr[data-part-idx] > td:nth-child(4)::before { content: "Maße mm"; }
    #orderBody > tr[data-part-idx] > td:nth-child(5)::before { content: "Schnitt m"; }
    #orderBody > tr[data-part-idx] > td:nth-child(6)::before { content: "Gravur m"; }
    #orderBody > tr[data-part-idx] > td:nth-child(7)::before { content: "Kantungen"; }
    #orderBody > tr[data-part-idx] > td:nth-child(8)::before { content: "Schweißen min"; }
    #orderBody > tr[data-part-idx] > td:nth-child(n+4):nth-child(-n+6) { font-size: 0.85rem !important; }
    #orderBody > tr[data-part-idx] input[type="number"] {
        width: 100% !important; min-height: 40px; text-align: center;
    }
    #orderBody > tr[data-part-idx] select,
    #orderBody > tr[data-part-idx] .sel-search-input { min-height: 40px; width: 100% !important; }
    #orderBody .remove-btn, #orderBody .remove-asm-btn {
        min-width: 40px; min-height: 40px; font-size: 1.1rem;
        background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4); border-radius: 8px;
        color: var(--error);
    }
    #orderBody .walz-add-btn, #orderBody .walz-del-btn, #orderBody .dm-billed {
        font-size: 0.72rem !important; padding: 4px 8px !important; margin: 4px 4px 0 0; display: inline-flex; align-items: center;
    }
    #orderBody > tr.order-active { outline: 2px solid var(--accent); outline-offset: -1px; }
    #orderBody > tr.order-oversize > td:first-child::after { display: block; }
    /* Baugruppen-Kopf + Unterzeilen (Format, Walzzugabe) */
    #orderBody > tr.asm-header-row {
        display: grid; grid-template-columns: 90px minmax(0, 1fr) auto;
        grid-template-areas: "name name rm" "qty info info";
        gap: 8px; margin: 4px 0 8px; padding: 10px;
        background: rgba(249, 115, 22, 0.1); border-left: 3px solid #f97316; border-radius: 8px;
    }
    #orderBody > tr.asm-header-row > td { display: block; padding: 0; border: none; white-space: normal; overflow: visible; }
    #orderBody > tr.asm-header-row > td:nth-child(1) { grid-area: name; max-width: none; }
    #orderBody > tr.asm-header-row > td:nth-child(2) { grid-area: qty; }
    #orderBody > tr.asm-header-row > td:nth-child(3) { grid-area: info; line-height: 2.2; }
    #orderBody > tr.asm-header-row > td:nth-child(4) { grid-area: rm; }
    #orderBody > tr.asm-header-row input { min-height: 38px; }
    #orderBody > tr.asm-header-row .asm-qty-input { width: 100%; }
    /* Unterzeilen (eigene Tafel, Walzzugabe) hängen unten an ihrer Karte */
    #orderBody > tr[data-part-idx]:has(+ tr:is(.sub-format-row, .sub-walz-row)) {
        margin-bottom: 0; border-bottom: none; border-radius: 10px 10px 0 0;
    }
    #orderBody > tr.sub-format-row, #orderBody > tr.sub-walz-row {
        display: block; margin: 0 0 10px; padding: 0 10px 10px;
        background: var(--bg); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px;
    }
    #orderBody > tr.sub-format-row:has(+ tr:is(.sub-format-row, .sub-walz-row)) { margin-bottom: 0; border-radius: 0; }
    #orderBody > tr.sub-format-row > td, #orderBody > tr.sub-walz-row > td {
        display: block; padding: 0 !important; border: none; white-space: normal; line-height: 2.4;
    }
    #orderBody > tr.sub-format-row > td::before {
        content: "Tafel für diese Position"; display: block; line-height: 1.2; margin-bottom: 3px;
        color: var(--text-dim); font: 600 10px/1.2 var(--font); text-transform: uppercase; letter-spacing: 0.04em;
    }
    #orderBody > tr.sub-format-row select { min-height: 40px; }
    #orderBody > tr.sub-walz-row input { min-height: 36px; width: 64px !important; }

    /* Durchsuchbare Auswahlliste: fingergerechte Einträge */
    .sel-search-drop { max-height: 50vh; }
    .sel-search-opt { padding: 10px 10px; font-size: 0.95rem; white-space: normal; }

    /* ── Dialoge: vollflächig ── */
    .canvas-modal-overlay { padding: 0 !important; align-items: stretch !important; }
    .canvas-modal-overlay > .canvas-modal {
        width: 100% !important; max-width: none !important;
        height: 100%; max-height: none !important;
        border-radius: 0 !important; border: none !important;
    }
    .canvas-modal-header {
        position: sticky; top: 0; z-index: 5;
        padding: 6px 6px 6px 14px; gap: 6px; flex-wrap: wrap;
        background-color: var(--surface);
    }
    .canvas-modal-header h3 { font-size: 0.95rem; flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
    .canvas-modal-close { min-width: 44px; min-height: 44px; font-size: 1.8rem; }
    .canvas-modal .kalk-action-btn { min-height: 44px; }
    #w4aModalFooter, #libModalFooter {
        position: sticky; bottom: 0; z-index: 5;
        background: var(--surface); border-top: 1px solid var(--border);
        padding: 10px 12px calc(10px + var(--m-safe-b)) !important; flex-wrap: wrap;
    }
    #canvasModalNav { margin-left: 0 !important; }
    /* Per JS gebaute Dialog-Inhalte: Zeilen umbrechen statt über den Rand laufen */
    :is(#w4aModalBody, #w4aTargetBox, #libModalBody, #calcStoreBody, #dwgColorModalBody, #dwgViewModalBody)
        :is([style*="display:flex"], [style*="display: flex"]) { flex-wrap: wrap; }
    #w4aTargetBox { margin: 0 10px 12px !important; }
    #w4aModalBody .w4a-art-nr { flex: 1 1 150px; width: auto !important; min-height: 40px; }
    #w4aKundeName, #w4aProjektName { flex: 1 0 100%; min-width: 0 !important; }
    /* Libellula: Auftragskopf einspaltig, Teile-Tabelle waagerecht wischbar */
    #libModalBody div:has(> #libOrderCode) { grid-template-columns: minmax(0, 1fr) !important; gap: 4px !important; }
    #libModalBody div:has(> #libOrderCode) > label { margin-top: 6px; }
    #libModalBody div:has(> #libOrderCode) > :is(input, select) { width: 100%; min-width: 0; min-height: 42px; }
    #libModalBody table { display: block; overflow-x: auto; }
    /* Kalkulation laden: Listenzeilen als Karten (Name oben, Teile/Nutzer/Datum darunter) */
    #calcStoreBody table, #calcStoreBody tbody { display: block; }
    #calcStoreBody tr:first-child:not(.calc-store-row) { display: none; }   /* Kopfzeile */
    #calcStoreBody tr.calc-store-row {
        display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "name name name act" "parts owner date act";
        gap: 4px 12px; align-items: center; padding: 10px 2px;
    }
    #calcStoreBody tr.calc-store-row > td { padding: 0 !important; }
    #calcStoreBody tr.calc-store-row > td:nth-child(1) { grid-area: name; }
    #calcStoreBody tr.calc-store-row > td:nth-child(2) { grid-area: parts; }
    #calcStoreBody tr.calc-store-row > td:nth-child(2)::before { content: "Teile "; }
    #calcStoreBody tr.calc-store-row > td:nth-child(3) { grid-area: owner; }
    #calcStoreBody tr.calc-store-row > td:nth-child(4) { grid-area: date; font-size: 12px; }
    #calcStoreBody tr.calc-store-row > td:nth-child(5) { grid-area: act; display: flex; flex-direction: column; gap: 6px; }
    #calcStoreBody button { min-height: 40px; margin: 0 !important; }
    #calcStoreBody tr:not(.calc-store-row) > td { padding: 8px 4px !important; }
    #helpBody { padding: 12px 14px !important; }
    #helpBody table { display: block; overflow-x: auto; }
    #dxfLibBody { padding: 0 10px !important; }
    div:has(> #dxfLibSearch) { flex-wrap: wrap; }
    #dxfLibCount { flex: 1 0 100%; white-space: normal !important; }
    /* DWG: Layer-Zuordnung untereinander statt 5 Spalten */
    .dwg-layer-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .dwg-layer-preview { height: 180px; }
    .dwg-layer-color { justify-self: start; }
    #dwgInspectGrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; padding: 8px !important; }
    /* DWG: Bauteile markieren — Zeichnung oben, Liste darunter */
    .dwg-lasso-body { flex-direction: column !important; }
    #dwgLassoCanvasWrap { min-height: 44vh; }
    div:has(> #dwgLassoZoomOut), div:has(> #dwgInspectSelectAll) { flex-wrap: wrap; }
    #dwgLassoFullscreen { display: none; }   /* Dialog ist hier schon vollflächig; iPhone kennt kein Element-Vollbild */
    .dwg-lasso-side { width: auto !important; max-height: 34vh; border-left: none !important; border-top: 1px solid var(--surface2); }
    /* DWG: Layer-Auswahl (per JS gebaut, feste Mindestbreite 640 px) */
    div:has(> div > #_dlOverview) {
        width: 100vw !important; min-width: 0 !important; max-width: none !important;
        height: 100dvh !important; min-height: 0 !important; max-height: none !important;
        border-radius: 0 !important; resize: none !important;
    }
    div:has(> #_dlOverview) { flex-direction: column !important; }
    #_dlOverview { flex: 0 0 38vh !important; border-right: none !important; border-bottom: 1px solid #34343c; }
    #_dlGrid { min-width: 0 !important; }
    #_cadSelPanel { width: min(232px, 60vw) !important; }

    /* ── Meldungen über der Navigationsleiste ── */
    #toastWrap {
        left: 10px; right: 10px; align-items: stretch !important;
        bottom: calc(var(--m-tabbar-h) + var(--m-safe-b) + 10px) !important;
    }
    #toastWrap > div { max-width: none !important; }

    /* ── Verwaltung ── */
    .admin-panel { padding: 10px; }
    .admin-section { padding: 12px; overflow-x: auto; }
    .files-grid { padding: 8px; overflow-x: auto; }
}

/* Handy quer: niedrige Kopf-/Fußleisten, damit für die Zeichnung Höhe bleibt */
@media (max-height: 500px) and (pointer: coarse) {
    :root { --header-h: 40px; --m-tabbar-h: 44px; }
    .m-tab { flex-direction: row; gap: 6px; font-size: 12px; }
    .m-tab-ico { font-size: 17px; }
    .m-tab-badge { top: -8px; left: 12px; }
    .viewer-toolbar .vt-tools > button { height: 42px; min-width: 52px; }
    .viewer-toolbar .vt-tools .btn-label { font-size: 9.5px; }
    #dwgLassoCanvasWrap { min-height: 60vh; }
    .dwg-lasso-side { max-height: none; }
}

@media (prefers-reduced-motion: reduce) {
    .platform-sidebar, .platform-main { transition: none !important; }
}