/* ------------------------------------------------------------------ DigitalWerk â€” globale Gestaltung. Alle theme-abhÃ¤ngigen Farben/Radien/Schatten kommen aus den Design- Tokens (--dw-â€¦), die themes.css pro Erscheinungsbild auf definiert. Die Fallback-Werte entsprechen dem Standard-Theme â€žWerkbankâ€œ â€” sie greifen nur, falls (z. B. auf ) kein Theme- Token verfÃ¼gbar ist. Zielgruppe sind nicht-technische Nutzer: gut lesbare Schrift, klare Kontraste, keine visuellen Spielereien. ------------------------------------------------------------------ */ html, body { font-family: var(--dw-font, 'Segoe UI', system-ui, -apple-system, Arial, sans-serif); background-color: var(--dw-bg, #f5f6f8); color: var(--dw-ink, #23262b); } a, .btn-link { color: var(--dw-accent, #2457a6); } a:hover, .btn-link:hover { color: var(--dw-accent-hover, #1d4787); } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem var(--dw-card, #ffffff), 0 0 0 0.25rem color-mix(in srgb, var(--dw-accent, #2457a6) 50%, transparent); } .content { padding-top: 1.1rem; } h1:focus { outline: none; } /* Karten: dezente AbstÃ¤nde â€” Farbe, Radius und Schatten liefert das Bootstrap-Mapping in themes.css (--bs-card-â€¦ auf --dw-â€¦). */ .card { margin-bottom: 1rem; } /* ------------------------------------------------------------------ Status-Badges fÃ¼r Mails â€” werden von den Listen-Seiten verwendet. Die Bedeutung ist in allen Themes gleich: grau = neu, blau = klassifiziert, grÃ¼n = abgelegt, orange = in PrÃ¼fung, rot = Fehler. ------------------------------------------------------------------ */ .status-new, .status-classified, .status-filed, .status-review, .status-failed, .status-beobachtet { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 0.75rem; font-size: 0.78rem; font-weight: 600; line-height: 1.2; white-space: nowrap; } .status-new { background-color: var(--dw-mut-bg, #edeef1); color: var(--dw-muted, #6b7280); } .status-classified { background-color: var(--dw-info-bg, #d7e6f7); color: var(--dw-info, #1b4f8a); } .status-filed { background-color: var(--dw-ok-bg, #dcf2e3); color: var(--dw-ok, #166534); } .status-review { background-color: var(--dw-warn-bg, #fdebd0); color: var(--dw-warn, #b45309); } .status-failed { background-color: var(--dw-err-bg, #fbdddd); color: var(--dw-err, #b91c1c); } /* Beobachtet (ADR 0020): gesehen und zugeordnet, aber NICHT abgelegt - bewusst unaufdringlich und gestrichelt, damit es nicht wie "erledigt" aussieht. */ .status-beobachtet { background-color: transparent; color: var(--dw-muted, #6b7280); border: 1px dashed currentColor; } /* ------------------------------------------------------------------ Kachel-Ansicht der Projekt-Ãœbersicht: Favoriten erhalten einen dezenten Akzentrand links in der Favoriten-/Sternfarbe des Themes (der gefÃ¼llte Stern kommt aus der Kachel). Bootstrap-Utilities reichen hierfÃ¼r nicht, da border-start-Utilities immer alle Rahmenseiten einfÃ¤rben wÃ¼rden. ------------------------------------------------------------------ */ .dw-project-card-favorite { border-left: 0.25rem solid var(--dw-star, #e8a413); } /* ------------------------------------------------------------------ Login-Seite: zentrierte Karte auf ruhigem Hintergrund. Anonyme Seiten laufen immer im Standard-Theme â€žWerkbankâ€œ (siehe App.razor). ------------------------------------------------------------------ */ .login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; background-color: var(--dw-bg, #f5f6f8); } .login-card { width: 100%; max-width: 420px; border: none; border-radius: var(--dw-radius, 0.75rem); } .login-title { text-align: center; color: var(--dw-accent, #2457a6); font-weight: 700; font-size: 1.75rem; margin-bottom: 0.25rem; } .login-subtitle { text-align: center; color: var(--dw-muted, #6b7280); margin-bottom: 1.5rem; } /* ------------------------------------------------------------------ Erscheinungsbild-Auswahl im Profil: vier Radio-Auswahlkarten mit Namen, drei Farbpunkten der Palette und einer Kurzbeschreibung. ------------------------------------------------------------------ */ .dw-theme-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; } .dw-theme-option { display: block; position: relative; margin: 0; padding: 0.85rem 1rem; border: 1px solid var(--dw-line, #e6e8ec); border-radius: var(--dw-radius, 11px); background-color: var(--dw-card, #ffffff); cursor: pointer; } .dw-theme-option:hover { border-color: var(--dw-accent, #2457a6); } /* Radio unsichtbar, aber fokussier-/bedienbar (Tastatur). */ .dw-theme-option input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .dw-theme-option:has(input:checked) { border-color: var(--dw-accent, #2457a6); box-shadow: inset 0 0 0 1px var(--dw-accent, #2457a6); } .dw-theme-option:has(input:focus-visible) { outline: 2px solid var(--dw-accent, #2457a6); outline-offset: 2px; } .dw-theme-option-name { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 600; color: var(--dw-ink, #23262b); } .dw-theme-dots { display: inline-flex; gap: 4px; flex-shrink: 0; } .dw-theme-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.18); } .dw-theme-option-desc { display: block; margin-top: 0.25rem; font-size: 0.85rem; color: var(--dw-muted, #6b7280); } /* ------------------------------------------------------------------ Formular-Validierung (Template-Standard, Farben aus den Tokens). ------------------------------------------------------------------ */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--dw-ok, #166534); } .invalid { outline: 1px solid var(--dw-err, #b91c1c); } .validation-message { color: var(--dw-err, #b91c1c); font-size: 0.85rem; margin-top: 0.25rem; } .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: "Es ist ein Fehler aufgetreten." } .darker-border-checkbox.form-check-input { border-color: var(--dw-muted, #929292); } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* Gedaempfte Flaeche fuer Inhalts-Bloecke (Ersatz fuer Bootstraps bg-light, das im Dunkelmodus hell bleibt und Text unlesbar macht). */ .dw-surface-muted { background-color: var(--dw-mut-bg, #edeef1); color: var(--dw-ink, #23262b); } /* Status-Filter als Badge-Dropdown (reines Blazor, ohne Bootstrap-JS): Der Backdrop faengt Klicks ausserhalb ab und schliesst das Menue. */ .dw-dropdown-backdrop { position: fixed; inset: 0; z-index: 1000; background: transparent; } /* Aufräumliste: lange NAS-Pfade und Betreffs kürzen, Tooltip zeigt den Volltext. */ .dw-aufraeum-pfad { display: inline-block; max-width: 28rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dw-aufraeum-betreff { max-width: 16rem; } /* --------------------------------------------------------------------------- Wissens-Chat: fest unten rechts auf jeder Seite. Farben ausschließlich über Theme-Tokens, damit er in allen vier Erscheinungsbildern (inkl. dunkel) lesbar bleibt. --------------------------------------------------------------------------- */ .dw-chat { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1050; display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; } .dw-chat-knopf { width: 3.25rem; height: 3.25rem; border-radius: 50%; border: none; background-color: var(--dw-accent, #2457a6); color: var(--dw-accent-ink, #fff); font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center; align-self: flex-end; } .dw-chat-knopf:hover { filter: brightness(1.08); } .dw-chat-panel { width: min(24rem, calc(100vw - 2.5rem)); max-height: min(32rem, calc(100vh - 7rem)); display: flex; flex-direction: column; /* --dw-card/--dw-line sind die echten Themen-Tokens (themes.css). Ein falscher Name fällt sonst still auf den hellen Fallback zurück — im Dunkelmodus ergäbe das weiße Fläche mit hellem Text. */ background-color: var(--dw-card, #fff); color: var(--dw-ink, #23262b); border: 1px solid var(--dw-line, #d9dce1); border-radius: var(--dw-radius, 11px); overflow: hidden; } .dw-chat-kopf, .dw-chat-fuss { padding: 0.6rem 0.75rem; background-color: var(--dw-mut-bg, #f6f7f9); color: var(--dw-ink, #23262b); border-bottom: 1px solid var(--dw-line, #d9dce1); display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .dw-chat-fuss { border-bottom: none; border-top: 1px solid var(--dw-line, #d9dce1); display: block; } .dw-chat-koerper { padding: 0.75rem; overflow-y: auto; flex: 1; } .dw-chat-treffer { border-top: 1px solid var(--dw-line, #d9dce1); padding-top: 0.5rem; margin-top: 0.5rem; } .dw-chat-treffer:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } /* Fundstellen-Auszug: Zeilenumbrüche des Mail-Texts erhalten, Treffer hervorheben. */ .dw-fundstelle-auszug { white-space: pre-wrap; font-size: 0.9rem; } .dw-fundstelle-auszug mark { padding: 0 0.1em; background-color: var(--dw-accent-soft, #fff3cd); color: inherit; } /* Qualitäts-Seite: Betreff-Spalte kürzen, Tooltip zeigt den Volltext. */ .dw-quali-betreff { display: inline-block; max-width: 22rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; } .dw-status-menu { position: absolute; top: 100%; left: 0; margin-top: 2px; z-index: 1001; } /* Feste Hoehe wie ein normales form-select, auch wenn ein Badge drinsteht. */ .dw-status-select { min-height: calc(1.5em + 0.75rem + 2px); line-height: 1.2; } /* ================================================================== Dashboard (Home.razor) â€” alle Farben kommen aus den Theme-Tokens, damit auch der Dunkelmodus ohne SonderfÃ¤lle funktioniert. ================================================================== */ /* "Was liegt an"-Karten: farbiger Akzentrand links (Warn = Review, Err = Fehler). */ .dw-todo-review { border-left: 0.25rem solid var(--dw-warn, #b45309); } .dw-todo-failed { border-left: 0.25rem solid var(--dw-err, #b91c1c); } /* Null-Zustand der Aufgaben-Karten: grüner Akzent statt Warnfarbe. */ .dw-todo-ok { border-left: 0.25rem solid var(--dw-ok, #166534); } .dw-todo-card .card-body { min-width: 0; } .dw-todo-count { font-size: 1.75rem; font-weight: 700; line-height: 1.1; color: var(--dw-warn, #b45309); } .dw-todo-count-err { color: var(--dw-err, #b91c1c); } /* Null-Zustand: grüner Zähler. Selektor bewusst mit Basisklasse kombiniert, damit er die Warnfarbe der Basisregel unabhängig von der Reihenfolge schlägt. */ .dw-todo-count.dw-todo-count-ok { color: var(--dw-ok, #166534); } .dw-todo-error { max-width: 32rem; } /* Schmale "Alles erledigt"-Zeile, wenn weder Review noch Fehler offen sind. */ .dw-all-done { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1rem; border-radius: var(--dw-radius, 11px); background-color: var(--dw-ok-bg, #dcf2e3); color: var(--dw-ok, #166534); font-weight: 600; } /* KPI-Kacheln. */ .dw-kpi-label { font-size: 0.85rem; font-weight: 600; color: var(--dw-muted, #6b7280); margin-bottom: 0.15rem; } .dw-kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.15; color: var(--dw-ink, #23262b); } .dw-kpi-warn { color: var(--dw-warn, #b45309); } .dw-kpi-trend { font-size: 0.85rem; font-weight: 600; white-space: nowrap; } .dw-trend-up { color: var(--dw-ok, #166534); } .dw-trend-down { color: var(--dw-warn, #b45309); } .dw-sparkline { display: block; width: 100%; height: 32px; margin-top: 0.5rem; } /* FlÃ¤chen-Diagramm "Mail-Eingang". */ .dw-area-chart { display: block; width: 100%; height: auto; /* Sicherheitsdeckel für sehr breite Bildschirme. */ max-height: 280px; } /* Donut "Automatisierung". */ .dw-donut { width: 120px; height: 120px; flex-shrink: 0; } .dw-donut-text { min-width: 10rem; } /* 100%-Stapelbalken "Zuordnung nach Methode": drei Serienfarben, 2px LÃ¼cken. */ .dw-split-bar { display: flex; gap: 2px; height: 28px; border-radius: calc(var(--dw-radius, 11px) * 0.5); overflow: hidden; } .dw-split-seg { display: flex; align-items: center; justify-content: center; flex-basis: 0; /* Auch sehr schmale Segmente bleiben mindestens so breit wie ihre Zahl — die Anteile verzerren sich dadurch minimal, aber jeder Wert ist lesbar. */ min-width: max-content; padding: 0 0.35rem; } .dw-split-seg-1 { background-color: var(--dw-viz-1, #2457a6); } .dw-split-seg-2 { background-color: var(--dw-viz-2, #0c7a55); } .dw-split-seg-3 { background-color: var(--dw-viz-3, #eda100); } /* Zahl im Segment: weiÃŸ â€” auÃŸer auf dem hellen Orange (viz-3) der hellen Themes, dort sorgt Ink fÃ¼r ausreichenden Kontrast. Im Dunkelmodus ist viz-3 dunkler, deshalb dort wieder weiÃŸ. */ .dw-split-count { font-size: 0.78rem; font-weight: 700; color: #ffffff; } .dw-split-seg-3 .dw-split-count { color: var(--dw-ink, #23262b); } .theme-fokus-dunkel .dw-split-seg-3 .dw-split-count { color: #ffffff; } .dw-split-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.5rem; color: var(--dw-muted, #6b7280); } .dw-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.35rem; vertical-align: baseline; } .dw-legend-1 { background-color: var(--dw-viz-1, #2457a6); } .dw-legend-2 { background-color: var(--dw-viz-2, #0c7a55); } .dw-legend-3 { background-color: var(--dw-viz-3, #eda100); } /* Favoriten-Liste. */ .dw-fav-list { display: flex; flex-direction: column; } .dw-fav-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.5rem; border-radius: calc(var(--dw-radius, 11px) * 0.6); color: var(--dw-ink, #23262b); text-decoration: none; } .dw-fav-row:hover { background-color: var(--dw-mut-bg, #edeef1); color: var(--dw-ink, #23262b); } .dw-fav-star { color: var(--dw-star, #e8a413); flex-shrink: 0; } .dw-fav-name { flex-grow: 1; min-width: 0; } .dw-fav-badge { flex-shrink: 0; padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background-color: var(--dw-ok-bg, #dcf2e3); color: var(--dw-ok, #166534); } /* "Zuletzt passiert". */ .dw-activity-list { display: flex; flex-direction: column; } .dw-activity-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0; border-bottom: 1px solid var(--dw-line, #e6e8ec); } .dw-activity-row:last-child { border-bottom: none; } .dw-activity-main { min-width: 0; } /* HÃ¤ufigste Absender: horizontale Balken mit runden Enden rechts. */ .dw-sender-list { display: flex; flex-direction: column; gap: 0.45rem; } .dw-sender-row { display: grid; grid-template-columns: minmax(8rem, 18rem) 1fr 3rem; align-items: center; gap: 0.75rem; } .dw-sender-address { min-width: 0; } .dw-sender-track { min-width: 0; } .dw-sender-bar { height: 12px; background-color: var(--dw-accent, #2457a6); border-radius: 0 4px 4px 0; } .dw-sender-count { text-align: right; } /* System-Status (Admin): Ampel-Punkte + Text. */ .dw-status-list { display: flex; flex-direction: column; gap: 0.5rem; } .dw-status-row { display: flex; align-items: baseline; gap: 0.6rem; } .dw-status-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .dw-dot-ok { background-color: var(--dw-ok, #166534); } .dw-dot-warn { background-color: var(--dw-warn, #b45309); } /* ------------------------------------------------------------------ KI-Zustandspunkt in der Navigation. Grün = Modell verbunden, grau = deterministischer Kern allein. Grau ist ausdrücklich KEIN Fehlerzustand, deshalb kein Rot. ------------------------------------------------------------------ */ .dw-ai-dot { display: inline-block; width: .5rem; height: .5rem; margin-left: .4rem; border-radius: 50%; vertical-align: middle; } .dw-ai-on { background-color: var(--dw-ok, #166534); } .dw-ai-off { background-color: var(--dw-muted, #6B7280); } /* ------------------------------------------------------------------ Hinweis-Blase (Tooltip). Das native title-Attribut ist unbrauchbar: Es erscheint erst nach Sekunden, verschwindet zu schnell, ist auf Touch-Geraeten gar nicht erreichbar und wird von Screenreadern unzuverlaessig vorgelesen. Diese Variante reagiert auf Hover UND auf Tastatur-Fokus. ------------------------------------------------------------------ */ .dw-tip { position: relative; display: inline-flex; align-items: center; gap: .3rem; cursor: help; } .dw-tip-marker { display: inline-flex; align-items: center; justify-content: center; width: 1.05rem; height: 1.05rem; border-radius: 50%; border: 1px solid var(--dw-line, #E6E8EC); background: var(--dw-surface-muted, #F5F6F8); color: var(--dw-muted, #6B7280); font-size: .7rem; line-height: 1; font-weight: 600; } .dw-tip:focus-visible { outline: 2px solid var(--dw-accent, #2457A6); outline-offset: 2px; border-radius: .25rem; } .dw-tip-bubble { position: absolute; bottom: calc(100% + .4rem); left: 0; z-index: 30; width: max-content; max-width: 22rem; padding: .45rem .6rem; border-radius: .375rem; background: var(--dw-ink, #23262B); color: #fff; font-size: .78rem; line-height: 1.35; font-weight: 400; white-space: normal; text-align: left; box-shadow: 0 4px 12px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transition: opacity .12s ease-in-out; } .dw-tip:hover .dw-tip-bubble, .dw-tip:focus .dw-tip-bubble, .dw-tip:focus-within .dw-tip-bubble { opacity: 1; visibility: visible; } /* Am rechten Rand nach links ausrichten, damit die Blase nicht abgeschnitten wird. */ .dw-tip-right .dw-tip-bubble { left: auto; right: 0; }