/* ========================================== VERFAHRENSDOKU24 DESIGN SYSTEM Zentrale Variablen-Definition ========================================== */ /* PWA Install-Button: hidden by default, shown via .pwa-installable class on */ [data-pwa-install] { display: none; } html.pwa-installable [data-pwa-install] { display: block; } :root { /* Primäre Markenfarben */ --color-primary: #114862; --color-primary-hover: #0d3a4f; --color-secondary: #84BEC0; --color-accent: #9FDADC; /* MudBlazor Theme Override */ --mud-palette-primary: #114862; --mud-palette-primary-text: #114862; --mud-palette-secondary: #84BEC0; --mud-palette-secondary-text: #84BEC0; /* Neutrale Farben */ --color-text-primary: #2A2A2A; --color-text-secondary: #636262; --color-background: #FFFFFF; --color-surface: #F8FAFA; --color-surface-alt: #E9F3F4; --color-border: #E0E0E0; /* Sidebar-Farben (dunkles Design) */ --color-sidebar-bg: #114862; --color-sidebar-hover: #1a5873; --color-sidebar-border: #1a5873; --color-nav-active: #84BEC0; --color-nav-active-text: #114862; --color-nav-submenu-active: #9FDADC; /* Statusfarben */ --color-success: #84BEC0; --color-warning: #114862; --color-error: #D32F2F; --color-info: #84BEC0; /* Spacing (8px System) */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 50%; /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; /* Z-Index */ --z-dropdown: 100; --z-sticky: 200; --z-modal: 300; --z-toast: 400; } /* ========================================== GLOBALE STYLES ========================================== */ html, body { font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--color-text-primary); background-color: var(--color-surface); overflow: hidden; height: 100vh; height: 100dvh; } /* MainLayout Scrolling */ .mud-main-content { height: 100vh; height: 100dvh; overflow-y: auto; } /* Fokus-Styles */ *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* ========================================== MUDBLAZOR OVERRIDES ========================================== */ /* MudBlazor Primary Color Override - Dunkelblau statt Default-Lila */ .mud-theme-primary, .mud-primary-text { color: var(--color-primary) !important; } .mud-primary { background-color: var(--color-primary) !important; color: white !important; } /* AppBar mit Primary Color */ .mud-appbar.mud-appbar-color-primary { background-color: var(--color-primary) !important; color: white !important; } /* Notification Badge - naeher am Icon positioniert */ .notification-badge { z-index: 1; } .notification-badge .mud-badge.mud-badge-overlap { inset: auto auto calc(100% - 18px) calc(100% - 18px) !important; } /* Secondary Color Override - Tuerkis */ .mud-secondary-text, .mud-theme-secondary { color: var(--color-secondary) !important; } .mud-secondary { background-color: var(--color-secondary) !important; } /* Progress Bar mit Secondary Color - Tuerkis */ .mud-progress-linear.mud-secondary .mud-progress-linear-bar { background-color: var(--color-secondary) !important; } /* Icons mit Secondary Color - Tuerkis fuer Ordner etc. */ .mud-icon-root.mud-secondary-text { color: var(--color-secondary) !important; } /* Input Validation States - Override MudBlazor's purple with Design System colors */ /* Required fields should stay gray until form is submitted (error state) */ .mud-input-required:not(.mud-input-error) .mud-input-outlined-border { border-color: var(--color-border) !important; } .mud-input-required:not(.mud-input-error) .mud-input-label { color: var(--color-text-secondary) !important; } /* Error state - only show red when actually in error */ .mud-input-error .mud-input-outlined-border { border-color: var(--color-error) !important; } .mud-input-error .mud-input-label { color: var(--color-error) !important; } /* Input Hover */ .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--color-secondary) !important; } /* Input Focus */ .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-primary) !important; } .mud-input-label.mud-input-label-inputcontrol.mud-input-label-focused { color: var(--color-primary) !important; } /* MudSelect und MudNumericField - gleiche Regeln wie MudTextField */ .mud-select .mud-input-outlined:not(.mud-input-error) .mud-input-outlined-border, .mud-input-control .mud-input-outlined:not(.mud-input-error) .mud-input-outlined-border { border-color: var(--color-border) !important; } .mud-select .mud-input-outlined:hover .mud-input-outlined-border, .mud-input-control .mud-input-outlined:hover .mud-input-outlined-border { border-color: var(--color-secondary) !important; } .mud-select .mud-input-outlined.mud-input-focused .mud-input-outlined-border, .mud-input-control .mud-input-outlined.mud-input-focused .mud-input-outlined-border { border-color: var(--color-primary) !important; } /* Buttons */ .mud-button-filled.mud-button-filled-primary { background-color: var(--color-primary) !important; color: white !important; } .mud-button-filled.mud-button-filled-primary:hover { background-color: var(--color-primary-hover) !important; color: white !important; } /* Deaktivierte Primary-Buttons: Graue Hintergrund und lesbare Schrift */ .mud-button-filled.mud-button-filled-primary.mud-disabled, .mud-button-filled.mud-button-filled-primary[disabled] { background-color: var(--color-border) !important; color: var(--color-text-secondary) !important; } /* Deaktivierte Outlined-Buttons: Grauer Rahmen und lesbare Schrift */ .mud-button-outlined.mud-button-outlined-primary.mud-disabled, .mud-button-outlined.mud-button-outlined-primary[disabled] { border-color: var(--color-border) !important; color: var(--color-text-secondary) !important; } /* Outlined Buttons */ .mud-button-outlined.mud-button-outlined-primary { border-color: var(--color-primary) !important; color: var(--color-primary) !important; } .mud-button-outlined.mud-button-outlined-primary:hover { border-color: var(--color-primary-hover) !important; background-color: rgba(17, 72, 98, 0.04) !important; } /* Text Buttons (Variant.Text) */ .mud-button-text.mud-button-text-primary { color: var(--color-primary) !important; } .mud-button-text.mud-button-text-primary:hover { color: var(--color-primary-hover) !important; background-color: rgba(17, 72, 98, 0.04) !important; } /* MudTextField Variant.Text - Underline Farben */ .mud-input-underline:before { border-bottom-color: var(--color-border) !important; } .mud-input-underline:hover:before { border-bottom-color: var(--color-secondary) !important; } .mud-input-underline:after { border-bottom-color: var(--color-primary) !important; } /* MudText mit Color.Secondary - Design-System Farbe */ .mud-secondary-text { color: var(--color-text-secondary) !important; } /* MudChip - Primary Color */ .mud-chip.mud-chip-color-primary { background-color: var(--color-primary) !important; color: white !important; } /* MudSelect Dropdown - Aktives/Gewähltes Element */ .mud-list-item.mud-list-item-clickable.mud-selected-item { background-color: var(--color-surface-alt) !important; color: var(--color-primary) !important; } .mud-list-item.mud-list-item-clickable:hover { background-color: var(--color-surface-alt) !important; } /* MudSwitch - Primary Color */ .mud-switch-track.mud-primary { background-color: var(--color-primary) !important; } .mud-switch-base.mud-primary-text { color: var(--color-primary) !important; } .mud-switch-base.mud-checked .mud-switch-thumb { background-color: var(--color-primary) !important; } /* MudRadio - Primary Color */ .mud-radio.mud-primary.mud-checked .mud-radio-icons { color: var(--color-primary) !important; } /* MudCheckBox - Primary Color */ .mud-checkbox .mud-primary-text { color: var(--color-primary) !important; } .mud-checkbox .mud-primary-text svg { color: var(--color-primary) !important; } .mud-checkbox .mud-primary-text:hover, .mud-checkbox .mud-primary-text:hover svg { color: var(--color-primary-hover) !important; } /* MudCheckBox - Hintergrund nur bei Hover/Focus */ .mud-checkbox .mud-ripple-checkbox { background-color: transparent !important; } .mud-checkbox .mud-ripple-checkbox:hover { background-color: rgba(17, 72, 98, 0.08) !important; } /* MudDialog Icon - Primary Color */ .mud-dialog .mud-icon-root.mud-primary-text { color: var(--color-primary) !important; } /* Icon-Adornment (Palette-Icon in TextFields) */ .mud-input-adornment .mud-icon-button { color: var(--color-primary) !important; } .mud-input-adornment-color-primary { color: var(--color-primary) !important; } /* MudExpansionPanel Header - Textfarbe */ .mud-expand-panel .mud-expand-panel-header .mud-expand-panel-text { color: var(--color-text-primary) !important; } /* Input-Labels - Design-System Farben */ .mud-input-label { color: var(--color-text-secondary) !important; } .mud-input-label.mud-input-label-inputcontrol.mud-input-label-animated { color: var(--color-text-secondary) !important; } /* Links */ a, .btn-link { color: var(--color-primary); } a:hover { color: var(--color-secondary); } /* ========================================== BLAZOR ERROR BOUNDARY ========================================== */ .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } /* ========================================== AUTH STYLES ========================================== */ /* Section titles in forms (e.g. Register page) */ .section-title { color: var(--color-primary) !important; font-weight: 600; } /* Secondary text color utility */ .text-secondary { color: var(--color-text-secondary) !important; } /* Auth page links */ .auth-link { color: var(--color-primary) !important; transition: color var(--transition-fast); } .auth-link:hover { color: var(--color-secondary) !important; } /* Login-Spinner Animation */ .login-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: white; border-radius: 50%; animation: login-spin 0.6s linear infinite; margin-right: 8px; vertical-align: middle; } @keyframes login-spin { to { transform: rotate(360deg); } } /* ========================================== CUSTOM BUTTON COLORS ========================================== */ /* ========================================== HEADER LOGO ========================================== */ .header-logo { height: 36px; width: auto; flex-shrink: 0; cursor: pointer; } /* Editor AppBar Styles */ .editor-appbar-title { color: white; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Style-Set Select im Editor Header - weiß */ .style-set-select { width: 140px; background-color: white !important; border-radius: var(--radius-sm); } .style-set-select .mud-input-slot { background-color: white !important; } .style-set-select .mud-select-input { color: var(--color-text-primary) !important; } /* Status-Badges fuer Template-Versionen */ .status-badge-draft { background-color: var(--color-border) !important; color: var(--color-text-secondary) !important; } .status-badge-active { background-color: var(--color-secondary) !important; color: white !important; } .status-badge-archived { background-color: var(--color-warning) !important; color: white !important; } /* Template-Struktur Panel */ .structure-panel { background-color: var(--color-surface); height: 100%; overflow-y: auto; } .structure-header { font-size: 0.875rem; font-weight: 600; color: white; padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-primary); height: 48px; min-height: 48px; max-height: 48px; display: flex; align-items: center; box-sizing: border-box; } /* + Button im structure-header weiß */ .structure-header .mud-icon-button { color: white !important; } /* Mobile structure-header mit 3-Spalten-Layout (Themen | Chat | Vorschau) */ .structure-header-mobile { justify-content: space-between; } /* Tablet structure-header: CHAT links, Vorschau-Button rechts */ .structure-header-tablet { justify-content: space-between; } .structure-header-mobile-btn { color: white !important; text-transform: none !important; font-size: 0.8rem !important; font-weight: 500 !important; padding: 4px 8px !important; min-width: unset !important; } .structure-header-mobile-btn .mud-icon-root { color: white !important; font-size: 1.1rem !important; } .structure-header .mud-icon-button .mud-icon-root { color: white !important; } /* Expertenfeedback-Button: Icon rot wenn Kommentar nicht geloest */ .feedback-icon-unresolved.dark-bg-btn-outlined .mud-icon-root { color: #D32F2F !important; } /* Kommentar-Icon horizontal spiegeln (Sprechblase zeigt nach rechts) */ .comment-icon-flip .mud-icon-root { transform: scaleX(-1); } /* Structure-Header mit Fortschrittsbalken (TOC) */ .structure-header-with-progress { flex-wrap: nowrap; gap: var(--spacing-xs); } .toc-progress-section { display: flex; align-items: center; gap: var(--spacing-sm); flex: 1; margin-left: var(--spacing-md); margin-right: var(--spacing-sm); } .toc-progress-bar { flex: 1; min-width: 40px; } /* Hintergrund des Fortschrittsbalkens (leerer Teil) - heller auf dunklem Header */ .toc-progress-bar .mud-progress-linear { background-color: rgba(255, 255, 255, 0.3) !important; height: 6px !important; border-radius: 3px !important; } /* Gefuellter Teil des Fortschrittsbalkens - Tuerkis */ .toc-progress-bar .mud-progress-linear-bar { background-color: var(--color-secondary) !important; border-radius: 3px !important; } .toc-progress-text { font-size: 0.75rem; white-space: nowrap; color: rgba(255, 255, 255, 0.85) !important; } /* Structure-Header mit Actions (Preview) */ .structure-header-with-actions { display: flex; align-items: center; } .preview-download-btn { color: white !important; font-size: 0.75rem; padding: 4px 8px; } .preview-download-btn .mud-icon-root { color: white !important; } /* MainSection-Container im Strukturbaum */ .main-section-container { background-color: white; border-radius: var(--radius-sm); border: 1px solid var(--color-border); margin-bottom: var(--spacing-xs); } /* Tree-Item im Strukturbaum */ .tree-item { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; transition: background-color var(--transition-fast); } .tree-item:hover { background-color: var(--color-surface); } .tree-item.selected { background-color: var(--color-accent); } .tree-item .drag-handle { opacity: 0; transition: opacity var(--transition-fast); cursor: grab; } .tree-item:hover .drag-handle { opacity: 1; } /* Topic-Item Styles */ .topic-item { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; transition: background-color var(--transition-fast); border-radius: var(--radius-sm); margin: 2px 0; } .topic-item:hover { background-color: var(--color-surface); } .topic-item.selected { background-color: var(--color-accent); color: var(--color-primary); } /* Icon-Buttons dunkelblau */ .structure-panel .mud-icon-button { color: var(--color-primary) !important; } /* Hauptpunkt hinzufuegen Button */ .btn-add-main-section { background-color: white !important; border: 1px solid var(--color-border) !important; color: var(--color-primary) !important; } .btn-add-main-section:hover { background-color: var(--color-surface) !important; } /* ========================================== 3-SPALTEN EDITOR LAYOUT ========================================== */ .editor-column { height: 100%; display: flex; flex-direction: column; overflow: hidden; } .editor-column-structure { background-color: var(--color-surface); } .editor-column-questions { background-color: white; } .editor-column-document { background-color: var(--color-surface); } /* Editor-Spalten Platzhalter */ .editor-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; color: var(--color-text-secondary); text-align: center; padding: var(--spacing-xl); } .editor-placeholder .placeholder-icon { font-size: 48px; margin-bottom: var(--spacing-md); opacity: 0.5; } /* ========================================== ADMIN LIST STYLES Zentrale Styles fuer Admin-Listen (Templates, Style-Sets, etc.) ========================================== */ /* Page Header Card */ .admin-page-header { background-color: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-lg); margin-bottom: var(--spacing-lg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Filter Box */ .admin-filter-box { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-md); margin-bottom: var(--spacing-md); } /* Table Container */ .admin-table-container { background-color: white; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Table Header */ .admin-table .mud-table-head { background-color: var(--color-surface); } .admin-table .mud-table-head .mud-table-cell { font-weight: 600 !important; color: var(--color-text-primary) !important; height: 40px; } /* Zebra Striping */ .admin-table .mud-table-body tr:nth-child(even) { background-color: var(--color-surface); } .admin-table .mud-table-body tr:nth-child(odd) { background-color: white; } /* Row Hover */ .admin-table .mud-table-body tr:hover { background-color: var(--color-surface-alt) !important; } /* Cell Padding */ .admin-table .mud-table-cell { padding: var(--spacing-sm); vertical-align: middle; } /* ========================================== RESPONSIVE UTILITIES (Mobile < 960px) ========================================== */ @media (max-width: 959px) { .page-header-responsive { flex-direction: column !important; align-items: flex-start !important; gap: 12px !important; padding: 16px !important; } .page-header-responsive .page-header-actions { width: 100%; } .filter-toolbar-responsive { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .filter-toolbar-responsive .mud-input-control, .filter-toolbar-responsive .mud-select { min-width: unset !important; width: 100% !important; } .filter-toolbar-responsive .mud-spacer { display: none; } .content-padding-responsive { padding: 16px !important; } .dashboard-welcome { font-size: 1.5rem !important; } /* Editor AppBar: weniger linkes Padding */ .editor-appbar-mobile .mud-toolbar { padding-left: 4px !important; } } /* ========================================== REDUCED MOTION ========================================== */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================== QUESTIONS & VARIABLES PANEL (AP-19) ========================================== */ /* Panel Header */ .questions-panel-header { font-size: 1rem; font-weight: 600; color: var(--color-text-primary); padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); } /* Section Headers (Eingabe-Fragen, Variablen) - volle Breite */ .section-header { display: flex; align-items: center; justify-content: space-between; background-color: var(--color-primary); padding: var(--spacing-sm) var(--spacing-md); margin: 0 calc(-1 * var(--spacing-md)) var(--spacing-sm) calc(-1 * var(--spacing-md)); width: calc(100% + 2 * var(--spacing-md)); min-height: 40px; } /* + Button im section-header weiß */ .section-header .mud-icon-button { color: white !important; } .section-header h4 { font-size: 0.875rem; font-weight: 600; color: white; margin: 0; background-color: transparent; padding: 0; border-radius: 0; } /* Button in Section-Header - weiß auf dunkelblau */ .section-header .mud-button-outlined { border-color: white !important; color: white !important; } .section-header .mud-button-outlined:hover { background-color: rgba(255, 255, 255, 0.1) !important; } /* Expandable Question Item - Grau */ .question-item { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--spacing-sm); overflow: hidden; } .question-item-header { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); cursor: move; transition: background-color var(--transition-fast); } .question-item:hover { background-color: var(--color-surface-hover, #f0f0f0); } .question-item.expanded { background-color: white; } .question-item.expanded .question-item-header { background-color: var(--color-surface); border-radius: var(--radius-sm) var(--radius-sm) 0 0; } .question-item.expanded .question-item-header:hover { background-color: var(--color-surface-hover, #f0f0f0); } .question-item-text { flex: 1; font-size: 0.875rem; color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .question-item-content { padding: var(--spacing-md); background-color: white; } /* Question Reference Item */ .reference-item { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-sm); background-color: white; border: 1px solid var(--color-border); border-radius: var(--radius-sm); margin-bottom: var(--spacing-sm); } .reference-item-header { display: flex; align-items: center; gap: var(--spacing-sm); } .reference-item .link-icon { color: var(--color-primary); flex-shrink: 0; } /* Variable Tag - Tuerkiser Header, weisser Inhalt */ .variable-tag { position: relative; display: flex; flex-direction: column; background-color: rgba(159, 218, 220, 0.2); border: 1px solid var(--color-secondary); border-radius: var(--radius-sm); transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast); margin-bottom: var(--spacing-sm); overflow: hidden; } .variable-tag:hover { background-color: rgba(159, 218, 220, 0.3); border-color: var(--color-primary); } .variable-tag.expanded { background-color: white; border-color: var(--color-border); } .variable-tag.expanded:hover { background-color: white; border-color: var(--color-border); } .variable-tag-header { display: flex; align-items: flex-start; gap: var(--spacing-sm); width: 100%; cursor: grab; padding: var(--spacing-sm) var(--spacing-md); transition: background-color var(--transition-fast); } .variable-tag-header:active { cursor: grabbing; } .variable-tag.expanded .variable-tag-header { background-color: rgba(159, 218, 220, 0.2); } .variable-tag.expanded .variable-tag-header:hover { background-color: rgba(159, 218, 220, 0.3); } /* grip-handle entfernt - Header ist jetzt komplett draggable */ .variable-tag .variable-name { flex: 1; font-family: monospace; font-size: 0.875rem; color: var(--color-primary); word-break: break-all; min-width: 0; } .variable-tag-content { width: 100%; padding: var(--spacing-md); background-color: white; } /* Empty State */ .empty-state { color: var(--color-text-secondary); font-style: italic; font-size: 0.875rem; padding: var(--spacing-sm) 0; } /* Mehrfach-Setting mit einfachem grauem Rand */ .topic-multiple-setting { padding: var(--spacing-sm) var(--spacing-md); background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); } /* Drag Handle Visibility */ .drag-handle-hidden { opacity: 0; transition: opacity var(--transition-fast); } .question-item:hover .drag-handle-hidden, .variable-tag:hover .drag-handle-hidden { opacity: 1; } /* Drag&Drop Beschraenkung: Bei expandiertem Akkordeon nur Header draggable */ .question-item.expanded .question-item-content, .variable-tag.expanded .variable-tag-content { pointer-events: auto; cursor: default; } /* MudDropContainer Item-Wrapper: Bei expandiertem Akkordeon Drag nur auf Header */ .question-item.expanded, .variable-tag.expanded { cursor: default; } .question-item.expanded .question-item-header, .variable-tag.expanded .variable-tag-header { cursor: grab; } .question-item.expanded .question-item-header:active, .variable-tag.expanded .variable-tag-header:active { cursor: grabbing; } /* ========================================== CROSS-CONTAINER DRAG HANDLE (AP-21) Gesamter Variable-Header ist jetzt Drag-Handle ========================================== */ /* cross-container-drag-handle ist jetzt auf variable-tag-header Styles werden von .variable-tag-header uebernommen */ /* Waehrend des Drags: Visual Feedback */ .variable-tag.dragging-to-template { opacity: 0.6; border-color: var(--color-primary); } /* ========================================== DRAG & DROP INDICATOR STYLES Design-System Farben: Primary #114862, Secondary #84BEC0 ========================================== */ /* Drop-Zone waehrend eines Drag-Vorgangs */ .drag-drop-zone.mud-drop-zone-drag { background-color: rgba(132, 190, 192, 0.1); border-radius: var(--radius-sm); } /* MudBlazor Drop-Indikator Override - Rahmen auf Primary-Farbe */ .mud-drop-item-preview { border-color: var(--color-primary) !important; border: 2px dashed var(--color-primary) !important; background-color: rgba(17, 72, 98, 0.08) !important; } /* Dragged Item - leicht transparenter Hintergrund */ .drag-drop-zone .mud-drop-item-dragging { opacity: 0.5; } /* Hover-Effekt beim Ueberfahren waehrend des Drags */ .drag-drop-zone.mud-drop-zone-can-drop { background-color: rgba(132, 190, 192, 0.15); } /* MudBlazor Drag-Preview Styling Override */ .mud-drop-container .mud-drop-item-preview, .mud-drop-zone .mud-drop-item-preview { border: 2px dashed var(--color-primary) !important; background-color: rgba(17, 72, 98, 0.05) !important; border-radius: var(--radius-sm) !important; } /* MudBlazor Drop-Placeholder Override - Lila auf Dunkelblau aendern */ .mud-dropitem-placeholder, .mud-dropitem-placeholder.mud-border-primary, .mud-dropitem-placeholder.mud-chip-color-primary { border-color: var(--color-primary) !important; background-color: rgba(17, 72, 98, 0.06) !important; } /* MudBlazor Border-Primary Override fuer Drag&Drop */ .mud-drop-zone .mud-border-primary, .mud-drop-container .mud-border-primary { border-color: var(--color-primary) !important; } /* ========================================== DOCUMENT TEMPLATE PANEL (AP-21) ========================================== */ /* Main Panel Container */ .document-template-panel { display: flex; flex-direction: column; height: 100%; background-color: var(--color-surface); } /* Scrollable Document Area */ .document-content-area { flex: 1; overflow-y: auto; background-color: #E8ECEF; padding: var(--spacing-md); } /* White Paper Area - looks like a document */ .document-paper { background-color: white; border-radius: var(--radius-md); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); padding: 60px calc(60px + 32px); min-height: 400px; position: relative; } /* Empty Template Hint */ .empty-template-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--spacing-2xl); color: var(--color-text-secondary); text-align: center; } /* Insert Line Container */ .insert-line-container { height: 4px; position: relative; margin: 0; transition: all var(--transition-fast); } /* Insert Line Container als umrandete Box bei Drag-Over */ .insert-line-container.drag-over { height: 60px; background-color: rgba(132, 190, 192, 0.15); border: 2px dashed var(--color-secondary); border-radius: var(--radius-md); margin: var(--spacing-sm) 0; } /* Insert Line */ .insert-line { position: absolute; inset: 0; display: flex; align-items: center; z-index: 10; opacity: 0; transition: opacity var(--transition-fast); } /* CSS-basierter Hover fuer Insert-Lines (statt Blazor @onmouseenter) */ .insert-line-container:hover .insert-line { opacity: 1; } .insert-line-bar { flex: 1; height: 2px; background-color: var(--color-primary); } .insert-line-button { background-color: var(--color-primary) !important; color: white !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; margin: 0 var(--spacing-sm); flex-shrink: 0; transition: transform var(--transition-fast); } .insert-line-button:hover { transform: scale(1.1); } /* Insert Line for Variable Drop */ .insert-line-drop .insert-line-bar { background-color: var(--color-secondary); height: 3px; } /* Insert Line innerhalb der Box ausblenden, Box selbst wird zum Drop-Target */ .insert-line-container.drag-over .insert-line { opacity: 0; pointer-events: none; /* Drag-Events nicht blockieren */ } /* Drop-Hinweis in der Box anzeigen */ .insert-line-container.drag-over::after { content: 'Variable hier ablegen'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-secondary); font-size: 0.875rem; font-weight: 500; pointer-events: none; /* Wichtig: Drag-Events nicht blockieren */ } /* Block Reorder Wrapper - umschliesst jeden Block als Drop-Target */ .block-reorder-wrapper { position: relative; transition: all var(--transition-fast); border-radius: var(--radius-sm); margin: 2px 0; } .block-reorder-wrapper::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 4px; background-color: transparent; border-radius: 2px; transition: background-color var(--transition-fast); } .block-drop-target-active { background-color: rgba(132, 190, 192, 0.1); } .block-drop-target-active::before { background-color: var(--color-secondary); } /* ========================================== TEMPLATE BLOCK ITEM ========================================== */ .template-block-item { position: relative; padding: 0; /* Horizontales Padding um Controls innerhalb des Hover-Bereichs zu halten */ margin-left: -40px; margin-right: -40px; padding-left: 40px; padding-right: 40px; transition: opacity var(--transition-fast); } .template-block-item.dragging { opacity: 0.5; } /* CSS-basierter Hover statt JavaScript für bessere UX */ .template-block-item:hover .block-control { opacity: 1; } /* Block Controls (Left: Drag Handle, Right: Settings/Delete) */ .block-control { position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--transition-fast); z-index: 20; display: flex; gap: var(--spacing-xs); } .block-control-left { left: 4px; } .block-control-right { right: 4px; } .drag-handle { cursor: grab; color: var(--color-text-secondary); transition: color var(--transition-fast); } .drag-handle:hover { color: var(--color-primary); } .block-content { position: relative; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 0; } .template-block-item:hover .block-content { border-color: var(--color-border); } /* ========================================== BLOCK TYPE STYLES ========================================== */ /* Drop Target Highlight for Variable Drop */ .drop-target { outline: 2px solid var(--color-secondary); outline-offset: 2px; border-radius: var(--radius-sm); background-color: rgba(159, 218, 220, 0.1); } /* ========================================== COVER BLOCK V2 (AP-21 Erweiterung) Neues Deckblatt-Layout mit Header-Bereich, Unternehmens-, Gueltigkeits- und Versions-Sektion ========================================== */ .cover-block-v2 { text-align: center; border-bottom: 1px solid var(--color-border); margin-bottom: var(--spacing-lg); } /* Header-Bereich - randlos (ignoriert Parent-Padding) */ .cover-header-section { position: relative; min-height: 240px; display: flex; align-items: center; justify-content: center; background-color: #f0f4f8; overflow: hidden; /* Negativer Margin um das preview-paper Padding (80px) auszugleichen */ margin: -80px -80px 0 -80px; width: calc(100% + 160px); /* Obere Ecken abrunden passend zum preview-paper border-radius */ border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); } .cover-header-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: top center; background-repeat: no-repeat; z-index: 0; } .cover-header-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 1; } .cover-header-content { position: relative; z-index: 2; padding: var(--spacing-xl); display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); } .cover-main-heading { cursor: text; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .cover-main-heading:hover { background-color: rgba(255, 255, 255, 0.5); } .cover-sub-heading { cursor: text; padding: var(--spacing-xs) var(--spacing-md); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .cover-sub-heading:hover { background-color: rgba(255, 255, 255, 0.5); } .cover-divider { /* Breite wird per JS dynamisch an Ueberschrift angepasst, Fallback-Werte */ width: auto; min-width: 200px; max-width: 90%; margin: var(--spacing-sm) 0; transition: width 0.2s ease; } /* Settings-Button (oben rechts im Header) */ .cover-settings-button { position: absolute; top: var(--spacing-sm); right: var(--spacing-sm); z-index: 3; } .cover-settings-button .mud-icon-button { background-color: rgba(255, 255, 255, 0.9); border: 1px solid var(--color-border); } .cover-settings-button .mud-icon-button:hover { background-color: white; box-shadow: var(--shadow-sm); } /* Farbvorschau im Settings-Dialog */ .cover-color-preview { width: 24px; height: 24px; border-radius: var(--radius-sm); border: 1px solid var(--color-border); } /* Settings Preview im Dialog */ .cover-settings-preview { padding: var(--spacing-sm); background-color: var(--color-surface); border-radius: var(--radius-sm); display: flex; justify-content: center; } /* Unternehmens-Bereich */ .cover-company-section { padding: var(--spacing-xl) var(--spacing-md); } /* Gueltigkeits-Bereich */ .cover-validity-section { padding: var(--spacing-lg) var(--spacing-md); } /* Versions-Bereich */ .cover-version-section { padding: var(--spacing-lg) var(--spacing-md); padding-bottom: var(--spacing-xl); /* Ca. 2/5 der Deckblatt-Hoehe als Abstand zum naechsten Element */ margin-bottom: 40%; } /* Gemeinsame Styles fuer Label und Value */ .cover-label { cursor: text; margin-bottom: var(--spacing-xs); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .cover-label:hover { background-color: rgba(248, 250, 250, 0.8); } .cover-value { cursor: text; padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--radius-sm); transition: background-color var(--transition-fast); margin-bottom: var(--spacing-xs); } .cover-value:hover { background-color: rgba(248, 250, 250, 0.8); } .cover-value.text-drop-active { background-color: rgba(159, 218, 220, 0.2); outline: 2px dashed var(--color-primary); } /* Platzhalter-Texte */ .cover-validity-placeholder, .cover-version-placeholder { color: var(--color-text-secondary); font-style: italic; } /* Input-Feld zentriert */ .cover-input-centered { text-align: center; } .cover-input-centered input { text-align: center !important; } /* Legacy: Alte Cover-Block Styles fuer Rueckwaertskompatibilitaet */ .cover-block { padding: var(--spacing-2xl) 0; text-align: center; border-bottom: 1px solid var(--color-border); padding-bottom: var(--spacing-2xl); margin-bottom: var(--spacing-lg); } /* TOC Block */ .toc-block { padding: var(--spacing-md) 0; } .toc-title { font-size: 1.25rem; font-weight: 600; margin-bottom: var(--spacing-md); } .toc-preview { color: var(--color-text-secondary); font-size: 0.875rem; } .toc-list { list-style: none; padding: 0; margin: 0; } .toc-item { margin-bottom: var(--spacing-xs); font-style: normal; } /* Level-basierte Einrueckung fuer TOC-Eintraege */ .toc-level-1 { margin-left: 0; } .toc-level-2 { margin-left: 1rem; } .toc-level-3 { margin-left: 2rem; } .toc-level-4 { margin-left: 3rem; } .toc-level-5 { margin-left: 4rem; } .toc-number { margin-right: 0.5rem; } .toc-text { /* Ueberschriftentext im TOC */ } .toc-auto-hint { font-size: 0.75rem; margin-top: var(--spacing-sm); } /* TOC Links - Scrollt zu Ueberschriften ohne Navigation (AP-38) */ .toc-link { display: flex; align-items: baseline; cursor: pointer; color: var(--color-primary); text-decoration: none; } /* Punkte zwischen Text und rechtem Rand */ .toc-link::after { content: ""; flex-grow: 1; margin: 0 0.5rem 0.25rem 0.5rem; border-bottom: 1px dotted currentColor; opacity: 0.4; } .toc-link:hover .toc-text { text-decoration: underline; } /* Heading Block */ .heading-block { padding: 6px 0; /* zwischen spacing-xs (4px) und spacing-sm (8px) */ } .heading-text { cursor: text; display: block; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); } .heading-text:hover { background-color: rgba(248, 250, 250, 0.5); } /* Font-size wird vom StyleSet (vd-heading-*) gesetzt */ /* Nur margin-top/bottom setzen, damit margin-left/-right von .heading-text erhalten bleibt */ .heading-h1 { font-weight: 700; margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md); } .heading-h2 { font-weight: 600; margin-top: var(--spacing-md); margin-bottom: var(--spacing-sm); } .heading-h3 { font-weight: 600; margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .heading-h4 { font-weight: 600; margin-top: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .heading-h5 { font-weight: 600; margin-top: var(--spacing-xs); margin-bottom: var(--spacing-xs); } .heading-input { width: 100%; } .heading-input-h1 { font-size: 1.5rem !important; font-weight: 700 !important; } .heading-input-h2 { font-size: 1.25rem !important; font-weight: 600 !important; } .heading-input-h3 { font-size: 1.125rem !important; font-weight: 600 !important; } .heading-input-h4 { font-size: 1rem !important; font-weight: 600 !important; } .heading-input-h5 { font-size: 0.875rem !important; font-weight: 600 !important; } /* Heading Topic Link (AP-21 Teil 8) */ .heading-topic-link { margin-top: var(--spacing-xs); font-size: 0.85rem; } .heading-topic-link .mud-select { max-width: 280px; } .heading-topic-link.readonly { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-text-secondary); font-style: italic; } .heading-topic-link.readonly .mud-icon-root { color: var(--color-primary); } /* Label-Value Block */ .label-value-block { display: flex; gap: var(--spacing-md); padding: var(--spacing-xs) 0; align-items: baseline; } .label-value-label { font-weight: 600; width: 50%; flex-shrink: 0; cursor: text; padding: 2px 4px; margin: -2px -4px; border-radius: var(--radius-sm); } .label-value-label:hover { background-color: rgba(248, 250, 250, 0.5); } .label-value-value { font-family: monospace; font-size: 0.875rem; color: var(--color-primary); width: 50%; padding: 2px 8px; border-radius: var(--radius-sm); cursor: text; } .label-value-value:hover { outline: 2px solid rgba(17, 72, 98, 0.3); } .label-value-input { min-width: 120px; } .label-value-input-value { font-family: monospace !important; } /* Flow Text Block */ .flow-text-block { padding: var(--spacing-xs) 0; } .flow-text-content { line-height: 1.6; cursor: text; padding: 4px; margin: -4px; border-radius: var(--radius-sm); } .flow-text-content:hover { background-color: rgba(248, 250, 250, 0.5); } .flow-text-input { width: 100%; } /* Editor-Inputs erben Schriftgroesse vom StyleSet */ .flow-text-input textarea, .heading-input input, .cover-input-centered input, .label-value-input input, .table-block-v2-input input, .simple-table-block-input input, .attachment-input input { font-size: inherit !important; font-family: inherit !important; } .flow-text-placeholder, .block-placeholder { color: var(--mud-palette-text-secondary); font-style: italic; } /* Markdown-Formatierung in FlowTextBlock */ .flow-text-formatted p { margin: 0 0 0.5em 0; } .flow-text-formatted p:last-child { margin-bottom: 0; } .flow-text-formatted strong { font-weight: 600; } .flow-text-formatted em { font-style: italic; } .flow-text-formatted ul { margin: 0.15em 0; padding-left: 1.5em; list-style-type: disc; } .flow-text-formatted li { margin: 0.05em 0; } .flow-text-formatted .template-variable { background-color: rgba(132, 190, 192, 0.2); padding: 0 2px; border-radius: 2px; font-family: 'Roboto Mono', monospace; font-size: 0.9em; } /* Floating Formatting Toolbar */ .formatting-toolbar-wrapper { position: relative; } .formatting-toolbar { position: absolute; z-index: 10; display: flex; gap: 2px; background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 2px 4px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } .formatting-toolbar .mud-icon-button { min-width: 32px; min-height: 32px; } /* Table Block */ .table-block { padding: var(--spacing-sm) 0; } .table-block-table { width: 100%; border-collapse: collapse; border: 1px solid var(--color-border); } .table-block-header { background-color: var(--color-surface); border: 1px solid var(--color-border); padding: var(--spacing-sm); text-align: left; font-size: 0.875rem; font-weight: 600; cursor: text; } .table-block-header:hover { background-color: rgba(255, 255, 255, 0.5); } .table-block-header-num { width: 60px; } .table-block-cell { border: 1px solid var(--color-border); padding: var(--spacing-sm); font-size: 0.875rem; cursor: text; } .table-block-cell:hover { background-color: rgba(248, 250, 250, 0.5); } .table-block-cell-num { color: var(--color-text-secondary); cursor: default; } .table-block-input { width: 100%; } /* ========================================== TABLE BLOCK V2 (AP-21) Neues Design mit dynamischen Zeilen ========================================== */ .table-block-v2 { padding: var(--spacing-sm) 0; } .table-block-v2-table { width: 100%; border-collapse: collapse; border-left: 1px solid var(--color-text-primary); } .table-block-v2-header-num { width: 50%; padding: var(--spacing-sm) var(--spacing-md); font-weight: 600; border: none; text-align: left; } .table-block-v2-header-empty { width: 50%; background-color: white; border: none; } .table-block-v2-row { position: relative; } .table-block-v2-label, .table-block-v2-value { width: 50%; padding: var(--spacing-sm) var(--spacing-md); border: none; cursor: text; vertical-align: top; font-size: 0.875rem; } .table-block-v2-label:hover, .table-block-v2-value:hover { background-color: rgba(248, 250, 250, 0.5); } .table-block-v2-value { position: relative; font-family: 'Consolas', 'Monaco', monospace; } .table-block-v2-value.text-drop-active { background-color: rgba(132, 190, 192, 0.15); outline: 2px dashed var(--color-secondary); } .table-block-v2-row-delete-wrapper { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; transition: opacity var(--transition-fast); } .table-block-v2-row:hover .table-block-v2-row-delete-wrapper, .simple-table-block-row:hover .table-block-v2-row-delete-wrapper { opacity: 1; } .table-block-v2-row-delete { /* Keine zusaetzlichen Styles noetig, Position kommt vom Wrapper */ } .table-block-v2-add-row { margin-top: var(--spacing-xs); padding-left: var(--spacing-md); } .table-block-v2-input { width: 100%; } .table-block-v2-label.editing, .table-block-v2-value.editing { padding: 0; } /* === SimpleTableBlock Editor Styles === */ .simple-table-block { padding: var(--spacing-sm) 0; } .simple-table-block-table { width: 100%; border-collapse: collapse; border-left: 1px solid var(--color-text-primary); } .simple-table-block-header { width: 50%; padding: var(--spacing-sm) var(--spacing-md); border: none; text-align: left; font-weight: 600; font-size: 0.875rem; } .simple-table-block-row { position: relative; } .simple-table-block-label, .simple-table-block-value { width: 50%; padding: var(--spacing-sm) var(--spacing-md); border: none; vertical-align: top; font-size: 0.875rem; } .simple-table-block-label:hover, .simple-table-block-value:hover { background-color: rgba(248, 250, 250, 0.5); } .simple-table-block-value { position: relative; font-family: 'Consolas', 'Monaco', monospace; } .simple-table-block-value.text-drop-active { background-color: rgba(132, 190, 192, 0.15); outline: 2px dashed var(--color-secondary); } .simple-table-block-fullwidth { padding: var(--spacing-sm) var(--spacing-md); border: none; vertical-align: top; position: relative; font-family: 'Consolas', 'Monaco', monospace; font-size: 0.875rem; } .simple-table-block-fullwidth:hover { background-color: rgba(248, 250, 250, 0.5); } .simple-table-block-fullwidth.text-drop-active { background-color: rgba(132, 190, 192, 0.15); outline: 2px dashed var(--color-secondary); } .simple-table-block-add-row { margin-top: var(--spacing-xs); padding-left: var(--spacing-md); } .simple-table-block-input { width: 100%; } .simple-table-block-label.editing, .simple-table-block-value.editing, .simple-table-block-header.editing, .simple-table-block-fullwidth.editing { padding: 0; } /* Attachment Block */ .attachment-block { padding: var(--spacing-sm) 0; border-left: 2px solid var(--color-border); padding-left: var(--spacing-md); } .attachment-title { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--spacing-xs); } .attachment-title-text { cursor: text; } .attachment-title-text:hover { background-color: rgba(248, 250, 250, 0.5); border-radius: var(--radius-sm); padding: 2px 4px; } .attachment-description { font-size: 0.875rem; color: var(--color-text-secondary); cursor: text; } .attachment-description:hover { background-color: rgba(248, 250, 250, 0.5); border-radius: var(--radius-sm); } .attachment-filename { font-size: 0.75rem; color: var(--color-text-secondary); font-family: monospace; margin-top: var(--spacing-xs); display: flex; align-items: center; gap: var(--spacing-xs); cursor: text; } .attachment-input { display: inline-block; min-width: 120px; } .attachment-input-filename { font-family: monospace !important; font-size: 0.75rem !important; } /* Variable Drag Styling */ .variable-tag.dragging { opacity: 0.5; } /* ========================================== CURSOR FIX FUER DOCUMENT-TEMPLATE-PANEL MudBlazor setzt cursor: grab auf mud-drop-item, was zu Cursor-Flackern bei schneller Mausbewegung fuehrt ========================================== */ /* Cursor auf default setzen fuer Block-Items im Dokumenten-Panel */ .document-paper .mud-drop-item { cursor: default !important; } /* Drag-Handle behaelt cursor: grab */ .document-paper .drag-handle { cursor: grab !important; } .document-paper .drag-handle:active { cursor: grabbing !important; } /* ========================================== TEXT DROP INDICATOR Vertikaler Cursor beim Drag-Over von Variablen ========================================== */ .text-drop-indicator { position: fixed; width: 2px; background-color: var(--color-primary); pointer-events: none; z-index: 10000; display: none; animation: text-drop-blink 0.5s ease-in-out infinite; } @keyframes text-drop-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Textfeld-Container waehrend Drag */ .text-drop-active { outline: 2px solid var(--color-secondary); outline-offset: 2px; } /* ========================================== DOCUMENTATION LIST COMPACT INPUTS (AP-28) Grauer Hintergrund fuer Suchfelder und Selects ========================================== */ /* Hintergrundfarbe auf den Container anwenden (nicht auf fieldset, das den Text ueberdeckt) */ .compact-input .mud-input-control-input-container { background-color: #F3F3F5 !important; border-radius: 4px; } /* Fieldset-Border transparent halten damit Text sichtbar bleibt */ .compact-input .mud-input-outlined-border { background-color: transparent !important; } /* MudSelect: Ausgewaehlter Wert in Schwarz */ /* MudSelect rendert den Wert in einem DIV (nicht input) mit .mud-select-input */ .compact-input .mud-select-input, .compact-input.mud-select .mud-input-slot { color: #2A2A2A !important; } /* MudTextField: Input-Text in Schwarz */ .compact-input input { color: #2A2A2A !important; } /* Placeholder in mittlerem Grau */ .compact-input input::placeholder { color: #757575 !important; opacity: 1 !important; } /* ========================================== DOCUMENTATION EDITOR STYLES (AP-33) 3-Spalten-Layout fuer Dokumentationsbearbeitung ========================================== */ /* Editor Layout */ .editor-back-button { text-transform: none; } .editor-header-info { overflow: hidden; } .editor-doc-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; } /* Figma-konforme Badges im Header */ .editor-version-badge-custom { padding: 4px 12px; background-color: #1a5873; color: white; font-size: 0.75rem; border-radius: 9999px; border: 1px solid #84BEC0; white-space: nowrap; } /* Status-Badges fuer Dokumentationen (analog zu Template-Versionen) */ .editor-status-badge-inprogress { padding: 4px 12px; background-color: var(--color-border); color: var(--color-text-secondary); font-size: 0.75rem; border-radius: 9999px; white-space: nowrap; } .editor-status-badge-completed { padding: 4px 12px; background-color: var(--color-secondary); color: white; font-size: 0.75rem; border-radius: 9999px; white-space: nowrap; } .editor-status-badge-inexpertreview { padding: 4px 12px; background-color: #D32F2F; color: white; font-size: 0.75rem; border-radius: 9999px; white-space: nowrap; } .editor-status-badge-expertreviewcompleted { padding: 4px 12px; background-color: #FFEBEE; color: #C62828; font-size: 0.75rem; border-radius: 9999px; white-space: nowrap; } /* ExpertReview-Status Badges (Outline-Style zur Unterscheidung vom Dokumentations-Status) */ .expert-review-status-badge { padding: 4px 12px; font-size: 0.75rem; border-radius: 9999px; white-space: nowrap; background-color: transparent; border: 1.5px solid; } .expert-review-status-badge-requested { border-color: #D32F2F; color: #D32F2F; } .expert-review-status-badge-assigned { border-color: #D32F2F; color: #D32F2F; } .expert-review-status-badge-inprogress { border-color: #D32F2F; color: #D32F2F; } .expert-review-status-badge-completed { border-color: #D32F2F; color: #D32F2F; } .expert-review-status-badge-returned { border-color: #D32F2F; color: #D32F2F; } /* ========================================== DARK BACKGROUND BUTTON STYLES (zentral) Gemeinsame Styles fuer alle Buttons auf dunklem Hintergrund (Editor-Header, Review-Toolbar, etc.) ========================================== */ /* --- Outlined Buttons auf dunklem Hintergrund --- */ .dark-bg-btn-outlined, .dark-bg-btn-outlined.mud-button-outlined { color: white !important; border-color: rgba(255, 255, 255, 0.7) !important; border-width: 2px !important; background-color: transparent !important; } .dark-bg-btn-outlined:hover:not(:disabled):not(.mud-disabled) { background-color: rgba(255, 255, 255, 0.15) !important; border-color: white !important; } .dark-bg-btn-outlined.mud-disabled, .dark-bg-btn-outlined[disabled] { color: rgba(255, 255, 255, 0.35) !important; border-color: rgba(255, 255, 255, 0.25) !important; opacity: 1 !important; } .dark-bg-btn-outlined .mud-icon-root, .dark-bg-btn-outlined .mud-button-label, .dark-bg-btn-outlined span { color: inherit !important; } /* --- Filled Buttons auf dunklem Hintergrund (Tuerkis) --- */ .dark-bg-btn-filled, .dark-bg-btn-filled.mud-button-filled { background-color: var(--color-secondary) !important; color: white !important; } .dark-bg-btn-filled:hover:not(:disabled):not(.mud-disabled) { background-color: #6FAAAC !important; } .dark-bg-btn-filled.mud-disabled, .dark-bg-btn-filled[disabled] { background-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.4) !important; opacity: 1 !important; } .dark-bg-btn-filled .mud-icon-root, .dark-bg-btn-filled .mud-button-label, .dark-bg-btn-filled span { color: inherit !important; } /* Toolbar */ .editor-toolbar { display: flex; align-items: center; padding: var(--spacing-sm) var(--spacing-md); background-color: white; border-bottom: 1px solid var(--color-border); min-height: 48px; gap: var(--spacing-md); } .editor-progress-section { display: flex; align-items: center; gap: var(--spacing-md); min-width: 200px; max-width: 400px; flex: 1; } .editor-progress-bar { flex: 1; min-width: 100px; } .editor-progress-text { white-space: nowrap; color: var(--color-text-secondary); font-size: 0.875rem; } /* Editor Container */ .editor-desktop-container { height: 100%; display: flex; overflow: hidden; } /* SplitContainer muss volle Breite einnehmen */ .editor-desktop-container .split-container { width: 100%; flex: 1 1 auto; } .editor-mobile-container { height: 100%; display: flex; flex-direction: column; overflow: hidden; max-width: 100vw; } .editor-splitter { height: 100%; } .editor-column-toc { background-color: white; border-right: 1px solid var(--color-border); } .editor-column-chat { background-color: white; } .editor-column-preview { background-color: var(--color-surface); border-left: 1px solid var(--color-border); } /* Loading & Error States */ .editor-loading, .editor-error { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--spacing-xl); } /* Drawer Styles */ .drawer-header { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); background-color: var(--color-primary); color: white; } .drawer-content { flex: 1; overflow-y: auto; padding: var(--spacing-md); } /* Drawer mit eingebettetem Panel */ .drawer-panel-wrapper { position: relative; height: 100%; display: flex; flex-direction: column; color: var(--color-text-primary); } /* Schließen-Button über dem Panel-Header */ .drawer-close-btn { position: absolute; right: 8px; top: 4px; z-index: 10; color: white !important; } /* Im Drawer: Platz für den absolut positionierten Close-Button */ .drawer-panel-wrapper .structure-header { padding-right: 48px; } /* ========================================== TABLE OF CONTENTS PANEL (AP-33) ========================================== */ .toc-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; background-color: white; } .toc-progress { padding: var(--spacing-md); border-bottom: 1px solid var(--color-border); } .toc-progress-text { color: rgba(255, 255, 255, 0.85) !important; font-size: 0.875rem; } .toc-topics { flex: 1; overflow-y: auto; padding: var(--spacing-sm); } /* Section */ .toc-section { margin-bottom: var(--spacing-sm); } .toc-section-header { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); } .toc-section-header:hover { background-color: var(--color-surface); } .toc-section-title { font-weight: 600; font-size: 0.875rem; color: var(--color-text-primary); } .toc-section-topics { padding-left: var(--spacing-xl); } /* Topic List Item */ .topic-list-item { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-md); cursor: pointer; border-radius: var(--radius-sm); transition: background-color var(--transition-fast); font-size: 0.875rem; } .topic-list-item:hover { background-color: var(--color-surface); } .topic-list-item.selected { background-color: var(--color-surface-alt); color: var(--color-primary); } .topic-bullet { color: var(--color-secondary); } .topic-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topic-status-icon { flex-shrink: 0; } .topic-lock-icon { flex-shrink: 0; color: var(--color-text-muted, #999); } .topic-list-item.locked { cursor: not-allowed; opacity: 0.55; } .topic-list-item.locked:hover { background-color: transparent; } /* Versionierungs-Assistent (TOC) */ .toc-review-assistant { display: flex; flex-direction: column; gap: var(--spacing-xs); padding: var(--spacing-sm) var(--spacing-md); margin: var(--spacing-sm); background-color: var(--color-surface-alt); border: 1px solid var(--color-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: background-color var(--transition-fast); } .toc-review-assistant:hover { background-color: var(--color-surface); } .toc-review-assistant.selected { background-color: var(--color-secondary); color: white; } .toc-review-assistant.selected .toc-review-assistant-progress { color: rgba(255, 255, 255, 0.85); } .toc-review-assistant-header { display: flex; align-items: center; gap: var(--spacing-sm); } .toc-review-assistant-title { font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); } .toc-review-assistant.selected .toc-review-assistant-title { color: white; } .toc-review-assistant-progress { font-size: 0.8rem; color: var(--color-text-secondary); padding-left: calc(var(--spacing-sm) + 20px); /* Aligned with title after icon */ } /* Attachment List */ .attachment-list { border-top: 1px solid var(--color-border); padding: var(--spacing-md); background-color: white; } .attachment-header { display: flex; align-items: center; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); } .attachment-title { font-weight: 600; font-size: 0.875rem; color: var(--color-text-primary); } .attachment-content { padding-left: var(--spacing-lg); } .attachment-empty { font-style: italic; } /* ========================================== CHAT PANEL (AP-33) ========================================== */ .chat-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* ========================================== PREVIEW PANEL (AP-33) ========================================== */ .preview-panel { display: flex; flex-direction: column; height: 100%; overflow: hidden; } .preview-panel-header { padding: var(--spacing-md); background-color: white; border-bottom: 1px solid var(--color-border); } .preview-panel-content { flex: 1; overflow: hidden; padding: 0; /* Kein Padding - Scrollbereich übernimmt */ position: relative; background-color: #E8ECEF; } .preview-paper { width: 794px; /* 210mm @ 96dpi - feste DIN A4-Breite */ background-color: white; border-radius: var(--radius-md); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); padding: 80px; /* Breitere Seitenränder für bessere Lesbarkeit */ min-height: 297mm; /* A4-Höhe als Mindesthöhe */ /* Zoom statt transform: aendert Layout-Groesse, ermoeglicht horizontales Scrollen */ zoom: var(--zoom-factor); } /* Preview Zoom Overlay (AP-38) */ .preview-zoom-overlay { position: absolute; top: var(--spacing-sm); right: calc(var(--spacing-sm) + 12px); /* Platz für Scrollbar */ display: flex; align-items: center; gap: var(--spacing-xs); background-color: rgba(255, 255, 255, 0.95); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--spacing-xs); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); z-index: 10; } .preview-zoom-container { position: relative; height: 100%; overflow-y: auto; overflow-x: auto; /* Fester Rahmen: 16px an allen Seiten, 40px unten für Dokumentende */ padding: 16px 16px 40px 16px; } .preview-paper-wrapper { /* Feste Breite - passt sich NICHT mehr dem Container an */ width: fit-content; /* Zentrieren: margin-left basiert auf der visuellen (skalierten) Breite */ margin-left: max(0px, calc((100% - 794px * var(--zoom-factor)) / 2)); margin-right: 0; flex-shrink: 0; /* Zoom-Faktor als CSS-Variable (wird per inline-style ueberschrieben) */ --zoom-factor: 1; } /* Comment Minimap (Review Navigation) */ .preview-comment-minimap { position: absolute; top: 0; right: 0; width: 12px; height: 100%; background-color: rgba(0, 0, 0, 0.06); z-index: 5; cursor: pointer; } .preview-minimap-marker { position: absolute; left: 1px; right: 1px; height: 4px; background-color: rgba(230, 81, 0, 0.85); border-radius: 1px; pointer-events: auto; cursor: pointer; } .preview-minimap-marker:hover { background-color: rgba(230, 81, 0, 1); height: 6px; margin-top: -1px; } /* Hover-Effekte in der Dokumentenvorschau deaktivieren (AP-39) Nur Variablen (.vd-variable) sollen Hover-Effekt haben */ .preview-paper .cover-value:hover, .preview-paper .cover-label:hover, .preview-paper .cover-main-heading:hover, .preview-paper .cover-sub-heading:hover, .preview-paper .label-value-value:hover, .preview-paper .label-value-label:hover, .preview-paper .flow-text-content:hover, .preview-paper .heading-text:hover { background-color: transparent; outline: none; } /* ========================================== CHAT UI (AP-34) ========================================== */ /* Empty State */ .chat-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: var(--spacing-xl); text-align: center; } .chat-empty-icon { font-size: 48px; opacity: 0.5; } /* Messages Container */ .chat-messages-container { flex: 1; overflow-y: auto; padding: var(--spacing-md); padding-bottom: 8px; display: flex; flex-direction: column; gap: 16px; } /* Chat Mobile: Nachrichten starten unten, breitere Bubbles */ .chat-panel-mobile .chat-messages-container { justify-content: flex-end; } .chat-panel-mobile .chat-message { max-width: 95%; } .chat-panel-mobile .chat-message-system { max-width: 100%; } /* Chat Message Base */ .chat-message { display: flex; gap: 12px; max-width: 80%; } .chat-message-user { align-self: flex-end; flex-direction: row-reverse; } .chat-message-assistant { align-self: flex-start; } .chat-message-system { align-self: center; max-width: 100%; } /* Message Bubble */ .chat-message-bubble { padding: 12px 16px; border-radius: 12px; word-wrap: break-word; overflow-wrap: break-word; } .chat-message-user .chat-message-bubble { background-color: #114862; color: white; } .chat-message-assistant .chat-message-bubble { background-color: #f0f4f8; color: #2A2A2A; } .chat-message-system .chat-message-bubble { background-color: #E9F3F4; color: #2A2A2A; text-align: center; } .chat-message-file { align-self: flex-end; max-width: 80%; } .chat-message-file .chat-message-bubble { background-color: #E9F3F4; color: #2A2A2A; } .chat-message-info { align-self: flex-start; } .chat-message-info .chat-message-bubble { background-color: #E9F3F4; color: #114862; border: 1px solid #84BEC0; } .chat-message-info-avatar { background-color: #84BEC0 !important; color: white !important; } /* Suggestion Chips */ .chat-suggestion-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; } .chat-suggestion-label { font-size: 12px; color: var(--color-text-secondary); } .chat-suggestion-icon { color: var(--color-text-secondary); } .chat-suggestion-hint { font-size: 11px; color: var(--color-text-secondary); font-style: italic; align-self: center; } .chat-suggestion-submit { margin-top: 8px; display: flex; justify-content: flex-end; } .chat-suggestion-submit-btn { text-transform: none; font-size: 12px; } .chat-suggestion-chip-selected { border: 2px solid var(--color-primary) !important; background-color: rgba(17, 72, 98, 0.1) !important; } /* Message Content */ .chat-message-content { font-size: 14px; line-height: 1.5; white-space: pre-wrap; } /* Avatar */ .chat-message-avatar { background-color: white !important; color: #114862 !important; flex-shrink: 0; } /* Attachment in Message */ .chat-message-attachment { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background-color: rgba(255, 255, 255, 0.2); border-radius: 8px; font-size: 12px; } .chat-message-user .chat-message-attachment { background-color: rgba(255, 255, 255, 0.2); } .chat-message-assistant .chat-message-attachment { background-color: #E9F3F4; border: 1px solid #84BEC0; } /* Typing Indicator */ .chat-typing-indicator { display: flex; align-items: center; gap: 12px; padding: 8px 0; } .chat-typing-dots { display: flex; gap: 4px; padding: 12px 16px; background-color: #f0f4f8; border-radius: 12px; } .chat-typing-dot { width: 8px; height: 8px; background-color: #636262; border-radius: 50%; animation: chat-bounce 1.4s ease-in-out infinite; } .chat-typing-dot:nth-child(1) { animation-delay: 0ms; } .chat-typing-dot:nth-child(2) { animation-delay: 150ms; } .chat-typing-dot:nth-child(3) { animation-delay: 300ms; } @keyframes chat-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } } /* Cascade Processing Overlay */ .chat-cascade-overlay { display: flex; align-items: center; padding: 12px 16px; background-color: #E3F2FD; border-radius: 8px; margin-top: 8px; } /* Error Message */ .chat-error-message { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background-color: #FFEBEE; border-radius: 8px; margin-top: 8px; } /* Chat Input */ .chat-input-container { padding: var(--spacing-md); border-top: 1px solid var(--color-border); background-color: white; } .chat-input-attachments { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .chat-input-row { display: flex; align-items: flex-end; gap: 8px; } .chat-input-field-wrapper { flex: 1; display: contents; } .chat-input-field { flex: 1; } .chat-input-field .mud-input-outlined-border { border-radius: 8px; } .chat-input-button { flex-shrink: 0; } /* ========================================== REVIEW TOOLBAR (AP-46) Experten-Aktionsleiste im Review-Modus ========================================== */ .review-toolbar { display: flex; align-items: center; gap: var(--spacing-sm); } /* ========================================== CODE INPUT (OTP-style 6-digit input) ========================================== */ .code-input-field { display: flex; flex-direction: column; gap: var(--spacing-xs); } .code-input-label { font-size: 0.75rem; font-weight: 400; color: var(--color-text-secondary); letter-spacing: 0.03em; } .code-input-container { display: flex; justify-content: center; gap: var(--spacing-sm); } .code-input-digit { width: 48px; height: 56px; text-align: center; font-family: 'Roboto Mono', monospace; font-size: 1.5rem; font-weight: 500; color: var(--color-text-primary); background: var(--color-background); border: 1px solid var(--color-border); border-radius: var(--radius-sm); outline: none; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); -moz-appearance: textfield; } .code-input-digit::-webkit-outer-spin-button, .code-input-digit::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .code-input-digit:hover:not(:disabled) { border-color: var(--color-secondary); } .code-input-digit:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(17, 72, 98, 0.15); } .code-input-digit:disabled { background: var(--color-surface); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.6; } .code-input-error .code-input-digit { border-color: var(--color-error); } .code-input-error .code-input-digit:focus { box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15); } .code-input-helper { font-size: 0.75rem; color: var(--color-text-secondary); text-align: center; } .code-input-helper-error { color: var(--color-error); } @media (max-width: 400px) { .code-input-digit { width: 40px; height: 48px; font-size: 1.25rem; } .code-input-container { gap: var(--spacing-xs); } } /* ========================================== MOBILE VIRTUAL KEYBOARD FIX Fallback fuer Browser ohne dvh-Unterstuetzung ========================================== */ @supports not (height: 100dvh) { html, body { height: var(--vh, 100vh); } .mud-main-content { height: calc(var(--vh, 100vh) - 64px); } }