/* =========================================================================== Modul "2D-Aufmass" - Oberflaechen-Stylesheet --------------------------------------------------------------------------- Alle Regeln sind auf das aktive 2D-Modul eingegrenzt (body[data-modul="2d"]). So kann keine Regel in das Aufmass-Modul oder den Hub durchschlagen, obwohl beide Module jetzt im selben Dokument leben. Die Eingrenzung greift auch fuer die per JS an gehaengten Sheets/Overlays, weil deren Vorfahre ist. Inhaltlich unveraendert gegenueber der bisherigen 2D-App. =========================================================================== */ /* ── Werkzeugleiste ────────────────────────────────────────────────────── Eine einzige, flache Zeile über der Zeichnung: Rücksprung + Name links, Werkzeuge in der Mitte, Kennzahlen rechts. Alles, was sonst noch an Bedienelementen da war (Erklärtext, zweite Kopfzeile, zehn gleich aussehende Knöpfe), ist entfallen – die Fläche gehört der Zeichnung. */ body[data-modul="2d"] #toolbar { display: flex; align-items: center; gap: 10px; background: #212121; border-bottom: 1px solid #434343; padding: 6px 10px; position: sticky; top: 0; z-index: 10; min-height: 56px; } body[data-modul="2d"] .back-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-height: 44px; flex: 0 0 auto; color: #007aff; text-decoration: none; font-size: 1.25rem; line-height: 1; border-radius: 10px; } body[data-modul="2d"] .back-link:hover { background: rgba(255, 255, 255, .08); } /* Name der Zeichnung: sieht aus wie eine Überschrift, ist aber das Eingabe- feld selbst – ein Tipp genügt zum Umbenennen, es gibt keinen zweiten Ort dafür. */ /* Der Titel nimmt nur so viel Platz, wie ein Name braucht – die Werkzeuge sollen links stehen, nicht ans andere Ende geschoben werden. */ body[data-modul="2d"] .tb-titel { display: flex; align-items: center; gap: 2px; flex: 0 1 18rem; min-width: 110px; } body[data-modul="2d"] .tb-name { flex: 1 1 auto; min-width: 0; min-height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: #f2f5f9; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; text-overflow: ellipsis; } body[data-modul="2d"] .tb-name::placeholder { color: #7e8b9a; font-weight: 500; } body[data-modul="2d"] .tb-name:hover { background: rgba(255, 255, 255, .06); } body[data-modul="2d"] .tb-name:focus { outline: none; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22); } /* ── Werkzeuge ─────────────────────────────────────────────────────────── Jeder Knopf ist mindestens 44 px hoch und trägt Symbol + kurzes Wort. Auf schmalen Geräten fällt die Beschriftung weg, der Knopf bleibt gleich groß – die Trefferfläche darf nie schrumpfen. */ /* Der Titel gibt nach, nicht die Werkzeuge: ein abgeschnittener Name ist hinnehmbar, ein abgeschnittener Knopf nicht. Deshalb `flex: 0 0 auto` – die Leiste behält ihre volle Breite und schiebt den Namen zusammen. */ body[data-modul="2d"] .tb-tools { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } body[data-modul="2d"] .tb-tools::-webkit-scrollbar { display: none; } body[data-modul="2d"] .tb-trenner { flex: 0 0 auto; width: 1px; height: 26px; background: #4a4a4a; margin: 0 2px; } body[data-modul="2d"] .tb-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 12px; border: 1px solid #4a4a4a; border-radius: 11px; background: #2c2c2c; color: #e8edf3; font-size: .86rem; font-weight: 600; white-space: nowrap; cursor: pointer; } body[data-modul="2d"] .tb-btn.nur-ico { padding: 0; } body[data-modul="2d"] .tb-btn .tb-ico { font-size: 1.06rem; line-height: 1; } body[data-modul="2d"] .tb-btn:hover:not(:disabled) { background: #383838; } body[data-modul="2d"] .tb-btn:active:not(:disabled) { transform: scale(.96); } body[data-modul="2d"] .tb-btn:disabled { opacity: .38; cursor: not-allowed; } /* Eingeschaltete Werkzeuge (Magnet, Bordbrett) sind auf einen Blick als solche erkennbar – nicht nur an einem anderen Grauton. */ body[data-modul="2d"] .tb-btn.aktiv { background: #10496f; border-color: #2f8fd0; color: #cfe8fb; } body[data-modul="2d"] .tb-btn.primaer { background: #007aff; border-color: #007aff; color: #fff; } body[data-modul="2d"] .tb-btn.primaer:hover { filter: brightness(1.08); background: #007aff; } /* Schmalere Geräte (iPad hochkant, 1024er Modelle): die Beschriftungen der Werkzeuge fallen weg, ihre Symbole und Tooltips bleiben. Entscheidend ist, dass ALLE Werkzeuge sichtbar bleiben – ein weggescrolltes „PDF" wäre die schlechtere Lösung als ein Knopf ohne Wort. Die beiden Hauptaktionen („Feld", „PDF") behalten ihr Wort. */ @media (max-width: 1200px) { body[data-modul="2d"] .tb-btn:not(.primaer) .tb-txt { display: none; } body[data-modul="2d"] .tb-btn:not(.primaer) { padding: 0; } body[data-modul="2d"] .tb-titel { flex: 0 1 12rem; min-width: 80px; } body[data-modul="2d"] .tb-trenner { margin: 0; } } /* ── Kennzahlen ────────────────────────────────────────────────────────── Nur Zahlen, die man beim Zeichnen wirklich im Auge behält. */ body[data-modul="2d"] .tb-werte { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: 0 0 auto; } body[data-modul="2d"] .area-readout, body[data-modul="2d"] .bb-readout, body[data-modul="2d"] .warnings-readout { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; border-radius: 9px; font-size: .84rem; font-weight: 700; white-space: nowrap; } body[data-modul="2d"] .area-readout { background: #1d2e44; border: 1px solid #27415f; color: #8bb5e4; } body[data-modul="2d"] .bb-readout { background: #10352f; border: 1px solid #1c5c50; color: #63d3bd; } body[data-modul="2d"] .bb-readout.hidden, body[data-modul="2d"] .warnings-readout.hidden { display: none; } /* Einheit hinter einem Zahlenfeld im Sheet (z. B. „m" bei der Gerüsttiefe). */ body[data-modul="2d"] .sheet-unit { align-self: center; padding: 0 0.4rem; font-size: 0.95rem; font-weight: 700; color: #b1b5ba; } /* ── App layout ────────────────────────────────────────────────────────── Die Zeichenansicht ist eine Spalte: oben die Werkzeugleiste (so hoch, wie sie eben sein muss – auf schmalen Geräten zwei Zeilen), darunter der Rest. Vorher stand hier eine Rechnung mit fester Leistenhöhe. Sie musste an drei Stellen gleich gepflegt werden und war falsch, sobald die Leiste umbrach. Jetzt verteilt der Umbruch selbst: `flex: 1` nimmt genau, was übrig ist. */ body[data-modul="2d"] #td-zeichnung { display: flex; flex-direction: column; height: 100vh; min-height: 420px; } @supports (height: 1dvh) { body[data-modul="2d"] #td-zeichnung { height: 100dvh; } } body[data-modul="2d"] #appLayout { display: flex; flex: 1 1 auto; min-height: 0; } /* ── Side panel ──────────────────────────────────────────────────────── */ body[data-modul="2d"] #sidePanel { width: 300px; min-width: 260px; max-width: 360px; overflow-y: auto; border-right: 1px solid #434343; background: #242424; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.5rem; } body[data-modul="2d"] #noSectionsHint { color: #adadad; font-size: 0.85rem; text-align: center; margin-top: 2rem; } body[data-modul="2d"] #noSectionsHint.hidden { display: none; } /* ── Sammelbearbeitung (Block „Bearbeiten" im Werkzeug-Menü) ─────────── */ body[data-modul="2d"] #bulkBar { display: flex; flex-direction: column; gap: 0.4rem; } body[data-modul="2d"] .bulk-chip-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } body[data-modul="2d"] .bulk-pos-chip { padding: 0.22rem 0.5rem; border: 1.5px solid var(--pos-color, #575757); border-radius: 999px; background: #212121; color: var(--pos-color, #cccccc); font-size: 0.72rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bulk-pos-chip.partial { border-style: dashed; background: #443e1d; } body[data-modul="2d"] .bulk-pos-chip.active { background: var(--pos-color, #4c4c4c); color: #fff; } body[data-modul="2d"] .bulk-height-form { display: flex; flex-direction: column; gap: 0.4rem; border: 1.5px solid #21402a; background: #1d4427; border-radius: 8px; padding: 0.45rem 0.5rem; } body[data-modul="2d"] .bulk-height-apply-btn { align-self: flex-start; padding: 0.35rem 0.6rem; border: none; border-radius: 7px; background: #1f7a3d; color: #fff; font-size: 0.78rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bulk-height-apply-btn:disabled { background: #373e39; cursor: not-allowed; } body[data-modul="2d"] .bulk-kons-form { display: flex; flex-direction: column; gap: 0.3rem; border: 1.5px solid #f0c896; background: #44331d; border-radius: 8px; padding: 0.45rem 0.5rem; } body[data-modul="2d"] .bulk-kons-typ-row, body[data-modul="2d"] .bulk-kons-bill-row, body[data-modul="2d"] .bulk-kons-lagen-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } body[data-modul="2d"] .bulk-ktype-btn, body[data-modul="2d"] .bulk-klagen-btn { padding: 0.25rem 0.45rem; border: 1.5px solid #cc7a00; border-radius: 6px; background: #212121; color: #e4c08b; font-size: 0.72rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bulk-ktype-btn.active, body[data-modul="2d"] .bulk-klagen-btn.active { background: #cc7a00; color: #fff; } body[data-modul="2d"] .bulk-kbill-btn { padding: 0.25rem 0.45rem; border: 1.5px solid #51555c; border-radius: 6px; background: #212121; color: #c5c5cb; font-size: 0.72rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bulk-kbill-btn.active { background: #0a2f58; border-color: #1667c0; color: #fff; } body[data-modul="2d"] .bulk-kons-add-btn { align-self: flex-start; padding: 0.35rem 0.6rem; border: none; border-radius: 7px; background: #cc7a00; color: #fff; font-size: 0.78rem; font-weight: 700; cursor: pointer; } /* „Kopiertes Feld auf Auswahl anwenden" */ body[data-modul="2d"] .bulk-paste-form { display: flex; flex-direction: column; gap: 0.4rem; border: 1.5px solid #1d2b44; background: #1d2c44; border-radius: 8px; padding: 0.45rem 0.5rem; } body[data-modul="2d"] .bulk-paste-info { font-size: 0.7rem; color: #bfc3c6; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .bulk-paste-apply-btn { align-self: flex-start; padding: 0.35rem 0.6rem; border: none; border-radius: 7px; background: #2c6fa8; color: #fff; font-size: 0.78rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bulk-paste-apply-btn:disabled { background: #b6c4d2; cursor: not-allowed; } /* Auswahl, was beim Einfügen übertragen wird (Sheet + Mehrfachauswahl) */ body[data-modul="2d"] .paste-scope-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } body[data-modul="2d"] .paste-scope-chip { padding: 0.25rem 0.55rem; border: 1.5px solid #42464a; border-radius: 999px; background: #212121; color: #b8bcc0; font-size: 0.72rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .paste-scope-chip.active { border-color: #2c6fa8; background: #1d3244; color: #8bb8e4; } /* Einstell-Dialog „Zusatzbauteil für Auswahl" */ body[data-modul="2d"] .bulk-pos-unit-row { flex-wrap: wrap; } body[data-modul="2d"] .bulk-pos-qty-row { display: flex; align-items: center; gap: 0.5rem; } body[data-modul="2d"] .bulk-pos-qty-hint { font-size: 0.75rem; color: #b1b5ba; } body[data-modul="2d"] .bulk-pos-preview { margin-top: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: #1d3044; border-left: 4px solid #2c6fa8; font-size: 0.8rem; font-weight: 700; color: #8bb8e4; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .bulk-pos-preview.warn { background: #44351d; border-left-color: #cc7a00; color: #e4c08b; } body[data-modul="2d"] .bulk-bay-check { width: 1.1rem; height: 1.1rem; accent-color: #6a4bd1; cursor: pointer; } body[data-modul="2d"] .bay-row.bulk-selected { outline: 2px solid #6a4bd1; background: #271d44; } body[data-modul="2d"] .bay-row.active-selected { outline: 2px solid #007aff; background: #1d3044; box-shadow: 0 0 0 4px rgba(0,122,255,0.12); } body[data-modul="2d"] .bay-row.active-selected .bay-num { background: #007aff; } /* ── Section card ────────────────────────────────────────────────────── */ body[data-modul="2d"] .section-card { background: #212121; border: 1px solid #434343; border-radius: 8px; padding: 0.65rem 0.75rem; display: flex; flex-direction: column; gap: 0.45rem; } body[data-modul="2d"] .sec-hdr { display: flex; align-items: center; gap: 0.4rem; } body[data-modul="2d"] .sec-name { flex: 1; border: 1px solid #444444; border-radius: 5px; padding: 0.3rem 0.5rem; font-size: 0.9rem; font-weight: 600; } /* ── Direction buttons ───────────────────────────────────────────────── */ body[data-modul="2d"] .dir-row { display: flex; gap: 0.3rem; flex-wrap: wrap; } body[data-modul="2d"] .dir-btn { padding: 0.25rem 0.55rem; border: 1.5px solid #505050; border-radius: 5px; background: #272727; cursor: pointer; font-size: 0.78rem; font-family: system-ui, sans-serif; transition: background 0.15s, border-color 0.15s; white-space: nowrap; } body[data-modul="2d"] .dir-btn:hover { background: #1d2f44; border-color: #007aff; } body[data-modul="2d"] .dir-btn.active { background: #007aff; color: #fff; border-color: #007aff; } body[data-modul="2d"] .sec-total { font-size: 0.78rem; color: #007aff; font-weight: 600; } /* ── Bay rows ────────────────────────────────────────────────────────── */ body[data-modul="2d"] .bays-div { display: flex; flex-direction: column; gap: 0.3rem; } body[data-modul="2d"] .bay-row { display: flex; flex-direction: column; gap: 0.3rem; padding: 0.35rem 0.4rem; border-radius: 6px; background: #24303d; } body[data-modul="2d"] .bay-row-top { display: flex; align-items: center; gap: 0.4rem; } body[data-modul="2d"] .bay-row-bottom { display: flex; align-items: center; gap: 0.35rem; } body[data-modul="2d"] .bay-cat-select { flex: 1; min-width: 0; padding: 0.28rem 0.4rem; border: 1.5px solid #4a4a4a; border-radius: 5px; font-size: 0.82rem; font-weight: 700; background: #212121; cursor: pointer; } body[data-modul="2d"] .bay-num { font-size: 0.72rem; color: #fff; background: #0a2f58; min-width: 1.6rem; max-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: 999px; } body[data-modul="2d"] .bay-inp { width: 5.5rem; padding: 0.3rem 0.4rem; border: 1px solid #4a4a4a; border-radius: 5px; font-size: 0.9rem; } body[data-modul="2d"] .quick-btns { display: flex; gap: 0.2rem; flex-wrap: wrap; } body[data-modul="2d"] .quick-btn { padding: 0.2rem 0.35rem; border: 1px solid #505050; border-radius: 4px; background: #252525; cursor: pointer; font-size: 0.7rem; transition: background 0.12s; } body[data-modul="2d"] .quick-btn:hover { background: #007aff; color: #fff; border-color: #007aff; } /* Höhen links/rechts direkt im Seitenpanel (kompakte Variante des Sheet-Felds) */ body[data-modul="2d"] .bay-height-row { display: flex; align-items: flex-end; gap: 0.3rem; } body[data-modul="2d"] .bay-height-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; } body[data-modul="2d"] .bay-height-label { font-size: 0.66rem; font-weight: 600; color: #8de2a9; text-align: center; } body[data-modul="2d"] .bay-height-inp { width: 100%; text-align: center; font-size: 0.85rem; font-weight: 700; color: #9cd3b8; padding: 0.25rem 0.3rem; border: 1.5px solid #21402a; background: #1d4427; border-radius: 6px; box-sizing: border-box; -moz-appearance: textfield; } body[data-modul="2d"] .bay-height-inp:focus { outline: none; border-color: #34c759; background: #212121; } body[data-modul="2d"] .bay-height-inp::-webkit-outer-spin-button, body[data-modul="2d"] .bay-height-inp::-webkit-inner-spin-button { -webkit-appearance: none; } body[data-modul="2d"] .bay-height-inp::placeholder { color: #9bbfa6; font-weight: 600; } body[data-modul="2d"] .bay-height-eq { flex: 0 0 auto; width: 24px; height: 28px; margin-bottom: 1px; font-size: 0.9rem; font-weight: 700; border: 1.5px solid #34c759; border-radius: 6px; background: #1d4427; color: #34c759; cursor: pointer; display: flex; align-items: center; justify-content: center; } body[data-modul="2d"] .bay-height-eq:active { background: #34c759; color: #fff; } body[data-modul="2d"] .remove-btn.small { padding: 0.2rem 0.4rem; font-size: 0.85rem; border-radius: 4px; } body[data-modul="2d"] .add-bay { align-self: flex-start; padding: 0.3rem 0.65rem; font-size: 0.82rem; border-radius: 6px; border: 1px solid #505050; background: #272727; cursor: pointer; } body[data-modul="2d"] .add-bay:hover { background: #1d2f44; border-color: #007aff; } /* ── SVG viewer panel ────────────────────────────────────────────────── */ body[data-modul="2d"] #viewerPanel { flex: 1; position: relative; overflow: hidden; background: #212121; } body[data-modul="2d"] #planSvg { width: 100%; height: 100%; display: block; } body[data-modul="2d"] .empty-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; transition: opacity 0.2s; } body[data-modul="2d"] .empty-hint.hidden { opacity: 0; pointer-events: none; } /* ── Zoom-Reset (Pinch-Zoom auf der Zeichenfläche) ───────────────────────── */ body[data-modul="2d"] .zoom-reset-btn { position: absolute; bottom: 14px; right: 14px; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #404449; background: rgba(255,255,255,0.92); color: #8bb5e4; font-size: 1.3rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, transform 0.1s; z-index: 5; } body[data-modul="2d"] .zoom-reset-btn:active { transform: scale(0.92); background: #1d2b44; } body[data-modul="2d"] .zoom-reset-btn.hidden { display: none; } body[data-modul="2d"] .empty-state { display: flex; flex-direction: column; align-items: center; gap: 0.8rem; pointer-events: all; } body[data-modul="2d"] .empty-icon { font-size: 3rem; } body[data-modul="2d"] .empty-title { font-size: 1.05rem; color: #adadad; } body[data-modul="2d"] .empty-add-btn { background: #007aff; color: #fff; border: none; border-radius: 14px; padding: 1rem 2rem; font-size: 1.1rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(0,122,255,0.35); white-space: nowrap; } /* ── Bay editor popup ────────────────────────────────────────────────── */ body[data-modul="2d"] .bay-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #212121; border: 1px solid #444444; border-radius: 10px; padding: 1rem 1.25rem; box-shadow: 0 8px 30px rgba(0,0,0,0.18); z-index: 1000; min-width: 220px; display: flex; flex-direction: column; gap: 0.6rem; } body[data-modul="2d"] .bay-popup-header { font-weight: 700; font-size: 0.95rem; color: #90b6e0; } body[data-modul="2d"] .bay-popup label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; gap: 3px; } body[data-modul="2d"] .bay-popup input[type="number"] { padding: 0.45rem 0.6rem; border: 1px solid #4a4a4a; border-radius: 6px; font-size: 1.1rem; width: 100%; } body[data-modul="2d"] .popup-quick { display: flex; gap: 0.3rem; } body[data-modul="2d"] .popup-actions { display: flex; gap: 0.5rem; justify-content: flex-end; } body[data-modul="2d"] .popup-actions .primary { padding: 0.5rem 1.1rem; font-size: 0.9rem; border-radius: 6px; } body[data-modul="2d"] .popup-actions .secondary { padding: 0.5rem 0.8rem; font-size: 0.9rem; border-radius: 6px; } /* overlay behind popup */ body[data-modul="2d"] .bay-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.15); z-index: 999; } /* ── Responsive: schmale Fenster ───────────────────────────────────────── Unter 680 px steht die Feldliste über der Zeichnung statt daneben; beide teilen sich die Spaltenhöhe, statt eine feste Höhe zu bekommen. */ @media (max-width: 680px) { body[data-modul="2d"] #appLayout { flex-direction: column; } body[data-modul="2d"] #sidePanel { width: 100%; max-width: 100%; flex: 0 0 auto; border-right: none; border-bottom: 1px solid #434343; max-height: 38vh; } body[data-modul="2d"] #viewerPanel { flex: 1 1 auto; min-height: 240px; } } /* ── Hint / presets strip ────────────────────────────────────────────── */ body[data-modul="2d"] .presets { gap: 0.35rem; } body[data-modul="2d"] .hint { color: #a6a6a6; font-size: 0.82rem; margin: 0; } /* ── SVG touch support ───────────────────────────────────────────────── */ body[data-modul="2d"] #planSvg { touch-action: none; } /* ── Bottom Sheet (iPad touch UI) ───────────────────────────────────── */ body[data-modul="2d"] .sheet-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 200; } body[data-modul="2d"] .bottom-sheet { position: fixed; bottom: 0; left: 0; right: 0; background: #212121; border-radius: 18px 18px 0 0; padding: 0.75rem 0.85rem calc(0.85rem + env(safe-area-inset-bottom)); z-index: 201; box-shadow: 0 -4px 28px rgba(0,0,0,0.18); transform: translateY(100%); transition: transform 0.22s ease-out; max-height: 78vh; overflow-y: auto; } body[data-modul="2d"] .bottom-sheet.open { transform: translateY(0); } body[data-modul="2d"] .sheet-header { font-weight: 700; font-size: 1rem; color: #90b6e0; margin-bottom: 0.5rem; } /* Section dividers inside add sheet */ body[data-modul="2d"] .sheet-section-label { font-size: 0.72rem; font-weight: 700; color: #adadad; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.35rem; } /* Kategorie-Auswahl im Bearbeiten-Sheet */ body[data-modul="2d"] .sheet-cat-select { width: 100%; padding: 0.6rem 0.6rem; font-size: 1rem; font-weight: 700; border: 2px solid #007aff; border-radius: 9px; background: #1d2f44; color: #8bb5e4; cursor: pointer; margin-bottom: 0.7rem; } /* Kategorie-spezifische Maße */ body[data-modul="2d"] .sheet-measures { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.7rem; } body[data-modul="2d"] .measure-field { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } body[data-modul="2d"] .measure-label { font-size: 0.9rem; font-weight: 600; color: #dbdbdb; } body[data-modul="2d"] .measure-inp { width: 7rem; padding: 0.5rem 0.6rem; border: 2px solid #2bab55; border-radius: 9px; font-size: 1rem; font-weight: 700; text-align: right; color: #8bb5e4; background: #1d4427; } /* ── Positionen im Bearbeiten-Sheet ─────────────────────────────────────── */ body[data-modul="2d"] .sheet-subsection-label { font-size: 0.7rem; font-weight: 700; color: #a6a6a6; letter-spacing: 0.05em; margin: 0.2rem 0 0.4rem; } body[data-modul="2d"] .pos-toggle-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.8rem; } body[data-modul="2d"] .pos-chip { --pos-color: #555; padding: 0.5rem 0.7rem; border: 2px solid #42464a; border-radius: 999px; background: #212121; color: #cccccc; font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: background 0.12s, color 0.12s, border-color 0.12s; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .pos-chip.active { background: var(--pos-color); border-color: var(--pos-color); color: #fff; } /* Mengen-Detail (Anzahl + Einheit) je aktiver einfacher Position */ body[data-modul="2d"] .pos-detail-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; } body[data-modul="2d"] .pos-detail-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; border: 1.5px solid #3d4145; background: #24303d; border-radius: 10px; padding: 0.45rem 0.6rem; } body[data-modul="2d"] .pos-detail-name { font-size: 0.88rem; font-weight: 800; flex: 1 1 7rem; min-width: 6rem; } body[data-modul="2d"] .pos-detail-qty { width: 4rem; padding: 0.45rem 0.4rem; border: 2px solid #45494e; border-radius: 8px; font-size: 0.9rem; font-weight: 700; text-align: center; color: #8bb5e4; background: #212121; } body[data-modul="2d"] .pos-unit-row { display: flex; flex-wrap: wrap; gap: 0.3rem; } body[data-modul="2d"] .punit-btn { padding: 0.4rem 0.55rem; border: 2px solid #45494e; border-radius: 8px; background: #212121; color: #bdbdc4; font-size: 0.82rem; font-weight: 700; cursor: pointer; min-width: 2.4rem; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .punit-btn.active { background: #0a2f58; border-color: #1667c0; color: #fff; } body[data-modul="2d"] .pos-detail-calc { flex: 0 0 auto; font-size: 0.85rem; font-weight: 800; color: #8be4ac; white-space: nowrap; } body[data-modul="2d"] .konsole-row-calc { margin-left: auto; margin-right: 0.5rem; color: #e4c08b; } body[data-modul="2d"] .pos-konsole-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; } body[data-modul="2d"] .konsole-row { border: 1.5px solid #f0c896; background: #44331d; border-radius: 10px; padding: 0.5rem 0.6rem; display: flex; flex-direction: column; gap: 0.45rem; } body[data-modul="2d"] .konsole-row-head { display: flex; align-items: center; justify-content: space-between; } body[data-modul="2d"] .konsole-row-title { font-size: 0.85rem; font-weight: 800; color: #e4c08b; } body[data-modul="2d"] .konsole-type-row, body[data-modul="2d"] .konsole-lagen-row { display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } body[data-modul="2d"] .ktype-btn, body[data-modul="2d"] .klagen-btn { padding: 0.45rem 0.6rem; border: 2px solid #cc7a00; border-radius: 8px; background: #212121; color: #e4c08b; font-size: 0.9rem; font-weight: 700; cursor: pointer; min-width: 2.6rem; } body[data-modul="2d"] .ktype-btn.active, body[data-modul="2d"] .klagen-btn.active { background: #cc7a00; color: #fff; } body[data-modul="2d"] .klagen-free { width: 3.4rem; padding: 0.45rem 0.4rem; border: 2px solid #cc7a00; border-radius: 8px; font-size: 0.9rem; font-weight: 700; text-align: center; color: #8bb5e4; background: #212121; } body[data-modul="2d"] .konsole-billing-row { display: flex; flex-wrap: wrap; gap: 0.35rem; } body[data-modul="2d"] .kbill-btn { padding: 0.4rem 0.6rem; border: 2px solid #51555c; border-radius: 8px; background: #212121; color: #c5c5cb; font-size: 0.82rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .kbill-btn.active { background: #0a2f58; border-color: #1667c0; color: #fff; } body[data-modul="2d"] .konsole-meter-row { display: flex; align-items: center; gap: 0.4rem; } body[data-modul="2d"] .kmeter-inp { width: 4.4rem; padding: 0.45rem 0.4rem; border: 2px solid #cc7a00; border-radius: 8px; font-size: 0.9rem; font-weight: 700; text-align: center; color: #8bb5e4; background: #212121; } body[data-modul="2d"] .kmeter-unit { font-size: 0.85rem; font-weight: 700; color: #bdbdc4; } body[data-modul="2d"] .pos-add-konsole { align-self: flex-start; padding: 0.5rem 0.9rem; border: 2px dashed #cc7a00; border-radius: 9px; background: #44331d; color: #e4c08b; font-size: 0.92rem; font-weight: 700; cursor: pointer; margin-bottom: 0.6rem; } /* ── Positionen im Seitenpanel ──────────────────────────────────────────── */ body[data-modul="2d"] .bay-pos-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.1rem; } body[data-modul="2d"] .bay-pos-chip { padding: 0.15rem 0.45rem; border: 1.5px solid #505050; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: #212121; white-space: nowrap; } body[data-modul="2d"] .bay-pos-empty { font-size: 0.72rem; color: #a6a6a6; font-style: italic; } body[data-modul="2d"] .bay-pos-edit { padding: 0.2rem 0.5rem; border: 1.5px solid #007aff; border-radius: 999px; background: #1d2f44; color: #007aff; font-size: 0.72rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bay-pos-copy, body[data-modul="2d"] .bay-pos-paste { padding: 0.2rem 0.5rem; border: 1.5px solid #51565c; border-radius: 999px; background: #232427; color: #c1c4c8; font-size: 0.72rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .bay-pos-paste:disabled { opacity: 0.45; cursor: not-allowed; } body[data-modul="2d"] .bay-pos-paste.active { border-color: #34c759; background: #1d4428; color: #8be4a5; } /* Direction button row */ body[data-modul="2d"] .sheet-dir-row { display: flex; gap: 0.4rem; margin-bottom: 0.6rem; } body[data-modul="2d"] .dir-big-btn { flex: 1; padding: 0.55rem 0.2rem; font-size: 0.92rem; font-weight: 700; border: 2px solid #444444; border-radius: 9px; background: #252525; color: #dbdbdb; cursor: pointer; transition: background 0.13s, border-color 0.13s, color 0.13s; } body[data-modul="2d"] .dir-big-btn.active { background: #007aff; color: #fff; border-color: #007aff; } /* Standard field length buttons (6 presets in 2 rows of 3) */ body[data-modul="2d"] .sheet-std-btns { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.55rem; } body[data-modul="2d"] .std-btn { flex: 1 1 calc(33.33% - 0.4rem); min-width: calc(33.33% - 0.4rem); padding: 0.55rem 0.2rem; font-size: 0.95rem; font-weight: 700; border: 2px solid #007aff; border-radius: 9px; background: #1d2f44; color: #007aff; cursor: pointer; transition: background 0.13s, color 0.13s; white-space: nowrap; } body[data-modul="2d"] .std-btn.active, body[data-modul="2d"] .std-btn:active { background: #007aff; color: #fff; } /* +/- adjustment row */ body[data-modul="2d"] .sheet-adj-row { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.6rem; } body[data-modul="2d"] .adj-btn { width: 46px; height: 46px; font-size: 1.6rem; line-height: 1; border: 2px solid #007aff; border-radius: 9px; background: #1d2f44; color: #007aff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } body[data-modul="2d"] .adj-btn:active { background: #007aff; color: #fff; } body[data-modul="2d"] .sheet-inp { flex: 1; min-width: 0; text-align: center; font-size: 1.3rem; font-weight: 700; padding: 0.5rem; border: 2px solid #4a4a4a; border-radius: 9px; -moz-appearance: textfield; } body[data-modul="2d"] .sheet-inp::-webkit-outer-spin-button, body[data-modul="2d"] .sheet-inp::-webkit-inner-spin-button { -webkit-appearance: none; } /* Höhen-Eingabe (links / rechts) */ body[data-modul="2d"] .sheet-height-row { display: flex; align-items: flex-end; gap: 0.5rem; margin-bottom: 0.7rem; } body[data-modul="2d"] .height-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; } body[data-modul="2d"] .height-label { font-size: 0.78rem; font-weight: 600; color: #8de2a9; text-align: center; } body[data-modul="2d"] .height-inp { width: 100%; text-align: center; font-size: 1.2rem; font-weight: 700; color: #9cd3b8; padding: 0.45rem 0.4rem; border: 2px solid #21402a; background: #1d4427; border-radius: 9px; box-sizing: border-box; -moz-appearance: textfield; } body[data-modul="2d"] .height-inp:focus { outline: none; border-color: #34c759; background: #212121; } body[data-modul="2d"] .height-inp::-webkit-outer-spin-button, body[data-modul="2d"] .height-inp::-webkit-inner-spin-button { -webkit-appearance: none; } body[data-modul="2d"] .height-inp::placeholder { color: #9bbfa6; font-weight: 600; } body[data-modul="2d"] .height-eq { flex: 0 0 auto; width: 42px; height: 46px; font-size: 1.3rem; font-weight: 700; border: 2px solid #34c759; border-radius: 10px; background: #1d4427; color: #34c759; cursor: pointer; display: flex; align-items: center; justify-content: center; } body[data-modul="2d"] .height-eq:active { background: #34c759; color: #fff; } /* Action row */ body[data-modul="2d"] .sheet-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } body[data-modul="2d"] .sheet-ok { min-width: 100%; } body[data-modul="2d"] .sheet-del { flex: 0 0 auto; background: #ff3b30; color: #fff; border: none; padding: 0.7rem 0.8rem; border-radius: 9px; font-size: 0.9rem; font-weight: 600; cursor: pointer; } body[data-modul="2d"] .sheet-add { flex: 0 0 auto; background: #34c759; color: #fff; border: none; padding: 0.7rem 0.8rem; border-radius: 9px; font-size: 0.9rem; font-weight: 600; cursor: pointer; } body[data-modul="2d"] .sheet-copy-paste-row { margin-bottom: 0.5rem; } body[data-modul="2d"] .sheet-copy, body[data-modul="2d"] .sheet-paste { flex: 1; min-width: 45%; background: #232427; color: #c1c4c8; border: 1.5px solid #51565c; padding: 0.65rem 0.6rem; border-radius: 9px; font-size: 0.88rem; font-weight: 700; cursor: pointer; } body[data-modul="2d"] .sheet-paste:disabled { opacity: 0.45; cursor: not-allowed; } body[data-modul="2d"] .sheet-paste.active { border-color: #34c759; background: #1d4428; color: #8be4a5; } body[data-modul="2d"] .sheet-ok { flex: 1; background: #007aff; color: #fff; border: none; padding: 0.7rem; border-radius: 9px; font-size: 1rem; font-weight: 700; cursor: pointer; } /* ── Rotation control (Drehung) ──────────────────────────────────────── */ body[data-modul="2d"] .sheet-rot-label { display: flex; align-items: center; justify-content: space-between; } body[data-modul="2d"] .rot-readout { font-size: 0.95rem; font-weight: 800; color: #8e44ec; letter-spacing: 0.02em; } body[data-modul="2d"] .sheet-rot-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; } body[data-modul="2d"] .rot-step { flex: 0 0 auto; width: 44px; height: 44px; font-size: 1.4rem; line-height: 1; border: 2px solid #8e44ec; border-radius: 9px; background: #2d1d44; color: #8e44ec; cursor: pointer; display: flex; align-items: center; justify-content: center; } body[data-modul="2d"] .rot-step:active { background: #8e44ec; color: #fff; } /* Feste Drehoptionen 90° / 180° / 270° */ body[data-modul="2d"] .sheet-rot-presets { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; } body[data-modul="2d"] .rot-preset { flex: 1 1 calc(33.33% - 0.4rem); min-width: calc(33.33% - 0.4rem); padding: 0.5rem 0.2rem; font-size: 0.95rem; font-weight: 700; border: 2px solid #8e44ec; border-radius: 9px; background: #2d1d44; color: #8e44ec; cursor: pointer; transition: background 0.13s, color 0.13s; white-space: nowrap; } body[data-modul="2d"] .rot-preset:active { background: #8e44ec; color: #fff; } body[data-modul="2d"] .rot-slider { flex: 1; min-width: 0; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 6px; background: linear-gradient(90deg, #2d1d44, #c9aef5); outline: none; margin: 0; } body[data-modul="2d"] .rot-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #8e44ec; border: 3px solid #383838; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer; } body[data-modul="2d"] .rot-slider::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: #8e44ec; border: 3px solid #383838; box-shadow: 0 1px 4px rgba(0,0,0,0.3); cursor: pointer; } /* ── iPhone mode overrides ───────────────────────────────────────────── */ /* Auf dem Handy zählt jeder Millimeter: die Wörter neben den Symbolen fallen weg, die Trefferfläche der Knöpfe bleibt unverändert bei 44 px. */ body[data-modul="2d"][data-mode="iphone"] #toolbar { padding: 5px 8px; gap: 6px; min-height: 52px; } body[data-modul="2d"][data-mode="iphone"] .tb-btn .tb-txt { display: none; } body[data-modul="2d"][data-mode="iphone"] .tb-btn { padding: 0; } body[data-modul="2d"][data-mode="iphone"] .tb-titel { flex: 1 1 90px; min-width: 80px; } body[data-modul="2d"][data-mode="iphone"] .tb-name { font-size: .92rem; } body[data-modul="2d"][data-mode="iphone"] .area-readout, body[data-modul="2d"][data-mode="iphone"] .bb-readout { padding: 0 7px; font-size: .76rem; } body[data-modul="2d"][data-mode="iphone"] #sidePanel { display: none; } body[data-modul="2d"][data-mode="iphone"] #viewerPanel { height: 100%; min-height: 320px; } /* ── iPad: kompaktes, schwebendes Bearbeitungsfenster ─────────────────── */ /* Verdeckt nur eine Ecke – die Gerüstzeichnung bleibt sichtbar. */ body[data-modul="2d"][data-mode="ipad"] .sheet-overlay { background: transparent; /* Zeichnung bleibt hell & sichtbar */ } body[data-modul="2d"][data-mode="ipad"] .bottom-sheet { left: auto; right: 16px; bottom: 16px; width: 360px; max-width: 42vw; max-height: calc(100vh - 180px); border-radius: 16px; padding: 0.85rem 0.85rem 0.95rem; box-shadow: 0 10px 40px rgba(0,0,0,0.28); transform: translateY(130%); } body[data-modul="2d"][data-mode="ipad"] .bottom-sheet.open { transform: translateY(0); } /* Ausgeschalteter Magnet: das Symbol allein sagt zu wenig, deshalb bleibt der Knopf sichtbar gedämpft, statt sich nur im Grauton zu unterscheiden. */ body[data-modul="2d"] #snapToggleBtn:not(.aktiv) .tb-ico { opacity: .45; } /* ── Plausibilitätsprüfung (Warnhinweise) ─────────────────────────────── */ body[data-modul="2d"] .warnings-readout { display: inline-flex; align-items: center; padding: 0.5rem 0.75rem; border-radius: 8px; background: #44391d; border: 1.5px solid #e8c86a; color: #e4ca8b; font-size: 0.85rem; font-weight: 800; white-space: nowrap; } body[data-modul="2d"] .warnings-readout.hidden { display: none; } body[data-modul="2d"] .bay-note-icon, body[data-modul="2d"] .bay-warn-icon { font-size: 0.85rem; line-height: 1; cursor: help; } body[data-modul="2d"] .bay-warn-icon { color: #e4c08b; font-weight: 700; } body[data-modul="2d"] .sheet-warn-banner { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: -0.15rem 0 0.6rem; } body[data-modul="2d"] .sheet-warn-banner.hidden { display: none; } body[data-modul="2d"] .sheet-warn-chip { padding: 0.3rem 0.55rem; border-radius: 999px; background: #44391d; border: 1.5px solid #e8c86a; color: #e4ca8b; font-size: 0.75rem; font-weight: 700; } /* ── Notiz pro Feld ────────────────────────────────────────────────────── */ body[data-modul="2d"] .sheet-note-inp { width: 100%; box-sizing: border-box; padding: 0.55rem 0.65rem; border: 1.5px solid #42464a; border-radius: 9px; font-size: 0.92rem; font-family: inherit; color: #dbdbdb; resize: vertical; margin-bottom: 0.7rem; } /* ── Favoriten / Vorlagen ──────────────────────────────────────────────── */ body[data-modul="2d"] .fav-chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; } body[data-modul="2d"] .fav-chip { display: inline-flex; align-items: stretch; border: 1.5px solid #8e44ec; border-radius: 999px; overflow: hidden; } body[data-modul="2d"] .fav-chip-name, body[data-modul="2d"] .fav-chip-rm { border: none; cursor: pointer; font-weight: 700; } body[data-modul="2d"] .fav-chip-name { padding: 0.4rem 0.7rem; background: #2e1d44; color: #6c2bd9; font-size: 0.82rem; } body[data-modul="2d"] .fav-chip-rm { padding: 0.4rem 0.55rem; background: #2e1d44; color: #6c2bd9; font-size: 0.85rem; } body[data-modul="2d"] .fav-save-btn { width: 100%; margin-bottom: 0.7rem; } /* ══════════════════════════════════════════════════════════════════════════ Abschnitte (Unterkategorien für Gerüstfelder) ══════════════════════════════════════════════════════════════════════════ */ body[data-modul="2d"] #abschnittBar { display: flex; flex-direction: column; gap: 0.35rem; padding-bottom: 0.5rem; border-bottom: 1px solid #3d4044; } body[data-modul="2d"] .absch-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } body[data-modul="2d"] .absch-add-btn { padding: 0.28rem 0.6rem; border: 1.5px solid #2c6fa8; border-radius: 8px; background: #212121; color: #8ebbe1; font-size: 0.75rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .absch-add-btn:hover { background: #1d3244; } body[data-modul="2d"] .absch-hint { margin: 0; font-size: 0.72rem; line-height: 1.35; color: #a3a8ae; } body[data-modul="2d"] .absch-list { display: flex; flex-direction: column; gap: 0.25rem; } body[data-modul="2d"] .absch-row { --absch-color: #484c51; display: flex; align-items: center; gap: 0.25rem; } body[data-modul="2d"] .absch-pick { flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem; border: 1px solid #3e4245; border-left: 4px solid var(--absch-color); border-radius: 7px; background: #212121; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .absch-pick:hover { background: #1d3044; } body[data-modul="2d"] .absch-dot { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--absch-color); } body[data-modul="2d"] .absch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 700; color: #a4b9cb; } body[data-modul="2d"] .absch-count { flex: 0 0 auto; font-size: 0.7rem; color: #a9aeb3; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .absch-mini-btn { flex: 0 0 auto; width: 1.55rem; height: 1.55rem; border: 1px solid #3e4246; border-radius: 6px; background: #212121; color: #bfc3c6; font-size: 0.8rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .absch-mini-btn:hover { background: #24303d; } body[data-modul="2d"] .absch-mini-btn.danger { color: #c0392b; border-color: #44221d; } body[data-modul="2d"] .absch-mini-btn.danger:hover { background: #441f1d; } /* Sichtbarkeit: Auge je Abschnitt + Sammelknopf „alle einblenden". Ausgeblendete Zeilen bleiben lesbar (nur gedämpft) – die Felder sind ja weiterhin vorhanden, sie werden bloß nicht gezeichnet. */ body[data-modul="2d"] .absch-eye-btn { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; border: 1px solid #3e4246; border-radius: 6px; background: #212121; font-size: 0.85rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .absch-eye-btn:hover { background: #24303d; } body[data-modul="2d"] .absch-eye-btn.off { background: #283039; border-color: #42464b; filter: grayscale(1); } body[data-modul="2d"] .absch-row.absch-hidden .absch-pick { opacity: 0.55; background: #222426; } body[data-modul="2d"] .absch-row.absch-hidden .absch-name { text-decoration: line-through; } body[data-modul="2d"] .absch-showall-btn { align-self: flex-start; padding: 0.26rem 0.6rem; border: 1.5px dashed #b8860b; border-radius: 8px; background: #44371d; color: #e4cb8b; font-size: 0.72rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .absch-showall-btn:hover { background: #44371d; } /* Feldzeile eines ausgeblendeten Abschnitts */ body[data-modul="2d"] .bay-row.bay-hidden { opacity: 0.6; background: #222426; } body[data-modul="2d"] .bay-hidden-tag { flex: 0 0 auto; padding: 0.12rem 0.42rem; border: 1px solid #42464b; border-radius: 999px; background: #212121; color: #b1b5ba; font-size: 0.64rem; font-weight: 800; white-space: nowrap; } /* Abschnitts-Marker in der Feldzeile */ body[data-modul="2d"] .bay-absch-tag { --absch-color: #484c51; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.12rem 0.42rem; border: 1px solid var(--absch-color); border-radius: 999px; background: #212121; color: var(--absch-color); font-size: 0.66rem; font-weight: 800; } /* Chips zur Abschnitts-Zuordnung */ body[data-modul="2d"] .absch-new-chip { border-style: dashed !important; } /* ── Auswahl-Info oben links auf der Zeichenfläche ─────────────────────── */ body[data-modul="2d"] .selection-info { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 30; max-width: min(62%, 26rem); padding: 0.45rem 0.65rem; border: 1px solid #26303b; border-left: 4px solid #007aff; border-radius: 10px; background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 10px rgba(15, 34, 56, 0.12); backdrop-filter: blur(4px); pointer-events: none; -webkit-user-select: none; user-select: none; } body[data-modul="2d"] .selection-info.hidden { display: none; } body[data-modul="2d"] .selection-info.multi { border-left-color: #6a4bd1; } body[data-modul="2d"] .sel-info-head { font-size: 0.78rem; font-weight: 800; color: #8bb5e4; margin-bottom: 0.2rem; } body[data-modul="2d"] .selection-info.multi .sel-info-head { color: #a69ad5; } body[data-modul="2d"] .sel-info-body { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; } body[data-modul="2d"] .sel-info-label { font-size: 0.7rem; font-weight: 700; color: #b1b5ba; } body[data-modul="2d"] .sel-info-chips { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; } body[data-modul="2d"] .sel-info-chip { --absch-color: #484c51; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0.1rem 0.45rem; border: 1.5px solid var(--absch-color); border-radius: 999px; background: #212121; color: var(--absch-color); font-size: 0.7rem; font-weight: 800; } body[data-modul="2d"] .sel-info-note { margin-top: 0.2rem; font-size: 0.66rem; font-style: italic; color: #a4a9ae; } /* ══════════════════════════════════════════════════════════════════════════ Keine versehentliche Text-/Bereichsmarkierung ══════════════════════════════════════════════════════════════════════════ Ein Ziehen über den Plan oder ein längeres Antippen löste bisher die BROWSER-eigene Textauswahl aus: die halbe Seite färbte sich blau und iOS blendete das „Kopieren"-Menü ein – von der App völlig unbemerkt und ohne dass ein Feld reagierte. Die Auswahl wird deshalb überall unterbunden, außer in echten Eingabefeldern. */ body[data-modul="2d"] #toolbar, body[data-modul="2d"] #appLayout, body[data-modul="2d"] #sidePanel, body[data-modul="2d"] #viewerPanel, body[data-modul="2d"] #planSvg, body[data-modul="2d"] .bottom-sheet, body[data-modul="2d"] .sheet-overlay { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Eingaben bleiben normal bedienbar (markieren, kopieren, einfügen). */ body[data-modul="2d"] input, body[data-modul="2d"] textarea, body[data-modul="2d"] select, body[data-modul="2d"] [contenteditable="true"] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } /* Doppeltipp auf der Zeichenfläche zoomt – der Browser soll dabei weder markieren noch sein eigenes Doppeltipp-Zoom starten. */ body[data-modul="2d"] #planSvg * { -webkit-user-select: none; user-select: none; } /* ── PDF-Export: Layout-Auswahl ─────────────────────────────────────────── */ body[data-modul="2d"] .pdf-theme-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.6rem; } body[data-modul="2d"] .pdf-theme-card { display: grid; grid-template-rows: auto auto auto; gap: 0.3rem; padding: 0.6rem; border: 2px solid #404448; border-radius: 12px; background: #212121; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: border-color 0.12s, box-shadow 0.12s; } body[data-modul="2d"] .pdf-theme-card.active { border-color: #007aff; box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.14); } body[data-modul="2d"] .pdf-theme-name { font-size: 0.92rem; font-weight: 800; color: #9eb8d1; } body[data-modul="2d"] .pdf-theme-desc { font-size: 0.74rem; line-height: 1.3; color: #b1b5ba; } /* Miniatur-Vorschau der drei Varianten */ body[data-modul="2d"] .pdf-theme-prev { position: relative; display: block; height: 3.4rem; border: 1px solid #3d4145; border-radius: 6px; background: #212121; overflow: hidden; } body[data-modul="2d"] .pdf-theme-prev .ptp-band { position: absolute; top: 0.32rem; left: 0.32rem; right: 0.32rem; height: 0.5rem; border-radius: 2px; } body[data-modul="2d"] .pdf-theme-prev .ptp-l { position: absolute; left: 0.32rem; height: 0.34rem; border-radius: 2px; background: #273039; } body[data-modul="2d"] .pdf-theme-prev .ptp-l1 { top: 1.15rem; right: 0.32rem; } body[data-modul="2d"] .pdf-theme-prev .ptp-l2 { top: 1.75rem; right: 1.4rem; } body[data-modul="2d"] .pdf-theme-prev .ptp-l3 { top: 2.35rem; right: 0.9rem; } body[data-modul="2d"] .pdf-theme-prev--farbe .ptp-band { background: linear-gradient(to right, #1a4a7a 0 3px, transparent 3px); border-bottom: 1px solid #484d51; border-radius: 0; } body[data-modul="2d"] .pdf-theme-prev--farbe .ptp-l1 { background: #1d3144; } body[data-modul="2d"] .pdf-theme-prev--monochrom .ptp-band { background: linear-gradient(to right, #282828 0 3px, transparent 3px); border-bottom: 1px solid #545454; border-radius: 0; } body[data-modul="2d"] .pdf-theme-prev--monochrom .ptp-l { background: #303030; } body[data-modul="2d"] .pdf-sheet-note { margin: 0.7rem 0 0; font-size: 0.76rem; line-height: 1.4; color: #b1b5ba; } /* Optionen im PDF-Dialog (ausgeblendete Abschnitte, Aufmaßregeln) */ body[data-modul="2d"] .pdf-opt-row { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.45rem 0.55rem; margin-top: 0.35rem; border: 1px solid #3e4245; border-radius: 9px; background: #212121; font-size: 0.82rem; line-height: 1.35; color: #a4b9cb; cursor: pointer; } body[data-modul="2d"] .pdf-opt-row input[type="checkbox"] { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.1rem; accent-color: #2c6fa8; } body[data-modul="2d"] .pdf-opt-hint { font-size: 0.72rem; color: #b1b5ba; } body[data-modul="2d"] .aufmass-settings { display: block; } body[data-modul="2d"] .aufmass-cfg-block { display: block; } body[data-modul="2d"] .aufmass-cfg-row { display: flex; align-items: center; gap: 0.5rem; margin: 0.35rem 0 0 0.35rem; } body[data-modul="2d"] .aufmass-cfg-label { font-size: 0.76rem; font-weight: 700; color: #bfc3c6; } body[data-modul="2d"] .aufmass-cfg-inp { width: 6rem; padding: 0.3rem 0.45rem; border: 1px solid #414549; border-radius: 7px; font-size: 0.85rem; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .aufmass-preset-row { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.35rem 0 0 0.35rem; } body[data-modul="2d"] .aufmass-preset { padding: 0.26rem 0.6rem; border: 1.5px solid #414549; border-radius: 999px; background: #212121; color: #bfc3c6; font-size: 0.74rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .aufmass-preset.active { border-color: #2c6fa8; background: #1d3244; color: #8bb8e4; } body[data-modul="2d"] .aufmass-summary { margin-top: 0.55rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: #1d3044; border-left: 4px solid #2c6fa8; font-size: 0.78rem; font-weight: 700; color: #8bb8e4; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .aufmass-warn { margin-top: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: #44321d; border-left: 4px solid #c2691b; font-size: 0.76rem; font-weight: 700; color: #e4b58b; } /* ── Ecken-Dialog: Zuordnung an der Innenecke ─────────────────────────────── */ body[data-modul="2d"] .eck-choice-row { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.35rem 0 0 0.35rem; } body[data-modul="2d"] .eck-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; padding: 0.55rem 0.7rem; border: 1.5px solid #414549; border-radius: 10px; background: #212121; color: #a9b9c6; font-size: 0.84rem; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .eck-choice.active { border-color: #2c6fa8; background: #1d3244; color: #8bb8e4; } body[data-modul="2d"] .eck-choice-sub { font-size: 0.74rem; font-weight: 600; color: #b8bcc0; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .eck-choice.active .eck-choice-sub { color: #8ebbe1; } /* ── Bordbrett-Modus ────────────────────────────────────────────────────── Die Bedienleiste liegt `fixed` am unteren Bildschirmrand: die Zeichenfläche ist oft höher als das Fenster, ein am Panel verankerter Balken läge dann außerhalb des Sichtbaren – und der einzige Weg aus dem Modus heraus wäre nicht erreichbar. */ body[data-modul="2d"] .bordbrett-bar { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 150; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; max-width: min(94%, 40rem); padding: 10px 14px; border-radius: 14px; border: 1.5px solid #14c2c1; background: #14241f; box-shadow: 0 8px 28px rgba(0, 0, 0, .38); } body[data-modul="2d"] .bordbrett-bar.hidden { display: none; } body[data-modul="2d"] .bordbrett-bar-info { font-size: 1rem; font-weight: 800; color: #6fe3d3; font-variant-numeric: tabular-nums; white-space: nowrap; } body[data-modul="2d"] .bordbrett-bar-hint { flex: 1 1 12rem; font-size: .78rem; color: #a9b6b4; line-height: 1.3; } body[data-modul="2d"] .bordbrett-bar-actions { display: flex; gap: 8px; flex: 0 0 auto; } body[data-modul="2d"] .bordbrett-bar-actions button { min-height: 44px; padding: 0 14px; border-radius: 11px; font-size: .88rem; font-weight: 700; cursor: pointer; border: 1px solid #3a5450; background: #1d3330; color: #cfe8e4; } body[data-modul="2d"] .bordbrett-bar-actions button.primary { background: #14c2c1; border-color: #14c2c1; color: #06231f; } body[data-modul="2d"] .bordbrett-bar-actions button:disabled { opacity: .45; cursor: not-allowed; } body[data-modul="2d"] #bordbrettBtn.aktiv { border-color: #14c2c1; background: #14403d; color: #8be4e3; } /* ── Modul-Abstützung: Eingabe wie bei einem Feld (Länge/Breite/Höhe) ──────── Sie steht als eigener Block in der Positionsliste, weil sie – anders als die übrigen Zusatzbauteile – keine Menge hat, sondern Maße. */ body[data-modul="2d"] .pos-feld-row { flex-direction: column; align-items: stretch; gap: 0.5rem; } body[data-modul="2d"] .pos-feld-head { display: flex; align-items: baseline; gap: 0.5rem; width: 100%; } body[data-modul="2d"] .pos-feld-head .pos-detail-calc { margin-left: auto; color: #5b3ba8; } body[data-modul="2d"] .pos-feld-masse { display: flex; align-items: flex-end; gap: 0.5rem; width: 100%; } body[data-modul="2d"] .pos-feld-masse .height-label { color: #5b3ba8; } body[data-modul="2d"] .pos-feld-masse .height-inp { font-size: 1.05rem; border-color: #2a1d44; background: #291d44; color: #a995db; } body[data-modul="2d"] .pos-feld-masse .height-inp:focus { border-color: #7a4bd1; background: #212121; } body[data-modul="2d"] .pos-feld-masse .height-inp::placeholder { color: #a99bc6; } body[data-modul="2d"] .pos-feld-row .pdf-sheet-note { margin: 0; } /* ── Projektliste des 2D-Moduls ──────────────────────────────────────────── Dieselbe Ordnerstruktur wie im Aufmaß-Modul, aber auf das Zeichnen zugeschnitten: an jeder Karte steht, ob und wie viel schon gezeichnet ist. */ body[data-modul="2d"] .td-projekte { max-width: 1080px; margin: 0 auto; padding: 8px 20px 56px; } body[data-modul="2d"] .td-projekte-kopf { padding: 12px 0 20px; } body[data-modul="2d"] .td-projekte-kopf h1 { margin: 6px 0 8px; font-family: var(--font-display); font-size: clamp(1.6rem, 4vw, 2.3rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.08; color: var(--text); } body[data-modul="2d"] .td-projekte-kopf p { margin: 0; max-width: 60ch; font-size: .92rem; color: var(--muted); } /* Titelzeile mit Primäraktion. Der Knopf steht neben der Überschrift und ist nie ausgegraut – das Anlegen einer Zeichnung hängt an keiner Bedingung. */ body[data-modul="2d"] .td-projekte-titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } body[data-modul="2d"] .td-projekte-titeltext { min-width: 0; } body[data-modul="2d"] .td-neu-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 22px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--accent-2d); color: var(--accent-kontrast); font-family: var(--font-text); font-size: .95rem; font-weight: 600; letter-spacing: -.01em; cursor: pointer; box-shadow: var(--schatten-s); transition: transform var(--t-kurz) var(--federnd), box-shadow var(--t-kurz) var(--federnd), filter var(--t-kurz) var(--federnd); } body[data-modul="2d"] .td-neu-btn:hover { filter: brightness(1.06); box-shadow: var(--schatten-m); } body[data-modul="2d"] .td-neu-btn:active { transform: scale(.98); } body[data-modul="2d"] .td-neu-btn span { font-size: 1.1rem; line-height: 1; } body[data-modul="2d"] .td-projekte-leiste { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } /* Sekundäre Knöpfe der Liste (Auswählen, Bulk-Leiste) */ body[data-modul="2d"] .td-leiste-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); padding: 0 18px; border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--surface-tief); color: var(--muted); font-family: var(--font-text); font-size: .88rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--t-kurz) var(--federnd), border-color var(--t-kurz) var(--federnd), background var(--t-kurz) var(--federnd); } body[data-modul="2d"] .td-leiste-btn:hover:not(:disabled) { color: var(--text); border-color: var(--hairline-stark); } body[data-modul="2d"] .td-leiste-btn.aktiv { background: var(--accent-weich); border-color: var(--accent-rand); color: var(--accent-2d); } body[data-modul="2d"] .td-leiste-btn.gefahr { color: var(--gefahr); border-color: rgba(255, 107, 107, .3); } body[data-modul="2d"] .td-leiste-btn.gefahr:hover:not(:disabled) { background: rgba(255, 107, 107, .12); } body[data-modul="2d"] .td-leiste-btn:disabled { opacity: .4; cursor: default; } /* Leiste der Mehrfachauswahl */ body[data-modul="2d"] .td-bulk-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; padding: 10px 14px; border: 1px solid var(--accent-rand); border-radius: var(--r-control); background: var(--accent-weich); } body[data-modul="2d"] .td-bulk-bar.hidden { display: none; } body[data-modul="2d"] .td-bulk-info { flex: 1; min-width: 140px; font-size: .9rem; font-weight: 600; color: var(--text); } body[data-modul="2d"] .td-projekte-suche { flex: 1; min-width: 0; min-height: var(--touch); padding: 10px 14px; background: var(--surface-tief); border: 1px solid var(--hairline); border-radius: var(--r-control); color: var(--text); font-family: var(--font-text); font-size: .95rem; } body[data-modul="2d"] .td-projekte-suche::placeholder { color: var(--muted-schwach); } body[data-modul="2d"] .td-projekte-suche:focus { outline: none; border-color: var(--accent-2d); box-shadow: 0 0 0 3px var(--accent-weich); } /* Ordnerleiste */ body[data-modul="2d"] .td-folder-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } body[data-modul="2d"] .td-folder-chip { display: inline-flex; align-items: center; gap: 7px; min-height: var(--touch); padding: 8px 16px; border: 1px solid var(--hairline); border-radius: var(--r-pille); background: var(--surface-tief); color: var(--muted); font-family: var(--font-text); font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .16s cubic-bezier(.22,1,.36,1), border-color .16s cubic-bezier(.22,1,.36,1), color .16s cubic-bezier(.22,1,.36,1); } body[data-modul="2d"] .td-folder-chip:hover { color: var(--text); border-color: var(--hairline-stark); } body[data-modul="2d"] .td-folder-chip.aktiv { background: var(--accent-weich); border-color: var(--accent-rand); color: var(--accent-2d); } /* Aktionen der Ordnerleiste – bewusst anders als die Filter-Chips */ body[data-modul="2d"] .td-folder-neu, body[data-modul="2d"] .td-folder-verwalten { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch); padding: 8px 16px; border: 1px dashed var(--hairline-stark); border-radius: var(--r-pille); background: transparent; color: var(--muted-schwach); font-family: var(--font-text); font-size: .86rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: color var(--t-kurz) var(--federnd), border-color var(--t-kurz) var(--federnd); } body[data-modul="2d"] .td-folder-neu:hover, body[data-modul="2d"] .td-folder-verwalten:hover { color: var(--accent-2d); border-color: var(--accent-rand); } body[data-modul="2d"] .td-folder-verwalten { min-width: var(--touch); padding: 8px 12px; } body[data-modul="2d"] .td-folder-chip-zahl { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .74rem; opacity: .7; } /* Projektkarten */ body[data-modul="2d"] .td-project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 12px; } body[data-modul="2d"] .td-project-card { display: flex; flex-direction: column; gap: 5px; font-size: 1rem; -webkit-tap-highlight-color: transparent; padding: 16px 18px; text-align: left; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-karte); color: var(--text); font-family: var(--font-text); cursor: pointer; transition: transform .2s cubic-bezier(.22,1,.36,1), border-color .2s cubic-bezier(.22,1,.36,1), box-shadow .2s cubic-bezier(.22,1,.36,1); } body[data-modul="2d"] .td-project-card:hover { transform: translateY(-2px); border-color: var(--accent-rand); box-shadow: var(--schatten-m); } body[data-modul="2d"] .td-project-card:active { transform: translateY(0) scale(.995); } body[data-modul="2d"] .td-project-card.aktuell { border-color: var(--accent-rand); background: linear-gradient(var(--accent-weich), var(--accent-weich)), var(--surface); } body[data-modul="2d"] .td-project-card.auswahl { border-style: dashed; } body[data-modul="2d"] .td-project-card.gewaehlt { border-style: solid; border-color: var(--accent-2d); background: linear-gradient(var(--accent-weich), var(--accent-weich)), var(--surface); } body[data-modul="2d"] .td-project-kopf { display: flex; align-items: baseline; gap: 8px; } /* Auswahlhaken (Mehrfachauswahl) */ body[data-modul="2d"] .td-project-haken { flex: none; align-self: center; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1.5px solid var(--hairline-stark); border-radius: 7px; color: var(--accent-kontrast); font-size: .8rem; line-height: 1; } body[data-modul="2d"] .td-project-card.gewaehlt .td-project-haken { background: var(--accent-2d); border-color: var(--accent-2d); } /* ⋯-Menü der Karte – groß genug für Handschuhe, ruhig im Normalzustand */ body[data-modul="2d"] .td-project-menu-btn { flex: none; align-self: center; width: 34px; height: 34px; margin: -6px -8px -6px 0; border: none; border-radius: 10px; background: transparent; color: var(--muted-schwach); font-size: 1.15rem; line-height: 1; cursor: pointer; transition: background var(--t-kurz) var(--federnd), color var(--t-kurz) var(--federnd); } body[data-modul="2d"] .td-project-menu-btn:hover { background: var(--surface-hoch); color: var(--text); } body[data-modul="2d"] .td-project-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body[data-modul="2d"] .td-project-marke { flex: none; padding: 2px 8px; border-radius: var(--r-pille); background: var(--accent-2d); color: var(--accent-kontrast); font-family: var(--font-mono); font-size: .62rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } body[data-modul="2d"] .td-project-zeile { font-size: .86rem; color: var(--muted); } body[data-modul="2d"] .td-project-ordner { font-size: .78rem; color: var(--muted-schwach); } body[data-modul="2d"] .td-project-stats { margin-top: 4px; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--accent-2d); } body[data-modul="2d"] .td-project-stats.leer { color: var(--muted-schwach); } /* Leerzustände */ body[data-modul="2d"] .td-projekte-leer { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 20px; text-align: center; } body[data-modul="2d"] .td-projekte-leer-icon { font-size: 2.6rem; opacity: .55; } body[data-modul="2d"] .td-projekte-leer-titel { font-family: var(--font-display); font-size: 1.1rem; font-weight: 600; color: var(--text); } body[data-modul="2d"] .td-projekte-leer p { margin: 0; max-width: 46ch; font-size: .9rem; color: var(--muted-schwach); } body[data-modul="2d"] .td-projekte-leer-aktionen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; } body[data-modul="2d"] .td-projekte-leer-btn { display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-control); background: var(--accent-aufmass); color: var(--accent-kontrast); font-family: var(--font-text); font-size: .95rem; font-weight: 600; text-decoration: none; cursor: pointer; } body[data-modul="2d"] .td-projekte-leer-btn.primaer { background: var(--accent-2d); } body[data-modul="2d"] .td-projekte-leer-btn:active { transform: scale(.98); } /* ── Dialoge der Zeichnungsverwaltung ───────────────────────────────────── Anlegen, Löschen, ungespeicherte Änderungen. Eine Form für alle drei. */ .td-dialog-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 11, 20, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .td-dialog-overlay.hidden { display: none; } .td-dialog { width: min(440px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; padding: 26px 26px 22px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-karte); box-shadow: var(--schatten-l); color: var(--text); font-family: var(--font-text); } .td-dialog-titel { margin: 0 0 6px; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; } .td-dialog-text { margin: 0 0 18px; font-size: .92rem; line-height: 1.45; color: var(--muted); } .td-dialog-liste { margin: -8px 0 18px; padding-left: 18px; font-size: .88rem; color: var(--muted); } .td-dialog-liste.hidden { display: none; } .td-dialog-liste li { margin: 2px 0; } .td-dialog-liste li.mehr { color: var(--muted-schwach); list-style: none; margin-left: -18px; } .td-dialog-feld { display: block; margin-bottom: 14px; } .td-dialog-feld > span { display: block; margin-bottom: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-schwach); } .td-dialog-feld input, .td-dialog-feld select { width: 100%; min-height: var(--touch); padding: 10px 14px; background: var(--surface-tief); border: 1px solid var(--hairline); border-radius: var(--r-control); color: var(--text); font-family: var(--font-text); font-size: .95rem; } .td-dialog-feld input:focus, .td-dialog-feld select:focus { outline: none; border-color: var(--accent-2d); box-shadow: 0 0 0 3px var(--accent-weich); } .td-dialog-aktionen { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .td-dialog-aktionen.drei { justify-content: space-between; } .td-dialog-btn { flex: none; min-height: var(--touch); padding: 0 20px; border: 1px solid var(--hairline); border-radius: var(--r-control); background: var(--surface-tief); color: var(--muted); font-family: var(--font-text); font-size: .92rem; font-weight: 600; cursor: pointer; transition: color var(--t-kurz) var(--federnd), border-color var(--t-kurz) var(--federnd), background var(--t-kurz) var(--federnd), transform var(--t-kurz) var(--federnd); } .td-dialog-btn:hover { color: var(--text); border-color: var(--hairline-stark); } .td-dialog-btn:active { transform: scale(.98); } .td-dialog-btn.primaer { background: var(--accent-2d); border-color: transparent; color: var(--accent-kontrast); } .td-dialog-btn.primaer:hover { filter: brightness(1.06); color: var(--accent-kontrast); } .td-dialog-btn.gefahr { background: rgba(255, 107, 107, .12); border-color: rgba(255, 107, 107, .34); color: var(--gefahr); } .td-dialog-btn.gefahr:hover { background: rgba(255, 107, 107, .2); color: var(--gefahr); } /* ── Toast mit Aktion („Rückgängig") ──────────────────────────────────── */ .toast-aktion { margin-left: 14px; padding: 4px 12px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r-pille); background: transparent; color: var(--accent-2d); font-family: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; } .toast-aktion:hover { background: rgba(255, 255, 255, .1); } /* Nur der Toast mit Knopf nimmt Zeiger an – sonst blockiert er die Fläche. */ .toast--aktion { pointer-events: auto; } @media (max-width: 720px) { body[data-modul="2d"] .td-projekte { padding: 4px 14px 48px; } body[data-modul="2d"] .td-project-grid { grid-template-columns: minmax(0, 1fr); } /* Auf dem Telefon läuft die Primäraktion über die volle Breite. */ body[data-modul="2d"] .td-projekte-titelzeile { align-items: stretch; } body[data-modul="2d"] .td-neu-btn { width: 100%; justify-content: center; } .td-dialog-aktionen .td-dialog-btn { flex: 1; } } /* ══════════════════════════════════════════════════════════════════════════ Werkzeug-Menü -------------------------------------------------------------------------- Aufklappbares Panel für alles, was nicht ständig gebraucht wird: Auswahl, Sammelbearbeitung, Achsen, Feldliste (im Handy-Modus) und Ansicht. Zwei Ausprägungen: ≥ 900 px angedockt rechts neben der Zeichenfläche – die Zeichnung bleibt vollständig sichtbar und bedienbar, Felder lassen sich weiter antippen, während das Menü offen ist. < 900 px Blatt von unten (iPad hochkant, Handy). Es liegt ÜBER der Zeichnung, lässt aber deren oberen Teil frei; ohne Abdunklung, damit auch dort weiter ausgewählt werden kann. Geschlossen kostet es keinen Millimeter: `display:none`. ══════════════════════════════════════════════════════════════════════════ */ body[data-modul="2d"] #werkzeugPanel { display: none; flex: 0 0 340px; width: 340px; min-width: 0; flex-direction: column; overflow: hidden; background: #242424; border-left: 1px solid #434343; } body[data-modul="2d"] #werkzeugPanel.offen { display: flex; } body[data-modul="2d"] .wz-kopf { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.55rem 0.6rem 0.55rem 0.85rem; border-bottom: 1px solid #3d4044; background: #1f1f1f; } body[data-modul="2d"] .wz-titel { font-size: 0.95rem; font-weight: 800; letter-spacing: -0.01em; color: #eaf0f6; } body[data-modul="2d"] .wz-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid #4a4a4a; border-radius: 11px; background: #2c2c2c; color: #e8edf3; font-size: 1rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .wz-close:hover { background: #383838; } body[data-modul="2d"] .wz-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 0.6rem; padding: 0.6rem 0.6rem 1.6rem; } /* Ein Block je Aufgabe – als eigene Karte, damit auf einem 11-Zoll-Bildschirm erkennbar bleibt, wo eine Aufgabe endet und die nächste beginnt. */ body[data-modul="2d"] .wz-gruppe { display: flex; flex-direction: column; gap: 0.4rem; padding: 0.6rem; border: 1px solid #3d4044; border-radius: 12px; background: #212121; } body[data-modul="2d"] .wz-gruppe:empty { display: none; } body[data-modul="2d"] .wz-kopfzeile { display: flex; align-items: center; gap: 0.4rem; } body[data-modul="2d"] .wz-kopf-ico { font-size: 0.95rem; line-height: 1; } body[data-modul="2d"] .wz-kopf-txt { flex: 1 1 auto; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #cbd4dd; } body[data-modul="2d"] .wz-unterlabel { margin-top: 0.15rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: #8ea6bd; } body[data-modul="2d"] .wz-hinweis { margin: 0; font-size: 0.76rem; line-height: 1.4; color: #a3a8ae; } body[data-modul="2d"] .wz-hinweis strong { color: #dbe6f1; } /* Zeigt vor jeder Sammelaktion, worauf sie wirkt. */ body[data-modul="2d"] .wz-ziel { align-self: flex-start; padding: 0.25rem 0.6rem; border: 1px solid #3f7fbf; border-radius: 999px; background: #10496f; color: #cfe8fb; font-size: 0.74rem; font-weight: 800; } /* ── Knöpfe ────────────────────────────────────────────────────────────── Alles mindestens 44 px hoch: der Daumen mit Arbeitshandschuh ist das Maß, nicht der Mauszeiger. */ body[data-modul="2d"] .wz-aktion-reihe { display: flex; flex-wrap: wrap; gap: 0.4rem; } body[data-modul="2d"] .wz-aktion { flex: 1 1 9rem; min-height: 44px; padding: 0 0.7rem; border: 1px solid #4a4a4a; border-radius: 11px; background: #2c2c2c; color: #e8edf3; font-size: 0.82rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .wz-aktion:hover:not(:disabled) { background: #383838; } body[data-modul="2d"] .wz-aktion:active:not(:disabled) { transform: scale(.97); } body[data-modul="2d"] .wz-aktion:disabled { opacity: .38; cursor: not-allowed; } body[data-modul="2d"] .wz-aktion-klein { flex: 1 1 100%; min-height: 40px; font-size: 0.78rem; } /* Der Hauptschalter der Mehrfachauswahl: der meistgesuchte Knopf des Menüs, deshalb über die volle Breite und im eingeschalteten Zustand kräftig gefüllt – auf einen Blick unterscheidbar, auch bei Sonne auf dem Display. */ body[data-modul="2d"] .wz-hauptschalter { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; min-height: 52px; padding: 0 0.8rem; border: 2px solid #8f74ff; border-radius: 13px; background: #241d3d; color: #c3b1ff; font-size: 0.92rem; font-weight: 800; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .wz-hauptschalter.active { background: #6a4bd1; border-color: #b9a5ff; color: #fff; box-shadow: 0 0 0 3px rgba(143, 116, 255, .25); } body[data-modul="2d"] .wz-schalter-ico { font-size: 1.1rem; line-height: 1; } /* Zähler der Mehrfachauswahl – groß genug, um ihn im Vorbeigehen zu lesen. */ body[data-modul="2d"] .wz-zaehler { display: flex; align-items: baseline; gap: 0.45rem; padding: 0.4rem 0.6rem; border: 1px solid #3d4044; border-radius: 10px; background: #1b1b1b; } body[data-modul="2d"] .wz-zaehler.voll { border-color: #8f74ff; background: #241d3d; } body[data-modul="2d"] .wz-zaehler-zahl { font-size: 1.5rem; font-weight: 800; line-height: 1; color: #c3b1ff; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .wz-zaehler-txt { font-size: 0.8rem; color: #b9bfc6; } /* Chips zum Auswählen ganzer Achsen bzw. aller Felder einer Position. */ body[data-modul="2d"] .wz-chip-reihe { display: flex; flex-wrap: wrap; gap: 0.35rem; } body[data-modul="2d"] .wz-achs-chip { --absch-color: #8a97a5; min-height: 38px; padding: 0 0.7rem; border: 1.5px solid var(--absch-color); border-left-width: 6px; border-radius: 10px; background: #1b1b1b; color: #dbe3ea; font-size: 0.78rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .wz-achs-chip:hover { background: #262626; } /* Ansicht: drei Schalter nebeneinander (Automatisch / Handy / Tablet). */ body[data-modul="2d"] .wz-segment { display: flex; gap: 4px; padding: 4px; border: 1px solid #3d4044; border-radius: 12px; background: #1b1b1b; } body[data-modul="2d"] .wz-segment-btn { flex: 1 1 0; min-height: 42px; border: none; border-radius: 9px; background: transparent; color: #b9bfc6; font-size: 0.82rem; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; } body[data-modul="2d"] .wz-segment-btn:hover { background: #262626; } body[data-modul="2d"] .wz-segment-btn.active { background: #007aff; color: #fff; box-shadow: 0 2px 8px rgba(0, 122, 255, .3); } /* ── Knopf in der Werkzeugleiste ─────────────────────────────────────────── */ body[data-modul="2d"] .werkzeug-btn { position: relative; } body[data-modul="2d"] .wz-pfeil { display: inline-block; font-size: 1.25rem; line-height: 1; transition: transform .18s ease; } body[data-modul="2d"] .werkzeug-btn.wz-mehrfach { border-color: #8f74ff; color: #c3b1ff; } /* Läuft eine Mehrfachauswahl, steht die Zahl am Knopf – auch bei zugeklapptem Menü ist damit sichtbar, dass etwas markiert ist. */ body[data-modul="2d"] .wz-badge { position: absolute; top: -5px; right: -5px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: #6a4bd1; color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; } body[data-modul="2d"] .wz-badge.hidden { display: none; } /* ── Aktive Achse in der Liste ───────────────────────────────────────────── */ body[data-modul="2d"] .absch-row.absch-aktiv .absch-pick { border-color: var(--absch-color); border-width: 2px; border-left-width: 6px; background: #16283a; box-shadow: 0 0 0 2px rgba(120, 175, 230, .22); } body[data-modul="2d"] .absch-aktiv-mark { flex: 0 0 auto; padding: 0.1rem 0.4rem; border-radius: 999px; background: var(--absch-color); color: #fff; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; } /* ── Blatt von unten: iPad hochkant, Handy ──────────────────────────────── */ @media (max-width: 899px) { body[data-modul="2d"] #werkzeugPanel.offen { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; flex: none; height: 60vh; max-height: 560px; z-index: 60; border-left: none; border-top: 1px solid #4a4a4a; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, .5); animation: wz-hoch .2s ease-out; } @supports (height: 1dvh) { body[data-modul="2d"] #werkzeugPanel.offen { height: 60dvh; } } /* Greifbarer Rand oben, damit das Blatt als solches gelesen wird. */ body[data-modul="2d"] .wz-kopf { border-radius: 18px 18px 0 0; padding-top: 0.7rem; } } @keyframes wz-hoch { from { transform: translateY(18%); opacity: .4; } to { transform: translateY(0); opacity: 1; } } /* ── Feldliste im Handy-Modus ──────────────────────────────────────────── Die Seitenleiste entfällt dort; dasselbe Element zieht ins Menü ein und wird hier als gewöhnlicher Block dargestellt (keine zweite Liste). */ body[data-modul="2d"] .wz-felder-slot { display: contents; } body[data-modul="2d"] #werkzeugPanel #sidePanel { display: flex; width: auto; min-width: 0; max-width: none; max-height: none; overflow: visible; border: 1px solid #3d4044; border-radius: 12px; background: #212121; padding: 0.6rem; } /* ══════════════════════════════════════════════════════════════════════════ Handy-Modus -------------------------------------------------------------------------- Auf 320–430 px Breite passen Werkzeugleiste, Name und Kennzahlen nicht in EINE Zeile, ohne dass Knöpfe schrumpfen oder aus dem Bild laufen. Deshalb zwei Zeilen: oben Rücksprung, Name und Kennzahl, darunter die Werkzeuge in voller Trefferfläche. Bordbrett, Projekt und PDF sind ins Werkzeug-Menü umgezogen (siehe syncToolbarOrt), sodass die zweite Zeile mit sechs Knöpfen auch auf einem 320-px-Bildschirm vollständig sichtbar bleibt. ══════════════════════════════════════════════════════════════════════════ */ body[data-modul="2d"][data-mode="iphone"] #toolbar, body[data-modul="2d"] #toolbar.tb-zweizeilig { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding: 5px 8px 7px; } body[data-modul="2d"][data-mode="iphone"] .tb-titel, body[data-modul="2d"] .tb-zweizeilig .tb-titel { order: 1; flex: 1 1 8rem; } body[data-modul="2d"][data-mode="iphone"] .tb-werte, body[data-modul="2d"] .tb-zweizeilig .tb-werte { order: 2; } body[data-modul="2d"][data-mode="iphone"] .tb-tools, body[data-modul="2d"] .tb-zweizeilig .tb-tools { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 4px; overflow: visible; } /* Trennstriche kosten Platz, den die Knöpfe brauchen. */ body[data-modul="2d"][data-mode="iphone"] .tb-trenner { display: none; } /* „Feld" behält sein Wort (Hauptaktion), der Rest bleibt Symbol. */ body[data-modul="2d"][data-mode="iphone"] .tb-btn.primaer { padding: 0 10px; } body[data-modul="2d"][data-mode="iphone"] .tb-btn.primaer .tb-txt { display: inline; } /* Im Handy-Modus ist das Menü IMMER das Blatt von unten – auch wenn der Bildschirm breit genug für die angedockte Fassung wäre (der Nutzer hat „Handy" ausdrücklich gewählt, um die Zeichenfläche zu maximieren). */ body[data-modul="2d"][data-mode="iphone"] #werkzeugPanel.offen { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; flex: none; height: 50vh; max-height: 440px; z-index: 60; border-left: none; border-top: 1px solid #4a4a4a; border-radius: 18px 18px 0 0; box-shadow: 0 -10px 34px rgba(0, 0, 0, .5); } @supports (height: 1dvh) { body[data-modul="2d"][data-mode="iphone"] #werkzeugPanel.offen { height: 50dvh; } } body[data-modul="2d"][data-mode="iphone"] .wz-kopf { border-radius: 18px 18px 0 0; } /* Die ausgelagerten Werkzeugleisten-Knöpfe im Menü: volle Breite statt Symbol-Kachel, damit sie dort wie Menüeinträge lesbar sind. */ body[data-modul="2d"] .wz-aktionen-slot { display: flex; flex-wrap: wrap; gap: 0.4rem; } body[data-modul="2d"] .wz-aktionen-slot .tb-btn { flex: 1 1 9rem; min-height: 44px; padding: 0 0.7rem; justify-content: flex-start; font-size: 0.82rem; } body[data-modul="2d"] .wz-aktionen-slot .tb-btn .tb-txt { display: inline; } body[data-modul="2d"] #wzAktionen.hidden { display: none; } /* Auch ohne Handy-Modus reicht unter 800 px die Breite nicht für Leiste, Name und Kennzahlen in einer Zeile – dann bricht sie ebenso um. Der Klassenname wird nicht gesetzt, sondern hier per Medienabfrage erzwungen; so gibt es dafür keinen zweiten Zustand in JavaScript. */ @media (max-width: 800px) { body[data-modul="2d"] #toolbar { flex-wrap: wrap; row-gap: 6px; min-height: 0; padding: 5px 8px 7px; } body[data-modul="2d"] .tb-titel { order: 1; flex: 1 1 8rem; } body[data-modul="2d"] .tb-werte { order: 2; } body[data-modul="2d"] .tb-tools { order: 3; flex: 1 1 100%; justify-content: space-between; gap: 4px; overflow-x: auto; } body[data-modul="2d"] .tb-trenner { display: none; } } /* ── Trefferflächen im Werkzeug-Menü ───────────────────────────────────── Die Bauteile stammen aus der früheren Seitenleiste, wo sie mit der Maus bedient wurden. Im Menü werden sie mit dem Daumen bedient – deshalb hier durchgehend mindestens 40 px hoch. */ body[data-modul="2d"] #werkzeugPanel .bulk-pos-chip, body[data-modul="2d"] #werkzeugPanel .fav-chip-name, body[data-modul="2d"] #werkzeugPanel .paste-scope-chip, body[data-modul="2d"] #werkzeugPanel .bulk-ktype-btn, body[data-modul="2d"] #werkzeugPanel .bulk-klagen-btn, body[data-modul="2d"] #werkzeugPanel .bulk-kbill-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.7rem; font-size: 0.8rem; } body[data-modul="2d"] #werkzeugPanel .bulk-height-apply-btn, body[data-modul="2d"] #werkzeugPanel .bulk-kons-add-btn, body[data-modul="2d"] #werkzeugPanel .bulk-paste-apply-btn, body[data-modul="2d"] #werkzeugPanel .absch-add-btn, body[data-modul="2d"] #werkzeugPanel .absch-showall-btn, body[data-modul="2d"] #werkzeugPanel .absch-pick, body[data-modul="2d"] #werkzeugPanel .bay-height-inp { min-height: 44px; } body[data-modul="2d"] #werkzeugPanel .absch-mini-btn, body[data-modul="2d"] #werkzeugPanel .absch-eye-btn, body[data-modul="2d"] #werkzeugPanel .bay-height-eq { width: 40px; min-width: 40px; height: 40px; } /* Die Feldkarten stammen aus der Seitenleiste. Zieht die Liste ins Menü ein, werden ihre Knöpfe mit dem Daumen bedient – also ebenfalls mindestens 40 px hoch. */ body[data-modul="2d"] #werkzeugPanel .dir-btn, body[data-modul="2d"] #werkzeugPanel .quick-btn, body[data-modul="2d"] #werkzeugPanel .bay-pos-chip, body[data-modul="2d"] #werkzeugPanel .bay-pos-edit, body[data-modul="2d"] #werkzeugPanel .bay-pos-copy, body[data-modul="2d"] #werkzeugPanel .bay-pos-paste, body[data-modul="2d"] #werkzeugPanel .add-bay, body[data-modul="2d"] #werkzeugPanel .remove-btn { min-height: 40px; padding: 0 0.6rem; } body[data-modul="2d"] #werkzeugPanel .remove-btn.small { min-width: 40px; } /* ── Flache Bildschirme: Menü seitlich statt von unten ─────────────────── Ein liegendes Handy ist gut 390 px hoch. Ein Blatt von unten ließe davon keine Zeichenfläche übrig. Dort dockt das Menü deshalb rechts an: die Zeichnung behält die volle Höhe und rund die halbe Breite. Steht nach den Handy-Regeln, damit es sie überschreibt. */ @media (max-height: 520px) { body[data-modul="2d"] #werkzeugPanel.offen, body[data-modul="2d"][data-mode="iphone"] #werkzeugPanel.offen { position: static; flex: 0 0 min(52vw, 380px); width: min(52vw, 380px); height: auto; max-height: none; border-top: none; border-left: 1px solid #4a4a4a; border-radius: 0; box-shadow: none; } body[data-modul="2d"] .wz-kopf { border-radius: 0; padding-top: 0.5rem; } } /* Auf einem 320-px-Gerät ist die Beschriftung des Hauptschalters breiter als der Knopf – sie kürzt sich, statt ihn zu sprengen. */ body[data-modul="2d"] .wz-schalter-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }