/* ============================================================ Designer-Hybrid Stil — nur aktiv wenn oder ein Wrapper die Klasse `.designer-hybrid` trägt. Power-User-Layout mit dunkler Shell-Bar, heller Workbar, 3-Spalten (Toolbox / Canvas / Properties), Status-Bar unten, Keyboard-Hints, monospace IDs. ============================================================ */ :root { --dh-shell-bg: var(--color-neutral-900); --dh-shell-2: var(--color-neutral-800); --dh-shell-line: var(--color-neutral-700); --dh-shell-text: #E4EAF1; --dh-shell-mute: #8A93A6; --dh-shell-height: 44px; --dh-workbar-height: 34px; --dh-statusbar-height: 24px; --dh-panel-w-left: 248px; --dh-panel-w-right: 320px; --dh-canvas-bg: #FAFCFE; } /* Designer-Hybrid ist ein Workspace innerhalb der Standard-Seite (globale Sidebar + Topbar bleiben sichtbar). Der Container füllt die verfügbare Höhe bis zum Footer aus. */ .designer-hybrid { display: flex; flex-direction: column; background: var(--color-surface); /* Höhe: viewport - topbar (56) - footer (~40) - padding */ height: calc(100vh - var(--layout-topbar-height) - 60px); min-height: 520px; margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; border-radius: 0; overflow: hidden; border: 1px solid var(--color-border); border-bottom: none; } /* === Shell Bar (oben dunkel) === */ .dh-shell { height: var(--dh-shell-height); background: var(--dh-shell-bg); color: var(--dh-shell-text); display: flex; align-items: center; padding: 0 14px; gap: 14px; font-size: 12.5px; border-bottom: 1px solid var(--dh-shell-line); position: sticky; top: 0; z-index: 980; } .dh-shell .dh-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; color: var(--dh-shell-text); text-decoration: none; } .dh-shell .dh-brand .dot { width: 20px; height: 20px; border-radius: 5px; background: var(--color-brand-primary); display: grid; place-items: center; font-weight: 700; font-size: 10.5px; color: #fff; } .dh-shell .dh-sep { width: 1px; height: 18px; background: var(--dh-shell-line); margin: 0 4px; } .dh-shell .dh-crumbs { color: var(--dh-shell-mute); display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .dh-shell .dh-crumbs a { color: var(--dh-shell-mute); text-decoration: none; } .dh-shell .dh-crumbs a:hover { color: var(--dh-shell-text); } .dh-shell .dh-crumbs .sep { opacity: 0.4; } .dh-shell .dh-crumbs .cur { color: var(--dh-shell-text); font-weight: 500; } .dh-shell .dh-pill { padding: 2px 8px; background: rgba(26,127,208,0.18); color: #7BC2F0; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .dh-shell .dh-pill.warn { background: rgba(217,119,6,0.18); color: #F5B14E; } .dh-shell .dh-pill.success { background: rgba(22,163,74,0.22); color: #5ED68E; } .dh-shell .dh-grow { flex: 1; } .dh-shell .kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--dh-shell-mute); padding: 1.5px 5px; background: var(--dh-shell-2); border: 1px solid var(--dh-shell-line); border-radius: 3px; font-weight: 500; letter-spacing: 0; } .dh-shell .dh-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 5px; background: var(--dh-shell-2); border: 1px solid var(--dh-shell-line); color: var(--dh-shell-text); font-size: 12px; font-weight: 500; cursor: pointer; text-decoration: none; line-height: 1; } .dh-shell .dh-btn:hover { background: var(--color-neutral-700); color: #fff; } .dh-shell .dh-btn.primary { /* WCAG AA: brand-primary (#1A7FD0) auf weissem Text = 4.2 — knapp drunter. brand-primary-hover (#155E9E) = 6.7:1, AA passt. */ background: var(--color-brand-primary-hover); border-color: var(--color-brand-primary-hover); color: #fff; font-weight: 600; } .dh-shell .dh-btn.primary:hover { background: var(--color-brand-primary-active); border-color: var(--color-brand-primary-active); } .dh-shell .dh-btn .kbd { background: rgba(255,255,255,0.18); border-color: transparent; color: #fff; margin-left: 4px; } .dh-shell .dh-avatar { width: 22px; height: 22px; border-radius: 50%; background: var(--color-brand-primary-tint); color: var(--color-brand-primary); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; } .dh-shell .dh-cmd-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--dh-shell-mute); font-size: 11.5px; } /* === Workbar (klassische Menü-Leiste, hell) === */ .dh-workbar { height: var(--dh-workbar-height); background: var(--color-surface-raised); border-bottom: 1px solid var(--color-border); display: flex; align-items: center; padding: 0 14px; gap: 2px; font-size: 12.5px; color: var(--color-text-secondary); position: sticky; top: var(--dh-shell-height); z-index: 970; } .dh-workbar a, .dh-workbar button.dh-menu { padding: 4px 10px; border-radius: 4px; font-weight: 500; color: var(--color-text-secondary); text-decoration: none; background: transparent; border: none; cursor: pointer; font-size: 12.5px; line-height: 1; } .dh-workbar a:hover, .dh-workbar .dh-menu:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .dh-workbar .dh-sep-v { width: 1px; height: 16px; background: var(--color-border); margin: 0 6px; } .dh-workbar .dh-doc-id { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); margin-left: auto; } /* === 3-Spalten-Layout === */ .dh-layout { display: grid; grid-template-columns: var(--dh-panel-w-left) 1fr var(--dh-panel-w-right); flex: 1; min-height: 0; background: var(--color-surface); } /* Left panel: Toolbox */ .dh-panel-left { background: var(--color-surface-raised); border-right: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; } .dh-panel-head { padding: 10px 14px 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; } .dh-panel-head .kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-muted); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 4px; padding: 1px 5px; letter-spacing: 0; font-weight: 500; text-transform: none; } .dh-search-mini { margin: 0 10px 10px; height: 28px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 5px; display: flex; align-items: center; gap: 6px; padding: 0 8px; color: var(--color-text-muted); font-size: 12.5px; } .dh-search-mini input { border: 0; background: transparent; outline: 0; font: inherit; color: var(--color-text-primary); flex: 1; min-width: 0; } .dh-toolbox-scroll { flex: 1; overflow-y: auto; padding-bottom: var(--space-4); } .dh-toolbox-grp { padding: 6px 10px 10px; border-top: 1px solid var(--color-border); } .dh-toolbox-grp h4 { margin: 4px 4px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .dh-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; } .dh-field-tile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-sunken); cursor: grab; font-size: 11px; color: var(--color-text-secondary); transition: all var(--duration-fast) var(--ease-out); text-align: center; user-select: none; } .dh-field-tile:hover { background: var(--color-brand-primary-tint); border-color: var(--color-brand-primary); color: var(--color-brand-primary-hover); border-style: solid; } .dh-field-tile .i { width: 24px; height: 24px; display: grid; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 13px; } .dh-field-tile.compact { flex-direction: row; align-items: center; gap: 8px; padding: 6px 10px; text-align: left; justify-content: flex-start; } .dh-field-tile.compact .i { width: 22px; height: 22px; font-size: 12px; } /* Center panel: Canvas */ .dh-panel-center { background: var(--dh-canvas-bg); display: flex; flex-direction: column; overflow: hidden; min-width: 0; } .dh-canvas-toolbar { height: 36px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); display: flex; align-items: center; padding: 0 14px; gap: 8px; font-size: 12.5px; color: var(--color-text-secondary); flex-shrink: 0; } .dh-canvas-toolbar .dh-tb-group { display: flex; align-items: center; gap: 2px; padding-right: 8px; margin-right: 2px; border-right: 1px solid var(--color-border); } .dh-canvas-toolbar .dh-tb-group:last-of-type { border-right: 0; } .dh-canvas-toolbar .dh-tbtn { width: 26px; height: 26px; border-radius: 4px; display: grid; place-items: center; color: var(--color-text-muted); cursor: pointer; border: none; background: transparent; font-size: 12px; } .dh-canvas-toolbar .dh-tbtn:hover { background: var(--color-surface-hover); color: var(--color-text-primary); } .dh-canvas-toolbar .dh-tbtn.active { background: var(--color-brand-primary-tint); color: var(--color-brand-primary-hover); } .dh-canvas-toolbar .label { color: var(--color-text-muted); font-size: 11.5px; } .dh-canvas-toolbar .dh-zoom { margin-left: auto; display: flex; align-items: center; gap: 4px; color: var(--color-text-muted); font-family: var(--font-mono); font-size: 11.5px; } .dh-canvas-scroll { flex: 1; overflow: auto; padding: 24px 0; background: linear-gradient(var(--dh-canvas-bg), var(--dh-canvas-bg)), radial-gradient(circle, var(--color-border) 1px, transparent 1px); background-size: auto, 20px 20px; } .dh-canvas-doc { max-width: 720px; margin: 0 auto; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 26px 30px; box-shadow: var(--shadow-xs); } /* Right panel: Properties */ .dh-panel-right { background: var(--color-surface-raised); border-left: 1px solid var(--color-border); display: flex; flex-direction: column; overflow: hidden; } .dh-prop-head { padding: 10px 14px; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .dh-prop-head .t { font-weight: 600; } .dh-prop-head .id { font-family: var(--font-mono); font-size: 11px; color: var(--color-text-muted); margin-left: auto; } .dh-prop-tabs { display: flex; border-bottom: 1px solid var(--color-border); padding: 0 8px; flex-shrink: 0; } .dh-prop-tab { padding: 8px 10px; font-size: 12px; color: var(--color-text-muted); border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; background: transparent; border: none; border-bottom: 2px solid transparent; font-weight: 500; } .dh-prop-tab.active { color: var(--color-brand-primary); border-bottom-color: var(--color-brand-primary); font-weight: 600; } .dh-prop-body { flex: 1; overflow: auto; padding: 14px; } .dh-prop-grp { margin-bottom: 16px; } .dh-prop-grp h4 { margin: 0 0 8px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); display: flex; justify-content: space-between; align-items: center; } .dh-prop-grp h4 .kbd { font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-muted); background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 3px; padding: 1px 4px; letter-spacing: 0; font-weight: 500; text-transform: none; } .dh-prop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-items: center; margin-bottom: 7px; } .dh-prop-row.full { grid-template-columns: 1fr; } .dh-prop-row .lbl { font-size: 11.5px; color: var(--color-text-muted); font-weight: 500; } .dh-prop-row .val input, .dh-prop-row .val select { width: 100%; height: 28px; padding: 3px 8px; border: 1px solid var(--color-border-strong); border-radius: 4px; font: inherit; font-size: 12.5px; color: var(--color-text-primary); background: var(--color-surface-raised); } .dh-prop-row .val .mono input { font-family: var(--font-mono); font-size: 11.5px; } .dh-prop-row .val input:focus, .dh-prop-row .val select:focus { outline: 0; border-color: var(--color-brand-primary); box-shadow: var(--shadow-focus); } .dh-switch-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; } .dh-switch-row .lbl { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; } .dh-sw { width: 28px; height: 16px; border-radius: 999px; background: var(--color-border-strong); position: relative; cursor: pointer; flex-shrink: 0; } .dh-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.2); transition: transform var(--duration-fast) var(--ease-out); } .dh-sw.on { background: var(--color-brand-primary); } .dh-sw.on::after { transform: translateX(12px); } .dh-code-block { font-family: var(--font-mono); font-size: 11px; background: var(--color-surface-sunken); border: 1px solid var(--color-border); border-radius: 5px; padding: 8px 10px; color: var(--color-text-secondary); line-height: 1.55; white-space: pre-wrap; overflow-x: auto; } .dh-code-block .k { color: var(--color-brand-primary-hover); } .dh-code-block .s { color: var(--color-success); } .dh-code-block .n { color: var(--color-warning); } /* Status bar (bottom of workspace, not fixed) */ .dh-statusbar { height: var(--dh-statusbar-height); background: var(--dh-shell-bg); color: var(--dh-shell-mute); display: flex; align-items: center; padding: 0 12px; gap: 14px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; border-top: 1px solid var(--dh-shell-line); flex-shrink: 0; } .dh-statusbar .item { display: inline-flex; align-items: center; gap: 5px; } .dh-statusbar .item::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--color-success); } .dh-statusbar .item.warn::before { background: var(--color-warning); } .dh-statusbar .item.danger::before { background: var(--color-danger); } .dh-statusbar .item.info::before { background: var(--color-info); } .dh-statusbar .grow { flex: 1; } .dh-statusbar .kbd { background: var(--dh-shell-2); border: 1px solid var(--dh-shell-line); padding: 0 4px; border-radius: 2px; color: var(--dh-shell-text); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; } /* Drop-Zone */ .dh-drop-zone { height: 36px; border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); font-size: 12px; margin-top: 8px; transition: all var(--duration-fast) var(--ease-out); } .dh-drop-zone:hover, .dh-drop-zone.drag-over { border-color: var(--color-brand-primary); background: var(--color-brand-primary-tint); color: var(--color-brand-primary-hover); } /* Workbar Popover-Menues */ .dh-menu-wrap { position: relative; display: inline-flex; } .dh-menu-wrap > button.dh-menu { padding: 4px 10px; border-radius: 4px; font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; cursor: pointer; font-size: 12.5px; line-height: 1; } .dh-menu-wrap > button.dh-menu:hover, .dh-menu-wrap.open > button.dh-menu { background: var(--color-surface-hover); color: var(--color-text-primary); } .dh-menu-panel { position: absolute; top: calc(100% + 2px); left: 0; min-width: 220px; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: 4px; z-index: 1005; display: flex; flex-direction: column; } .dh-menu-panel .dh-menu-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 0; background: transparent; text-align: left; font-size: 12.5px; color: var(--color-text-primary); border-radius: var(--radius-sm); cursor: pointer; width: 100%; } .dh-menu-panel .dh-menu-item:hover:not(:disabled) { background: var(--color-surface-hover); color: var(--color-text-primary); } .dh-menu-panel .dh-menu-item:disabled { color: var(--color-text-muted); cursor: not-allowed; } .dh-menu-panel .dh-menu-item .shortcut { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--color-text-muted); letter-spacing: 0; } .dh-menu-panel .dh-menu-sep { height: 1px; background: var(--color-border); margin: 4px 0; } .dh-menu-backdrop { position: fixed; inset: 0; /* WICHTIG: UNTER dem Workbar-Stacking-Context (970). Sonst fängt die Backdrop Klicks auf Menu-Items ab (Panel ist im Workbar-Stack eingeschlossen, nicht global 1005). */ z-index: 950; background: transparent; } /* Prop-Tab-Body-Panels */ .dh-prop-panel { display: none; } .dh-prop-panel.active { display: block; } .dh-prop-empty { padding: 24px 16px; text-align: center; color: var(--color-text-muted); font-size: 12.5px; } /* Inner-Toolbox-Legacy (formEditor.css) in Hybrid-Panel integrieren */ .dh-panel-left .toolbox-section { margin: 0; padding: 8px 10px 10px; border-top: 1px solid var(--color-border); } .dh-panel-left .toolbox-section:first-of-type { border-top: 0; } .dh-panel-left .toolbox-section h2 { margin: 4px 4px 6px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); padding: 0; border: 0; } .dh-panel-left .toolbox-item { margin: 4px 0; padding: 6px 10px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface-sunken); cursor: grab; font-size: 11.5px; color: var(--color-text-secondary); box-shadow: none; display: flex; align-items: center; gap: 8px; transition: all var(--duration-fast) var(--ease-out); } .dh-panel-left .toolbox-item:hover { background: var(--color-brand-primary-tint); border-color: var(--color-brand-primary); color: var(--color-brand-primary-hover); border-style: solid; transform: none; box-shadow: none; } .dh-panel-left .toolbox-icon { width: 22px; height: 22px; display: grid; place-items: center; background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 12px; flex-shrink: 0; } /* Canvas-Bereich uebersteuert Legacy-Canvas-Hintergrund */ .dh-canvas-doc .canvas { min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; } .dh-canvas-doc .canvas-empty { padding: 40px 20px; text-align: center; color: var(--color-text-muted); border: 1.5px dashed var(--color-border-strong); border-radius: var(--radius-md); background: transparent; } .dh-canvas-doc .canvas-empty h3 { font-size: var(--text-md); font-weight: 600; color: var(--color-text-secondary); margin: 8px 0 4px; } .dh-canvas-doc .canvas-empty p { font-size: 12.5px; margin: 0; } /* Properties-Panel: Legacy-Property-Group harmonisieren */ .dh-prop-body .property-group { margin-bottom: 12px; } .dh-prop-body .property-group > label { display: block; font-size: 11.5px; font-weight: 500; color: var(--color-text-muted); margin-bottom: 4px; } .dh-prop-body .property-group input[type="text"], .dh-prop-body .property-group input[type="number"], .dh-prop-body .property-group select, .dh-prop-body .property-group textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 12.5px; color: var(--color-text-primary); background: var(--color-surface-raised); } .dh-prop-body .property-group input[type="checkbox"] { margin-right: 6px; } /* Selected field in canvas */ .dh-doc-field { border: 1px solid transparent; border-radius: var(--radius-sm); padding: 6px 8px; margin-bottom: 10px; cursor: pointer; transition: all 0.1s var(--ease-out); position: relative; } .dh-doc-field:hover { border-color: var(--color-border); background: var(--color-surface-sunken); } .dh-doc-field.selected { border-color: var(--color-brand-primary); background: var(--color-brand-primary-tint); box-shadow: 0 0 0 3px rgba(26,127,208,0.18); } .dh-doc-field.selected::before { content: "SELECTED"; position: absolute; top: -9px; left: 8px; background: var(--color-brand-primary); color: #fff; font-size: 9.5px; font-weight: 700; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.06em; font-family: var(--font-mono); } /* Layer > 0 aktiv: geerbte Layer-0-Elemente werden ausgegraut, damit man auf einen Blick erkennt, welche Elemente zum aktiven Layer gehoeren (volle Opacity) und welche nur vom Hauptlayer stammen (dimmed). */ .designer-element.dimmed-layer0, .designer-layout.dimmed-layer0 { opacity: 0.45; } .designer-element.dimmed-layer0:hover, .designer-layout.dimmed-layer0:hover, .designer-element.dimmed-layer0.selected, .designer-layout.dimmed-layer0.selected { opacity: 0.85; } /* Properties-Panel read-only, wenn ein Layer-0-Element waehrend eines Overlay- Layers selektiert ist. Inputs/Buttons bleiben sichtbar, reagieren aber nicht. */ .dh-prop-readonly-banner { margin: 10px 14px 4px 14px; padding: 8px 12px; background: var(--color-surface-muted, #f4f6f8); border-left: 3px solid var(--color-warning, #f7931e); border-radius: 4px; font-size: 12.5px; line-height: 1.35; color: var(--color-text-muted, #525b70); } .dh-prop-body.readonly-layer0 { position: relative; } .dh-prop-body.readonly-layer0 input, .dh-prop-body.readonly-layer0 select, .dh-prop-body.readonly-layer0 textarea, .dh-prop-body.readonly-layer0 button { pointer-events: none !important; opacity: 0.55 !important; cursor: not-allowed !important; } /* ===== Canvas-Toolbar: Schema-Ansicht ===== */ .dh-schema-view { display: flex; flex-direction: column; height: 100%; min-height: 400px; background: var(--color-surface-raised, #fff); border-radius: 6px; } .dh-schema-view-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--color-border, #e5e7eb); font-size: 12.5px; font-weight: 600; color: var(--color-text-muted, #525b70); background: var(--color-surface-muted, #f4f6f8); } .dh-schema-view-code { flex: 1 1 auto; margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace); font-size: 12.5px; line-height: 1.55; color: var(--color-text, #1a1f2e); white-space: pre; background: transparent; } /* ===== Canvas-Toolbar: 12-Column-Raster ===== */ .canvas { position: relative; } .dh-grid-overlay { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 0 8px; pointer-events: none; z-index: 1; } .dh-grid-col { background: linear-gradient(180deg, rgba(22, 112, 181, 0.06) 0%, rgba(22, 112, 181, 0.02) 100%); border-left: 1px dashed rgba(22, 112, 181, 0.25); border-right: 1px dashed rgba(22, 112, 181, 0.25); } /* ===== Canvas-Toolbar: Spalten-Lineal 1-12 ===== */ .dh-ruler { position: sticky; top: 0; display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; padding: 4px 8px; margin-bottom: 8px; background: var(--color-surface-muted, #f4f6f8); border-bottom: 1px solid var(--color-border, #e5e7eb); font-size: 10.5px; font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace); color: var(--color-text-muted, #6b7280); z-index: 5; user-select: none; } .dh-ruler-tick { text-align: center; border-left: 1px solid var(--color-border, #e5e7eb); padding: 2px 4px; } /* ===== Canvas-Toolbar: Feld-ID-Badges + Hidden-Badges ===== */ .dh-field-id-badge { position: absolute; top: -9px; left: 8px; background: var(--color-neutral-700, #374151); color: #fff; font-size: 10px; font-family: var(--font-mono, 'JetBrains Mono', Consolas, monospace); font-weight: 600; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; z-index: 2; pointer-events: none; } .dh-hidden-badge { position: absolute; top: -9px; right: 8px; background: var(--color-warning, #f7931e); color: #fff; font-size: 10px; font-weight: 600; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.04em; text-transform: uppercase; z-index: 2; pointer-events: none; } .designer-element.is-hidden, .designer-layout.is-hidden { opacity: 0.5; border: 1px dashed var(--color-warning, #f7931e) !important; } .designer-element, .designer-layout { position: relative; } /* ===== Validierungs-Tab: mehrsprachige Fehlermeldungen ===== */ .dh-valmsg-row { margin-bottom: 8px; } .dh-valmsg-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .dh-valmsg-inputs input { font-size: 12px; padding: 4px 6px; } /* ===== „Verknuepfte Daten"-Panel unterhalb des Hauptcanvas ===== */ .dh-panel-center { display: flex; flex-direction: column; min-height: 0; } .dh-linked-splitter { height: 6px; background: var(--color-border, #e5e7eb); cursor: row-resize; flex-shrink: 0; position: relative; user-select: none; } .dh-linked-splitter::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 2px; background: var(--color-text-muted, #6b7280); opacity: 0.5; border-radius: 1px; } .dh-linked-splitter:hover { background: var(--color-brand-primary, #1a7fd0); } .dh-linked-panel { display: flex; flex-direction: column; min-height: 60px; background: var(--color-surface-muted, #f4f6f8); border-top: 1px solid var(--color-border, #e5e7eb); overflow: hidden; } .dh-linked-head { display: flex; align-items: center; gap: 12px; padding: 6px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); font-size: 12.5px; } .dh-linked-head > strong { color: var(--color-text-primary); } .dh-linked-tabs { display: flex; gap: 6px; flex: 1 1 auto; overflow-x: auto; } .dh-linked-tab { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; background: var(--color-surface-muted); border: 1px solid var(--color-border); border-radius: 4px 4px 0 0; font-size: 12.5px; cursor: pointer; white-space: nowrap; } .dh-linked-tab.active { background: var(--color-surface-raised); border-bottom-color: var(--color-surface-raised); font-weight: 600; color: var(--color-brand-primary); } .dh-linked-tab-close { background: transparent; border: 0; cursor: pointer; font-size: 14px; color: var(--color-text-muted); padding: 0 2px; line-height: 1; } .dh-linked-tab-close:hover { color: var(--color-danger, #dc2626); } .dh-linked-tab-add { background: transparent; border: 1px dashed var(--color-border); cursor: pointer; padding: 4px 10px; border-radius: 4px; font-size: 14px; color: var(--color-text-muted); } .dh-linked-tab-add:hover { color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .dh-linked-height { display: flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--color-text-muted); margin-left: 8px; } .dh-linked-height input { width: 58px; padding: 2px 4px; font-size: 12px; border: 1px solid var(--color-border); border-radius: 3px; } .dh-linked-tab-title-row { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--color-border); background: var(--color-surface-raised); } .dh-linked-tab-title-row label { font-size: 12px; color: var(--color-text-muted); } .dh-linked-tab-title-row input { flex: 1; font-size: 13px; padding: 4px 8px; border: 1px solid var(--color-border); border-radius: 4px; } .dh-linked-canvas-scroll { flex: 1 1 auto; overflow: auto; padding: 12px; } .dh-linked-canvas { min-height: 100%; background: var(--color-surface-raised); border-radius: 6px; padding: 16px; } .dh-linked-empty, .dh-linked-empty-panel { padding: 20px; text-align: center; color: var(--color-text-muted); font-size: 13px; font-style: italic; }