/* * Extended Common.css file of Copiki (for the Copiki Standard Theme) * For MediaWiki 1.39.x / BS 4.x / Copiki 4 */ /* ################################################# Includes ################################################# */ /* Font Awesome is loaded as ResourceLoader module ext.copiki.fontawesome via the BeforePageDisplay hook in the Copiki extension. */ /* Include Bootstrap Icons - Include only when template is used */ @import url("bootstrap-icons.min.css"); /* ################################################# Webfonts ################################################# */ /* Lato as WOFF2 — overrides the BlueSpiceDiscovery skin's TTF @font-face (skins/BlueSpiceDiscovery/resources/stylesheets/font.css). This file loads AFTER the skin style bundle, so for each family+weight+style the browser uses the WOFF2 src below and never fetches the heavier TTF (~556 KB -> ~216 KB). ?v=1 makes them eligible for the 1-year immutable cache (cache-headers.conf); bump it if the font files are ever replaced. */ @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Regular.woff2?v=1') format('woff2'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Italic.woff2?v=1') format('woff2'); font-weight: normal; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Bold.woff2?v=1') format('woff2'); font-weight: bold; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-BoldItalic.woff2?v=1') format('woff2'); font-weight: bold; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Light.woff2?v=1') format('woff2'); font-weight: 300; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-LightItalic.woff2?v=1') format('woff2'); font-weight: 300; font-style: italic; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-Black.woff2?v=1') format('woff2'); font-weight: 900; font-style: normal; } @font-face { font-family: 'Lato'; src: url('/copikiresources/fonts/Lato-BlackItalic.woff2?v=1') format('woff2'); font-weight: 900; font-style: italic; } /* ################################################# CSS Variables ################################################# */ :root { --copiki-primary-color: #c0143c; --copiki-secondary-color: #616265; --copiki-tertiary-color: #ef8200; /* Copiki status/semantic colors (fleet-weit einheitlich) */ --copiki-warn: #f2c200; --copiki-danger: var(--bs-danger); --copiki-success: var(--bs-success); --copiki-success-light: #c5e1d4; --copiki-info: #0284c7; /* Petrol-/Himmelblau (Status "Geplant", Charts) — bewusst ruhiger als --bs-blue */ /* Maßnahmenmanagement: Farbe je Bearbeitungsstatus (Property:MM-MA-Status). EINE Quelle fuer Statuspunkte, KPI-Karten, Torte und Prozessdiagramm — wer eine Farbe aendert, aendert sie ueberall. Die Reihe laeuft hellblau -> blau -> orange -> mittelgruen -> gruen, rot steht daneben (Verworfen ist kein Fortschritt, sondern ein Ausstieg). Warum "In Bearbeitung" nicht mehr --copiki-warn (#f2c200) und "Umgesetzt" nicht mehr --copiki-success-light (#c5e1d4) ist: die Statuspunkte tragen seit 2026-08-30 ein weisses Symbol, und auf Gelb bzw. Blassgruen ist Weiss schlicht unsichtbar (Kontrast 1,6:1 bzw. 1,4:1). Beide Tokens behalten ihre Bedeutung in der ANDEREN Dimension des Moduls, dem Terminstatus (dringend faellig / im Plan) — die beiden Skalen sind unabhaengig und kollidieren nicht. */ --copiki-status-offen: var(--copiki-middlegrey, #9d9d9d); --copiki-status-definiert: #a5d2ec; --copiki-status-geplant: var(--copiki-info, #0284c7); --copiki-status-bearbeitung: var(--copiki-warn, #f2c200); --copiki-status-umgesetzt: var(--copiki-success-light, #c5e1d4); --copiki-status-abgeschlossen: var(--copiki-success, #198754); /* Kein eigener MM-MA-Status, sondern die Unterteilung von "Abgeschlossen" nach MM-MA-Wirksamkeit in der Statustorte: abgeschlossen, aber noch nicht bewertet. Liegt farblich genau zwischen Umgesetzt (#c5e1d4) und Abgeschlossen (#198754) — kanalweise die Mitte —, weil der Zustand fachlich genau dort liegt: erledigt, aber der Nachweis fehlt noch. */ --copiki-status-abgeschlossen-unbewertet: #6fb494; --copiki-status-verworfen: var(--copiki-danger, #dc3545); /* Farbe des Symbols IM Statuspunkt. Standard ist Weiss; die beiden blassen Fuellungen bekommen stattdessen den kraeftigen Ton ihrer eigenen Familie. Das ist kein Zugestaendnis, sondern eine Aussage: die zwei hellen Stufen (Maßnahme steht / umgesetzt, aber noch nicht bewertet) sind Zwischen- staende, die zwei satten daneben (Geplant / Abgeschlossen) sind verbindlich. Am Live-Stand gegeneinander geprueft (Owner, 2026-08-30): mit weissem Symbol sind die blassen Fuellungen zu schwach — Weiss bringt auf #a5d2ec nur Kontrast 1,61:1 und auf #c5e1d4 1,39:1, die Schwelle fuer nicht- textuelle Elemente liegt bei 3:1. Beide tragen deshalb den kraeftigen Ton ihrer eigenen Familie. Das loest es NICHT ueberall: --copiki-success auf #c5e1d4 erreicht 3,26:1 und besteht damit, --copiki-info auf #a5d2ec kommt auf 2,54:1 und liegt weiter darunter — deutlich besser als Weiss, aber kein Freibrief. "In Bearbeitung" behaelt bewusst Weiss auf Gelb (1,68:1) — Owner-Entscheidung, die Farbe war ihm dort wichtiger. Alle Werte nachgerechnet (WCAG-Relativluminanz), nicht geschaetzt. */ --copiki-status-ink: #ffffff; --copiki-status-definiert-ink: var(--copiki-info, #0284c7); --copiki-status-umgesetzt-ink: var(--copiki-success, #198754); /* Maßnahmenmanagement: Ampelfarbe je Priorität (Property:MM-MA-Priorität). EINE Quelle für die Prio-Balken in Formular-Chips (.copiki-form__bars), Vorgangsliste (.copiki-mm__prio) und Akte (.mm-akte__prio) — aus dem bestehenden Semantik-Vokabular, keine neuen Farben. Owner-Entscheid 2026-09-01: vorher trug nur "hoch" die Markenfarbe, mittel/niedrig waren grau — die Ampel macht die Stufen unterscheidbar. */ --copiki-prio-niedrig: var(--copiki-success, #198754); --copiki-prio-mittel: var(--copiki-warn, #f2c200); --copiki-prio-hoch: var(--copiki-danger, #dc3545); /* Maßnahmenmanagement: Farbpaar (Hintergrund-Tint + Textfarbe) je Quelle einer Maßnahme (Property:MM-MA-Quelle, Slug = Kleinschreibung, Nicht- Alphanumerisches -> "-"). Single Source fuer alle Modulflaechen: die Vorgangsliste (ext.copiki.massnahmenTabelle) liest sie, TemplateStyles- Vorlagen duerfen sie als --copiki-*-Token in Farb-Properties lesen (TemplateStylesThemeTokens). Risiko/Reklamation/Incident sind die Semantik-Tints (warn/danger/info), der Rest fuehrt die Reihe fort. */ --copiki-quelle-risiko-bg: #fdf5cc; --copiki-quelle-risiko-fg: #6b5300; --copiki-quelle-reklamation-bg: #fbe5e8; --copiki-quelle-reklamation-fg: #8a1c2b; --copiki-quelle-beinaheereignis-incident-bg: #e0f1fa; --copiki-quelle-beinaheereignis-incident-fg: #0a5a85; --copiki-quelle-audit-intern-bg: #e3f1e8; --copiki-quelle-audit-intern-fg: #1f6a3f; --copiki-quelle-audit-extern-bg: #d9f0ee; --copiki-quelle-audit-extern-fg: #0c5f5c; --copiki-quelle-managementbewertung-bg: #ece6f7; --copiki-quelle-managementbewertung-fg: #4b2f8a; --copiki-quelle-impuls-bg: #fde9d7; --copiki-quelle-impuls-fg: #8a4a0f; --copiki-quelle-sonstiges-bg: #ececee; --copiki-quelle-sonstiges-fg: #4a4a4f; --copiki-verydarkgrey: #3d3d3d; --copiki-darkgrey: #616161; --copiki-middlegrey: #9d9d9d; --copiki-grey: #d8d8d9; --copiki-lightgrey: #eeeeee; --copiki-verylightgrey: #f6f6f6; --primary-element-highlight-color: var(--mws-primary-bg); --primary-element-highlight-color-light: var(--mws-primary-bg--hover); --primary-element-highlight-color-lighter: var(--mm-secondary-bg); --primary-element-filter-lighter: 1.25; --primary-element-filter-darker: 0.85; --neutral-element-selected-background-color: var(--copiki-grey); --neutral-element-selected-font-color: var(--copiki-verydarkgrey); --bs-border-radius: 0.4rem; } :root { /* Sidebar */ /* --sidebar-primary-marker--hover: var(--mws-primary-bg); --sidebar-primary-header-fg: var(--mws-primary-bg); */ --sidebar-primary-bg: var(--copiki-verylightgrey); /* --sidebar-secondary-marker--hover: var(--mws-primary-bg); --sidebar-secondary-header-fg: var(--mws-primary-bg); */ --sidebar-secondary-bg: var(--copiki-verylightgrey); --sidebar-secondary-toolbar-bg: var(--copiki-grey); } /* ################################################# General App styling ################################################# */ ::selection { color: #fff; background: var(--mws-primary-bg); } a { color: var(--link-fg); } a:visited { color: var(--link-fg); filter: brightness(var(--primary-element-filter-darker)); } #main { padding-bottom: 1rem; } h1,h2 { margin-bottom: 0; } /* ################################################# Navigation ################################################# */ /* Header */ /* Megamenu */ @media (min-width: 768px) { .dropdown-menu.megamenu .mm-bg { /* background-color: var(--mm-primary-separator); */ background-color: var(--copiki-verydarkgrey); /* opacity: 0.3; */ } } /* Sidebar */ #tp-main:before { content:""; display: block; /* margin-top: 8px; */ width: 100%; height: 20px; background-image: url('../branding/copiki_logo_rgb_fullcolor_vec.svg'); background-size: contain; background-repeat: no-repeat; background-position: 50% 50%; } #sb-pri-cnt .card-header.menu-title { font-weight: 600; } #sb-pri .list-group .list-group-item > a:active, #sb-sec .list-group .list-group-item > a:active { filter: brightness(var(--primary-element-filter-darker)); } #sb-sec a.ico-btn:hover { /* color: var(--icon-primary-fg--hover); */ color: var(--sidebar-secondary-marker--hover); /* background-color: var(--icon-primary-bg--hover); */ background-color: var(--sidebar-secondary-bg); } #sb-pri #edit-sidebar-link { color: var(--sidebar-primary-header-fg); text-decoration: none; background-color: var(--copiki-lightgrey); padding: 5px; } #sb-pri #edit-sidebar-link:hover { background-color: var(--copiki-grey); text-decoration: none; } /* Main Nav Elements */ .breadcrumb-item.root-node a:hover { background-color: var(--mws-primary-bg--hover); } .dropdown-item:focus, .dropdown-item:hover, .breadcrumb-item .dropdown-menu ul li a.dropdown-item:hover, .breadcrumb-item .dropdown-menu ul li a.dropdown-item:active { background-color: var(--navbar-primary-searchform-bg); } /* Notifications */ .mw-echo-ui-toggleReadCircleButtonWidget-circle { background-color: var(--primary-element-highlight-color); } .mw-echo-ui-toggleReadCircleButtonWidget-circle-unread { background-color: #eaecf0; } .mw-echo-ui-toggleReadCircleButtonWidget:hover .mw-echo-ui-toggleReadCircleButtonWidget-circle { background-color: var(--primary-element-highlight-color-light); background-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-optionWidget-selected .mw-echo-ui-pageNotificationsOptionWidget-label-count { color: var(--primary-element-highlight-color); } .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-selected.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted, .mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-pressed.mw-echo-ui-pageNotificationsOptionWidget.oo-ui-optionWidget-highlighted { /* background-color: rgba(41,98,204,0.1); */ background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); filter: brightness(0.95); } .mw-echo-ui-notificationItemWidget-icon::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--primary-element-highlight-color); mask: url('/extensions/Echo/modules/icons/edit-progressive.svg') no-repeat center / contain; -webkit-mask: url('/extensions/Echo/modules/icons/edit-progressive.svg') no-repeat center / contain; pointer-events: none; /* Ensures it doesn't interfere with clicking the icon */ } .mw-echo-ui-notificationItemWidget:focus { box-shadow: inset 0 0 0 2px var(--primary-element-highlight-color); } /* ################################################# Sections : Header ################################################# */ /* Loading indicator for pages*/ .loader-indicator.loading { background-color: var(--mws-primary-bg); } /* ################################################# Sections : Footer ################################################# */ #footer { background-color: var(--copiki-verylightgrey); } /* #footer ul { display: block; } #footer-icons { text-align: right; float: none; } */ /* ################################################# Forms and UI styling ################################################# */ /* Buttons */ .mws-button-primary:hover { opacity: 100%; background-color: var(--mws-primary-bg); color: var(--mws-primary-fg); filter: brightness(1.2); } .mws-button-primary:hover:after { color: var(--mws-primary-fg); } .mws-dropdown-primary.dropdown-menu a:hover { background-color: var(--mws-primary-bg); color: var(--mws-primary-fg); filter: brightness(1.2); } .mws-button-secondary, .mw-body-content .mws-button-secondary, .mw-body-content a.mws-button-secondary:not([class*="oo-ui-"]), [class^="mw-content-"] a.mws-button-secondary:not([class*="oo-ui-"]) { color: var(--mws-primary-bg); } .mws-button-secondary:hover, .mw-body-content .mws-button-secondary:hover { opacity: 100%; background-color: var(--bs-gray-200); color: var(--mws-secondary-fg); } button:focus:not(:focus-visible), .mws-button-primary:focus, .mws-button-primary:active, .mws-button-secondary:focus, .mws-button-secondary:active { box-shadow: 0 0 1.5px 1px #00000088 inset; } /* oo-ui Dialog */ .oo-ui-processDialog .oo-ui-actionWidget:not(.oo-ui-flaggedElement-progressive):not(.oo-ui-flaggedElement-destructive) > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); } /* oo-ui Tab Select Widget */ .oo-ui-tabSelectWidget-framed { background-color: var(--copiki-verylightgrey); } /* Unterstrich des gewaehlten gerahmten Reiters in der Wiki-Hauptfarbe statt OOUI-/Skin-Blau #36c (Owner-Wunsch 2026-09-29). Selektoren wie die Regel in BlueSpiceDiscovery oo-ui.css (ERM31377) und die OOUI-Fokusregel, gleiche Spezifitaet, gewinnt ueber die Ladereihenfolge. */ .oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label, .oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected .oo-ui-labelElement-label { border-bottom-color: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); } /* oo-ui Button */ /* Default-Hintergrund gerahmter Buttons: Copiki-Hellgrau statt OOUI-#f8f9fa (Owner-Wunsch 2026-09-02). Gleiche Spezifitaet wie die OOUI-Regel, gewinnt ueber die Ladereihenfolge; die geflaggten Varianten (primary/progressive/ destructive/active) sind spezifischer und behalten ihre Farben. */ .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { background-color: var(--copiki-verylightgrey, #f6f6f6); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #fff; } .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { /* color: var(--mws-primary-bg--hover); */ color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { color: var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:hover { /* border-color: #447ff5; */ border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button:active, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-buttonElement-active > .oo-ui-buttonElement-button, .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-progressive.oo-ui-popupToolGroup-active > .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } /* oo-ui MultiSelect */ .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* oo-ui Option */ .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted, .oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } /* oo-ui Checkbox */ .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:focus + span { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:focus + span,.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:focus + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),inset 0 0 0 2px #fff } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:hover + span, .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:hover + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:checked:active + span,.oo-ui-checkboxInputWidget.oo-ui-widget-enabled [type='checkbox']:indeterminate:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } /* oo-ui Radio Input */ .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:active + span { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked + span { border-color: var(--primary-element-highlight-color); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:hover + span { border-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(0.85); } .oo-ui-radioInputWidget.oo-ui-widget-enabled [type='radio']:checked:active + span:before { border-color: var(--primary-element-highlight-color); filter: brightness(0.85); } /* oo-ui Text */ .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input:focus { border-color: var(--primary-element-highlight-color); } @media screen and (min-width: 0) { .oo-ui-textInputWidget.oo-ui-widget-enabled textarea.oo-ui-inputWidget-input:focus { outline:1px solid var(--primary-element-highlight-color); } } /* oo-ui Dropdown */ .oo-ui-dropdownInputWidget.oo-ui-widget-enabled select:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); } /* oo-ui Images */ .oo-ui-image-progressive.oo-ui-icon-settings,.mw-ui-icon-settings-progressive:before { background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E settings %3C/title%3E%3Cg fill=%22%2336c%22%3E%3Cg xmlns:xlink=%22http://www.w3.org/1999/xlink%22 transform=%22translate%2810 10%29%22%3E%3Cpath id=%22a%22 d=%22M1.5-10h-3l-1 6.5h5m0 7h-5l1 6.5h3%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%2845%29%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%2890%29%22/%3E%3Cuse xlink:href=%22%23a%22 transform=%22rotate%28135%29%22/%3E%3C/g%3E%3Cpath d=%22M10 2.5a7.5 7.5 0 0 0 0 15 7.5 7.5 0 0 0 0-15v4a3.5 3.5 0 0 1 0 7 3.5 3.5 0 0 1 0-7%22/%3E%3C/g%3E%3C/svg%3E") } /* oo-ui Widget */ .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:hover { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-tool-active > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus { outline: 1px solid var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active { background-color: var(--primary-element-highlight-color-lighter); } /* oo-ui Option Widget */ .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); /* background-color: var(--neutral-element-selected-background-color); */ /* color: var(--neutral-element-selected-font-color); */ } .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } /* oo-ui Tag Item */ .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* oo-ui Toggle Switch */ .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover { border-color: var(--primary-element-highlight-color-light); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip { border-color: var(--primary-element-highlight-color-light); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus { border-color:var(--primary-element-highlight-color); box-shadow:inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip { border-color:var(--primary-element-highlight-color); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active, .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus { border-color:var(--primary-element-highlight-color); } /* oo-ui Progress Bar */ .oo-ui-progressBarWidget.oo-ui-widget-enabled .oo-ui-progressBarWidget-bar { background-color: var(--primary-element-highlight-color); } /* oo-ui Tab Select Widget */ .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget { box-shadow: inset 0 0 0 0 var(--primary-element-highlight-color); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active { color: var(--primary-element-highlight-color); box-shadow: inset 0 -2px 0 0 var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } /* XForm - Header */ .x-window-header-title-default { color: var(--primary-element-highlight-color); } /* XForm - Dropdown / Boundlist */ .x-form-trigger-wrap-default.x-form-trigger-wrap-focus { border-color: var(--primary-element-highlight-color-light); } .x-boundlist-item-over { background: var(--primary-element-highlight-color-lighter); border-color: var(--primary-element-highlight-color-lighter); } .x-boundlist-selected { background: var(--primary-element-highlight-color-lighter); border-color: var(--primary-element-highlight-color-lighter); } /* XForm - X-Grid*/ .x-grid-with-row-lines .x-grid-item.x-grid-item-over { /* border-color: #e6ecf9; */ border-color: var(--copiki-lightgrey); } .x-grid-item-over { /* background-color: #e6ecf9; */ background-color: var(--copiki-lightgrey); } /* MW UI - Button */ .mw-ui-button.mw-ui-progressive:not(:disabled) { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-ui-button.mw-ui-progressive:not(:disabled):hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-button.mw-ui-progressive:not(:disabled):active, .mw-ui-button.mw-ui-progressive:not(:disabled).is-on { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-button.mw-ui-progressive:not(:disabled):focus { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #ffffff; } /* MW UI - Checkbox */ .mw-ui-checkbox [type='checkbox']:enabled:hover + label:before { border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-checkbox [type='checkbox']:enabled:active + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-checkbox [type='checkbox']:enabled:checked + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-ui-checkbox [type='checkbox']:enabled:focus + label:before { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .mw-ui-checkbox [type='checkbox']:enabled:checked:hover + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .mw-ui-checkbox [type='checkbox']:enabled:checked:active + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-ui-checkbox [type='checkbox']:enabled:checked:focus + label:before { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color), inset 0 0 0 2px #ffffff; } /* MW UI - Input */ .mw-ui-input:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* Select2 Input */ .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--primary-element-highlight-color); } /* X Button */ .x-btn-default-small { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .x-btn-over.x-btn-default-small { border-color: var(--primary-element-highlight-color); background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .x-btn.x-btn-menu-active.x-btn-default-small, .x-btn.x-btn-pressed.x-btn-default-small { border-color: var(--primary-element-highlight-color); background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mwext-dialog a.x-btn.mwext-progressive { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mwext-dialog a.x-btn.mwext-progressive:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } /* ################################################# MediaWiki Elements ################################################# */ .wikitable { background-color: var(--sidebar-secondary-bg); } .wikitable > tr > th, .wikitable > * > tr > th { background-color: var(--sidebar-secondary-toolbar-bg); } /* Zebra striping — opt-in helper. Add the class "striped-rows" to any wikitable / smwtable to alternate row colours (odd = white, even = secondary sidebar tint). Scoped to > tbody > so the header row stays untouched (SMW result tables and sortable tables both emit a real /). Works with jquery-tablesorter: it physically reorders the nodes on sort, so :nth-child recolours and the stripes stay visually consistent after every sort. Specificity (0,2,3) overrides the wikitable / smwtable-clean cell backgrounds without !important. Note: #fff is literally white, so odd rows stay white in dark mode. */ .striped-rows > tbody > tr:nth-child(odd) > td, .striped-rows > tbody > tr:nth-child(odd) > th { background-color: #fff; } .striped-rows > tbody > tr:nth-child(even) > td, .striped-rows > tbody > tr:nth-child(even) > th { background-color: var(--sidebar-secondary-bg); } /* ################################################# Extensions ################################################# */ /* ############### Extension:BlueSpice in General - Configuration Tables */ /* X Panel - Config and Settings Tables */ /* A lot of BS config tables run with x panels */ .x-panel .bs-crud-panel-toolbar .x-btn-icon-el { /* background-image: none !important; */ border-radius: 50%; /* background-color: bisque; */ background-color: var(--primary-element-highlight-color); display: flex; align-content: center; align-items: center; justify-content: center; } .x-panel .bs-crud-panel-toolbar .x-btn-icon-el::before { display: flex; align-items: center; flex-wrap: wrap; } .x-panel .bs-crud-panel-toolbar a.x-btn { border-radius: 25%; } .x-panel .bs-crud-panel-toolbar a.x-btn:hover { text-decoration: none; } .x-panel .bs-crud-panel-toolbar a.x-btn:hover .x-btn-icon-el { /* background-color: black; */ filter: brightness(1.2); } .x-panel .bs-crud-panel-toolbar a.x-btn .x-btn-icon-el::before { font-family: "Font Awesome 6 Free"; color: #fff; } .x-column-header-sort-ASC, .x-column-header-sort-DESC { background-color: var(--copiki-lightgrey); } .x-column-header-over { background-color: var(--copiki-lightgrey); } .x-column-header-open { background-color: var(--copiki-lightgrey); } .x-column-header-trigger { background-color: var(--copiki-lightgrey); } .x-menu-item-default.x-menu-item-focus, .x-menu-item-default.x-menu-item-active { background-color: var(--copiki-lightgrey); } .x-grid-with-row-lines .x-grid-item.x-grid-item-selected { border-color: var(--copiki-grey); } .x-grid-item-selected { background-color: var(--copiki-grey); } /* #bs-reminder-overview-grid-crud-btn-add-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-add-btnIconEl::before { content: "\2b"; } #bs-reminder-overview-grid-crud-btn-edit-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-edit-btnIconEl::before { content: "\f0ad"; } #bs-reminder-overview-grid-crud-btn-remove-btnIconEl { background-image: none !important; } #bs-reminder-overview-grid-crud-btn-remove-btnIconEl::before { content: "\f00d"; } */ body.mediawiki #content .bs-extjs-actioncolumn-icon.progressive:before, body.mediawiki #content .x-btn-glyph.progressive:before { color: var(--copiki-darkgrey); } /* ############### Extension:BlueSpiceExtendedSearch */ .bs-extendedsearch-autocomplete-popup { padding: 10px } #bs-extendedsearch-box .bs-extendedsearch-autocomplete-popup .bs-extendedsearch-autocomplete-popup-primary { border-right: none; } #nb-pri form button { border: 1px solid var(--copiki-grey); border-right: none; } #nb-pri form input { outline: 0; box-shadow: none; border: 1px solid var(--copiki-grey); border-left: none; } /* ########## Extension:DrawioEditor */ div[id*="drawio-img-box-"] { text-align: center; } div[id*="drawio-img-box-"] img { max-width: 100% !important; } a[id^="drawio-img-href-"] { cursor: zoom-in; } /*Drawio png - do not auto-resize drawio diagrams that are wrapped in a container with class drawio-linked */ .drawio-linked { overflow-x:scroll } .drawio-linked img { height: initial!important; max-width: initial!important; width: initial!important; } /* ############### Extension:BlueSpiceSocial */ .bs-social-entitylist-more { background: var(--primary-element-highlight-color); } .bs-social-entitylist-more:hover { background: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item { background: var(--primary-element-highlight-color); } .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item:hover, .bs-social-entitylist-menu .bs-social-entitylist-menu-section-button .bs-social-entitylist-menu-item.active { background: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } .bs-social-entitylist-menu-item-actions-btn:hover { /* color: #3e5389; */ color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-lighter)); } #mw-content-text ul.entitylist a:hover { color: var(--primary-element-highlight-color) !important; } #content .bs-social-entity-right a:hover::before { color: var(--primary-element-highlight-color) !important; } /* ############### Extension:UnifiedTaskOverview */ .cdx-text-input__input:enabled:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* ############### Extension:PageForms */ .mw-special-FormEdit .oo-ui-fieldLayout { margin-top: 0; } /* Hide the auto-injected "Keine/unbekannt" radio option in every PageForms radiobutton group. PageForms (PF_RadioButtonInput.php:39) prepends a blank-value radio via array_unshift, so when present it's always the FIRST child of .radioButtonSpan. Two rules together cover all cases without relying solely on CSS :has() (browser support still patchy): 1) Non-mandatory groups (the common case in Copiki forms): the empty radio is always injected, so :first-child is a safe target. 2) Mandatory groups: the empty radio is only injected when the current value is also empty; :has() lets us scope to that case so we don't hide a legitimate first option when cur_value is set. */ /* #pfForm prefix is required to beat PageForms.css's own rule `#pfForm label.radioButtonItem { display: inline-block; }` — without an ID in the selector the cascade keeps the PageForms rule. */ /* TEMP DISABLED 2026-05-27 — UX evaluation: show the auto-injected empty radio option to see how a 3-option radio (incl. visible "Keine") feels to end users. Re-enable by removing the surrounding "TEMP DISABLED" block comments (the two rule blocks below). Hack affects ALL PageForms in the wiki, not just IMS Document control — switching back to hidden is a single edit here. */ /* #pfForm .radioButtonSpan:not(.mandatoryFieldSpan) > label.radioButtonItem:first-child { display: none; } #pfForm .mandatoryFieldSpan > label.radioButtonItem:has(input[type="radio"][value=""]) { display: none; } */ /* Targeted re-enable: keep the empty radio hidden ONLY for radios marked class=processType-radio inside the IMS Document control form, even while the global hide-rule above stays disabled. The processType field is mandatory and must always be one of Kernprozess / Führungsprozess / Unterstützungsprozess — showing "Keine/unbekannt" there would mislead the user. Lives in this global CSS file (not in the TemplateStyles page) because the TemplateStyles sanitizer rejects :has(). The #pfForm prefix is required to beat PageForms' own `#pfForm label.radioButtonItem { display: inline-block; }` — without the ID our class-only selector loses the cascade. */ #pfForm .ims-doc-control__form .radioButtonSpan.processType-radio > label.radioButtonItem:has(input[type="radio"][value=""]) { display: none; } /* ---- PageForms-Fehlerkopf (#form_error_header) — Copiki-weit ---- PF haengt beim blockierten Speichern eine Legacy-.errorbox mit PNG-Icon und Inline-font-size an #contentSub. Owner-Entscheid 2026-09-01: auf allen Formularen im Copiki-Design (helle Danger-Flaeche, linke Kante, FA-Dreieck per ::before, PNG versteckt). !important nur gegen das Inline-style- Attribut, das PF beim Erzeugen setzt. */ #form_error_header.errorbox { display: block; background: color-mix(in srgb, var(--copiki-danger, #dc3545) 10%, #fff); border: 0; border-left: 3px solid var(--copiki-danger, #dc3545); border-radius: 4px; padding: 10px 14px; margin: 12px 0 16px; font-size: calc(0.8667 * var(--content-font-size, 15px)) !important; font-weight: 600; line-height: 1.5; color: var(--copiki-danger, #dc3545); } #form_error_header.errorbox img { display: none; } #form_error_header.errorbox::before { /* Familienname des ausgelieferten FA-Builds (deklariert 7/5/FontAwesome- Aliasse, KEIN "6"): der 5er-Alias ist der stabilste. */ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f071"; margin-right: 8px; } #form_error_header + br { display: none; } /* ---- OOUI-Look für PageForms-Radiobuttons (Drop-in, kein Eingriff in die Extension) ---- PageForms rendert native (gefüllter Punkt) innerhalb von label.radioButtonItem. MediaWikis OOUI/WikimediaUI-Radios (Special:Preferences) nutzen dagegen einen separaten als optischen Kreis (dicker Ring + weißer Kern). Da wir das HTML der Extension nicht ändern, stylen wir den nativen Input per `appearance: none` direkt zum selben Look um. Akzentfarbe = Copiki-Primär (var(--primary-element-highlight-color)) für Theme-Konsistenz & White-Labeling. */ #pfForm .radioButtonItem > input[type="radio"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; /* 1.25em ≈ 20px @16px — gleiche Grundgröße wie die OOUI-Radios */ width: 1.25em; height: 1.25em; min-width: 1.25em; /* Größe halten, auch wenn Label-Text umbricht */ margin: 0 0.2em 0 0; padding: 0; /* Radio-Mittelpunkt nahe der optischen Textmitte; -0.25em ist der Feinabgleich, der Kreis und Label-Text auf einer Linie hält */ vertical-align: -0.25em; border: 1px solid var(--copiki-middlegrey); border-radius: 50%; background-color: #fff; cursor: pointer; transition: border-color 100ms ease, border-width 100ms ease; } #pfForm .radioButtonItem > input[type="radio"]:hover { border-color: var(--primary-element-highlight-color); } /* Checked: dicker Ring (~6px) + weißer Kern = der typische OOUI-„Donut"-Punkt */ #pfForm .radioButtonItem > input[type="radio"]:checked { border-width: 0.375em; border-color: var(--primary-element-highlight-color); } #pfForm .radioButtonItem > input[type="radio"]:focus { outline: 0; box-shadow: 0 0 0 2px var(--primary-element-highlight-color); } #pfForm .radioButtonItem > input[type="radio"]:disabled { opacity: 0.5; cursor: default; } /* ---- OOUI-Look für PageForms-Dropdowns (Drop-in, kein Eingriff in die Extension) ---- PageForms rendert ein natives (kein Drop-in, würde PageForms' `show on select`-Logik gefährden) und ist daher bewusst ausgeklammert. Scope: einzeilige Dropdowns; Mehrfach-Listboxen ([multiple]) bleiben nativ. Akzent/Focus identisch zur bestehenden .oo-ui-dropdown-Regel oben (Copiki-Primär). */ #pfForm select.createboxInput:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; appearance: none; box-sizing: border-box; min-height: 32px; /* gleiche Grundhöhe wie OOUI-Inputs (2em @16px) */ max-width: 100%; padding: 4px 30px 4px 8px; /* rechts Platz für den Chevron */ border: 1px solid var(--copiki-middlegrey); border-radius: 2px; /* OOUI-Handle-Radius */ background-color: #fff; /* OOUI-Down-Chevron (neutrales Icon-Grau #72777d), rechtsbündig zentriert */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 5.25 7 8.75l3.5-3.5' fill='none' stroke='%2372777d' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; color: var(--copiki-verydarkgrey); line-height: 1.4; cursor: pointer; transition: border-color 100ms ease, box-shadow 100ms ease; } #pfForm select.createboxInput:not([multiple]):hover { border-color: var(--copiki-darkgrey); } #pfForm select.createboxInput:not([multiple]):focus { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } #pfForm select.createboxInput:not([multiple]):disabled { opacity: 0.6; background-color: var(--copiki-verylightgrey); cursor: default; } /* ---- OOUI-Look für PageForms-Text-Inputs (Drop-in, kein Eingriff in die Extension) ---- PF_TextInput rendert ein natives ohne OOUI-Wrapper. Ein Klassentausch auf oo-ui-/cdx- bringt nichts (deren CSS-Selektoren brauchen das Widget-Markup), und es gibt keinen PF-Schalter/Hook für OOUI-Plain-Text. Daher themen wir die geteilte PF-Klasse `createboxInput` direkt — gleiche Maße/Akzente wie Select & Radio, damit das ganze Formular eine Familie bildet. Akzent/Focus = Copiki-Primär, identisch zur Select-Regel oben. Binäre Typen (radio/checkbox) ausgenommen. */ #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]) { box-sizing: border-box; min-height: 32px; /* gleiche Grundhöhe wie OOUI-Inputs & unser Select */ max-width: 100%; padding: 4px 8px; border: 1px solid var(--copiki-middlegrey); border-radius: 2px; background-color: #fff; color: var(--copiki-verydarkgrey); line-height: 1.4; transition: border-color 100ms ease, box-shadow 100ms ease; } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):hover { border-color: var(--copiki-darkgrey); } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):focus { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } #pfForm input.createboxInput:not([type="checkbox"]):not([type="radio"]):disabled { opacity: 0.6; background-color: var(--copiki-verylightgrey); cursor: default; } /* ---- Form-Look für PageForms-Token-Felder (Select2, Drop-in) ---- `input type=tokens` rendert über das Select2-jQuery-Widget. Die Klasse `createboxInput` sitzt hier auf dem Container- (nicht auf einem ), daher greift unsere input-Regel oben bewusst NICHT. Wir gleichen die Select2-Box an die Formular-Familie an (Rahmen, Radius, Höhe) und setzen bei Aktivität denselben roten Rahmen wie bei Input/Select. `.pfTokens` trifft nur PF-Token-Felder; das aufgeklappte Ergebnis-Popup wird bereits oben im Select2-Input-Abschnitt gethemt. */ .pfTokens.select2-selection--multiple { min-height: 32px; margin-bottom: 0; /* Select2-Default-Abstand entfernen, damit das Ergebnis-Popup direkt an der Box anliegt */ border: 1px solid var(--copiki-middlegrey); border-radius: 2px; background-color: #fff; transition: border-color 100ms ease, box-shadow 100ms ease; } /* Aktiv = Fokus im Suchfeld ODER Dropdown offen → roter Rahmen wie bei den anderen Feldern. :focus-within ist die robuste Hauptregel; die Select2-Modifier-Klassen decken den Fall „offen, aber Suchfeld nicht fokussiert" zusätzlich ab. */ .pfTokens.select2-selection--multiple:focus-within, .select2-container--focus .pfTokens.select2-selection--multiple, .select2-container--open .pfTokens.select2-selection--multiple { outline: 0; border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } /* ################################################# Widgets ################################################# */ /* MW Widget - Calendar */ .mw-widget-calendarWidget-day-today { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .mw-widget-calendarWidget-item-selected { background-color: var(--primary-element-highlight-color); /* filter: brightness(0.85); */ } .mw-widget-calendarWidget-item:hover { background-color: var(--primary-element-highlight-color); filter: brightness(1.2); } .mw-widgets-datetime-calendarWidget-grid .mw-widgets-datetime-calendarWidget-cell.oo-ui-widget-enabled .oo-ui-buttonElement-button:hover { background-color: var(--primary-element-highlight-color); border-color: var(--primary-element-highlight-color); } .mw-widgets-datetime-calendarWidget:focus { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),0 2px 2px 0 rgba(0,0,0,0.25); } .mw-widgets-datetime-calendarWidget-grid .mw-widgets-datetime-calendarWidget-cell.mw-widgets-datetime-calendarWidget-selected .oo-ui-buttonElement-button { background-color: var(--primary-element-highlight-color); filter: brightness(var(--primary-element-filter-darker)); } .mw-widgets-datetime-dateTimeInputWidget.oo-ui-widget-enabled .mw-widgets-datetime-dateTimeInputWidget-editField:focus { box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color),0 0 0 1px var(--primary-element-highlight-color); } /* ################################################# Pages ################################################# */ .page-Glossar #content .mw-parser-output h2 { font-size: 1.4em; margin: 0 0 15px 0; border-bottom: 1px solid #e3e6ee; } /* ################################################# VisualEditor ################################################# */ /* VE General */ .ve-init-mw-progressBarWidget { background-color: #fff; border: 1px solid var(--primary-element-highlight-color); } .ve-init-mw-progressBarWidget-bar{ background-color:var(--primary-element-highlight-color); } .mw-pulsating-dot:before, .mw-pulsating-dot:after { background-color: var(--primary-element-highlight-color); } .mw-pulsating-dot:before, .mw-pulsating-dot:after { background-color: var(--primary-element-highlight-color); } /* VE Toolbar */ .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle:hover { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:focus { outline: 1px solid var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link, .oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link { background-color: var(--primary-element-highlight-color-lighter); color: var(--primary-element-highlight-color); } .oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title { color: var(--primary-element-highlight-color); } /* VE Medium Settings and Insert */ .mw-widget-mediaResultWidget.oo-ui-optionWidget-highlighted, .mw-widget-mediaResultWidget.oo-ui-optionWidget-selected { box-shadow: 0 0 2px var(--primary-element-highlight-color); } /* VE ACE Editor */ .ve-ui-mwAceEditorWidget .ace_focus { border-color: #36c; border-width: 2px; margin: 0; } /* VE Widgets */ .ve-ui-targetWidget-focused { border-color: var(--primary-element-highlight-color); box-shadow: inset 0 0 0 1px var(--primary-element-highlight-color); } .oo-ui-lookupElement-menu .oo-ui-optionWidget .oo-ui-labelElement-label { color: var(--primary-element-highlight-color); } /* VE Range Slider */ .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-webkit-slider-runnable-track { /* background:#3071a9 */ background: var(--primary-element-highlight-color); border-radius: 8px; } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-webkit-slider-runnable-track { /* background:#0060df */ background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-moz-range-track { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-ms-fill-lower { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-ms-fill-lower { background: var(--primary-element-highlight-color); border-radius: 8px; } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]::-ms-fill-upper { background: var(--primary-element-highlight-color); filter: brightness(1.2); } .oojsplus-range-widget .oojsplus-range-widget-input input[type=range]:focus::-ms-fill-upper { background: var(--primary-element-highlight-color); filter: brightness(1.2); } /* ################################################# Small Elements ################################################# */ #back-to-top:focus { border: none; } .noarticletext .bs-pt-item:hover .card-body { background-color: var(--copiki-verylightgrey); } .noarticletext .bs-pt-item:active .card-body { background-color: var(--copiki-lightgrey); } .toctogglelabel { color: var(--link-fg); } /* ################################################# Extension corrections, Bugfixes, etc. ################################################# */ /* Menus */ .mws-button-primary:hover { opacity: 100%; } /* Modals, Dialogs */ body.mediawiki .oo-ui-windowManager-modal > .oo-ui-dialog { background-color: rgba(97, 98, 101, 0.7) !important; z-index: 1052 !important; } .oo-ui-window-content { overflow: visible; } /* EmbedVideo */ .embedvideo-overlay { top: 0; position: absolute; } /* BlueSpice UniversalExport: die frühere globale Einfärbung von .bs-universalexport-exportexclude (background var(--sidebar-secondary-bg) + border-radius 10px) wurde 2026-08-16 auf Owner-Wunsch entfernt. Es gilt wieder die Vendor-Regel aus bluespice.universalExport.css (flaches #EBECEC ohne Rundung); Elemente, die gar keine Einfärbung wollen, neutralisieren die Vendor-Regel selbst (Muster: .ims-export-btns / .am-org__screen). */ /* IMS Document control — switch which Freigabe status is shown based on the ContentStabilization view the reader is on. The state class (copiki-cs-*) is set directly on #doccontrol-container by the {{#copiki-cs-state:}} parser function in the template wikitext, so it travels with the ParserOutput and survives every render path (normal view, PDF, book export). Default is "stable" — handles the empty-class fallback when ContentStabilization is not active or the function returned empty. Selectors compound `#doccontrol-container` and the state class on the same element (no whitespace), since the class lives on the container itself and a descendant selector would not match it. */ #doccontrol-container .ims-doc-control__status { display: none; } #doccontrol-container .ims-doc-control__status--stable { display: inline; } #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__status--stable { display: none; } #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__status--implicit-unstable { display: inline; } #doccontrol-container.copiki-cs-unstable .ims-doc-control__status--stable, #doccontrol-container.copiki-cs-first-unstable .ims-doc-control__status--stable { display: none; } #doccontrol-container.copiki-cs-unstable .ims-doc-control__status--unstable { display: inline; } #doccontrol-container.copiki-cs-first-unstable .ims-doc-control__status--first-unstable { display: inline; } /* "Freigegeben durch X / am Y" approval metadata: only meaningful when the namespace actually has the Freigabe (ContentStabilization) mechanism. The full view renders it as the .ims-doc-control__details sub-table; the minimal view inlines it in the .ims-doc-control__approval-detail span. Both default to HIDDEN so they never show in namespaces without stabilization — there yields no state class and the fields are empty, which would otherwise render blank "Freigegeben durch: / am:" rows. Shown only on the two approved states (stable + implicit-unstable); the real draft states never had an approval to display. */ #doccontrol-container .ims-doc-control__details { display: none; } #doccontrol-container.copiki-cs-stable .ims-doc-control__details, #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__details { display: block; } #doccontrol-container .ims-doc-control__approval-detail { display: none; } #doccontrol-container.copiki-cs-stable .ims-doc-control__approval-detail, #doccontrol-container.copiki-cs-implicit-unstable .ims-doc-control__approval-detail { display: inline; } /* Green stable-pill label depends on whether the namespace runs the Freigabe mechanism. The tag leaves an empty state class for a non-stabilized namespace, so the DEFAULT shows "Gültige Version" (label-valid); an actually-approved page in a stabilized namespace (copiki-cs-stable) shows "Freigegeben" (label-approved). Both spans live inside .ims-doc-control__ok; only one is ever visible. */ #doccontrol-container .ims-doc-control__label-approved { display: none; } #doccontrol-container .ims-doc-control__label-valid { display: inline; } #doccontrol-container.copiki-cs-stable .ims-doc-control__label-approved { display: inline; } #doccontrol-container.copiki-cs-stable .ims-doc-control__label-valid { display: none; } /* The sub-table sits flush against the main table — no extra margin, and no top border on its first row so the seam looks continuous. */ #doccontrol-container .ims-doc-control__details > table.infobox-table { margin-top: 0; } /* ################################################# Copiki & mib additional designs ################################################# */ .copikitable { background-color: #fff; } .copikitable, .copikitable > tr > th, .copikitable > tr > td, .copikitable > * > tr > th, .copikitable > * > tr > td { /* border: 2px solid var(--sidebar-primary-bg); */ border: 2px solid #fff; } .card.copikicard .copikitable { margin: 8px 0 0; } .card.copikicard .card-body { padding-top: 0; } .card.copikicard { border: none; } .card.copikicard .card-header { font-weight: bold; } .card.copikicard .card-header:first-child { /* border: 1px solid var(--copiki-grey); */ border-bottom: none; } .card.copikicard .card-body { /* border-left: 1px solid var(--copiki-grey); border-right: 1px solid var(--copiki-grey); */ } .card.copikicard .card-body:not(:has(+ .card-footer)) { /* border-bottom: 1px solid var(--copiki-grey); */ border-bottom-left-radius: var(--bs-border-radius); border-bottom-right-radius: var(--bs-border-radius); } .card.copikicard.bg-primary .card-header { background-color: var(--mws-primary-bg); color: #fff; } .card.copikicard.bg-primary .card-body { background-color: var(--mws-primary-bg); } .card.copikicard.bg-light .card-header { background-color: var(--copiki-verylightgrey); } .card.copikicard.bg-light .card-body { background-color: var(--sidebar-primary-bg); } /* Zustandsklassen: .open (Grundzustand, absichtlich ohne eigene Regel -- der graue Ring unten IST die Darstellung fuer "Offen"), .planned, .inprogress, .done, .completed, .discarded, .waiting (legacy: alter Status "Wartend", seit 2026-08-07 durch .planned/"Geplant" ersetzt; Regel bleibt fuer unmigrierte Altinhalte). Frueher trugen diese Elemente zusaetzlich ein id="status-indicator-*", das sich ueber alle Tabellenzeilen wiederholte (ungueltiges HTML) -- seit 2026-08-05 durchgaengig Klassen; einzige Ausnahme: Form:MM-Maßnahme, dort brauchen die einmalig vorkommenden Icons die IDs fuer "show on select". */ .status-indicator { position: relative; color: transparent; width:22px; height:22px; /* float:right; */ border: var(--copiki-middlegrey) solid 2px; border-radius:50%; text-align:center; /* transition: box-shadow .3s ease-out; */ margin: 0 auto; } .status-indicator:hover { /* box-shadow: 0 0 3px 1px var(--primary-element-highlight-color); */ /* filter: brightness(1.1); */ } /* Maßnahmenstatus: seit 2026-08-30 gefuellte Scheiben in den --copiki-status-*-Tokens statt angeschnittener Torten. Die Fuellgrade (Viertel/Halb) lasen sich als Prozentwert, den das Modul nicht zusagen kann; ausserdem waeren sie bei sieben Status nicht mehr unterscheidbar. Die Symbole in den Punkten tragen Maßnahmenakte und Vorgangsliste — hier steht der Punkt nur als kleine Legende neben dem beschrifteten Feld, deshalb reicht die Farbe. .waiting/.stopped gehoeren anderen Modulen und bleiben. */ .status-indicator.defined { background: var(--copiki-status-definiert, #a5d2ec); border-color: var(--copiki-status-definiert, #a5d2ec); } .status-indicator.planned { background: var(--copiki-status-geplant, #0284c7); border-color: var(--copiki-status-geplant, #0284c7); } .status-indicator.inprogress { background: var(--copiki-status-bearbeitung, #f2c200); border-color: var(--copiki-status-bearbeitung, #f2c200); } .status-indicator.waiting::before, .status-indicator.waiting::after { z-index: 1000; content: ""; position: absolute; top: 4px; width: 3px; height: 10px; background-color: var(--copiki-middlegrey); border-radius: 1px; } .status-indicator.waiting::before { left: 5px; } .status-indicator.waiting::after { right: 5px; } .status-indicator.discarded { border-color: var(--copiki-danger); background-color: var(--copiki-danger); } .status-indicator.discarded::before, .status-indicator.discarded::after { content: ""; position: absolute; left: 8px; top: 4px; width: 2px; height: 10px; background-color: #fff; border-radius: 1px; } .status-indicator.discarded::before { transform: rotate(45deg); } .status-indicator.discarded::after { transform: rotate(-45deg); } .status-indicator.completed { border-color: var(--copiki-success); background-color: var(--copiki-success); } .status-indicator.done { background-color: var(--copiki-status-umgesetzt, #c5e1d4); border-color: var(--copiki-status-umgesetzt, #c5e1d4); } /* Haken in --copiki-success: die Flaeche ist ein blasses Gruen, Weiss laege darauf unlesbar. Gleiche Logik wie --copiki-status-umgesetzt-ink. */ .status-indicator.done::before{ content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid var(--copiki-status-umgesetzt-ink, #198754); border-width: 0 2px 2px 0; transform: rotate(45deg); } .status-indicator.completed::before { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .status-indicator.stopped { border-color: var(--copiki-darkgrey); background-color: var(--copiki-darkgrey); } .status-indicator.stopped::before { content: ""; position: absolute; left: 4px; top: 9px; width: 10px; height: 2px; background-color: #fff; border-radius: 1px; } /* ############### Template: Waben / Hexgrid - clip-path Honeycomb (Screen) */ .hexGrid { /* Responsive: die längste Reihe füllt die Container-Breite (100cqw), jede Wabe aber max. --hexmax. --hexn = Spalten der breiten Reihe (Muster), --hexmax = Max-Wabe je Größe. min() deckelt; calc füllt. Pro Wabe = --hexsize + 8px (2×--mh, mh ist immer 4px). Ohne cqw-Support wird --hexsize ungültig → Fallback 220px (dann greift das JS). Container = .mw-parser-output (unten). */ --hexmax: 220px; /* max size of hex */ --hexn: 4; /* cells in the wide row (3/4=4, 4/5=5, 5/6=6) */ --hexsize: min( var(--hexmax), calc( 100cqw / var(--hexn) - 8px ) ); --s: var(--hexsize, 220px); --r: 1.15; /* ratio */ /* clip-path */ --h: 0.5; --v: 0.25; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); /* margin */ --m: 4px; /* margin inbetween hex */ --mv: var(--m); /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ --mv-top: calc( ( ( var(--s) * var(--r) ) / 4 ) - var(--mv) ); /* vertical top to ident */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); display: flex; flex-wrap: wrap; flex-direction: row; justify-content: flex-start; gap: 0; width: calc( var(--hexn) * ( var(--s) + ( var(--mh) * 2 ) ) ); list-style: none; padding: 0; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) auto calc( var(--mv) * 2 ) auto !important; } /* Waben/Start – Wabengröße (Dropdown). Default (ohne Klasse) = 220px = größte Variante. --hexsize wird auf dem Grid gesetzt und vererbt sich an .hexItem (dort --s: var(--hexsize)) → die gesamte Wabe inkl. Schrift skaliert mit. */ /* Wabengröße (Dropdown) setzt jetzt nur das MAXIMUM; die tatsächliche Größe ergibt sich responsiv aus der Container-Breite (siehe --hexsize oben). */ .hexGrid.wabenSizeM { --hexmax: 175px; } .hexGrid.wabenSizeS { --hexmax: 130px; } /* Waben/Start – Reihenmuster (Dropdown, versteckt). Standard (keine Klasse) = 3/4 (4 Waben breit). wabenRows45 = 4/5 (5 breit), wabenRows56 = 5/6 (6 breit). Nur --hexn setzen → Breite (calc(var(--hexn)*…)) UND die responsive --hexsize (100cqw/var(--hexn)) richten sich automatisch danach. */ .hexGrid.wabenRows45 { --hexn: 5; } .hexGrid.wabenRows56 { --hexn: 6; } /* Query-Container für die responsive Wabengröße: 100cqw = Breite des Artikel- Inhalts (skaliert auch mit, wenn der Inhalt auf volle Breite gezogen wird). */ .mw-parser-output { container-type: inline-size; } /* Waben/Start – Ausrichtung (Dropdown). Mittig = Default (margin auto, zentriert). Links/Rechts = Float, damit der umliegende Fließtext um die Waben herumläuft. Das margin-Shorthand der Basis ist !important, darum hier ebenfalls !important. */ .hexGrid.wabenLeft { float: left; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) 2rem calc( var(--mv) * 2 ) 0 !important; } .hexGrid.wabenRight { float: right; margin: calc( var(--mv-top) + ( var(--mv) * 2 ) ) 0 calc( var(--mv) * 2 ) 2rem !important; } /* Größe und Ausrichtung wirken ausschließlich in der Ansicht. Im VisualEditor bleibt die Wabenstruktur unverändert stehen – Float und Größe werden hier zurückgesetzt, damit das Umschalten den Editor nicht verschiebt. */ div.ve-init-target .hexGrid.wabenLeft, div.ve-init-target .hexGrid.wabenRight { float: none !important; margin: 0 !important; } /* Im VisualEditor gibt es keinen cqw-Container → feste Wabengröße erzwingen, sonst würde 100cqw ins Leere laufen. Größe/Muster bleiben im Editor neutral. */ div.ve-init-target .hexGrid { --hexsize: 220px !important; } /* Each hexagon item */ .hexGrid .hexItem, div.ve-init-target .hexItem { --s: var(--hexsize, 220px); /* size of hex */ --r: 1.15; /* ratio */ /* clip-path */ --h: 0.5; --v: 0.25; --hc:calc(clamp(0,var(--h),0.5) * var(--s)) ; --vc:calc(clamp(0,var(--v),0.5) * var(--s) * var(--r)); /* margin */ --m: 4px; /* margin inbetween hex */ --mv: var(--m); /* vertical */ --mh: calc(var(--mv) + (var(--s) - 2*var(--hc))/2); /* horizontal */ --mv-top: calc( ( ( var(--s) * var(--r) ) / 4 ) - var(--mv) ); /* vertical top to ident */ /* for the float*/ --f: calc(2*var(--s)*var(--r) + 4*var(--mv) - 2*var(--vc) - 2px); display: inline-block; /* Schriftgröße an die Hexgröße koppeln → Text skaliert mit --hexsize/--s mit. Innentexte (.content, h1, p) sind em-basiert, relativ zu dieser Basis. */ font-size: calc( var(--s) / 11 ); margin-bottom: calc(var(--mv) - var(--vc)); /* width: var(--s); height: auto; aspect-ratio: var(--r); */ width: var(--s); margin: calc( -1 * var(--mv-top) ) var(--mh) var(--mv) var(--mh); height: calc(var(--s)*var(--r)); /* Create the hexagon shape */ clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0,100% var(--vc),100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%,var(--hc) 100%,0 calc(100% - var(--vc)),0 var(--vc)); } /* Standard-Wabenfarbe = Copiki-Grau (Variable, NICHT hartcodiert). Gilt nur für echte Waben (Waben/Wabe) — Logos und Lücken sind ausgenommen. Eine im Template per |wabenfarbe= gesetzte Inline-Farbe überschreibt diesen Wert automatisch (Inline-Style schlägt jede Stylesheet-Regel ohne !important). */ .hexGrid .hexItem:not(.hexLogo):not(.blank), div.ve-init-target .hexItem:not(.hexLogo):not(.blank) { background: var(--copiki-secondary-color); } /* Reihen-Versatz je Muster: die SCHMALE Reihe wird um eine halbe Wabe eingerückt. Muster (3/4 = Standard, 4/5, 5/6) und Start (.startFour = breite Reihe zuerst) schließen sich per :not() gegenseitig aus → genau EINE Versatz-Regel je Kombi, keine Resets nötig. Periode = Summe der beiden Reihenlängen (7, 9, 11); der Versatz sitzt auf der ersten Wabe jeder schmalen Reihe. Versatz = halbe Wabe. */ /* 3/4 (Standard, keine Muster-Klasse) */ .hexGrid:not(.wabenRows45):not(.wabenRows56):not(.startFour) > .hexItem:nth-of-type(7n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid:not(.wabenRows45):not(.wabenRows56).startFour > .hexItem:nth-of-type(7n+5) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* 4/5 */ .hexGrid.wabenRows45:not(.startFour) > .hexItem:nth-of-type(9n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid.wabenRows45.startFour > .hexItem:nth-of-type(9n+6) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* 5/6 */ .hexGrid.wabenRows56:not(.startFour) > .hexItem:nth-of-type(11n+1) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } .hexGrid.wabenRows56.startFour > .hexItem:nth-of-type(11n+7) { margin-left: calc( (var(--s) / 2 ) + ( var(--m) * 2 ) ); } /* .hexGrid .hexItem:nth-child(odd), div.ve-init-target .hexItem:nth-child(odd) { background:green; } */ /* The hexagon shape via clip-path */ .hexGrid .hexItem .hexLink, div.ve-init-target .hexItem .hexLink { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: #ffffff00; transition: background-color 0.4s ease; } /* Hover effect */ .hexGrid .hexItem:hover .hexLink, div.ve-init-target .hexItem:hover .hexLink { text-decoration: none; background-color: #ffffff66; transition: background-color 0.4s ease; } /* Skin re-adds the link underline on :focus / :active — this shows up when a tile is clicked and the mouse is dragged off and released beside it (the drag-cancelled click leaves the focused/active). The 's underline draws through .content, so it has to be cleared on .hexLink itself. */ .hexGrid .hexItem .hexLink:focus, .hexGrid .hexItem .hexLink:active, .hexGrid .hexItem .hexLink:visited, div.ve-init-target .hexItem .hexLink:focus, div.ve-init-target .hexItem .hexLink:active { text-decoration: none; } /* Content styling */ .hexGrid .hexItem .hexLink .content, div.ve-init-target .hexItem .hexLink .content { align-content: center; width: 100%; height: 100%; padding: var(--mv-top) 10px; color: #fff; text-align: center; font-size: 1.2em; line-height: 1.15; text-decoration: none; } /* hexagon logo */ .hexGrid .hexItem.hexLogo { background: none; padding: var(--mv-top) 0; } .hexGrid .hexItem.hexLogo .logoIn, div.ve-init-target .hexItem.hexLogo .logoIn { width: 100%; height: 100%; background-color: unset; background-position: center center; background-size: contain; background-image: url('/images_noauth/companylogo.png'); background-repeat: no-repeat; } /* Logo: „Doppelte Größe" (2 Waben) – für ein Logo in der Zeilenmitte. Das Logo-Template fügt zusätzlich einen versteckten
  • -Platzhalter (.hexSpacer) ein, damit die :nth-of-type-Zählung der Waben dahinter korrekt bleibt. */ .hexGrid .hexItem.hexLogo.doublesize { width: calc( ( var(--s) * 2 ) + var(--mh) ); } /* Logo: „Bis zum Rand ausfüllen" (1,5 Waben) – für ein Logo am Rand einer Zeile. */ .hexGrid .hexItem.hexLogo.logoRand { width: calc( var(--s) + ( var(--s) / 2 ) ); } /* Versteckter Zähl-Platzhalter: zählt bei :nth-of-type mit, belegt aber keine Breite. */ .hexGrid .hexSpacer { display: none; } /* Lücke (Waben/Lücke): reserviert eine volle Waben-Breite, ist in der normalen Ansicht aber unsichtbar (kein grauer/roter Hex-Hintergrund, kein Hover). */ .hexGrid .hexItem.blank, .hexGrid > .hexItem.blank:nth-of-type(7n+1) { background-color: transparent !important; } /* ---- Bilderwabe (image hexagon) for the clip-path honeycomb ---- Only image hexagons carry /

    /

    inside .hexLink, so these selectors do not affect the plain text waben (which use span.content). */ .hexGrid .hexItem .hexLink, div.ve-init-target .hexItem .hexLink { position: relative; overflow: hidden; } .hexGrid .hexItem .hexLink img, div.ve-init-target .hexItem .hexLink img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; margin: 0; z-index: 0; transition: filter .3s ease-out; } .hexGrid .hexItem:hover .hexLink img { filter: brightness(.72); } .hexGrid .hexItem .hexLink h1, .hexGrid .hexItem .hexLink p, div.ve-init-target .hexItem .hexLink h1, div.ve-init-target .hexItem .hexLink p { position: absolute; left: 0; right: 0; width: 100%; margin: 0 !important; padding: 6px 14px; box-sizing: border-box; color: #fff; text-align: center; background-color: rgba(128, 128, 128, .85); z-index: 2; border: 0; transition: transform .25s ease-out, opacity .3s ease-out; } /* obere Hälfte = Titel, untere Hälfte = Text; beide horizontal zentriert und vertikal nah an der Mitte zusammengeführt (nicht weit auseinander). Positionierung gilt für normale Ansicht UND VisualEditor. */ .hexGrid .hexItem .hexLink h1, div.ve-init-target .hexItem .hexLink h1 { top: 0; bottom: 50%; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 12px; font-size: 1em; line-height: 1.25; } .hexGrid .hexItem .hexLink p, div.ve-init-target .hexItem .hexLink p { top: calc(50% - 1px); bottom: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; font-size: 0.76em; line-height: 1.25; } /* Normale Ansicht: versteckt, beim Hover von oben/unten eingeblendet. */ .hexGrid .hexItem .hexLink h1 { transform: translateY(-100%); opacity: 0; } .hexGrid .hexItem .hexLink p { transform: translateY( 100%); opacity: 0; } .hexGrid .hexItem:hover .hexLink h1, .hexGrid .hexItem:hover .hexLink p { transform: translateY(0); opacity: 1; } /* VisualEditor: Vorschau — Bild SICHTBAR lassen, Titel/Text als kompakte lesbare Bänder mittig darüber (nicht die ganze Wabe grau überdecken). Echtes :hover ist im VE unzuverlässig, darum dauerhaft sichtbar. */ div.ve-init-target .hexItem .hexLink h1, div.ve-init-target .hexItem .hexLink p { height: auto; transform: translateY(0); opacity: 1; } div.ve-init-target .hexItem .hexLink h1 { top: auto; } div.ve-init-target .hexItem .hexLink p { bottom: auto; } div.ve-init-target .hexItem .hexLink img { filter: none; } /* Modifications for the Visual Editor */ div.ve-init-target .hexGrid { margin: 0 !important; /* Platz unter dem "Waben/Start"-Label: die erste Wabe zieht durch ihren negativen Top-Margin sonst über das Label und macht es unanklickbar. Dieser Abstand fängt den Negativ-Margin ab → Label bleibt frei. Die Verzahnung der Waben untereinander bleibt unverändert. (Nach dem margin- Shorthand notiert, damit margin-bottom gewinnt.) */ margin-bottom: 3em !important; /* padding: 0 !important; */ padding-bottom: 0 !important; padding-left: 3px; width: 9.7em; border-left: solid 6px #00000000; border-right: solid 6px #00000000; border-top: solid 2px #00000000; border-bottom: solid 2px #00000000; } div.ve-init-target .hexGrid::before { opacity: 0.5; padding: 5px 6px 5px 30px; font-family: 'Lato', sans-serif; font-weight: bold; color: #202122; content: "Waben/Start"; background-position: center left; background-repeat: no-repeat; background-size: 20px; background-image: url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=puzzle&format=rasterized&lang=de-formal&skin=bluespicediscovery&version=fsb61); background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E puzzle %3C/title%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%223%22/%3E%3Cpath d=%22M10.58 3A3 3 0 0 1 11 4.5a3 3 0 0 1-6 0A3 3 0 0 1 5.42 3H1v12a2 2 0 0 0 2 2h12V3z%22/%3E%3C/svg%3E"); } /* div.ve-init-target .hexGrid::before { background-position: center left; background-repeat: no-repeat; background-size: 20px; background-image: url(/load.php?modules=oojs-ui.styles.icons-editing-advanced&image=puzzle&format=rasterized&lang=de-formal&skin=bluespicediscovery&version=fsb61); background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3E puzzle %3C/title%3E%3Ccircle cx=%2217%22 cy=%2210%22 r=%223%22/%3E%3Cpath d=%22M10.58 3A3 3 0 0 1 11 4.5a3 3 0 0 1-6 0A3 3 0 0 1 5.42 3H1v12a2 2 0 0 0 2 2h12V3z%22/%3E%3C/svg%3E); } */ div.ve-init-target .hex { position: relative; outline: 1px solid transparent; /* background-color: #c0143c !important; */ } div.ve-init-target .hex { list-style-type: none; /* Vertikaler Abstand der Waben NUR im VisualEditor (enger = kleinerer Wert). */ margin-bottom: 20px; } /* Editor (VisualEditor): Lücke als gestrichelte WABEN-Form (nicht als Rechteck). clip-path kann keinen normalen (gestrichelten) Rand tragen, darum wird die Hexagon-Kontur als SVG-Hintergrund gezeichnet. preserveAspectRatio=none + background-size:100% 100% dehnt die Kontur exakt auf die Wabenbox; das Polygon ist leicht eingerückt, damit der 3px-Strich nicht am Rand abgeschnitten wird. clip-path wird hier aufgehoben, sonst würde die äußere Strichhälfte weggeclippt. */ div.ve-init-target .hexItem.blank, div.ve-init-target .hex.blank { background-color: transparent; border: 0; clip-path: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 115' preserveAspectRatio='none'%3E%3Cpolygon points='50,3 97,30 97,85 50,112 3,85 3,30' fill='none' stroke='%23a7acb1' stroke-width='3' stroke-dasharray='7 6' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 100% 100%; } /* Editor (VisualEditor): Logo-Wabe als weißes Hexagon mit hellgrauem Rand, Logo zentriert, einheitliche Größe (Varianten doublesize/logoRand werden im Editor ignoriert — das Logo wird immer gleich groß angezeigt). Rand = zweischichtig: graues Eltern-Hexagon + weißes inneres Hexagon (transform: scale) → klar sichtbarer hellgrauer Ring entlang der clip-path-Form (border/drop-shadow sind bei clip-path zu unsichtbar). */ div.ve-init-target .hexItem.hexLogo { width: var(--s) !important; height: calc( var(--s) * var(--r) ) !important; box-sizing: border-box !important; padding: 0 !important; background: #cccccc; } div.ve-init-target .hexItem.hexLogo .logoIn { width: 100% !important; height: 100% !important; margin: 0 !important; background-color: #fff; background-size: 60%; background-position: center center; clip-path: polygon(var(--hc) 0, calc(100% - var(--hc)) 0, 100% var(--vc), 100% calc(100% - var(--vc)), calc(100% - var(--hc)) 100%, var(--hc) 100%, 0 calc(100% - var(--vc)), 0 var(--vc)); transform: scale(0.97); } /* ############### Template: Attentionbox - Box for attention (template) */ .box { display: flex; align-items: center; flex-direction: row; padding: 5px; margin-top: 1rem; margin-bottom: 1rem; } .box .pic { margin: 0 20px 0 15px; } .box .text { } .box.box_general_styling { } .box.box_general_styling .heading { text-transform: uppercase; font-weight: bold; } .box.box_general_styling .content { } .box.box_general_styling .fa, .box.box_general_styling .far , .box.box_general_styling .fas { font-size: 3em; } /* ############### Template: Infobox */ .infobox { width: 100%; /* z-index: 999; */ position: relative; } @media (min-width: 601px) { .infobox { margin-left: 16px; width: 22rem; float: right; } } .infobox .infobox-heading { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; min-height: 32px; /*background-color: rgba(60, 60, 60, 0.15);*/ /* background-color: rgba(60, 60, 60, 0.5); */ background-color: #9d9d9d; color: #ffffff; font-weight: bold; padding: 8px; } .infobox .infobox-innerheading { margin: auto 0; } .infobox .infobox-body { background-color: #fff; padding: 0px; border-right: 1px solid rgba(60, 60, 60, 0.5); border-left: 1px solid rgba(60, 60, 60, 0.5); border-bottom: 1px solid rgba(60, 60, 60, 0.5); } .infobox .infobox-image { padding: 8px; } .infobox .pic { text-align: center; } /* .infobox .logo { padding: 0 8px; } .infobox .logo img { object-fit: contain; width: 100%; } */ /* .infobox .pic img { object-fit: contain; width: 100%; } */ .infobox .infobox-desc { font-size: 0.8em; text-align: center; padding: 4px 0; } .infobox table { margin-bottom: 0; } .infobox table p { margin: 0; } .infobox table td.infoboxLabel { font-weight: bold; } .infobox table td.infoboxHeading { font-weight: bold; /* background-color: rgba(60, 60, 60, 0.15); */ background-color: #e2e2e2; } .infobox table td.infoboxData { } /* ############### CopikiBlog - SMW Semantic Blog */ #blog-input-box { margin: auto; margin-bottom: 2rem; } #blog-input-box form[name="createbox"] { background-color: #e2e2e2; box-shadow: 3px 3px 3px rgba(0,0,0,.35); border-top: 1px solid rgba(0,0,0,.075); border-left: 1px solid rgba(0,0,0,.075); border-radius: 5px; padding: .25rem 1rem; margin: 0 1rem 1rem 1rem; } .ns-1580 #blog-input-box form[name="createbox"] { margin: 0 } .ns-1580 #blog-input-box .inputbox-label { margin-top: -62px; margin-left: 0; } #blog-input-box form[name="createbox"] p { display: flex; } #blog-input-box form[name="createbox"] p .formInput { flex-grow: 1; margin-left: 50px; } #blog-input-box .inputbox-label { display: flex; align-items: center; min-height: 62px; width: 68px; justify-content: center; font-weight: bold; margin-top: -78px; margin-bottom: 1rem; margin-left: 1rem; color: #c0143c; border-top-left-radius: 5px; border-bottom-left-radius: 5px; font-size: 1.15rem; } #blog-input-box .inputbox-label:hover a { text-decoration: none !important; } #blog-input-box .inputbox-icon { width: 50px; height: 50px; border-radius: 50%; display: flex; justify-content: center; align-items: center; background: #9d9d9d; } #blog-input-box .inputbox-icon:hover { background: #c0143c; } #blog-input-box .inputbox-icon i { color: #fff; } .blog-feed-item { display: flex; gap: 16px; padding: 0 1rem 0 26px; margin-bottom: 1rem; } .blog-feed-item-date { background: #c0143c; color: #fff; display: flex; border-radius: 50%; width: 50px; height: 50px; flex-direction: column; justify-content: center; align-items: center; line-height: 1.1rem; flex-shrink: 0; } .blog-feed-item-date .date-day { font-size: 1.1rem; font-weight: bold; } .blog-feed-item-date .date-month { font-size: small; } .blog-feed-item-body { border-radius: 4px; padding: .5rem 2rem; box-shadow: 3px 3px 3px rgba(0,0,0,.25); border-top: 1px solid rgba(0,0,0,.15); border-left: 1px solid rgba(0,0,0,.15); width: 100%; min-width: 300px; } .blog-feed-item-title { margin: -20px 0 .5rem 0; } .blog-feed-item-published { color: #666666; margin-bottom: .5rem } .blog-feed-item-footer { display: flex; justify-content: space-between; } .blog-feed-item-teaser { cursor: pointer; font-size: 0.9375rem; } .blog-feed-item-expand, .blog-feed-item-collapse { color: #c0143c; cursor: pointer; float: right; margin-top: .5rem; } .blog-feed-item-expand:before, .blog-feed-item-collapse:before { font-family: 'Font Awesome 6 Free'; font-weight: bold; font-size: 1.25rem; } .blog-feed-item-expand.icon-down:before { content: '\f424'; } .blog-feed-item-expand.icon-up:before { content: '\f424'; } .blog-feed-item-collapse:before { content: '\f00d'; } .blog-feed-item-expand:hover span, .blog-feed-item-collapse:hover span { text-decoration: underline; } .blog-feed-item-expand i, .blog-feed-item-collapse i { font-size: 1.25rem; text-decoration: none !important; } .blog-feed-item-catlinks { list-style: none; margin: 0 !important; padding: .5rem 0 !important; display: flex; justify-content: start; align-items: center; } .blog-feed-item-catlinks:before { content: "\e903"; font-family: "bluespice-logo"; font-style: normal; font-size: 0.63rem; margin-right: 0.3125rem; display: inline-block; vertical-align: middle; } .blog-feed-item-catlinks li { padding: 0 0.3125rem; border: 1px solid #c4c4c4; border-radius: 0.19rem; background-color: transparent; margin-left: 0.3125rem; margin-bottom: 0.3125rem; line-height: 1.25rem; color: #c0143c; margin-right: 2px !important; } .blog-feed-item-body::before { content: ''; display: inline-block; width: 20px; height: 20px; transform: rotate(45deg); background: white; margin-left: -43px; border-left: 1px solid #ddd; border-bottom: 1px solid #ccc; top: 7px; position: relative; } #category-filters { margin: 0 1rem 2rem 1rem; padding: 0 1rem; background: #e2e2e2; box-shadow: 3px 3px 3px rgba(0,0,0,.35); border-top: 1px solid rgba(0,0,0,.075); border-left: 1px solid rgba(0,0,0,.075); border-radius: 5px; display: flex; flex-wrap: wrap; } .blog-feed-item-catlinks { list-style: none; margin: 0 !important; padding: .5rem 0 !important; display: flex; justify-content: start; align-items: center; margin-right: 1rem !important; } .blog-feed-controls { float: right; margin-top: .5rem; } .category-filter { cursor: pointer; } #category-filters * { color: #444; padding: 5px 0 !important; } #category-filters *.active { color: #c0143c; } .reset-filters { align-self: center; margin-left: auto; cursor: pointer; } .sort-desc, .sort-asc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #c0143c; cursor: pointer; } .sort-desc::before, .sort-asc::before { font-family: icomoon !important; content: '\ea4c'; color: #fff; } .sort-asc::before { transform: rotate3d(1,0,0,180deg); } @media ( max-width: 576px ) { .blog-feed-item { padding-left: 1rem; } .inputbox-label { display: none !important; } #blog-input-box form[name="createbox"] p { flex-direction: column; } #blog-input-box form[name="createbox"] p .formInput { margin-left: 0; min-height: 40px; } } @media ( max-width: 768px ) { .blog-feed-item-date { order: 1; border-radius: 0; border-top-right-radius: 4px; margin-left: -66px; } } /* Filtered format */ .filtered-filters, .filtered-views { border: 0 !important; } .filtered-views, .filtered-views-container { padding: 1rem 0 !important; } /* Misc */ .mr-2 { margin-right: .5rem !important; } #pfForm label { margin-right: 1rem; } /* Blog SMW form to create/edit and elements */ .createbox .smwfrom-inputwrapper { padding: 7px 10px; background: #eee; border-radius: 5px; margin-bottom: 15px; } .createbox .blogfrom-info { padding: 0px 10px; } .createbox .editOptions { padding: 10px; border: 1px solid #bbb; background: #eee } .createbox ul.fancytree-container { font-family: inherit; font-size: 1em; border-radius: 3px; border: 1px solid #BBB; } .createbox span.fancytree-node { min-height: 25px; } /* ############### Small Elements */ /* Cutted mib Logo in background */ .mw-parser-output .bg-mibcutlogo { background-image: url(/copikiresources/images/mib_logo_cutted_white.svg) !important; background-position: bottom right 10%; background-repeat: no-repeat; background-size: 50%; } /* Cutted Copiki hex in background */ .mw-parser-output .bg-copikihexcut { background-image: url(/copikiresources/images/copiki_hex_cutted_white.svg) !important; background-position: bottom right 10%; background-repeat: no-repeat; background-size: 35%; } .mw-parser-output .bg-copikihexcut-lightgrey { background-image: url(/copikiresources/images/copiki_hex_cutted_lightgrey.svg) !important; background-position: bottom right 10%; background-repeat: no-repeat; background-size: 35%; } /* Lists - Norm list CSS*/ .norm-list { counter-reset: my-counter; list-style-type: none; margin: 0 0 0 2em; padding: 0; } .norm-list li { position: relative; margin-bottom: 10px; } .norm-list li:before { content: counter(my-counter, lower-alpha) ")"; position: absolute; left: -20px; counter-increment: my-counter; } .norm-list li ul { counter-reset: nested-counter; list-style-type: none; } .norm-list li ul li:before { content: counter(nested-counter) ")"; counter-increment: nested-counter; position: absolute; left: -20px; } /* Make disable TOC number possible */ .noautonum span.tocnumber { display: none; } /* ################################################# Custom additional styles ################################################# */ /* Badges */ .badge { display: inline-block; min-width: 16px; padding: 6px 9px; border-radius: 5px; font-size: 16px; text-align: center; background: #c0143c; color: #fefefe; margin-left: 0; margin-right: 6px } .badge.primary { background: var(--breadcrumbs-rootnode-bg); } .badge.secondary { background: #616265; } .badge-hp { display: inline-block; min-width: 16px; padding: 2px 4px 2px 8px; border-radius: 5px; font-size: 16px; text-align: center; background: #ef8200; color: #fefefe; margin-left: 0; margin-right: 6px } /* PDF Export and just show on PDFs */ .bs-page-content .no-pdf { display: none !important; } .bs-page-content div.only-pdf { display:block; } .bs-page-content span.only-pdf { display:inline; } .only-pdf { display: none !important; } .flexbreak { flex-basis: 100%; height: 0; } /* ============================================================ Modulnavigation (.ims-nav) — Wabenband Eine waagerechte Reiterleiste fuer alle Modul-Seitenverbaende: IMS-Uebersicht, Reklamationen, Massnahmen, Agenten und die Norm-Unterseiten. Der Reiter der gerade geoeffneten Seite wird automatisch hervorgehoben: MediaWiki rendert den Link auf die aktuelle Seite als ohne href, ein Parameter oder eine Zustandsklasse ist also nicht noetig. Liegt hier und nicht in einer TemplateStyles-Unterseite, weil Fuellung und Marke der aktiven Wabe der Live-Markenfarbe ueber var(--mws-primary-bg, …) folgen — und var() lehnt der TemplateStyles-Sanitizer ab. Die Fallback-Kette bevorzugt --mws-primary-bg (die Farbe, die der Discovery-Skin wirklich malt) vor --copiki-primary-color (SCSS-gebacken) vor einem harten Rot, nach der Copiki-CSS-Konvention. display:contents auf dem

    ist der Kern des Aufbaus: MediaWiki packt die Wikilinks je nach Kontext in einen Absatz oder eben nicht. Mit display:contents verschwindet der Absatz aus dem Layoutbaum, die werden in beiden Faellen zu direkten Flex-Kindern der Leiste — erst dadurch wirkt gap zuverlaessig. Die Textfarben tragen !important gegen eine Vendor-Regel des Discovery-Skins: `.mw-body-content a:not([class*="oo-ui-"]) { color: var(--link-fg) }` (Spezifitaet 0,2,1) wuerde jeden Reiter — auch den aktiven — sonst auf die Standard-Linkfarbe zurueckzwingen. Drei Auspraegungen: .ims-nav Wabenband (Standard aller Module) .ims-nav--kanten Schraegband (Alternative, per Vorlagenparameter stil=kanten) .ims-nav.ims-norm-nav Wabenverband (Norm-Unterseiten) ============================================================ */ .ims-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; margin: 0 0 1em 0; padding: 0 8px; background: var(--copiki-verylightgrey); border-top: 1px solid var(--copiki-grey); border-bottom: 1px solid var(--copiki-grey); line-height: 1.3; } .ims-nav p { display: contents; } /* Folgt direkt auf eine Leiste eine zweite — auf den Normseiten sitzt das Untermenue unter der Hauptnavigation —, dann schliessen die beiden Baender aneinander an, statt durch einen weissen Streifen getrennt zu schweben. Der eigene Oberrand der zweiten faellt dabei weg, sonst stuenden wieder zwei 1-px-Linien uebereinander. */ .ims-nav + .ims-nav { margin-top: -1em; border-top: 0; } /* Alle Reiter tragen die Wabenform. Inaktiv ist sie unsichtbar, weil die Flaeche transparent bleibt — beim Ueberfahren wird sie grau sichtbar, beim aktiven Reiter markenfarben. Der Innenabstand von 18 px haelt die Schrift aus den Schultern des Sechsecks. */ .ims-nav a, .ims-nav .mw-selflink, .ims-nav .selflink { display: inline-flex; align-items: center; gap: 0.4em; margin: 6px 0; padding: 8px 18px; font-size: 13.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; /* nie unterstreichen — auch nicht der aktive Reiter beim Hover, wo der Discovery-Skin sonst ein a:hover-Underline setzt */ text-decoration: none !important; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); transition: background-color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1); } .ims-nav a { color: var(--copiki-darkgrey, #616161) !important; background: transparent; } .ims-nav a:not(.mw-selflink):not(.selflink):hover, .ims-nav a:not(.mw-selflink):not(.selflink):focus { background: var(--copiki-grey); color: var(--copiki-verydarkgrey) !important; text-decoration: none; } /* aktiver Reiter = Selbstlink auf die aktuelle Seite */ .ims-nav .mw-selflink, .ims-nav .selflink { padding: 8px 24px; background: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); color: #fff !important; font-weight: 700 !important; cursor: default; } /* ---- Position: die Luecke ueber der Leiste schliessen ---------- Zwischen der Unterkante von #title-section und dem Seiteninhalt sitzen gemessene 17,6 px. Die kommen NICHT aus dem Skin, sondern aus dem MediaWiki-Core: #contentSub ist auf Artikelseiten leer (Hoehe 0), traegt aber margin-bottom: 1.4em — bei seiner Schriftgroesse von 12,6 px sind das exakt 17,64 px. Deshalb ist der Abstand in keinem Stylesheet als Abstand zu finden. Wir ziehen die Leiste um genau diesen Betrag hoch, damit sie direkt unter der Titelzeile sitzt und als Menuebalken der Seite liest statt als erster Inhaltsblock. Eng auf den ERSTEN Block der Seite begrenzt: die zweite Leiste auf den Normseiten und jede Leiste weiter unten im Text bleiben unberuehrt. Ausnahme: Ist der Seitentitel ausgeblendet (__HIDETITLE__ setzt body.hide-title, z. B. im Massnahmenmodul), gibt es keine Titelzeilen-Unterkante, deren Rand die Leiste uebernehmen koennte — hide-title.css setzt border: none auf #title-section. Ohne die Ausnahme verloere die Leiste dort ihre Oberkante. ---- */ body:not(.hide-title) .mw-parser-output > .ims-nav:first-child { margin-top: -17.6px; /* Die Titelzeile hat bereits einen Rand. Zieht man die Leiste bis dorthin hoch, stehen zwei 1-px-Linien uebereinander und der Strich wirkt oben doppelt so dick wie unten. Deshalb gibt die oberste Leiste ihren eigenen Rand ab und benutzt den der Titelzeile als Oberkante. */ border-top: 0; } /* ---- Modulspange ---------------------------------------------- Zeigt am linken Kopf der Leiste, in welchem Modul man sich befindet — auf einer Einzelseite wie Massnahme:MA-2026-118 ist das sonst nirgends abzulesen. Erscheint NUR, wenn die Vorlage ein data-modul setzt; die Norm-Navigation laesst es weg und bekommt dadurch automatisch keine Spange. Das Copiki-Zeichen laeuft als background-image, der Modulname als content — so kommt beides in ein einziges Pseudoelement. Das Zeichen behaelt seine eigenen Farben: es ist das Produktzeichen und wird bewusst NICHT weissgelabelt. Der Schriftzug daneben steht deshalb in Slate Grey und nicht in der Primaerfarbe — sonst stossen auf Instanzen mit abweichender Primaerfarbe das rote Zeichen und der Text in der Kundenfarbe aufeinander. ---- */ .ims-nav[data-modul]::before { content: attr(data-modul); display: inline-flex; align-items: center; margin-right: 14px; padding: 12px 14px 12px 22px; border-right: 1px solid var(--copiki-grey); background: url("../images/copiki_icon_rgb.svg") left center / auto 15px no-repeat; font-size: 11px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--copiki-secondary-color, #616265); white-space: nowrap; } /* ---- Zurueck-Link --------------------------------------------- Steht auf Einzelseiten (Massnahme:, Reklamation:, Agent:) vor den Reitern und ist kein Reiter, sondern ein Ausgang. Deshalb ohne Wabenform, ohne Fuellung beim Ueberfahren und eine Stufe heller als die uebrigen Labels — so ist er auf den ersten Blick als Sonderfall erkennbar. Das traegt display:contents, damit der Link trotz Huelle ein direktes Flex-Kind der Leiste bleibt. */ .ims-nav .ims-nav__back { display: contents; } .ims-nav .ims-nav__back a { font-weight: 500; color: #b4b4b6 !important; } /* Beim Ueberfahren bekommt auch der Zurueck-Link die Wabe — er erbt Form und Fuellung aus der Grundregel oben. Nur die Schrift muss dabei nachdunkeln, sonst verschwindet sie auf der grauen Wabe. */ .ims-nav .ims-nav__back a:hover, .ims-nav .ims-nav__back a:focus { color: var(--copiki-darkgrey, #616161) !important; } /* ---- Alternative: Schraegband --------------------------------- Per Vorlagenparameter stil=kanten. Die Reiter dehnen sich zu gleich breiten Segmenten ueber die volle Inhaltsspalte und lesen zusammen als durchgehendes Saegezahnband. Die beiden Aussenkanten werden gerade geschnitten, damit das Band mit der Inhaltsspalte fluchtet. ---- */ .ims-nav.ims-nav--kanten { gap: 3px; padding: 0; background: transparent; border-top: 0; border-bottom: 0; } .ims-nav.ims-nav--kanten a, .ims-nav.ims-nav--kanten .mw-selflink, .ims-nav.ims-nav--kanten .selflink { flex: 1 1 0; min-width: 130px; justify-content: center; margin: 0; padding: 12px 20px; background: var(--am-cloud, #f2f2f3); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; text-align: center; white-space: normal; clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); } .ims-nav.ims-nav--kanten a:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 11px) 100%, 0 100%); } .ims-nav.ims-nav--kanten a:last-child { clip-path: polygon(11px 0, 100% 0, 100% 100%, 0 100%); } .ims-nav.ims-nav--kanten a:not(.mw-selflink):not(.selflink):hover, .ims-nav.ims-nav--kanten a:not(.mw-selflink):not(.selflink):focus { background: var(--copiki-grey); } .ims-nav.ims-nav--kanten .mw-selflink, .ims-nav.ims-nav--kanten .selflink { background: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); } /* Die Modulspange darf im Schraegband nicht mitwachsen */ .ims-nav.ims-nav--kanten[data-modul]::before { flex: 0 0 auto; padding: 12px 14px 12px 0; } /* ---- Untermenue der Norm-Unterseiten: Lesezeichen ------------- Die Reiter haengen als Baender an der Hauptnavigation darueber — deren Unterkante ist die Schiene, an der sie sitzen. Unten mittig eingekerbt wie ein Lesebaendchen; ein Managementsystem ist ein Werk, in dem man Stellen markiert. Traegt bewusst KEIN eigenes Band: die Baender sollen frei unter der Leiste haengen, sonst waere die Schiene, an der sie haengen, nicht mehr zu sehen. Auch keine Spange — dieser Verbund hat gleichrangige Normen und keinen Modulnamen. Alle Baender sind gleich hoch, deshalb bricht die Reihe sauber um. Die zweite Zeile haengt dann allerdings an nichts mehr; der row-gap trennt sie erkennbar von der ersten. ---- */ .ims-nav.ims-norm-nav { justify-content: center; gap: 10px 4px; padding: 0 8px 18px; background: transparent; border-bottom: 0; } .ims-nav.ims-norm-nav a, .ims-nav.ims-norm-nav .mw-selflink, .ims-nav.ims-norm-nav .selflink { margin: 0; padding: 10px 20px 20px; /* Gleicher Grund wie die Leiste darueber — die Baender sollen als Fortsetzung des Menuebands lesen, nicht als eigene Farbschicht. */ background: var(--copiki-verylightgrey, #f6f6f6); font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 10px), 0 100%); transition: background-color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1); } .ims-nav.ims-norm-nav a:not(.mw-selflink):not(.selflink):hover, .ims-nav.ims-norm-nav a:not(.mw-selflink):not(.selflink):focus { background: var(--copiki-grey); } .ims-nav.ims-norm-nav .mw-selflink, .ims-nav.ims-norm-nav .selflink { background: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); font-weight: 800; } /* ---- Variante: versetzter Wabenverband ------------------------ Bleibt als waehlbare Auspraegung erhalten (Vorlagenparameter stil=waben). Die Zellen greifen mit ihren Schultern ineinander und sitzen abwechselnd hoch und tief — die erste steht oben. Der Versatz kostet Platz beim Umbruch: eine tief gesetzte Zelle ragt 11 px unter ihre Layoutbox, eine hoch gesetzte 11 px darueber, zwei benachbarte Zeilen ueberlappen sich also um 22 px, wenn man nichts tut. Deshalb row-gap 28 px: 22 px gleichen den Versatz aus, die restlichen 6 px sind der sichtbare Abstand zwischen den Zeilen. Aus demselben Grund oben und unten 21 px Innenabstand. Das Band ist heller als bei der Hauptnavigation, sonst verschwinden die grauen Zellen darin. ---- */ .ims-nav.ims-nav--waben { justify-content: center; gap: 28px 0; padding: 21px 8px 21px 21px; background: #fcfcfc; } .ims-nav.ims-nav--waben a, .ims-nav.ims-nav--waben .mw-selflink, .ims-nav.ims-nav--waben .selflink { position: relative; z-index: 1; margin: 0 0 0 -13px; padding: 11px 26px; background: #e8e8ea; font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); transition: background-color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1), color 0.16s cubic-bezier(0.2, 0.7, 0.3, 1); } /* Beim Umbruch laeuft das Muster einfach weiter — die Zeile darunter kann also mit einer tiefen Zelle beginnen. Kollisionsfrei dank des row-gap; CSS kann einen Zeilenanfang nicht erkennen. */ .ims-nav.ims-nav--waben a:nth-child(odd) { transform: translateY(-11px); } .ims-nav.ims-nav--waben a:nth-child(even) { transform: translateY(11px); } .ims-nav.ims-nav--waben a:not(.mw-selflink):not(.selflink):hover, .ims-nav.ims-nav--waben a:not(.mw-selflink):not(.selflink):focus { background: var(--copiki-grey); z-index: 2; } .ims-nav.ims-nav--waben .mw-selflink, .ims-nav.ims-nav--waben .selflink { z-index: 3; padding: 11px 26px; background: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); } /* Containerfilter search box on the IMS overview pages: remove the OOUI 50em max-width cap so the filter input spans the full content width. Scoped via .ims-nav (only present on the IMS-Übersicht overview pages and their subpages), so containerfilter instances elsewhere keep the default OOUI width. The filter widget carries both .container-filter-search and .oo-ui-textInputWidget on the same element; the two-class context selector outranks the bare .oo-ui-textInputWidget rule without needing !important. */ .ims-nav ~ div .container-filter-search { max-width: none; } /* ---- IMS KPI tiles ({{#copiki-ims-kpi:}}) ---- */ .ims-kpi-row { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0 8px; } .ims-kpi { flex: 1 1 180px; display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-radius: 8px; background: #f3f4f5; border-left: 4px solid var(--copiki-secondary-color); } .ims-kpi__icon { font-size: 1.4em; color: var(--copiki-secondary-color); } .ims-kpi__value { font-size: 1.6em; font-weight: 700; line-height: 1; white-space: nowrap; } .ims-kpi__label { font-size: 1em; color: var(--copiki-secondary-color); line-height: 1.2; } /* Label mit hinterlegtem Tooltip (Schwellenwert-Beschreibung) -> Hilfe-Cursor als Hinweis */ .ims-kpi__label[data-bs-toggle="tooltip"] { cursor: help; } .ims-kpi--alert { border-left-color: var(--copiki-danger); } .ims-kpi--alert .ims-kpi__icon, .ims-kpi--alert .ims-kpi__value { color: var(--copiki-danger); } .ims-kpi--ok { border-left-color: var(--copiki-success); } .ims-kpi--ok .ims-kpi__icon { color: var(--copiki-success); } .ims-kpi--warn { border-left-color: var(--copiki-warn); } .ims-kpi--warn .ims-kpi__icon { color: var(--copiki-warn); } .ims-kpi--planned { border-left-color: var(--copiki-success-light); } .ims-kpi--planned .ims-kpi__icon { color: var(--copiki-success-light); } /* Three additional, purely opt-in atoms on top of the tile above -- CSS classes/markup conventions, not PHP parameters, so a template author can write them by hand and get the identical result the two PHP renderers (ImsKpiParserFunction, SteckbriefStatusRenderer) produce. A tile that carries none of them renders exactly as before (2026-08-21 owner request). .ims-kpi--stacked Turns the tile into three fixed rows spanning the tile's full width: (1) the label, (2) the icon immediately followed by the value(+suffix) on ONE line, (3) an optional description -- owner redesign 2026-08-21, replacing an earlier version of this atom where the icon sat in its own left-hand column spanning every row instead. Markup order for the column is label, icon, value, desc. A 2-column/ 3-row CSS grid (auto 1fr) places every element explicitly (no relying on auto-placement): label and desc each span both columns (grid-column 1/-1, so they start flush at the tile's own left edge, level with the icon rather than indented under it), while icon (column 1) and value (column 2) share row 2 -- that row alone is where the icon appears. .ims-kpi__suffix A span placed INSIDE .ims-kpi__value, right after the number AND a literal space character (the space is markup, not just this rule's margin-left below -- text extraction such as a screen reader, copy-paste or a PDF text layer has no other separator to go on), e.g. 8 von 28 -- renders "8 von 28" with only the "8" large/bold/coloured; the suffix reads at the tile's normal text size/weight/colour, like .ims-kpi__label. .ims-kpi__desc An explanation on its own row below the value line, smaller and muted. Works standalone (block-level) or, more commonly, as the third row of an .ims-kpi--stacked column. */ .ims-kpi--stacked { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; } .ims-kpi--stacked .ims-kpi__label { grid-column: 1 / -1; grid-row: 1; /* Owner request (2026-08-21, Steckbrief-Status only): bold the heading so it separates more clearly from the value line below it. Scoped to .ims-kpi--stacked (currently only SteckbriefStatusRenderer's own KPI row uses that modifier -- see its own doc comment above) rather than the base .ims-kpi__label rule, which ImsKpiParserFunction's plain (non-stacked) tiles elsewhere in the wiki still use unchanged. */ font-weight: 700; } .ims-kpi--stacked .ims-kpi__icon { grid-column: 1; grid-row: 2; align-self: center; } .ims-kpi--stacked .ims-kpi__value { grid-column: 2; grid-row: 2; } .ims-kpi--stacked .ims-kpi__desc { grid-column: 1 / -1; grid-row: 3; } .ims-kpi__suffix { /* 1 ÷ 1.6 cancels .ims-kpi__value's own 1.6em back to the tile's normal 1em -- same colour/weight as .ims-kpi__label, never the value's large/bold/coloured treatment. .ims-kpi--hero overrides this with its own cancellation factor further below, where its value's larger 2.9em is set. */ font-size: 0.625em; font-weight: 400; color: var(--copiki-secondary-color); margin-left: 4px; } .ims-kpi__desc { display: block; font-size: 0.85em; color: var(--copiki-secondary-color); line-height: 1.3; } /* ---- Diagramm-Karte: Chart im Karten-Look der KPI-Kacheln ---- Gleiche Aussenabstaende wie .ims-kpi-row, damit ein Chart zwischen zwei KPI-Reihen oben wie unten denselben Abstand hat. */ .mm-chart-card { margin: 20px 0 8px; padding: 10px 16px; border-radius: 8px; background: #f3f4f5; } .mm-chart-card > p { margin: 0; } /* Karten-Titel als HTML statt Highcharts-"title": Titel bleibt oben, der Chart (feste Hoehe) zentriert sich per auto-Margins im Restraum — sichtbar, wenn die Flex-Reihe eine Karte auf die Hoehe der Nachbarkarte streckt. Schrift = Highcharts-Default fuer title (System-Font-Stack, 1.2em bold, #333 bei 1rem Basis), damit HTML-Titel und frueherer SVG-Titel gleich aussehen. */ .mm-chart-card { display: flex; flex-direction: column; } .mm-chart-card__title { margin: 4px 0 0; text-align: center; color: #333333; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-size: 1.2rem; font-weight: 700; line-height: 1.25; } /* Spezifitaet 0,3,0: die TemplateStyles von Vorlage:Highcharts Diagramm setzen .mw-parser-output .hc-chart { margin:0; display:inline-block } INLINE nach diesem Stylesheet — bei gleicher Spezifitaet (0,2,0) wuerden sie gewinnen. */ .mw-parser-output .mm-chart-card .hc-chart { display: block; margin: auto 0; } /* KPI-Beschriftungen (Gesamt, Offen, ...) im Massnahmen-Modul fett; .ims-kpi__label selbst ist fleet-weit (Reklamationen, Agenten, IMS-Dashboards) und bleibt regular. */ .mm-kpi-row .ims-kpi__label { font-weight: 700; } /* Zwei Diagrammkarten links untereinander, eine dritte rechts ueber beide Zeilen. Unter 768px alles untereinander. Seit 2026-08-30 von keiner Seite des Maßnahmen-Pakets mehr benutzt (die Uebersicht rechnet jetzt mit .mm-cockpit, s.u.); bleibt als Baustein und fuer Instanzen, deren Seite noch die alte Revision traegt. */ .mm-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 20px 0 8px; } .mm-chart-grid > .mm-chart-card { margin: 0; min-width: 0; } @media (min-width: 768px) { .mm-chart-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .mm-chart-grid__side { grid-column: 2; grid-row: 1 / span 2; } } /* Prozess-Chart in der Seitenkarte: die Inline-Hoehe aus Vorlage:Highcharts Diagramm (Seite Maßnahmen rechnet sie aus der Prozesszahl) ist die Flex-Basis und damit die MINDESThoehe; flex-grow 1 laesst den Chart wachsen, wenn die linke Spalte hoeher ist, flex-shrink 0 verhindert Quetschen. Bewusst KEIN height-Override (ein frueheres height:auto !important lieferte im Browser des Owners falsche Hoehen, headless nicht reproduzierbar); Highcharts misst den Container. */ .mw-parser-output .mm-chart-grid__side .hc-chart { flex: 1 0 auto; margin: 0; } /* Mehrere Diagramm-Karten nebeneinander (z.B. 2 halbbreite Charts in einer Reihe). Flex haelt sie side-by-side; flex-wrap + min-width stapeln sie auf schmalen Screens. */ .mm-chart-row { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; } .mm-chart-row > .mm-chart-card { flex: 1 1 260px; min-width: 0; margin: 0; } /* ---- Termin-Zelle nach Fristampel einfaerben ------------------------------ Opt-in: greift NUR innerhalb von .mm-termin-tinted, damit nicht fleet-weit jede Terminspalte eingefaerbt wird. Auf einer Seite aktivieren, indem der Tabellenaufruf in

    gewickelt wird. Die Markerklassen (.mm-termin--overdue usw.) setzt MM-MA-TerminIcon auf das Uhr-Icon; dessen Farbe bleibt zusaetzlich als Inline-Style bestehen, damit die Ampel auch ohne dieses Stylesheet farbig ist. Zwei bewusste Entscheidungen: 1. :has() -- geht hier, weil diese Datei NICHT durch den TemplateStyles- Sanitizer laeuft. Auf einer TemplateStyles-Seite (Vorlage-Unterseite "styles.css") wuerde der Selektor dagegen als "invalid-selector-list" abgelehnt (geprueft). Deshalb steht die Regel global und nicht bei der Vorlage. 2. color-mix() statt fester Hex-Werte -- der Flaechenton wird aus demselben Theme-Token abgeleitet wie die Ampel, bleibt also white-label-fest. Kennt ein Browser color-mix() nicht, ist die Deklaration ungueltig und die Zelle bleibt schlicht ungefaerbt (unkritischer Ausfall). */ /* ---- Absaetze in SMW-Ergebnistabellen ------------------------------------- MediaWiki wickelt Zellinhalte in

    ein, sobald sie aus einer Vorlage oder aus mehrzeiligem Wikitext stammen. Der Standard-Aussenabstand dieser Absaetze blaeht jede Tabellenzeile auf -- in datatables-Listen traegt praktisch jede Zelle so ein

    , entsprechend hoch werden die Zeilen. Aussenabstand daher raus. ABER: stehen MEHRERE Absaetze in EINER Zelle (langer Feststellungstext mit Leerzeile), sollen sie weiterhin voneinander abgesetzt sein -- dafuer die p + p-Regel, die nur zwischen Geschwistern greift und den stoerenden Abstand nach aussen nicht zurueckholt. */ /* Angehaengt an SMWs eigene Typklasse auf der Zelle (smwtype_txt, smwtype_wpg, smwtype_dat, smwtype_num ...). Bewusst NICHT ueber den Container (.srf-datatable): dessen Struktur baut die DataTables-JS zur Laufzeit um, die Zellklasse dagegen kommt direkt aus SMW und ist da, egal in welchem Ergebnisformat oder wie tief verschachtelt. Die Gegenregel ist das nackte p{margin:0.4em 0 0.5em 0} aus resources/src/mediawiki.skinning/elements.less -- Spezifitaet (0,0,1), wird also von jedem dieser Selektoren geschlagen, kein !important noetig. */ td[class*="smwtype_"] p, th[class*="smwtype_"] p, .srf-datatable td p, .srf-datatable th p, table.smwtable td p, table.smwtable th p { margin: 0; } td[class*="smwtype_"] p + p, .srf-datatable td p + p, table.smwtable td p + p { margin-top: 0.4em; } /* ---- Maßnahmen-Tabellen: erste Spalte ------------------------------------- .mm-table sitzt am Container jeder SMW-Tabelle des Maßnahmen-Moduls (via class-Parameter der Vorlage bzw. |class=mm-table in den handgeschriebenen #ask). Damit greifen die folgenden Feinheiten modulweit und nur dort. */ /* Die Maßnahmen-Bezeichnung (MA-2026-58) soll nicht umbrechen -- sie ist ein Bezeichner, kein Fliesstext. Wie beim Termin ohne feste Breite: das automatische Tabellenlayout zieht die Spalte genau passend. tr:not(.child) ist Pflicht: die aufgeklappte Detailzeile von DataTables Responsive ist ein eigenes mit EINER Zelle . Die ist damit ebenfalls td:first-child -- ein ungefiltertes :first-child faengt sie mit und setzt die kompletten ausgeklappten Details (Feststellung, Bemerkung ...) auf nowrap, sodass lange Texte aus der Tabelle herauslaufen. Gemeint ist nur die erste Spalte der echten Datenzeilen. */ .mm-table tbody > tr:not(.child) > td:first-child { white-space: nowrap; } /* Aufklapp-Plus (DataTables Responsive) UNTER die Bezeichnung statt daneben. Original: das Icon ist ein absolut positioniertes ::before, vertikal zentriert am linken Rand, wofuer die Zelle padding-left:30px reserviert. Hier: linker Einzug zurueck auf normal, unten Platz schaffen, Icon nach unten holen und am Textanfang ausrichten. Die volle Selektorkette ist noetig, um die DataTables-Regel (Spezifitaet 0,4,4) zu schlagen -- mit .mm-table davor sind es 0,5,4, also kein !important noetig. */ .mm-table table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control { padding-left: 10px; padding-bottom: 26px; } .mm-table table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before { top: auto; bottom: 6px; left: 10px; margin-top: 0; } /* Termin-Datum nicht umbrechen. Bewusst KEINE feste Spaltenbreite: die Tabellen laufen mit datatables-autoWidth=false, also bestimmt das automatische Tabellenlayout des Browsers die Breite -- nowrap laesst die Spalte damit genau so breit werden, wie das laengste Datum es braucht. Ein Pixelwert waere geraten und wuerde bei anderen Datumsformaten oder Sprachen wieder brechen. Gilt fuer MM-MA-TerminBadge und -TerminPlain, also in allen Maßnahmen-Tabellen. */ .mm-termin-datum { white-space: nowrap; } /* DataTables hebt die SORTIERTE Spalte hervor -- nicht per Hintergrundfarbe, sondern per flaechendeckendem Inset-Schatten: table.dataTable.order-column.stripe>tbody>tr.odd >.sorting_1 { box-shadow: inset 0 0 0 9999px rgba(0,0,0,.054) } ... tr.even>.sorting_1 { ... rgba(0,0,0,.019) } Der Schatten liegt UEBER der Hintergrundfarbe und legte einen Grauschleier ueber den Fristton. Getroffen hat das vor allem Rot (dunkelster Ton) in ungeraden Zeilen mit dem staerkeren Schleier -- dort war praktisch nichts mehr zu sehen. In der getoenten Spalte ERSETZT der Fristton diese Hervorhebung, der Schatten kann also weg. !important bewusst: die DataTables-Regel liegt bei Spezifitaet (0,5,4) und kommt aus einem ResourceLoader-Modul, dessen Ladereihenfolge gegenueber dieser statisch eingebundenen Datei nicht garantiert ist. Ein reiner Spezifitaets-Ueberbietung waere zudem an die exakte Selektorkette der jeweiligen DataTables-Version gebunden. (Ausnahme nach .claude/rules/ frontend.md: Override von Drittanbieter-CSS mit Begruendung.) */ /* Nur Zellen, die tatsaechlich einen Fristton bekommen, verlieren den Schatten -- in Tabellen ohne Ampel (terminvorlage=MM-MA-TerminPlain) bleibt die Sortierspalten-Hervorhebung von DataTables also erhalten. */ .mm-termin-tinted td:has(.mm-termin--overdue), .mm-termin-tinted td:has(.mm-termin--urgent), .mm-termin-tinted td:has(.mm-termin--soon), .mm-termin-tinted td:has(.mm-termin--planned) { box-shadow: none !important; } .mm-termin-tinted td:has(.mm-termin--overdue) { background-color: color-mix(in srgb, var(--copiki-danger) 14%, transparent); } .mm-termin-tinted td:has(.mm-termin--urgent) { background-color: color-mix(in srgb, var(--copiki-warn) 10%, transparent); } .mm-termin-tinted td:has(.mm-termin--soon) { background-color: color-mix(in srgb, var(--copiki-success) 12%, transparent); } .mm-termin-tinted td:has(.mm-termin--planned) { background-color: color-mix(in srgb, var(--copiki-success-light) 12%, transparent); } /* ERLEDIGTE Vorgaenge nicht einfaerben. Die Ampel rechnet gegen HEUTE -- an einer 2021 abgeschlossenen Maßnahme waere ein rotes "ueberfaellig" schlicht falsch und wuerde Handlungsbedarf vortaeuschen, den es nicht gibt. Betrifft vor allem die Uebersichtsseite und die Prozessseiten, die alle Status zeigen. Erkennung ueber die Statusklasse in derselben Zeile (.completed = Abge- schlossen, .discarded = Verworfen), moeglich seit die Status-Indikatoren Klassen statt wiederholter IDs tragen. */ .mm-termin-tinted tr:has(.status-indicator.completed) td, .mm-termin-tinted tr:has(.status-indicator.discarded) td { background-color: transparent; } /* Highcharts: Credits ("Highcharts.com") ausblenden */ .highcharts-credits { display: none !important; } /* ---- IMS due-date teaser (Vorlage:IMS Fälligkeiten Teaser) ---- */ .ims-due-teaser { margin: 20px 0 16px; padding: 10px 16px; border-radius: 8px; background: #f3f4f5; } .ims-due-teaser__title { font-weight: 700; margin-bottom: 6px; } .ims-due-teaser__row { padding: 2px 0; } .ims-due-teaser__date { color: #6f7273; font-size: .9em; margin-left: 8px; } .ims-due-teaser__more { margin-top: 6px; font-size: .9em; } /* Benutzer-Link im Meta-Block der Teaser-/Aktivitäts-Zeilen (z. B. „14.07.2026 · Name" im Aktivitäts-Feed): gedeckt grau wie das Datum statt Primärfarbe, damit der Feed ruhig bleibt; Hover zeigt die Link-Natur per Unterstreichung. */ .ims-due-teaser__date a { color: inherit; } .ims-due-teaser__date a:hover { text-decoration: underline; } /* ---- IMS export buttons (CSV/PDF row above overview tables) ---- */ .ims-export-btns { text-align: right; margin: 4px 0 8px; } .ims-export-btns a { display: inline-block; padding: 3px 10px; border: 1px solid #a2a9b1; border-radius: 4px; background: #f8f9fa; color: #202122; font-size: .9em; text-decoration: none; } .ims-export-btns a:hover { background: #fff; border-color: var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); text-decoration: none; } /* ---- neutralize BlueSpice exportexclude screen background on IMS elements (vendor rule: .bs-universalexport-exportexclude { background-color:#EBECEC; border: 2px #EBECEC; } in BlueSpiceUniversalExport/resources/bluespice.universalExport.css). NOTE: .ims-nav deliberately NOT overridden — the nav bars' grey background IS that vendor rule. ---- */ .ims-export-btns.bs-universalexport-exportexclude { background: transparent; background-color: transparent; border: none; } /* ---- IMS teaser row: due-date teaser + approvals card side by side ---- */ .ims-teaser-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: stretch; margin: 20px 0 16px; } .ims-teaser-row .ims-due-teaser { flex: 1 1 300px; margin: 0; } /* ---- Export-Buttons: plainlinks unterdrückt das Extern-Link-Icon, aber die MW-Core-Regel (mediawiki.skinning/content.links.less: .plainlinks a.external { padding: 0 !important }) killt zugleich das GESAMTE Button-Padding. !important hier gerechtfertigt: einzige Möglichkeit, ein Vendor-!important zu überstimmen; per #mw-content-text-Anker eng auf unsere Export-Buttons begrenzt. Wert = Button-Grundpadding aus .ims-export-btns a. ---- */ #mw-content-text .ims-export-btns.plainlinks a.external { padding: 3px 10px !important; } /* ---- KPI-Kachel "Audits überfällig": komplette Kachel verlinkt auf die Audit-Seite ---- Stretched-Link-Overlay statt -Wrapper, damit Kachel-Markup/Farben unangetastet bleiben */ .ims-kpi { position: relative; } .ims-kpi__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; } /* Hover-Aufhellung exakt wie bei den Waben (#ffffff66 + 0.4s ease), nur auf verlinkten Kacheln. Das Overlay hellt die Kachelfläche auf; Icon/Wert/Label werden per position:relative ÜBER das Overlay gestapelt (Text bleibt unverändert) und per pointer-events:none klickdurchlässig, damit die ganze Kachel klickbar bleibt. */ .ims-kpi__link:hover { background-color: #ffffff66; transition: background-color 0.4s ease; } .ims-kpi__link ~ .ims-kpi__icon, .ims-kpi__link ~ .ims-kpi__value, .ims-kpi__link ~ .ims-kpi__label { position: relative; pointer-events: none; } /* ---- Copiki KPI-Karten (.copiki-kpi) — fleet-weiter Baustein ---- Kartenreihe im "Cockpit"-Schnitt: Label (16px/700, optional Farbpunkt), grosser Wert (32px/800) mit kleinem Suffix, optionaler Segmentbalken, Beschreibungszeile. Graue Kachel (#f3f4f5) mit 4px-Farbstreifen links, Hover hebt JEDE Karte leicht an (auch nicht klickbare — Owner-Wunsch 2026-08-28). Erzeuger: (PHP) und Vorlage:Copiki KPI-Karte / Copiki KPI-Reihe (Wikitext) — beide emittieren exakt diese Klassen; Farben nur ueber --copiki-*-Tokens. Nachfolger der .ims-kpi-Kacheln, die unveraendert bleiben. */ .copiki-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 16px 0 20px; } .copiki-kpi--termin { grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); } .copiki-kpi--status { grid-template-columns: repeat(4, minmax(0, 1fr)); } .copiki-kpi--spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .copiki-kpi--spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .copiki-kpi--spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .copiki-kpi--spalten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .copiki-kpi--spalten-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .copiki-kpi__card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; position: relative; padding: 14px 16px 14px 14px; border-radius: 6px; background: var(--copiki-verylightgrey, #f6f6f6); color: var(--copiki-secondary-color, #616265); border-left: 4px solid var(--copiki-kpi-stripe, var(--copiki-grey, #d8d8d9)); transition: box-shadow .15s, transform .15s; } .copiki-kpi__card:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .08); transform: translateY(-1px); } a.copiki-kpi__card, a.copiki-kpi__card:hover { color: var(--copiki-secondary-color, #616265); text-decoration: none; } .copiki-kpi__card--wide { grid-column: span 2; } .copiki-kpi__card--dark { --copiki-kpi-stripe: var(--copiki-verydarkgrey, #3d3d3d); } .copiki-kpi__card--grey { --copiki-kpi-stripe: var(--copiki-middlegrey, #9d9d9d); } .copiki-kpi__card--primary { --copiki-kpi-stripe: var(--mws-primary-bg, #c0143c); } .copiki-kpi__card--danger { --copiki-kpi-stripe: var(--copiki-danger, #dc3545); } .copiki-kpi__card--warn { --copiki-kpi-stripe: var(--copiki-warn, #f2c200); } .copiki-kpi__card--success { --copiki-kpi-stripe: var(--copiki-success, #198754); } .copiki-kpi__card--success-light { --copiki-kpi-stripe: var(--copiki-success-light, #c5e1d4); } .copiki-kpi__card--info { --copiki-kpi-stripe: var(--copiki-info, #0284c7); } /* Statusfamilie des Maßnahmenmoduls — dieselben --copiki-status-*-Tokens wie Statuspunkte und Diagramme, damit eine Farbe genau eine Bedeutung hat. Die generischen Modifier darueber bleiben unberuehrt (andere Module nutzen sie). */ .copiki-kpi__card--st-offen { --copiki-kpi-stripe: var(--copiki-status-offen, #9d9d9d); } .copiki-kpi__card--st-definiert { --copiki-kpi-stripe: var(--copiki-status-definiert, #a5d2ec); } .copiki-kpi__card--st-geplant { --copiki-kpi-stripe: var(--copiki-status-geplant, #0284c7); } .copiki-kpi__card--st-bearbeitung { --copiki-kpi-stripe: var(--copiki-status-bearbeitung, #f2c200); } .copiki-kpi__card--st-umgesetzt { --copiki-kpi-stripe: var(--copiki-status-umgesetzt, #c5e1d4); } .copiki-kpi__card--st-abgeschlossen { --copiki-kpi-stripe: var(--copiki-status-abgeschlossen, #198754); } .copiki-kpi__card--st-verworfen { --copiki-kpi-stripe: var(--copiki-status-verworfen, #dc3545); } .copiki-kpi__label { font-size: 16px; font-weight: 700; color: var(--copiki-secondary-color, #616265); display: flex; align-items: center; gap: 8px; line-height: 1.3; } .copiki-kpi__dot { flex: none; width: 10px; height: 10px; border-radius: 2px; background: var(--copiki-kpi-stripe, var(--copiki-grey, #d8d8d9)); } .copiki-kpi__icon { flex: none; font-size: 15px; line-height: 1; color: var(--copiki-kpi-stripe, var(--copiki-middlegrey, #9d9d9d)); } .copiki-kpi__icon--dark { color: var(--copiki-verydarkgrey, #3d3d3d); } .copiki-kpi__icon--grey { color: var(--copiki-middlegrey, #9d9d9d); } .copiki-kpi__icon--primary { color: var(--mws-primary-bg, #c0143c); } .copiki-kpi__icon--danger { color: var(--copiki-danger, #dc3545); } .copiki-kpi__icon--warn { color: var(--copiki-warn, #f2c200); } .copiki-kpi__icon--success { color: var(--copiki-success, #198754); } .copiki-kpi__icon--success-light { color: var(--copiki-success-light, #c5e1d4); } .copiki-kpi__icon--info { color: var(--copiki-info, #0284c7); } .copiki-kpi__value { font-size: 32px; font-weight: 800; line-height: 1; color: var(--copiki-verydarkgrey, #3d3d3d); display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .copiki-kpi__suffix { font-size: 16px; font-weight: 600; color: var(--copiki-middlegrey, #9d9d9d); } .copiki-kpi__desc { font-size: 12px; color: var(--copiki-middlegrey, #9d9d9d); line-height: 1.4; font-variant-numeric: tabular-nums; } .copiki-kpi__desc b { font-weight: 600; color: var(--copiki-secondary-color, #616265); } .copiki-kpi__card--danger .copiki-kpi__desc b { color: var(--copiki-danger, #dc3545); } .copiki-kpi__card.is-zero .copiki-kpi__value { color: var(--copiki-middlegrey, #9d9d9d); } /* Hauptzahl gross — Owner-Wunsch 2026-08-28, z. B. Gesamt-Karte */ .copiki-kpi__card--gross .copiki-kpi__value { font-size: 45px; } .copiki-kpi__seg { display: flex; gap: 2px; height: 7px; width: 100%; border-radius: 3px; overflow: hidden; margin-top: 2px; } /* flex-shrink 1 (statt 0) ist hier Pflicht, nicht Geschmack: die Segmente summieren sich per flex-basis auf 100 %, die Luecken dazwischen kommen mit gap NOCH DAZU. Bei sieben Segmenten sind das 6 x 2px = 12px Ueberhang, und weil der Balken overflow:hidden traegt, wurde das letzte Segment rechts einfach abgeschnitten — bei "Verworfen" mit 2 % Anteil hiess das: gar nicht mehr sichtbar (Owner-Befund 2026-08-30). Mit flex-shrink duerfen die grossen Segmente die 12px abgeben; min-width haelt die kleinen trotzdem sichtbar. */ .copiki-kpi__seg i { display: block; height: 100%; border-radius: 1px; min-width: 3px; flex: 0 1 auto; } .copiki-kpi__seg--grey { background: var(--copiki-middlegrey, #9d9d9d); } .copiki-kpi__seg--dark { background: var(--copiki-verydarkgrey, #3d3d3d); } .copiki-kpi__seg--info { background: var(--copiki-info, #0284c7); } .copiki-kpi__seg--warn { background: var(--copiki-warn, #f2c200); } .copiki-kpi__seg--success { background: var(--copiki-success, #198754); } .copiki-kpi__seg--success-light { background: var(--copiki-success-light, #c5e1d4); } .copiki-kpi__seg--danger { background: var(--copiki-danger, #dc3545); } .copiki-kpi__seg--primary { background: var(--mws-primary-bg, #c0143c); } .copiki-kpi__seg--st-offen { background: var(--copiki-status-offen, #9d9d9d); } .copiki-kpi__seg--st-definiert { background: var(--copiki-status-definiert, #a5d2ec); } .copiki-kpi__seg--st-geplant { background: var(--copiki-status-geplant, #0284c7); } .copiki-kpi__seg--st-bearbeitung { background: var(--copiki-status-bearbeitung, #f2c200); } .copiki-kpi__seg--st-umgesetzt { background: var(--copiki-status-umgesetzt, #c5e1d4); } .copiki-kpi__seg--st-abgeschlossen { background: var(--copiki-status-abgeschlossen, #198754); } .copiki-kpi__seg--st-verworfen { background: var(--copiki-status-verworfen, #dc3545); } .copiki-kpi__link { position: absolute; inset: 0; z-index: 1; border-radius: 6px; } .copiki-kpi__link:focus-visible { outline: 2px solid var(--mws-primary-bg, #c0143c); outline-offset: 2px; } @media (max-width: 900px) { .copiki-kpi, .copiki-kpi--termin, .copiki-kpi--status, .copiki-kpi--spalten-3, .copiki-kpi--spalten-4, .copiki-kpi--spalten-5, .copiki-kpi--spalten-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .copiki-kpi__card--wide { grid-column: 1 / -1; } } /* ---- Maßnahmen-Cockpit (.mm-cockpit) — KPI-Karten und Diagrammkarten in EINEM Raster ---- Seite "Maßnahmen", Owner-Wunsch 2026-08-30. Ab 901px liegen die sieben Statuskarten von und die zwei Diagrammkarten der Seite in einem gemeinsamen 4-Spalten-Raster: Zeile 1 Meta-Zeile (Stand · Betrachtungszeitraum · N Vorgänge) Zeile 2 Gesamt (2 Spalten) | Maßnahmenstatus Zeile 3 Offen | Abgeschlossen | Übersicht (2 x 2) Zeile 4 Geplant | In Bearbeitung | Umgesetzt | Verworfen Zeile 5 Maßnahmen pro Prozess (volle Breite) Dafuer gibt .copiki-kpi seine eigene Rasterrolle per display:contents ab — die Karten werden damit direkte Rasterelemente von .mm-cockpit, obwohl sie im DOM eine Ebene tiefer liegen (das Tag liefert Meta-Zeile + Kartenreihe als einen Block, die Diagrammkarten kommen aus dem Wikitext daneben). Adressiert werden die Karten ueber ihre MODIFIERKLASSE; die ist im Status-Set eindeutig (MassnahmenKpiRenderer::STATUS_COLOUR): die Gesamt- Karte ueber das generische --dark, die sieben Statuskarten ueber die modul-eigene Familie --st-offen, --st-definiert, --st-geplant, --st-bearbeitung, --st-umgesetzt, --st-abgeschlossen, --st-verworfen. Aendert sich diese Zuordnung im Renderer, muss dieser Block mitgezogen werden. Die Platzierung ist absichtlich vollstaendig explizit statt per Auto-Placement: die DOM-Reihenfolge der Karten (STATUS_ORDER) ist eine andere als die gewuenschte Lesereihenfolge. Unter 901px greift nichts davon: .mm-cockpit ist ein normaler Block, die KPI-Reihe behaelt ihr eigenes 2-Spalten-Raster (Media Query darueber) und die beiden Diagrammkarten stehen mit ihren eigenen Aussenabstaenden darunter — also wie vor dieser Runde. Die Grenze ist 901px und nicht 900px, damit sich die beiden Media Queries nicht auf genau einem Pixel ueberlappen. */ @media (min-width: 901px) { /* 20 Spalten, weil die Reihen unterschiedlich teilen: oben zwei Haelften (Gesamt | Torte), darunter zwei Viertel (Offen | Abgeschlossen), darunter FUENF Statuskarten. 20 ist das kleinste gemeinsame Vielfache von 2, 4 und 5 — jede Karte bekommt so ganze Spalten. */ .mm-cockpit { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; } .mm-cockpit > .copiki-kpi { display: contents; } .mm-cockpit > .copiki-mm-meta { grid-column: 1 / -1; grid-row: 1; margin: 0; } .mm-cockpit .copiki-kpi__card--dark { grid-column: 1 / span 10; grid-row: 2; } .mm-cockpit .copiki-kpi__card--st-offen { grid-column: 1 / span 5; grid-row: 3; } .mm-cockpit .copiki-kpi__card--st-abgeschlossen { grid-column: 6 / span 5; grid-row: 3; } .mm-cockpit .copiki-kpi__card--st-definiert { grid-column: 1 / span 4; grid-row: 4; } .mm-cockpit .copiki-kpi__card--st-geplant { grid-column: 5 / span 4; grid-row: 4; } .mm-cockpit .copiki-kpi__card--st-bearbeitung { grid-column: 9 / span 4; grid-row: 4; } .mm-cockpit .copiki-kpi__card--st-umgesetzt { grid-column: 13 / span 4; grid-row: 4; } .mm-cockpit .copiki-kpi__card--st-verworfen { grid-column: 17 / span 4; grid-row: 4; } /* Diagrammkarten: eigene Aussenabstaende raus, das Raster setzt die Abstaende. */ .mm-cockpit > .mm-chart-card { margin: 0; min-width: 0; } .mm-cockpit > .mm-cockpit__chart { grid-column: 11 / span 10; grid-row: 2 / span 2; } .mm-cockpit > .mm-cockpit__chart--full { grid-column: 1 / -1; grid-row: 5; } } /* ---- Maßnahmenakte (.mm-akte) — Vorlage:MM-Maßnahme ---------------------- Anzeige einer einzelnen Maßnahme im Namensraum "Maßnahme:" (Owner-Design 2026-08-30): der Maßnahmentext als Titel, Kopfkarte mit vier Fakten und dem Workflow-Stepper Offen → Geplant → In Bearbeitung → Umgesetzt → Abgeschlossen, darunter zwei Spalten aus ruhigen weissen Karten. Warum hier und nicht in Vorlage:MM-Maßnahme/styles.css: die Statuspunkte brauchen conic-gradient und das Layout eigene Custom Properties — beides lehnt der TemplateStyles-Sanitizer ab (dieselbe Begruendung wie bei den Agenten-Kacheln). Die Vorlage ist dadurch an dieses Stylesheet gekoppelt. SCHRIFTGROESSEN: genau fuenf, als Custom Properties ganz oben (Owner- Korrektur 2026-08-30 — vorher waren es elf, von 9 bis 25px, mit halben Pixeln dazwischen). Neue Groessen kommen NICHT dazu, sondern werden einer der fuenf zugeordnet: --mm-akte-fs-title nur der Seitentitel --mm-akte-fs-lead die vier Werte in der Kopfkarte; hebt sie vom Rest ab --mm-akte-fs-base aller Fliesstext, alle Attributwerte, Personennamen Alle fuenf haengen an --content-font-size (die Groesse, die der Skin auf #content setzt, per FlexiSkin pro Instanz verstellbar; Fallback 15px), und zwar als calc( * var(...)) nach dem Muster, das der Skin selbst fuer .p-sm, Tabellen und das Inhaltsverzeichnis benutzt. So wandert die GANZE Skala mit, wenn eine Instanz die Content-Groesse aendert — die Abstufung untereinander bleibt erhalten, und die Akte laeuft nicht von den Bausteinen weg, die in ihr stecken (der Zeitstrahl in der Verlauf-Karte folgt der Variablen ebenfalls). Bewusst calc und NICHT em: eine Custom Property mit em-Wert loest gegen die Schriftgroesse des Elements auf, an dem sie BENUTZT wird — auf .mm-akte__step-date, dessen Elternteil schon Label-Groesse hat, haette sich der Faktor ein zweites Mal multipliziert. calc liefert in jeder Verschachtelungstiefe denselben absoluten Wert. Offen: Abstaende, Kugelgroessen und die Spaltenbreite der Kopfkarte stehen weiter in px; bei einer stark vergroesserten Content-Schrift wird die 4-Spalten-Kopfkarte eng. Layout-Thema, kein Schriftthema. --mm-akte-fs-badge Chips, Pills, Neben- und Relativzeilen, Fusszeile --mm-akte-fs-label Kartenueberschriften UND Attributlabels (bewusst dieselbe Groesse), Rollen, Stepper-Beschriftung Icons werden in em relativ zu ihrem Text gesetzt, nicht in px — sonst waeren sie eine sechste Groesse, die mit dem Text auseinanderlaeuft. Schriftart: keine eigene Angabe, die Akte erbt die Wiki-Schrift (Lato). Die Atome (Prio-Balken, Avatare, Quellen-Chips, Termin-Zeile) sind bewusst masshaltig zu den gleichnamigen Bausteinen der Vorgangsliste: Avatare als generische .copiki-tbl__avatar-Klasse (extensions/Copiki/resources/ tabelle.css), Prio-Balken/Quellen-Chips/Termin-Zeile als Maßnahmen-Skin .copiki-mm__* (extensions/Copiki/resources/massnahmen-tabelle.css) — damit Liste und Akte dieselbe Sprache sprechen. Sie sind hier dupliziert, weil jene Stylesheets ResourceLoader-Module des Listen-Tags sind und auf einer Maßnahmenseite gar nicht geladen werden. Farben laufen ueber die --copiki-*-Tokens bzw. --mws-primary-bg, damit White-Label greift. */ .mm-akte { --mm-akte-fs-title: calc(1.8 * var(--content-font-size, 15px)); --mm-akte-fs-lead: calc(1.1333 * var(--content-font-size, 15px)); --mm-akte-fs-base: var(--content-font-size, 15px); --mm-akte-fs-badge: calc(0.8667 * var(--content-font-size, 15px)); --mm-akte-fs-label: calc(0.8 * var(--content-font-size, 15px)); color: var(--copiki-secondary-color, #616265); font-size: var(--mm-akte-fs-base); line-height: 1.5; } /* Aktenzeichen ueber dem Titel. Der Seitentitel ist per __HIDETITLE__ ausgeblendet, damit er nicht als zweite Ueberschrift neben dem Maßnahmentext steht — die Nummer selbst muss aber sichtbar bleiben: sie ist das Aktenzeichen, das in Audits zitiert wird und auf Ausdruck und PDF-Export sonst nirgends mehr auftaucht. Als Plakette in der Chip-Sprache, die die Akte ohnehin spricht (Prozess, Quelle), nicht als weitere Ueberschrift — so traegt sie die Nummer, ohne dem Titel Konkurrenz zu machen. tabular-nums, damit Nummern untereinander gleich breit stehen. */ .mm-akte__az { display: inline-block; margin: 0 0 10px; padding: 3px 11px; border-radius: 999px; background: var(--copiki-verylightgrey, #f6f6f6); color: var(--copiki-secondary-color, #616265); font-size: var(--mm-akte-fs-badge); font-weight: 700; letter-spacing: .04em; font-variant-numeric: tabular-nums; } /* Der Maßnahmentext ist der Titel — und er darf mehr als eine Zeile sein. Nutzer brauchen Zeilenumbrueche und Aufzaehlungen darin, mehr nicht. Die ERSTE Zeile traegt die Titelgroesse, alles danach laeuft als normaler Fliesstext mit; andernfalls waere eine Maßnahme mit Aufzaehlung eine Wand aus 27px-Fettschrift. Voraussetzung dafuer ist, dass die Vorlage den Text auf eigene Zeilen setzt — nur dann bekommt auch die erste Zeile ein

    (s. Kommentar dort). Die Zeilenlaengenbegrenzung sitzt an den Bloecken, NICHT am Container: ch misst gegen die Schriftgroesse des Elements selbst, und der Container traegt die Basisgroesse. Ein max-width am Container haette die Kopfzeile mit dem Mass des Fliesstexts beschnitten (bei 15px statt 27px knapp die halbe Breite) — genau das war zwischen dem 30.08. und dieser Korrektur der Fall. So misst jeder Block gegen seine eigene Groesse und wandert mit, wenn eine Instanz die Content-Schrift verstellt. */ .mm-akte__h1 { margin: 0 0 18px; font-size: var(--mm-akte-fs-base); font-weight: 400; line-height: 1.6; color: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__h1 > * { margin: 0; } .mm-akte__h1 > * + * { margin-top: 8px; max-width: 70ch; } .mm-akte__h1 > :first-child { font-size: var(--mm-akte-fs-title); font-weight: 800; line-height: 1.3; max-width: 56ch; } .mm-akte__h1 ul, .mm-akte__h1 ol { padding-left: 22px; } .mm-akte__h1 li { margin: 0; } /* Absaetze in der Akte. Der Skin setzt p { font-weight: var(--content-font-weight); line-height: 150%; margin: .5rem 0 } DIREKT auf das Element — und eine Elementregel schlaegt Vererbung immer, egal wie spezifisch der Vorfahre ist. Ein Absatz in einem Container mit eigener Schriftstaerke faellt deshalb auf die Content-Staerke zurueck. Sichtbar geworden an MA-2026-7, sobald der Maßnahmentext mehr als eine Zeile hat: erste Zeile und Aufzaehlung blieben fett, der Absatz dazwischen nicht (MediaWiki wickelt nur die MITTLEREN Zeilen in

    , die erste und die letzte bleiben blanker Text im div — daher das zerrissene Bild). inherit statt eines festen Werts, damit jeder Container seine eigene Staerke und Zeilenhoehe durchreicht. */ .mm-akte p { font-weight: inherit; line-height: inherit; } .mm-akte__card { background: #ffffff; border: 1px solid var(--copiki-grey, #d8d8d9); border-radius: 6px; } /* Kopfkarte: vier Fakten nebeneinander, Stepper darunter ueber alle Spalten. Der linke Streifen traegt die Statusfarbe — dieselbe Zuordnung wie die Streifen der KPI-Karten (MassnahmenKpiRenderer::STATUS_COLOUR). */ .mm-akte__head { border-left: 4px solid var(--copiki-middlegrey, #9d9d9d); padding: 18px 20px 16px 18px; margin-bottom: 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; } .mm-akte__head--offen { border-left-color: var(--copiki-status-offen, #9d9d9d); } .mm-akte__head--defined { border-left-color: var(--copiki-status-definiert, #a5d2ec); } .mm-akte__head--planned { border-left-color: var(--copiki-status-geplant, #0284c7); } .mm-akte__head--inprogress { border-left-color: var(--copiki-status-bearbeitung, #f2c200); } .mm-akte__head--done { border-left-color: var(--copiki-status-umgesetzt, #c5e1d4); } .mm-akte__head--completed { border-left-color: var(--copiki-status-abgeschlossen, #198754); } .mm-akte__head--discarded { border-left-color: var(--copiki-status-verworfen, #dc3545); } .mm-akte__fact { min-width: 0; } .mm-akte__dt { margin: 0 0 6px; font-size: var(--mm-akte-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__sub { margin-top: 3px; font-size: var(--mm-akte-fs-badge); color: var(--copiki-middlegrey, #9d9d9d); font-variant-numeric: tabular-nums; } /* Statuspunkt. 1. background-IMAGE statt der background-Kurzform fuer die Kegelverlaeufe: die weisse Grundfarbe muss stehen bleiben, sonst scheint im Stepper die Verbindungslinie durch die transparenten Sektoren. 2. background-clip: nur die beiden Verlaufsvarianten clippen auf die padding-box (der Verlauf darf nicht in den Rand laufen). Die vollflaechigen Varianten clippen auf die border-box — mit padding-box entstand zwischen Flaeche und gleichfarbigem Rand eine hauchduenne Naht, die als heller Ring sichtbar war (Owner-Befund an der gruenen "Abgeschlossen"-Kugel). */ .mm-akte__st-line { display: flex; align-items: center; gap: 10px; } /* Statuspunkt. Gefuellte Scheibe in der Statusfarbe mit weissem Symbol; nur "Offen" bleibt ein leerer Kreis mit grauem Rand, weil dort noch nichts entschieden ist. Die Farbe kommt ueber --dot aus den --copiki-status-*-Tokens (:root), damit Punkt, KPI-Karte und Diagramm nicht auseinanderlaufen; die Fuellregel steht deshalb nur EINMAL da und nicht siebenmal. Bewusst KEIN Fuellgrad (Viertel/Halb/Dreiviertel) mehr: eine angeschnittene Scheibe liest sich als Prozentwert, und "In Bearbeitung = dreiviertel" waere eine Zusage, die das Modul nicht halten kann — die Umsetzung ist in der Regel die laengste Phase. Das Symbol nennt stattdessen die TATSACHE (Maßnahme geschrieben / Termin gesetzt / laeuft / erledigt). */ .mm-akte__dot { --dot: var(--copiki-status-offen, #9d9d9d); --dot-ink: var(--copiki-status-ink, #ffffff); flex: none; display: inline-grid; place-items: center; position: relative; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--dot); background-color: var(--dot); background-clip: border-box; color: var(--dot-ink); font-size: 10px; line-height: 1; } /* Symbol im Punkt: display:block statt des inline-block, das FontAwesome mitbringt. Als Inline-Element bildet das eine Zeilenbox mit der Strut der Umgebungsschrift (Lato); das Zeichen sitzt dann auf DEREN Grundlinie statt in der Mitte des Kreises — bei den kleinen Punkten sichtbar als rund ein Pixel zu tief, bei der grossen Kugel faellt es nicht auf. Als Blockelement entfaellt die Strut und place-items:center zentriert die reine Glyphenbox. Die Symbolgroessen sind ausserdem so gewaehlt, dass der Rest gerade aufgeht und kein halbes Pixel gerundet werden muss: Innenmass 18 minus 10 = 4, im Stepper 16 minus 10 = 3, bei der aktuellen Station 22 minus 12 = 5. */ .mm-akte__dot i { display: block; line-height: 1; } .mm-akte__dot--defined { --dot: var(--copiki-status-definiert, #a5d2ec); --dot-ink: var(--copiki-status-definiert-ink, #0284c7); } .mm-akte__dot--planned { --dot: var(--copiki-status-geplant, #0284c7); } .mm-akte__dot--inprogress { --dot: var(--copiki-status-bearbeitung, #f2c200); } .mm-akte__dot--done { --dot: var(--copiki-status-umgesetzt, #c5e1d4); --dot-ink: var(--copiki-status-umgesetzt-ink, #198754); } .mm-akte__dot--completed { --dot: var(--copiki-status-abgeschlossen, #198754); } .mm-akte__dot--discarded { --dot: var(--copiki-status-verworfen, #dc3545); } /* "Offen" und jede noch nicht erreichte Station: nur der graue Ring. Das Symbol bleibt im DOM und wird transparent gefaerbt, damit die Kugelgroesse und die Ausrichtung in der Reihe dieselbe bleiben. */ .mm-akte__dot--offen, .mm-akte__step:not(.mm-akte__step--past):not(.mm-akte__step--current) .mm-akte__dot { background-color: #ffffff; border-color: var(--copiki-status-offen, #9d9d9d); color: transparent; } .mm-akte__st-name { font-size: var(--mm-akte-fs-lead); font-weight: 700; color: var(--copiki-verydarkgrey, #3d3d3d); } /* Termin */ .mm-akte__d-date { display: flex; align-items: center; gap: 7px; font-size: var(--mm-akte-fs-lead); font-weight: 700; color: var(--copiki-verydarkgrey, #3d3d3d); font-variant-numeric: tabular-nums; } .mm-akte__d-date i { flex: none; width: 1em; text-align: center; font-size: .9em; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__d-date--overdue i { color: var(--copiki-danger, #dc3545); } .mm-akte__d-date--urgent i { color: var(--copiki-warn, #f2c200); } .mm-akte__d-date--soon i { color: var(--copiki-success, #198754); } .mm-akte__d-date--plan i { color: var(--copiki-success-light, #c5e1d4); } .mm-akte__d-date--none { font-weight: 600; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__d-rel { margin-top: 3px; font-size: var(--mm-akte-fs-badge); font-weight: 600; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__d-rel--overdue { color: var(--copiki-danger, #dc3545); } /* #a37f00 statt --copiki-warn: das reine Gelb ist als Textfarbe auf Weiss nicht lesbar — gleiche Korrektur wie in der Vorgangsliste. */ .mm-akte__d-rel--urgent { color: #a37f00; } .mm-akte__d-rel--soon { color: var(--copiki-success, #198754); } /* Priorität — drei CSS-Balken, keine Bilddatei */ .mm-akte__prio { display: inline-flex; align-items: center; gap: 8px; font-size: var(--mm-akte-fs-lead); font-weight: 700; color: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; } .mm-akte__bars i { display: block; width: 4px; border-radius: 1px; background: var(--copiki-grey, #d8d8d9); } .mm-akte__bars i:nth-child(1) { height: 6px; } .mm-akte__bars i:nth-child(2) { height: 10px; } .mm-akte__bars i:nth-child(3) { height: 14px; } .mm-akte__prio--hoch .mm-akte__bars i { background: var(--copiki-prio-hoch, #dc3545); } .mm-akte__prio--mittel .mm-akte__bars i:nth-child(-n+2) { background: var(--copiki-prio-mittel, #f2c200); } .mm-akte__prio--niedrig .mm-akte__bars i:nth-child(1) { background: var(--copiki-prio-niedrig, #198754); } .mm-akte__prio--keine { font-weight: 600; color: var(--copiki-middlegrey, #9d9d9d); } /* Person. Der helle Marker der Nebenrollen (Mitwirkende, Erfasser) ist --copiki-lightgrey mit --copiki-grey-Rand: auf Weiss deutlich sichtbar, ohne mit dem dunklen Marker der Hauptrolle zu konkurrieren. */ .mm-akte__person { display: flex; align-items: center; gap: 9px; min-width: 0; } .mm-akte__avatar { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid transparent; border-radius: 50%; background: var(--copiki-verydarkgrey, #3d3d3d); color: #ffffff; font-size: var(--mm-akte-fs-label); font-weight: 700; letter-spacing: .02em; } .mm-akte__avatar--co { width: 24px; height: 24px; border-color: var(--copiki-grey, #d8d8d9); background: var(--copiki-lightgrey, #eeeeee); color: var(--copiki-secondary-color, #616265); } .mm-akte__person-body { min-width: 0; } .mm-akte__person-name { display: block; font-size: var(--mm-akte-fs-base); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mm-akte__person-name a { color: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__person-role { display: block; margin-top: 1px; font-size: var(--mm-akte-fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__person-role:empty { display: none; } /* In der Kopfkarte gilt die Lead-Groesse wie fuer die drei anderen Fakten; der Marker waechst mit, damit er neben dem groesseren Namen nicht verloren wirkt. */ .mm-akte__head .mm-akte__person-name { font-size: var(--mm-akte-fs-lead); } .mm-akte__head .mm-akte__avatar { width: 30px; height: 30px; font-size: var(--mm-akte-fs-badge); } /* Workflow-Stepper. Die Linie liegt hinter den Punkten (z-index), die Punkte sind deckend — s. Kommentar bei .mm-akte__dot. */ .mm-akte__steps { grid-column: 1 / -1; display: flex; border-top: 1px solid #eaeaec; padding-top: 16px; margin-top: 4px; } .mm-akte__step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0; position: relative; min-width: 0; text-align: center; font-size: var(--mm-akte-fs-label); font-weight: 600; color: var(--copiki-grey, #d8d8d9); } .mm-akte__step-lbl { margin-top: 7px; } /* Die Schiene laeuft durch die MITTE aller Punkte. Damit das auch fuer die groessere Kugel der aktuellen Station gilt, belegen alle Punkte dieselbe Hoehe von 28px: die kleinen ueber 4px Aussenabstand oben und unten, die grosse ueber ihre eigene Groesse. Beide Mittelpunkte liegen dadurch bei 14px, die Linie bei top 13px (14 minus die halbe Linienstaerke). Wer eine der drei Zahlen aendert, aendert alle drei. */ .mm-akte__step::before { content: ""; position: absolute; top: 13px; right: 50%; width: 100%; height: 2px; background: #eaeaec; } .mm-akte__step:first-child::before { display: none; } .mm-akte__step--past::before, .mm-akte__step--current::before { background: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__step .mm-akte__dot { width: 20px; height: 20px; margin: 4px 0; font-size: 10px; z-index: 1; } /* Markierung der aktuellen Station: schlicht eine deutlich groessere Kugel, kein Ring. Ein Ring braucht zwangslaeufig eine eigene Farbe — blasses Gelb gehoerte zu nichts im Design, ein dunkler oder roter Ring haette mit der Statusfarbe der Kugel konkurriert (Rot um die gruene Abgeschlossen-Kugel). Die Groesse traegt dieselbe Aussage ohne zusaetzliche Farbe. */ .mm-akte__step--current .mm-akte__dot { width: 28px; height: 28px; margin: 0; border-width: 3px; font-size: 12px; } .mm-akte__step--past, .mm-akte__step--current { color: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__step--current .mm-akte__step-lbl { font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .mm-akte__step-date { display: block; margin-top: 2px; font-weight: 400; color: var(--copiki-middlegrey, #9d9d9d); font-variant-numeric: tabular-nums; } /* Stationen ohne Datum in der Historie liefern ein leeres span — das soll keinen Abstand erzeugen. */ .mm-akte__step-date:empty { display: none; } /* Zwei Spalten */ .mm-akte__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; } .mm-akte__col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* Kartenkopf: heller grauer Streifen, wie der Tabellenkopf der Vorgangsliste (.copiki-tbl__head). Fleet-Konvention seit 2026-08-30 — Kartenkopfzeilen und Tabellenkoepfe tragen --copiki-verylightgrey auf --copiki-grey-Trennlinie. border-radius 5px = die 6px der Karte minus ihre 1px-Rahmenbreite, sonst steht der Streifen ueber die gerundete Ecke hinaus. */ .mm-akte__card-title { display: flex; align-items: center; gap: 8px; margin: 0; padding: 11px 16px; background: var(--copiki-verylightgrey, #f6f6f6); border-bottom: 1px solid var(--copiki-grey, #d8d8d9); border-radius: 5px 5px 0 0; font-size: var(--mm-akte-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copiki-secondary-color, #616265); } .mm-akte__card-title i { flex: none; width: 1.3em; text-align: center; font-size: 1.2em; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__body { padding: 14px 16px; font-size: var(--mm-akte-fs-base); line-height: 1.6; color: var(--copiki-verydarkgrey, #3d3d3d); } .mm-akte__body > p { margin: 0 0 10px; } .mm-akte__body > p:last-child { margin-bottom: 0; } .mm-akte__sub-dt { margin: 14px 0 4px; font-size: var(--mm-akte-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__dl { margin: 0; } .mm-akte__dl dt { margin: 12px 0 3px; font-size: var(--mm-akte-fs-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__dl dt:first-child { margin-top: 0; } .mm-akte__dl dd { margin: 0; font-size: var(--mm-akte-fs-base); color: var(--copiki-verydarkgrey, #3d3d3d); font-variant-numeric: tabular-nums; } .mm-akte__dl dd p { margin: 0 0 8px; } .mm-akte__dl dd p:last-child { margin-bottom: 0; } .mm-akte__empty { color: var(--copiki-middlegrey, #9d9d9d); font-style: italic; font-variant-numeric: normal; } .mm-akte__rel { margin-left: 6px; font-size: var(--mm-akte-fs-badge); font-weight: 600; color: var(--copiki-middlegrey, #9d9d9d); } .mm-akte__rel--overdue { color: var(--copiki-danger, #dc3545); } .mm-akte__rel--urgent { color: #a37f00; } .mm-akte__rel--soon { color: var(--copiki-success, #198754); } /* Chips. Die Quellenpalette sind dieselben Tokens, die die Vorgangsliste ueber [data-mm-quelle] benutzt — hier als Modifierklassen, weil der Wikitext den Wert per #switch auf einen Slug abbildet. */ .mm-akte__tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid transparent; border-radius: 999px; background: var(--copiki-verylightgrey, #f6f6f6); font-size: var(--mm-akte-fs-badge); font-weight: 600; color: var(--copiki-secondary-color, #616265); } .mm-akte__tag i { flex: none; width: 1em; text-align: center; font-size: .95em; opacity: .75; } .mm-akte__tag--proc { background: transparent; border-color: var(--copiki-grey, #d8d8d9); } /* Auditdatum gehoert zur QUELLE, nicht zu den Terminen (Owner-Entscheid 2026-08-28): bei Quelle "Audit intern/extern" haengt die Vorlage hinter dem Quelle-Tag eine gedaempfte Datumsnotiz "Audit vom TT.MM.JJJJ" an. */ .mm-akte__src-audit { display: inline-flex; align-items: center; gap: 5px; margin-left: 8px; font-size: var(--mm-akte-fs-badge); color: var(--copiki-middlegrey, #9d9d9d); white-space: nowrap; } .mm-akte__src-audit i { font-size: .9em; } .mm-akte__src--risiko { background: var(--copiki-quelle-risiko-bg, #fdf5cc); color: var(--copiki-quelle-risiko-fg, #6b5300); } .mm-akte__src--reklamation { background: var(--copiki-quelle-reklamation-bg, #fbe5e8); color: var(--copiki-quelle-reklamation-fg, #8a1c2b); } .mm-akte__src--beinaheereignis-incident { background: var(--copiki-quelle-beinaheereignis-incident-bg, #e0f1fa); color: var(--copiki-quelle-beinaheereignis-incident-fg, #0a5a85); } .mm-akte__src--audit-intern { background: var(--copiki-quelle-audit-intern-bg, #e3f1e8); color: var(--copiki-quelle-audit-intern-fg, #1f6a3f); } .mm-akte__src--audit-extern { background: var(--copiki-quelle-audit-extern-bg, #d9f0ee); color: var(--copiki-quelle-audit-extern-fg, #0c5f5c); } .mm-akte__src--managementbewertung { background: var(--copiki-quelle-managementbewertung-bg, #ece6f7); color: var(--copiki-quelle-managementbewertung-fg, #4b2f8a); } .mm-akte__src--impuls { background: var(--copiki-quelle-impuls-bg, #fde9d7); color: var(--copiki-quelle-impuls-fg, #8a4a0f); } .mm-akte__src--sonstiges { background: var(--copiki-quelle-sonstiges-bg, #ececee); color: var(--copiki-quelle-sonstiges-fg, #4a4a4f); } .mm-akte__pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border: 1px solid var(--copiki-grey, #d8d8d9); border-radius: 999px; background: #ffffff; font-size: var(--mm-akte-fs-badge); font-weight: 600; color: var(--copiki-secondary-color, #616265); } .mm-akte__pill--ok { border-color: transparent; background: #dff2e8; color: #14603c; } .mm-akte__pill--bad { border-color: transparent; background: var(--copiki-quelle-reklamation-bg, #fbe5e8); color: var(--copiki-quelle-reklamation-fg, #8a1c2b); } .mm-akte__pill--na { border-color: transparent; background: var(--copiki-verylightgrey, #f6f6f6); } .mm-akte__people { display: flex; flex-direction: column; gap: 12px; } .mm-akte__foot { margin-top: 14px; font-size: var(--mm-akte-fs-badge); line-height: 1.5; color: var(--copiki-middlegrey, #9d9d9d); } @media (max-width: 900px) { .mm-akte__grid { grid-template-columns: minmax(0, 1fr); } .mm-akte__head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-akte__step-date { display: none; } } @media (max-width: 560px) { .mm-akte__head { grid-template-columns: minmax(0, 1fr); } .mm-akte__steps { overflow-x: auto; padding-bottom: 6px; } .mm-akte__step { min-width: 86px; } } /* ---- IMS-Status-Filter (Tag , RL-Modul ext.copiki.statusFilter) ---- */ .copiki-status-filter { margin: 8px 0; } /* Vom Chip-Filter ausgeblendetes Element. !important bewusst: die ContainerFilter- Textsuche zeigt/versteckt per Inline-Style (fadeIn/fadeOut) — die Klasse muss diese Inline-Styles schlagen, damit beide Filter unabhängig (UND) wirken. Ohne tr-Prefix, weil derselbe Filter seit den Agenten-Kacheln auch Nicht- Tabellen-Elemente ausblendet. */ .ims-status-hidden { display: none !important; } /* ---- IMS Bulk-Freigabe: Auswahlspalte (Tag , RL-Modul ext.copiki.bulkApprove) ---- Die leeren Zellen (th/td class="copiki-bulk-col") rendert Vorlage:IMS Elemente/SMW(/Head) serverseitig mit — nachträgliches JS-Einfügen würde das beim tablesorter-Init eingefrorene Header→Spalten-Mapping verschieben. Sie bleiben versteckt, bis das Modul auswählbare Zeilen findet und die Tabelle per Klasse copiki-bulk-active aktiviert. */ .copiki-bulk-col { display: none; } table.copiki-bulk-active .copiki-bulk-col { display: table-cell; width: 1%; text-align: center; } /* ---- Norm-Wabe: Kapitel-Abdeckungszeile ("x/y Kapitel") ---- inline-block statt block, damit das
    in der Vorlage (Fallback für den PDF-Export, wo dieses Theme-CSS nicht lädt) keinen Doppelumbruch erzeugt */ .ims-wabe-cov { display: inline-block; margin-top: 14px; font-size: 0.75em; color: #dcdcdc; } .ims-wabe-cov .fa-list-check { margin-right: 2px; color: #38c748; } /* ############### Agentenmanagement: Agenten-Kacheln (Vorlage:AM-AgentKachel) ############### Warum hier und nicht als TemplateStyles-Subpage der Vorlage: die Kachel braucht CSS-Custom-Properties (--am-dept je Bereich), clip-path, @keyframes und filter. Custom-Property-Deklarationen lehnt der TemplateStyles-Sanitizer grundsaetzlich ab ("unrecognized-property") — dieselbe Entscheidung wie beim Waben-/Hexgrid-CSS oben. Folge: Das Optional-Paket "Agenten" braucht ein Image, das dieses Theme-CSS enthaelt. */ .am-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin: 16px 0; } .am-card { /* Defaults; --am-dept/--am-state werden je data-Attribut ueberschrieben */ --am-dept: var(--copiki-middlegrey); --am-dept-ink: #ffffff; --am-state: var(--copiki-middlegrey); --am-line: #dddde0; --am-cloud: #f2f2f3; --am-charcoal: #2e2e31; --am-ease: cubic-bezier(0.2, 0.7, 0.3, 1); position: relative; display: flex; flex-direction: column; overflow: hidden; background: #ffffff; border: 1px solid var(--am-line); border-radius: 8px; color: var(--copiki-secondary-color); transition: transform 0.18s var(--am-ease), box-shadow 0.18s var(--am-ease), border-color 0.18s var(--am-ease); } .am-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.1); border-color: #c9c9ce; } /* Farbbalken links — traegt die Bereichsfarbe */ .am-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--am-dept); z-index: 3; } /* ---- Bereichsfarben: identisch zu den .am-bereich--* Badges in Vorlage:AM-Agent/styles.css. Neuer Bereich = hier UND dort eine Zeile ergaenzen, sonst bleibt es beim neutralen Grau aus dem --am-dept-Default oben. Der Schluessel ist der kleingeschriebene Bereichsname, den die Kachel per {{lc:}} setzt. Eine Quelle fuer Kachel, Filter-Chip, die Kopfkarte der Agentenakte und die Organigramm-Karte. Die Selektoren sind bewusst element-qualifiziert: die vier Consumer deklarieren eigene Fallback-Tokens, und bei gleicher Spezifitaet gewinnt sonst je nach Position in dieser Datei der Fallback statt der Bereichsfarbe. ---- */ .am-card[data-am-dept="beratung"], .am-akte-head[data-am-dept="beratung"], .copiki-filter-chip[data-am-dept="beratung"], .am-org-matrix__group[data-am-dept="beratung"], .am-org-card[data-am-dept="beratung"] { --am-dept: #c0143c; } .am-card[data-am-dept="weiterbildung"], .am-akte-head[data-am-dept="weiterbildung"], .copiki-filter-chip[data-am-dept="weiterbildung"], .am-org-matrix__group[data-am-dept="weiterbildung"], .am-org-card[data-am-dept="weiterbildung"] { --am-dept: #0b7285; } .am-card[data-am-dept="projektmanagement"], .am-akte-head[data-am-dept="projektmanagement"], .copiki-filter-chip[data-am-dept="projektmanagement"], .am-org-matrix__group[data-am-dept="projektmanagement"], .am-org-card[data-am-dept="projektmanagement"] { --am-dept: #495057; } .am-card[data-am-dept="hr"], .am-akte-head[data-am-dept="hr"], .copiki-filter-chip[data-am-dept="hr"], .am-org-matrix__group[data-am-dept="hr"], .am-org-card[data-am-dept="hr"] { --am-dept: #7c5cbf; } .am-card[data-am-dept="marketing"], .am-akte-head[data-am-dept="marketing"], .copiki-filter-chip[data-am-dept="marketing"], .am-org-matrix__group[data-am-dept="marketing"], .am-org-card[data-am-dept="marketing"] { --am-dept: #f2c200; --am-dept-ink: #2e2e31; } .am-card[data-am-dept="vertrieb"], .am-akte-head[data-am-dept="vertrieb"], .copiki-filter-chip[data-am-dept="vertrieb"], .am-org-matrix__group[data-am-dept="vertrieb"], .am-org-card[data-am-dept="vertrieb"] { --am-dept: #e8871e; } .am-card[data-am-dept="operations"], .am-akte-head[data-am-dept="operations"], .copiki-filter-chip[data-am-dept="operations"], .am-org-matrix__group[data-am-dept="operations"], .am-org-card[data-am-dept="operations"] { --am-dept: #2e9e5b; } .am-card[data-am-dept="produkt"], .am-akte-head[data-am-dept="produkt"], .copiki-filter-chip[data-am-dept="produkt"], .am-org-matrix__group[data-am-dept="produkt"], .am-org-card[data-am-dept="produkt"] { --am-dept: #d63384; } .am-card[data-am-dept="it"], .am-akte-head[data-am-dept="it"], .copiki-filter-chip[data-am-dept="it"], .am-org-matrix__group[data-am-dept="it"], .am-org-card[data-am-dept="it"] { --am-dept: #2f6fb7; } .am-card[data-am-dept="qualität"], .am-akte-head[data-am-dept="qualität"], .copiki-filter-chip[data-am-dept="qualität"], .am-org-matrix__group[data-am-dept="qualität"], .am-org-card[data-am-dept="qualität"] { --am-dept: #1a9c9c; } /* ---- Statusfarben der Pille (und des gleichnamigen Filter-Chips) ---- */ .am-card[data-am-status="aktiv"], .am-akte-head[data-am-status="aktiv"], .copiki-filter-chip[data-am-status="aktiv"] { --am-state: #00677f; } .am-card[data-am-status="in-entwicklung"], .am-akte-head[data-am-status="in-entwicklung"], .copiki-filter-chip[data-am-status="in-entwicklung"] { --am-state: #ef8200; } .am-card[data-am-status="pausiert"], .am-akte-head[data-am-status="pausiert"], .copiki-filter-chip[data-am-status="pausiert"] { --am-state: #fdc733; } .am-card[data-am-status="ausgemustert"], .am-akte-head[data-am-status="ausgemustert"], .copiki-filter-chip[data-am-status="ausgemustert"] { --am-state: #9d9d9d; } /* ---- Fotoband. padding-top statt aspect-ratio, damit das Seitenverhaeltnis auch ohne aspect-ratio-Support steht (gleiche Wahl wie im Hexgrid oben). ---- */ .am-card__photo { position: relative; overflow: hidden; padding-top: 75%; /* 4:3 */ background: var(--am-charcoal); } .am-card__photo img, .am-card__ph { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transition: transform 0.55s var(--am-ease), filter 0.35s var(--am-ease); } .am-card:hover .am-card__photo img, .am-card:hover .am-card__ph { transform: scale(1.05); } /* Wurde die Datei geloescht, rendert MediaWiki statt des Bildes einen Rotlink. Der ist ein normales Inline-Element, haengt also UNTER dem 75%-Padding des Fotobands und macht die Karte hoeher. Ausblenden — darunter liegt ohnehin die Platzhalter-Silhouette, die dann sichtbar wird. */ .am-card__photo a.new, .am-akte-head__photo a.new { display: none; } /* Klickflaeche ueber dem ganzen Fotoband zur Agentenakte. Als Overlay statt als Bild-Link, damit die Kachel auch dann zur Akte fuehrt, wenn gar kein Bild da ist (geloescht oder nie hinterlegt). */ .am-card__photo-link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; } /* Verlauf, damit Name und Bereichsplakette auf jedem Portrait lesbar bleiben */ .am-card__photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient(to top, rgba(46, 46, 49, 0.92) 0%, rgba(46, 46, 49, 0.45) 34%, rgba(46, 46, 49, 0) 62%); } /* Nicht laufende Agenten wirken entsaettigt */ .am-card[data-am-status="in-entwicklung"] .am-card__photo img, .am-card[data-am-status="pausiert"] .am-card__photo img { filter: grayscale(1) contrast(0.95); } .am-card[data-am-status="in-entwicklung"]:hover .am-card__photo img, .am-card[data-am-status="pausiert"]:hover .am-card__photo img { filter: grayscale(0.35); } /* ---- Platzhalter-Silhouette, solange kein Portrait hinterlegt ist ---- */ .am-card__ph, .am-akte-head__ph { background: radial-gradient(120% 90% at 50% 6%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 58%), var(--am-dept); } .am-card__ph::before, .am-akte-head__ph::before { /* Kopf. Hoehe ueber padding-top statt height: Prozent-Padding bezieht sich immer auf die BREITE des Elternelements, der Kreis bleibt also rund — egal ob das Fotoband 4:3 (Kachel) oder nahezu quadratisch (Akte) ist. Mit height/% waere er im quadratischen Band zur Ellipse verzogen. */ content: ""; position: absolute; left: 50%; top: 14%; transform: translateX(-50%); width: 34%; height: 0; padding-top: 34%; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .am-card__ph::after, .am-akte-head__ph::after { /* Schultern — gleiche Rechnung wie beim Kopf, damit die Rundung nicht mit dem Seitenverhaeltnis des Bandes kippt. */ content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 64%; height: 0; padding-top: 30%; border-radius: 44% 44% 0 0; background: rgba(255, 255, 255, 0.18); } /* ---- Wabe mit den Initialen ---- */ .am-card__mark, .am-akte-head__mark { position: absolute; top: 14px; left: 14px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 40px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--am-dept); color: var(--am-dept-ink); font-size: 12px; font-weight: 900; line-height: 1; letter-spacing: 0.02em; transition: transform 0.3s var(--am-ease); } .am-card:hover .am-card__mark { transform: rotate(-6deg) scale(1.08); } /* ---- Status-Pille ---- */ .am-card__state, .am-akte-head__state { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); color: var(--am-charcoal); font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } /* Auf der Kachel liegt die Pille im Fotoband, auf der Akte steht sie neben dem Namen */ .am-card__state { position: absolute; top: 14px; right: 14px; z-index: 2; } .am-card__dot, .am-akte-head__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--am-state); } .am-card[data-am-status="aktiv"] .am-card__dot, .am-akte-head[data-am-status="aktiv"] .am-akte-head__dot { box-shadow: 0 0 0 0 rgba(0, 103, 127, 0.5); animation: am-card-pulse 2.4s infinite; } @keyframes am-card-pulse { 70% { box-shadow: 0 0 0 7px rgba(0, 103, 127, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 103, 127, 0); } } /* ---- Name und Bereichsplakette, liegen auf dem Foto ---- */ .am-card__ident { position: absolute; left: 20px; right: 20px; bottom: 16px; z-index: 2; } .am-card__name { margin: 0 0 9px; font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: -0.015em; color: #ffffff; } .am-card__dept, .am-akte-head__dept { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 3px; background: var(--am-dept); color: var(--am-dept-ink); font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; } .am-card__dept::before, .am-akte-head__dept::before { content: "//"; font-weight: 900; opacity: 0.62; } /* ---- Faehigkeiten-Tags, Kurzbeschreibung, Metazeile ---- */ .am-card__tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 18px 24px 0 28px; } .am-card__tag, .am-akte-head__tag { padding: 6px 11px; border: 1px solid var(--am-line); border-radius: 999px; background: #ffffff; color: var(--copiki-secondary-color); font-size: 11px; font-weight: 700; line-height: 1; letter-spacing: 0.03em; } .am-card__desc { flex: 1 1 auto; margin: 0; padding: 14px 24px 0 28px; font-size: 14px; line-height: 1.6; } .am-card__meta { display: flex; gap: 18px; margin-top: 20px; padding: 14px 24px 0 28px; border-top: 1px solid var(--am-cloud); color: #8a8a90; font-size: 12px; } .am-card__meta b { color: var(--am-charcoal); font-weight: 700; } /* Die verantwortliche Person verlinkt auf ihre Benutzerseite (die Extension Realnames tauscht den Benutzernamen im Linktext gegen den echten Namen). Farbe wie der umgebende Text, damit die Metazeile ruhig bleibt; die Linknatur zeigt sich erst beim Hover — analog zum Benutzer-Link in .ims-due-teaser__date. */ .am-card__meta a, .am-card__meta a:visited { color: inherit; filter: none; text-decoration: none; } .am-card__meta a:hover { text-decoration: underline; } /* ---- Aktionsleiste. Das     fuellt die Zelle, damit die ganze Haelfte klickbar ist. ---- */ .am-card__actions { display: flex; margin-top: 16px; border-top: 1px solid var(--am-line); } .am-card__act { display: flex; flex: 1 1 0; } .am-card__act + .am-card__act { border-left: 1px solid var(--am-line); } /* Die beiden Aktionen sind Wikilinks, sollen aber reine Buttons sein — keine Textlink-Optik. Dagegen stehen zwei Vendor-Regeln, die spezifischer sind als eine einzelne Klasse: Discovery setzt auf a:hover eine Unterstreichung, und MediaWikis content.links.less faerbt `.mw-parser-output a.external` selbst und haengt das Extern-Link-Icon als background-image an. Deshalb hier derselbe Hebel wie bei .ims-nav / .ims-export-btns weiter oben: .am-card-Prefix fuer Spezifitaet, !important nur fuer Farbe, Unterstreichung und Schriftschnitt — eng auf .am-card__act begrenzt. */ .am-card .am-card__act a, .am-card .am-card__act a:visited, .am-card .am-card__act a:hover, .am-card .am-card__act a:focus { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 8px; font-size: 13px; font-weight: 700 !important; line-height: 1; text-decoration: none !important; filter: none; transition: background-color 0.18s var(--am-ease), color 0.18s var(--am-ease); } .am-card .am-card__act a, .am-card .am-card__act a:visited { background: #ffffff; color: var(--copiki-secondary-color) !important; } .am-card .am-card__act a:hover, .am-card .am-card__act a:focus { background: var(--am-cloud); color: var(--am-charcoal) !important; } /* Extern-Link-Icon abschalten. Es kommt NICHT aus dem MediaWiki-Core, sondern vom Discovery-Skin (stylesheets/content/content.externallinks.less), und zwar als `#mw-content-text a.external { background-image: ; padding-right: 0.8125rem }` — ein ID-Selektor, gegen den jede reine Klassenregel verliert. Deshalb hier derselbe #mw-content-text-Anker wie oben bei den IMS-Export-Buttons. Bewusst OHNE die Klasse plainlinks im Markup: deren Core-Regel (.plainlinks a.external { padding: 0 !important }) wuerde das Button-Padding gleich mit killen. */ #mw-content-text .am-card .am-card__act a.external, #mw-content-text .am-card .am-card__act a.external:hover { background-image: none; padding-right: 8px; } /* Primaeraktion in der Primaerfarbe des jeweiligen Wikis (Discovery-Wert zuerst, dann der Copiki-Default, dann der harte Fallback) */ .am-card .am-card__act--primary a, .am-card .am-card__act--primary a:visited { color: var(--primary-element-highlight-color, var(--mws-primary-bg, var(--copiki-primary-color, #c0143c))) !important; } .am-card .am-card__act--primary a:hover, .am-card .am-card__act--primary a:focus { background: var(--primary-element-highlight-color, var(--mws-primary-bg, var(--copiki-primary-color, #c0143c))); color: #ffffff !important; } /* ---- Agentenakte: Kopfkarte in derselben Sprache wie die Kacheln ---- Farbbalken, Wabe, Status-Pille, Bereichsplakette und Tags sind dieselben Atome wie oben und stehen deshalb in denselben Regeln (Gruppenselektoren) — hier kommt nur das hinzu, was das Querformat der Akte braucht. Liegt aus demselben Grund wie das Kachel-CSS hier statt in Vorlage:AM-Agent/styles.css: Custom Properties und clip-path lehnt der TemplateStyles-Sanitizer ab. */ .am-akte-head { --am-dept: var(--copiki-middlegrey); --am-dept-ink: #ffffff; --am-state: var(--copiki-middlegrey); --am-line: #dddde0; --am-cloud: #f2f2f3; --am-charcoal: #2e2e31; position: relative; display: flex; align-items: stretch; overflow: hidden; margin: 12px 0 24px; border: 1px solid var(--am-line); border-radius: 8px; background: #ffffff; color: var(--copiki-secondary-color); } .am-akte-head::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px; background: var(--am-dept); z-index: 3; } /* Portraitspalte. Feste Breite statt Fotoband: die Akte traegt viel Metatext, ein Banner in Kachelhoehe wuerde die Seite erschlagen. */ .am-akte-head__photo { position: relative; flex: 0 0 220px; min-height: 220px; overflow: hidden; background: var(--am-charcoal); } .am-akte-head__photo img, .am-akte-head__ph { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; } /* Derselbe Verlauf wie auf der Kachel, nur schwaecher: hier liegt kein Text auf dem Bild, er soll das Portrait nur an die Karte anbinden. */ .am-akte-head__photo::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: linear-gradient(to top, rgba(46, 46, 49, 0.35) 0%, rgba(46, 46, 49, 0) 55%); } .am-akte-head__body { flex: 1 1 auto; min-width: 0; padding: 18px 24px 18px 22px; } .am-akte-head__top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; } .am-akte-head__name { font-size: 26px; font-weight: 900; line-height: 1.1; letter-spacing: -0.015em; color: var(--am-charcoal); } .am-akte-head__state { background: var(--am-cloud); } /* Bereichsplakette rechts oben in der Karte */ .am-akte-head__dept { margin-left: auto; } /* Metadaten als Zellenraster: drei Zellen je Reihe, Bezeichnung ueber Wert. Automatischer Umbruch, damit die Reihen auch mit drei, vier oder fuenf Zellen aufgehen — der Reifegrad erscheint nur bei Status "Aktiv", die beiden Auditdaten nur, wenn sie gepflegt sind. */ .am-akte-head__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 14px; line-height: 1.4; } .am-akte-head__cell { min-width: 0; padding: 9px 12px 10px; border: 1px solid var(--am-line); border-radius: 6px; background: #ffffff; } .am-akte-head__label { display: block; margin-bottom: 4px; color: #8a8a90; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .am-akte-head__value { display: block; color: var(--am-charcoal); font-size: 15px; font-weight: 700; overflow-wrap: break-word; } /* Die "Audit ueberfaellig"-Pille steht in der schmalen Zelle unter dem Datum */ .am-akte-head__value .am-badge { margin: 4px 0 0; } .am-akte-head__value a, .am-akte-head__value a:visited { color: inherit; filter: none; text-decoration: none; } .am-akte-head__value a:hover { text-decoration: underline; } /* Tags stehen unter dem Namen, vor dem Metaraster */ .am-akte-head__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } /* Primaeraktion im selben Ton wie der Kachel-Button, nur freistehend */ .am-akte-head__actions { margin-top: 16px; text-align: right; } .am-akte-head .am-akte-head__actions a, .am-akte-head .am-akte-head__actions a:visited { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--primary-element-highlight-color, var(--mws-primary-bg, var(--copiki-primary-color, #c0143c))); border-radius: 999px; background: #ffffff; color: var(--primary-element-highlight-color, var(--mws-primary-bg, var(--copiki-primary-color, #c0143c))) !important; font-size: 13px; font-weight: 700 !important; line-height: 1; text-decoration: none !important; filter: none; transition: background-color 0.18s var(--am-ease, ease), color 0.18s var(--am-ease, ease); } .am-akte-head .am-akte-head__actions a:hover, .am-akte-head .am-akte-head__actions a:focus { background: var(--primary-element-highlight-color, var(--mws-primary-bg, var(--copiki-primary-color, #c0143c))); color: #ffffff !important; } /* Extern-Link-Icon abschalten — siehe die Begruendung beim Kachel-Button */ #mw-content-text .am-akte-head .am-akte-head__actions a.external, #mw-content-text .am-akte-head .am-akte-head__actions a.external:hover { background-image: none; padding-right: 16px; } /* Enger Inhaltsbereich: erst zwei Zellen je Reihe, dann eine */ @media ( max-width: 1100px ) { .am-akte-head__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Schmale Bildschirme: Portrait ueber den Text statt daneben */ @media ( max-width: 640px ) { .am-akte-head { flex-direction: column; } .am-akte-head__photo { flex: 0 0 auto; min-height: 0; padding-top: 75%; } .am-akte-head__rows { grid-template-columns: minmax(0, 1fr); } } /* ############### Agentenmanagement: Organigramm () ############### Kartengeometrie MUSS mit den PHP-Konstanten in extensions/Copiki/includes/Agent/OrgchartFlowLayout.php uebereinstimmen (CARD_W=240, CARD_H=88) — PHP berechnet die Positionen, CSS malt nur. */ .am-org { position: relative; } /* Festes Sichtfenster: die Box behaelt beim Zoomen ihre Groesse, nur der Inhalt skaliert — sonst waechst sie mit und schiebt die restliche Seite nach unten. Der Ziehgriff unten rechts (resize) laesst die Hoehe bei Bedarf anpassen, bis 900px (Owner-Runde 2026-09-29; vorher 500px). */ .am-org__scroll { overflow: auto; height: 45vh; min-height: 240px; max-height: 900px; border: 1px solid rgba(46, 46, 49, 0.12); border-radius: 8px; background: rgba(46, 46, 49, 0.02); resize: vertical; } /* overflow: hidden ist hier tragend, nicht kosmetisch: transform aendert die Layoutgroesse der Zeichenflaeche nicht, sie behaelt also ihre volle Inline-Hoehe und -Breite. Ohne das Abschneiden ragt dieser unsichtbare Ueberstand aus der Buehne und erzeugt Bildlaufleisten fuer Flaeche, die gar nichts anzeigt. */ .am-org__stage { position: relative; overflow: hidden; } .am-org__canvas { position: relative; transform-origin: 0 0; } /* Zoom-Leiste: der Renderer liefert sie leer, das Modul ext.copiki.agentOrgchart haengt die OOUI-Schaltflaechen ein. Ohne JavaScript bleibt sie leer und damit unsichtbar. */ .am-org__zoom { display: flex; justify-content: flex-end; margin: 0 0 6px; } .am-org__zoom:empty { display: none; } /* Ziehen zum Verschieben; die Greifhand nur, wo das Modul aktiv ist. */ .am-org__zoom:not(:empty) ~ .am-org__scroll { cursor: grab; } .am-org__scroll.is-panning { cursor: grabbing; user-select: none; } /* Kurzer Hinweis, wenn ohne Strg ueber dem Diagramm gescrollt wird. */ .am-org__hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 6px; background: rgba(46, 46, 49, 0.82); color: #fff; font-size: 0.9em; pointer-events: none; opacity: 0; transition: opacity 0.2s ease; z-index: 3; } .am-org__hint.is-visible { opacity: 1; } .am-org__edges { position: absolute; top: 0; left: 0; pointer-events: none; } /* Baender in der Farbe der Teamleitung. Die Palette hat OrgchartFlowLayout::PALETTE_SIZE (12) Eintraege; --am-org-band speist auch die Punkte der Zuordnungsmatrix. */ .am-org__band { fill: none; stroke: var(--am-org-band, #6c6c72); stroke-width: 3; stroke-linecap: round; opacity: 0.55; transition: opacity 0.15s ease; } .am-org-band--0 { --am-org-band: #2f6fb7; } .am-org-band--1 { --am-org-band: #e8871e; } .am-org-band--2 { --am-org-band: #2e9e5b; } .am-org-band--3 { --am-org-band: #c0143c; } .am-org-band--4 { --am-org-band: #7c5cbf; } .am-org-band--5 { --am-org-band: #0b7285; } .am-org-band--6 { --am-org-band: #d63384; } .am-org-band--7 { --am-org-band: #1a9c9c; } .am-org-band--8 { --am-org-band: #495057; } .am-org-band--9 { --am-org-band: #8a6d00; } .am-org-band--10 { --am-org-band: #e0533d; } .am-org-band--11 { --am-org-band: #5b8def; } .am-org__canvas--focus .am-org__band { opacity: 0.1; } .am-org__canvas--focus .am-org__band.is-focus { opacity: 0.95; } .am-org__canvas--focus .am-org-card:not(.is-focus) { opacity: 0.35; } /* Der Chart-Wrapper traegt bs-universalexport-exportexclude nur als PDF-Ausschluss-Marker — die Vendor-Einfaerbung (#EBECEC aus bluespice.universalExport.css) hier neutralisieren, gleiches Muster wie .ims-export-btns. */ .am-org__screen.bs-universalexport-exportexclude { background: transparent; background-color: transparent; border: none; } .am-org-card { /* Defaults wie .am-card; --am-dept wird je data-am-dept ueberschrieben (siehe die Farbgruppen im Abschnitt Agenten-Kacheln oben). */ --am-dept: var(--copiki-middlegrey); --am-dept-ink: #ffffff; position: absolute; display: flex; align-items: center; gap: 10px; width: 240px; height: 88px; padding: 0; box-sizing: border-box; overflow: hidden; background: #fff; border: 1px solid rgba(46, 46, 49, 0.12); border-left: 4px solid var(--am-dept); border-radius: 10px; box-shadow: 0 1px 4px rgba(46, 46, 49, 0.08); color: inherit; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .am-org-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(46, 46, 49, 0.16); color: inherit; } .am-org-card:hover .am-org-card__link, .am-org-card__link:hover, .am-org-card__link:focus { /* !important: der Skin-Link-Hover (BlueSpice) ist spezifischer als diese Klassenregel und wuerde den Kartentext sonst unterstreichen — dokumentierter Third-Party-Override gemaess frontend.md. */ text-decoration: none !important; } /* Volllink der Karte: liegt ueber der ganzen Flaeche, laesst aber den Betreuer-Link darueber liegen (z-index 2), damit beide klickbar sind. */ .am-org-card__link { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; } /* Alles, was selbst auf die Maus reagieren muss, liegt ueber dem Volllink — sonst faengt der die Zeiger-Events ab und die Bootstrap-Tooltips an Statuspunkt und Risikoschild loesen nie aus. */ .am-org-card__owner { position: relative; z-index: 2; } .am-org-card__dot, .am-org-card__risk { z-index: 2; } .am-org-card[data-am-status="pausiert"], .am-org-card[data-am-status="in-entwicklung"] { filter: saturate(0.35); } /* Portraet als linke Vollspalte: volle Kartenhoehe, buendig am Abteilungsfarbbalken; die Kartenrundung clippt die Ecken (overflow: hidden auf .am-org-card). */ .am-org-card__photo { flex: 0 0 72px; align-self: stretch; background-size: cover; background-position: center top; } .am-org-card__mark { flex: 0 0 48px; width: 48px; height: 52px; margin-left: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--am-dept); color: var(--am-dept-ink); font-weight: 700; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .am-org-card__body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; /* Textabstand lebt seit dem Vollspalten-Portraet hier statt auf der Karte (Karte hat padding: 0, damit das Foto randbuendig sitzt). Rechts 26px: die Spalte fuer Statuspunkt (oben) und Risikoschild (unten), so laeuft kein Text darunter. */ padding: 10px 26px 10px 0; } /* Vier Zeilen (Name, Abteilung, Betreuer, Plaketten) passen nur mit weniger Innenabstand in die 88px hohe Karte (OrgchartFlowLayout::CARD_H). */ .am-org-card__body--badges { padding-top: 7px; padding-bottom: 7px; } .am-org-card__name { font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-org-card__dept { font-size: 0.78em; font-weight: 600; color: var(--am-dept); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-org-card__dept::before { content: "// "; } .am-org-card__meta { font-size: 0.74em; color: #6c6c72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .am-org-card__dot { position: absolute; top: 8px; right: 8px; width: 10px; height: 10px; border-radius: 50%; background: #b8b8bd; } .am-org-card[data-am-status="aktiv"] .am-org-card__dot { background: #2e9e5b; } .am-org-card[data-am-status="in-entwicklung"] .am-org-card__dot { background: #f2c200; } .am-org-card[data-am-status="pausiert"] .am-org-card__dot { background: #e8871e; } .am-org-card__risk { position: absolute; right: 8px; bottom: 8px; font-size: 0.8em; color: #c0143c; } .am-org__solo-head { margin: 18px 0 8px; font-size: 0.9em; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #6c6c72; } .am-org__solo { display: flex; flex-wrap: wrap; gap: 16px; } .am-org__solo .am-org-card { position: relative; } .am-org__empty { color: #6c6c72; } /* PDF-Ersatzliste: am Bildschirm unsichtbar (im PDF fehlt dieses Stylesheet, dort greift copiki.css des Export-Templates). */ .am-org-pdflist { display: none; } /* Reiter "Organigramm" / "Zuordnungen" (orgchart-tabs.js) */ .am-org__tabs { margin: 0 0 12px; } .am-org__tabs:empty { display: none; } .am-org__panel-head { margin: 0 0 8px; font-size: 1em; font-weight: 700; } .am-org__panel + .am-org__panel { margin-top: 24px; } .am-org--tabbed .am-org__panel-head { display: none; } .am-org--tabbed .am-org__panel + .am-org__panel { margin-top: 0; } .am-org__panel.is-hidden { display: none; } /* Ebenen-Beschriftung ueber den Spalten (OrgchartFlowLayout::LABEL_H) */ .am-org__level { position: absolute; top: 6px; width: 240px; color: #8a8a90; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } /* Plaketten "in N Teams" und "Team (n)": eigene Zeile unter dem Text (Owner-Runde 2026-09-29 — absolut ueber der Karte verdeckten sie die Betreuer-Zeile). Beide gleich hoch (14px + 1px Rand), damit die Zeile in die Karte passt. */ .am-org-card__badges { display: flex; gap: 4px; margin-top: 1px; min-width: 0; } .am-org-card__teams, .am-org-card__lead { flex: 0 0 auto; padding: 0 6px; border: 1px solid transparent; border-radius: 999px; font-size: 10px; font-weight: 700; line-height: 14px; white-space: nowrap; } .am-org-card__teams { background: #3d3d42; color: #fff; } .am-org-card__lead { background: var(--copiki-verylightgrey, #f6f6f6); border-color: var(--copiki-grey, #d8d8d9); color: #3d3d42; } /* : dieselben Karten als umbrechende Reihe in den Teamfeldern der Agentenakte (Vorlage:AM-Agent). */ .am-org-cards { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0 2px; } .am-org-cards .am-org-card { position: relative; } .am-org-cards__plain { display: inline-block; padding: 6px 0; color: #6c6c72; } /* Zuordnungsmatrix. Keine Hoehenbegrenzung: die Matrix ist immer von oben bis unten komplett zu sehen (Owner-Runde 2026-09-29), gescrollt wird nur seitlich, die Teamspalte bleibt dabei links stehen. */ .am-org-matrix__scroll { overflow-x: auto; border: 1px solid rgba(46, 46, 49, 0.12); border-radius: 8px; background: #fff; } .am-org-matrix { border-collapse: separate; border-spacing: 0; font-size: 12px; } .am-org-matrix th, .am-org-matrix td { padding: 0; border: 0; background: #fff; } .am-org-matrix thead th { position: sticky; z-index: 2; } .am-org-matrix__groups th { top: 0; height: 18px; } .am-org-matrix thead tr + tr th { top: 18px; } .am-org-matrix__group { --am-dept: var(--copiki-middlegrey, #b8b8bd); --am-dept-ink: #ffffff; border-right: 2px solid #fff; color: var(--am-dept-ink); font-size: 10px; font-weight: 700; } /* Eigene Spezifitaet (0,2,0): die Grundregel ".am-org-matrix th" (0,1,1) setzt background #fff und hat die Bereichsfarbe sonst ueberdeckt — weisse Balken mit weisser Schrift, nur "Marketing" (dunkle Schrift) war lesbar. */ .am-org-matrix .am-org-matrix__group { background: var(--am-dept); } /* width 0 + min-width 100%: das Label zaehlt nicht zur Mindestbreite der Spalte, fuellt aber die Zelle. Ein zu langer Name (einspaltige Gruppe) wird gekuerzt, der volle Name steht im title der Zelle. */ .am-org-matrix__group-label { display: block; width: 0; min-width: 100%; box-sizing: border-box; padding: 0 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .am-org-matrix__corner { left: 0; z-index: 3; } .am-org-matrix thead .am-org-matrix__corner { position: sticky; left: 0; z-index: 4; } .am-org-matrix__col { width: 34px; min-width: 34px; height: 118px; vertical-align: bottom; } .am-org-matrix__col a { display: flex; flex-direction: column-reverse; align-items: center; gap: 6px; padding: 4px 0 6px; color: #2e2e31; text-decoration: none; } .am-org-matrix__colname { max-height: 80px; overflow: hidden; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); } .am-org-matrix__row { position: sticky; left: 0; z-index: 1; min-width: 230px; border-right: 1px solid #ececef; text-align: left; } .am-org-matrix__row a { display: grid; grid-template-columns: 28px 1fr; column-gap: 8px; align-items: center; padding: 6px 10px; color: #2e2e31; text-decoration: none; } .am-org-matrix__row a .am-org-matrix__avatar { grid-row: span 2; } .am-org-matrix__team { font-weight: 700; } .am-org-matrix__sub { color: #6c6c72; font-size: 10.5px; } .am-org-matrix__avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--copiki-verylightgrey, #f6f6f6); color: #6c6c72; font-size: 10px; font-weight: 700; } .am-org-matrix tbody tr:nth-child(even) th, .am-org-matrix tbody tr:nth-child(even) td { background: #fafafa; } .am-org-matrix__cell { width: 34px; height: 40px; border-left: 1px solid #f0f0f2; text-align: center; } .am-org-matrix__dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; background: var(--am-org-band, #6c6c72); vertical-align: middle; } .am-org-matrix__dot.is-lead { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--am-org-band, #6c6c72); } .am-org-matrix tfoot th, .am-org-matrix tfoot td { position: sticky; bottom: 0; border-top: 1px solid var(--copiki-grey, #d8d8d9); background: #fff; } /* Beschriftung der Zaehlzeile rechtsbuendig, direkt vor den Zahlen. */ .am-org-matrix tfoot .am-org-matrix__row { padding: 0 12px; text-align: right; } .am-org-matrix__count { height: 32px; color: #6c6c72; font-weight: 700; text-align: center; } .am-org-matrix__count.is-multi { border-radius: 10px; background: #3d3d42; color: #fff; } /* Legende unter der Matrix (OrgchartRenderer::matrixLegend). Die Muster nutzen die Matrixklassen selbst, sehen also immer aus wie die echten Markierungen. */ .am-org-matrix__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 10px 2px 0; color: #6c6c72; font-size: 12px; } .am-org-matrix__legend-item { display: inline-flex; align-items: center; gap: 6px; } /* Der Ring von .is-lead ist ein box-shadow 5px ausserhalb des Punkts. */ .am-org-matrix__legend .am-org-matrix__dot.is-lead { margin: 0 5px; } .am-org-matrix__legend-count { box-sizing: border-box; min-width: 24px; padding: 0 7px; border-radius: 10px; background: #3d3d42; color: #fff; font-weight: 700; line-height: 18px; text-align: center; } /* ---- Filterleiste ueber dem Kachel-Grid (Textsuche + Chip-Reihen) ---- Die Textsuche ist (Extension ContainerFilter), die Chips sind im Mehrfachmodus. Beide filtern dieselben .am-card-Elemente und wirken mit UND. ---- */ .am-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 20px; } /* Das Suchfeld belegt eine eigene Zeile; die beiden Chip-Reihen teilen sich die naechste und rutschen erst untereinander, wenn der Platz nicht mehr reicht. */ .am-filter > div[data-selector] { flex: 0 0 100%; } .am-filter .container-filter-search { max-width: 32em; width: 100%; } /* Beide Chip-Bloecke teilen sich die Zeile zu gleichen Teilen (flex-basis 0 + gleiches Wachstum = exakt halbe Breite, unabhaengig davon wie viele Chips drinstehen) und sind in ihrer Haelfte zentriert. Reicht der Platz nicht, nimmt jeder Block eine eigene Zeile. */ .am-filter .copiki-status-filter { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex: 1 1 0; gap: 8px; margin: 0; } .am-filter .copiki-status-filter__label { color: var(--copiki-darkgrey); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } /* Chips als zusammenhaengende Leiste: nur die AEUSSEREN Kanten der Gruppe sind rund, die Kanten zwischen den Chips bleiben gerade. Kompakt gehalten, damit die Leiste ueber den Karten wenig Hoehe kostet. !important ist hier die dokumentierte OOUI-Ausnahme (siehe Skill-Regel zu OOUI-Overrides): OOUIs eigene Button-Regeln erreichen dieselbe Spezifitaet und setzen Mindesthoehe, Padding und Radius selbst. Alles bewusst auf .am-filter begrenzt — der gleiche Chip-Filter laeuft im IMS-Bereich im Einfachmodus und soll dort unveraendert aussehen. */ .am-filter .copiki-filter-chip > .oo-ui-buttonElement-button { min-height: 0 !important; padding: 3px 11px !important; border-radius: 0 !important; font-size: 12px !important; font-weight: 700; line-height: 1.5 !important; } .am-filter .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:first-child > .oo-ui-buttonElement-button { border-top-left-radius: 999px !important; border-bottom-left-radius: 999px !important; padding-left: 14px !important; } .am-filter .oo-ui-buttonGroupWidget > .oo-ui-buttonElement:last-child > .oo-ui-buttonElement-button { border-top-right-radius: 999px !important; border-bottom-right-radius: 999px !important; padding-right: 14px !important; } /* Ausgewaehlter Chip: ruhiges Copiki-Grau statt der Wiki-Primaerfarbe, die OOUI/BlueSpice fuer den "on"-Zustand eines ToggleButtons setzt — als Dauerzustand ueber mehreren Chips ist die Markenfarbe zu laut. Hover behaelt dieselbe Flaeche, damit der aktive Chip beim Ueberfahren nicht zurueck in die Markenfarbe springt. !important wie bei den OOUI-Regeln oben. */ .am-filter .copiki-filter-chip.oo-ui-toggleWidget-on > .oo-ui-buttonElement-button, .am-filter .copiki-filter-chip.oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:hover, .am-filter .copiki-filter-chip.oo-ui-toggleWidget-on > .oo-ui-buttonElement-button:focus { background-color: var(--copiki-grey, #d8d8d9) !important; border-color: var(--copiki-middlegrey, #9d9d9d) !important; color: var(--copiki-verydarkgrey, #3d3d3d) !important; box-shadow: none !important; } /* Farbiger Punkt in der Bereichs- bzw. Statusfarbe. Er haengt am Label, damit er auch im ausgewaehlten Zustand sichtbar bleibt, in dem OOUI eigene Farben setzt. */ .am-filter .copiki-filter-chip .oo-ui-labelElement-label::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; vertical-align: baseline; background: var(--am-dept, var(--am-state, var(--copiki-middlegrey))); } /* "Alle" ist ein Reset, keine Kategorie — daher ohne Farbpunkt */ .am-filter .copiki-filter-chip--all .oo-ui-labelElement-label::before { display: none; } /* ---- Zugaenglichkeit ---- */ .am-card a:focus-visible { outline: 2px solid var(--copiki-primary-color); outline-offset: 3px; } /* !important begruendet: hebt die Transitions/Animation oben pauschal auf, wenn der Nutzer im Betriebssystem reduzierte Bewegung eingestellt hat. */ @media (prefers-reduced-motion: reduce) { .am-card, .am-card * { transition: none !important; animation: none !important; } } /* ============================================================ Audit-Modus (Konfigurationsverwaltung → Funktion → Copiki) body.copiki-audit-mode – Modus an (generischer Hook, noch ohne eigene Regeln) body.copiki-audit-hide-approval – zusätzlich Unteroption "Freigabestatus der Seiten verstecken" Versteckt (rein kosmetisch, per display:none) den Freigabestatus in der Dokumentenlenkungsbox und die ContentStabilization-Statusanzeige der Seite. - DL-Box (.ims-doc-control__status/__approval-detail/__details/ __approval-btn-slot, plus die komplette Label-Zeile via :has()): !important ist hier gerechtfertigt — die Status-Spans tragen eine eigene Display-Regel mit ID-Selektor aus Fremd-CSS (#doccontrol-container .ims-doc-control__status, siehe oben in dieser Datei), die sonst gewinnt. - ContentStabilization-PageInfo-Element (kompletter Wrapper #pageheader-pageinfosentence-component-cnt statt nur der [class*="contentstabilization-pageinfo-page-"]-Badges): PageHeader baut den gesamten Satz "Diese Seite ist $Status aber $VersionSwitch" serverseitig als EINEN String zusammen (PageInfoSentenceBuilder::makePagInfoSentence(), Nachrichtenschlüssel pageheader-pageinfosentence "Diese Seite ist $1") — der Fülltext "Diese Seite ist"/"aber" liegt dabei als reiner Textknoten NEBEN den .contentstabilization-pageinfo-page-*-Spans/-Links, nicht in einem eigenen Element. Ein Selektor auf die Badge-Klassen allein blendet also nur Status-Wort und VersionSwitch-Link aus, lässt aber genau diesen Fülltext als Rest stehen ("Diese Seite ist aber"). Der komplette Satz wird von BlueSpiceDiscovery (DataAfterTitleSkinSlotRenderer::getItemWrapperId(), Muster "-cnt") in genau ein

    gewrappt — dessen Component-ID ist mit 'pageheader-pageinfosentence-component' fest verdrahtet (PageInfoSentence::__construct()), unabhängig davon in welchem Meta-Item-Slot (Header/Footer) die Instanz konfiguriert ist. Dieser Wrapper enthält ausschließlich diesen einen Satz — auf dieser Codebasis ist ContentStabilization der einzige aktive Beitragende zu PageInfoFactory/PageInfoSentenceBuilder (BlueSpiceExpiry, das ebenfalls IPageInfo implementiert, ist in settings.copiki.d/040-BlueSpiceExpiry.php per frühem "return;" deaktiviert; kein anderes aktives Feature registriert PageInfo- Elemente) — das komplette Verstecken dieses Wrappers trifft daher nie andere Seiteninfo-Elemente wie die Kategorien-/Tag-Zeile, die ein eigenes Meta-Item ist und unberührt bleibt. !important ist hier unschädlich, aber nicht tragend (kein bekanntes konkurrierendes Fremd-CSS auf diesem Wrapper). Diese Regel versteckt bewusst auch den Entwurf/Freigegeben-VersionSwitch von ContentStabilization (Teil desselben Satzes): Sinn der Option ist gerade, dass die Existenz von Entwürfen nicht sichtbar wird; ?stable=0 bleibt als expliziter Zugriffsweg unberührt. */ body.copiki-audit-hide-approval .ims-doc-control__status, body.copiki-audit-hide-approval .ims-doc-control__approval-detail, body.copiki-audit-hide-approval .ims-doc-control__details, body.copiki-audit-hide-approval .ims-doc-control__approval-btn-slot, body.copiki-audit-hide-approval #pageheader-pageinfosentence-component-cnt { display: none !important; } /* Blendet die gesamte Label-Zeile ("Freigabestatus:") der DL-Box aus, nicht nur ihren Inhalt — sonst bleibt eine leere Zeile mit Label und ggf. sichtbarem "Freigabe anfragen"-Button stehen (der Slot wird von ims-doc-control.js für bearbeitbare Seiten unabhängig eingeblendet). Trifft in Voll- wie Minimalansicht ausschließlich die , die den Status-Span enthält (siehe Tabellenstruktur in Vorlage:IMS Document control) — die Dokumenteneigner-/Dokumententyp- Zeilen bleiben unberührt. */ body.copiki-audit-hide-approval .ims-doc-control tr:has(.ims-doc-control__status) { display: none !important; } /* ---- Präsentationsmodus (Tag , RL-Modul ext.copiki.presentationMode) ---- Fleet-weiter Präsentationsmodus für Dashboards. presentation-mode.js setzt/entfernt ausschließlich die Klasse .copiki-present auf dem Konsumenten-Wurzelelement (data-copiki-present) — geführt vom fullscreenchange-Event, nie vom Klick selbst; im In-Page-Fallback (keine Fullscreen-API oder Request abgelehnt) setzt derselbe Mechanismus über den modul-eigenen ESC-Handler dieselbe Klasse. Konsumenten markieren ihr Bedien-Chrome (Filterleisten, Fußnoten, Umschalter) mit data-copiki-present-hide — diese Sektion rät nie, welche Kinder Chrome sind. Skalierung läuft über EINE Custom Property, damit Konsumenten die Vergrößerung erben, ohne eigene Elemente aufzuzählen. */ .copiki-present { --copiki-present-scale: 1.25; font-size: calc(1em * var(--copiki-present-scale)); padding: 1.5em; /* Diese Datei kennt (Stand 2026-08-19) weder ein Content-Background- Token noch einen prefers-color-scheme-/data-bs-theme-Block — nur sidebar-/element-spezifische Hintergründe (--sidebar-primary-bg u.ä.) sowie die Markenfarbe --mws-primary-bg, die für eine Vollflächen-Dashboardfläche fehl am Platz wäre. Vollbild rendert vor dem Browser-Backdrop: ohne expliziten, deckenden Hintergrund würde die Fläche schwarz. Literales Weiß statt var()-mit-Fallback, weil kein Token existiert, das referenziert werden könnte — führt diese Codebasis je einen Dark Mode ein, braucht DIESE Regel ein eigenes dunkles Gegenstück, denn es gibt (noch) keinen Block, der sie automatisch mitzöge. */ background: #fff; overflow: auto; } .copiki-present [data-copiki-present-hide] { /* display:none, nicht visibility/opacity: das Chrome verlässt auch den Accessibility-Tree und bleibt kein unsichtbarer Tab-Stopp. */ display: none; } /* Beenden-Button (OOUI ToggleButtonWidget, Klasse von presentation-mode.js vergeben). Weder Fallback noch echtes Vollbild bekommen am Ziel-Element eine je eigene Klasse — .copiki-present wird in beiden Fällen identisch gesetzt —, daher gilt diese Regel für beide gleich: der Button muss beim Scrollen innerhalb des präsentierten Elements erreichbar bleiben. */ .copiki-present .copiki-presentation__button { position: sticky; top: 0.5em; float: right; z-index: 10; } /* ==== Copiki-Karte (.copiki-card) — die allgemeine Inhaltskarte ========== Fleet-weite Basisklasse fuer Inhaltskarten auf Copiki-Seiten, abgeleitet aus den IMS-PM-Bewertungskarten (.ims-review) und den Karten der Vorlage:User (Owner-Entscheid 2026-09-02): KEIN Rahmen, abgerundete Ecken, sehr helles Grau als Flaeche, Kopfzeile mit 2px-Unterstrich in --copiki-grey, Titelschrift in --copiki-secondary-color. Module ergaenzen ihre eigene Klasse fuer Layout (Breite/Float/Flex/ Margins — die Basisklasse traegt bewusst KEIN margin, Positionierung gehoert dem Modul) und fuer farbige Markierungen. Dafuer gibt es ZWEI offizielle Wege (Owner-Entscheid 2026-09-03), einzeln oder kombiniert: 1. Kopf-Unterstrich faerben: .modul--x .modul__head { border-bottom-color: … } (SWOT-Quadranten) 2. linken Rand faerben: .modul { border-left: 4px solid …; } (Bewertungskarten = Statusfarbe, Prozessziel = Hauptfarbe) Muster:
    …
    PDF: literalfarbige CSS-2.1-Kopie in BlueSpiceUEModulePDF/…/copiki.css (kein Flex im Kopf, kein Hover) — Aenderungen dort nachziehen. */ .copiki-card { box-sizing: border-box; padding: 14px 18px 16px; border: 0; border-radius: 8px; background: var(--copiki-verylightgrey, #f6f6f6); transition: background-color .15s ease; } .copiki-card:hover { background-color: var(--copiki-lightgrey, #eeeeee); } .copiki-card__head { display: flex; align-items: center; gap: .55em; font-weight: 700; margin-bottom: 6px; padding-bottom: 10px; color: var(--copiki-secondary-color, #616265); border-bottom: 2px solid var(--copiki-grey, #d8d8d9); } .copiki-card__head i { color: var(--copiki-secondary-color, #616265); } /* ---- Prozessbewertung (Vorlage:IMS-PM Prozessbewertung, /Nächste Prozessbewertung) ---- Karten auf .copiki-card-Basis (beide Klassen kommen aus den Vorlagen); hier nur noch Layout und Statusfarbe. Zwei Halbbreiten-Karten nebeneinander (Owner-Wunsch 2026-09-02); es gibt keinen gemeinsamen Container (jede Karte ist eine eigene Transklusion), darum inline-block statt Flex: 2 × 49.4 % + Zwischenraum < 100 % bleibt auch mit dem Word-Space des Quelltext-Zeilenumbruchs zwischen den divs einzeilig; eine einzelne Karte steht halbbreit allein. */ .ims-review { display: inline-block; vertical-align: top; width: 49.4%; margin: 4px 0; /* Statusfarbe als linker Rand (Weg 2 der .copiki-card-Faerbung); der Kopf-Unterstrich bleibt allgemein grau. */ border-left: 4px solid var(--copiki-secondary-color, #616265); } .ims-review--done { border-left-color: var(--copiki-success, #198754); margin-right: 0.5%; } .ims-review--next { border-left-color: var(--copiki-warn, #f2c200); } /* Leerzustand (kein Datum): Wortlaut aus der Vorlage, Optik wie .mm-akte__empty. */ .ims-review__empty { color: var(--copiki-middlegrey, #9d9d9d); font-style: italic; } .ims-review--invalid { border-left-color: var(--copiki-danger, #dc3545); } .ims-review--invalid > i { color: var(--copiki-danger); } /* ---- IMS-PM Bausteine (Vorlage:IMS-PM *, Paket CopikiVorlagen-IMS-PM-Bausteine) ---- Fleet-wide building blocks for process / process-profile pages. Layout is float + inline-block only — the PDF export (Flying Saucer, CSS 2.1) gets a literal-colour copy of these rules in BlueSpiceUEModulePDF/…/copiki.css. The data tag's own block is .ims-pm-data (a parsed wikitext fragment:

    /

      inside), so paragraph margins are zeroed here. */ .ims-pm-data > p { margin: 0; } .ims-pm-data > ul, .ims-pm-data > ol { margin: 0 0 0 1.4em; } .ims-pm-data--invalid { padding: 6px 10px; border-left: 4px solid var(--copiki-danger, #dc3545); background: #fdecea; } .ims-pm-since { font-size: .85em; color: var(--copiki-middlegrey, #9d9d9d); white-space: nowrap; } /* SWOT 2x2 — round 2: DL-box frame (1px grey, 5px radius, white), 1 % gaps between the two quads of a row so the rounded corners stay visible. Widths are plain percentages (no calc(): the PDF copy is CSS 2.1). */ /* Equal-height rows (owner request 2026-08-28): flex row-wrap stretches both quads of a row to the taller one. The float declarations below stay for the PDF (Flying Saucer has no flex — cards are top-aligned there) and for VE, where the quads render as siblings OUTSIDE this auto-closed container and keep the float layout; floats are ignored on flex items. */ .ims-pm-swot { display: flex; flex-wrap: wrap; overflow: hidden; margin: 8px 0 12px; } /* Flaeche/Padding/Radius kommen aus .copiki-card (Klasse aus der Vorlage); hier nur Layout. */ .ims-pm-swot__quad { float: left; width: 49.5%; margin-bottom: 6px; min-height: 6em; } /* Final fix wave (F3; round-2 review M3: reworded — :nth-of-type(odd) counts DIV siblings by tag name, not by class, so it is immune only to a stray

      between quads; a stray sibling

      would still shift the rows). */ .ims-pm-swot__quad:nth-of-type(odd) { clear: left; margin-right: 1%; } /* Kopfzeile = .copiki-card__head; die bunten Unterstriche der vier Quadranten bleiben als Modul-Override (Owner-Entscheid 2026-09-02). */ .ims-pm-swot__quad--staerken .ims-pm-swot__head { border-bottom-color: var(--copiki-success, #198754); } .ims-pm-swot__quad--schwaechen .ims-pm-swot__head { border-bottom-color: var(--copiki-danger, #dc3545); } .ims-pm-swot__quad--chancen .ims-pm-swot__head { border-bottom-color: var(--copiki-info, #0284c7); } .ims-pm-swot__quad--risiken .ims-pm-swot__head { border-bottom-color: var(--copiki-warn, #f2c200); } .ims-pm-swot__quad.ims-pm-swot__quad--invalid { width: 100%; float: none; margin-right: 0; border-left: 4px solid var(--copiki-danger, #dc3545); } /* Abschlussmarker der SWOT-Analyse: nur im VisualEditor sichtbar. */ .ims-pm-swot__end { display: none; } /* Kennzahlen table (round 2): a div-table so every row template renders as a row on its own inside VisualEditor (a without a is removed by Tidy, a div is not). A row standing alone is its own fixed- layout table; inside the container it becomes a table-row. Optional columns stay hidden unless the container carries ims-pm-kz--. */ .ims-pm-kz { display: table; width: 100%; table-layout: fixed; /* separate, not collapse: a collapsed table box drops border-radius in every browser, which would leave this as the only square card. */ border-collapse: separate; border-spacing: 0; margin: 8px 0 12px; border: 1px solid var(--copiki-grey, #d8d8d9); border-radius: 5px; background: #fff; } .ims-pm-kz__row { display: table; width: 100%; table-layout: fixed; } .ims-pm-kz .ims-pm-kz__row { display: table-row; } .ims-pm-kz__c { display: table-cell; padding: 4px 8px; border-top: 1px solid var(--copiki-grey, #d8d8d9); vertical-align: top; } .ims-pm-kz__c > p { margin: 0; } /* One entry per line, no bullets — same look as the Prozesseigner card. */ .ims-pm-kz__c ul, .ims-pm-kz__c ol { list-style: none; margin: 0; padding: 0; } .ims-pm-kz__row--head .ims-pm-kz__c { font-weight: 700; background: var(--copiki-verylightgrey, #f6f6f6); border-top: 0; } .ims-pm-kz__c-kennzahl { width: 22%; font-weight: 700; } .ims-pm-kz__c-beschreibung { width: 26%; } .ims-pm-kz__c-rhythmus, .ims-pm-kz__c-ziel, .ims-pm-kz__c-istwert, .ims-pm-kz__c-verantwortlich, .ims-pm-kz__c-datenquelle { width: 13%; } .ims-pm-kz__end { display: none; } .ims-pm-kz .ims-pm-kz__c-beschreibung, .ims-pm-kz .ims-pm-kz__c-rhythmus, .ims-pm-kz .ims-pm-kz__c-ziel, .ims-pm-kz .ims-pm-kz__c-istwert, .ims-pm-kz .ims-pm-kz__c-verantwortlich, .ims-pm-kz .ims-pm-kz__c-datenquelle { display: none; } .ims-pm-kz--beschreibung .ims-pm-kz__c-beschreibung, .ims-pm-kz--rhythmus .ims-pm-kz__c-rhythmus, .ims-pm-kz--ziel .ims-pm-kz__c-ziel, .ims-pm-kz--istwert .ims-pm-kz__c-istwert, .ims-pm-kz--verantwortlich .ims-pm-kz__c-verantwortlich, .ims-pm-kz--datenquelle .ims-pm-kz__c-datenquelle { display: table-cell; } /* VisualEditor only (.ve-ce-surface): Parsoid renders every transclusion on its own, so the head row sits inside the auto-closed container while the data rows stand alone — show all seven columns everywhere in the editor so head and rows line up, and show the closing bar (hidden on the page and in the PDF) across the full editor width. */ .ve-ce-surface .ims-pm-kz .ims-pm-kz__c { display: table-cell; } /* Beginn-Balken vor der Tabelle (Benennung wie beim SWOT-Baustein): als table-caption sitzt er OBERHALB der Tabellenbox des Start-Containers. */ .ve-ce-surface .ims-pm-kz::before { content: "Kennzahlentabelle – Beginn"; display: table-caption; caption-side: top; margin: 0 0 8px; padding: 2px 8px; font-size: .85em; color: var(--copiki-middlegrey, #9d9d9d); border-bottom: 1px solid var(--copiki-grey, #d8d8d9); } .ve-ce-surface .ims-pm-kz__end { display: block; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 2px 8px; font-size: .85em; color: var(--copiki-middlegrey, #9d9d9d); border-top: 1px solid var(--copiki-grey, #d8d8d9); } /* VisualEditor only: columns the Start block hides are hatched in the head row (inside the auto-closed container) and in every following data row (a DOM sibling of the container in the editor), so the author sees what disappears after saving. Limitation: with two tables on one page the first Start's flags also hatch the second table's rows. */ .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--beschreibung) .ims-pm-kz__c-beschreibung, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--beschreibung) ~ .ims-pm-kz__row .ims-pm-kz__c-beschreibung, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--rhythmus) .ims-pm-kz__c-rhythmus, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--rhythmus) ~ .ims-pm-kz__row .ims-pm-kz__c-rhythmus, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--ziel) .ims-pm-kz__c-ziel, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--ziel) ~ .ims-pm-kz__row .ims-pm-kz__c-ziel, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--istwert) .ims-pm-kz__c-istwert, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--istwert) ~ .ims-pm-kz__row .ims-pm-kz__c-istwert, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--verantwortlich) .ims-pm-kz__c-verantwortlich, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--verantwortlich) ~ .ims-pm-kz__row .ims-pm-kz__c-verantwortlich, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--datenquelle) .ims-pm-kz__c-datenquelle, .ve-ce-surface .ims-pm-kz:not(.ims-pm-kz--datenquelle) ~ .ims-pm-kz__row .ims-pm-kz__c-datenquelle { background-image: repeating-linear-gradient( 45deg, transparent 0 4px, rgba( 0, 0, 0, .08 ) 4px 8px ); color: var(--copiki-middlegrey, #9d9d9d); } /* VisualEditor: Bewertungs- und SWOT-Karten wie auf der Seite (Owner-Wunsch 2026-09-02). Die Quadranten stehen im Editor als Geschwister AUSSERHALB des (dort leeren) Flex-Containers, und VE schiebt Block-Slugs zwischen die Knoten — :nth-of-type und +-Ketten zaehlen deshalb falsch. Die Position kommt darum aus den TYP-Klassen: staerken/chancen = linke Spalte (Zeilen- start), schwaechen/risiken = rechte. Gleiche Reihenhoehe ist im Editor nicht erreichbar (kein gemeinsamer Flex-Container); min-height 6em haelt die Reihen ruhig. Die Bewertungskarten uebernehmen das Seiten-Layout (inline-block, 49.4 %) unveraendert — dafuer muessen die Block-Slugs und Leer-Absaetze zwischen den Karten weg, sonst bricht die Zeile. */ .ve-ce-surface .ims-review + .ve-ce-branchNode-blockSlug, .ve-ce-surface .ims-review + p.mw-empty-elt, .ve-ce-surface .ims-review + .ve-ce-branchNode-blockSlug + p.mw-empty-elt, .ve-ce-surface .ims-review + p.mw-empty-elt + .ve-ce-branchNode-blockSlug { display: none; } /* Start-Container = beschrifteter Balken (Waben-Muster "Waben/Start"); die Quadranten paaren links/rechts ueber ihre TYP-Klassen — VEs Block-Slugs (opacity 0, aber mit Hoehe) machen jede Positionszaehlung unzuverlaessig. Die Ende-Leiste (auf Seite/PDF versteckt) faellt per clear unter alle Karten und schliesst den Block sichtbar ab. */ .ve-ce-surface .ims-pm-swot { display: block; overflow: visible; margin: 0 0 8px; padding: 2px 8px; font-size: .85em; color: var(--copiki-middlegrey, #9d9d9d); border-bottom: 1px solid var(--copiki-grey, #d8d8d9); } .ve-ce-surface .ims-pm-swot::before { content: "SWOT-Analyse – Beginn"; } .ve-ce-surface .ims-pm-swot > p.mw-empty-elt { display: none; } .ve-ce-surface .ims-pm-swot__quad.ims-pm-swot__quad--staerken, .ve-ce-surface .ims-pm-swot__quad.ims-pm-swot__quad--chancen { float: left; clear: both; margin-right: 0; } .ve-ce-surface .ims-pm-swot__quad.ims-pm-swot__quad--schwaechen, .ve-ce-surface .ims-pm-swot__quad.ims-pm-swot__quad--risiken { float: right; clear: none; margin-right: 0; } /* Unsichtbare Zwischenknoten (VE-Block-Slug bzw. leerer Absatz) direkt nach einem Quadranten belegen eine Zeilenhoehe und druecken die rechte Karte der Reihe nach unten — im SWOT-Block kollabieren. */ .ve-ce-surface .ims-pm-swot__quad + .ve-ce-branchNode-blockSlug, .ve-ce-surface .ims-pm-swot__quad + p.mw-empty-elt, .ve-ce-surface .ims-pm-swot + .ve-ce-branchNode-blockSlug, .ve-ce-surface .ims-pm-swot + p.mw-empty-elt { display: none; } .ve-ce-surface .ims-pm-swot__end { display: block; clear: both; width: 100%; box-sizing: border-box; margin: 0 0 12px; padding: 2px 8px; font-size: .85em; color: var(--copiki-middlegrey, #9d9d9d); border-top: 1px solid var(--copiki-grey, #d8d8d9); } /* Prozessrahmen/Prozessfluss stehen im VE als benachbarte Transklusionen — der Block-Slug dazwischen (opacity 0, aber mit Hoehe) reisst eine Luecke zwischen die beiden Karten, die es auf der Seite nicht gibt. Eng gescoped kollabieren (leerer Absatz defensiv mit, Falle-9-Muster). */ .ve-ce-surface .ims-pm-rahmen + .ve-ce-branchNode-blockSlug, .ve-ce-surface .ims-pm-rahmen + p.mw-empty-elt, .ve-ce-surface .ims-pm-fluss + .ve-ce-branchNode-blockSlug, .ve-ce-surface .ims-pm-fluss + p.mw-empty-elt { display: none; } /* Prozessrahmen / Prozessfluss: three floated columns, 1.1 % gaps (3 × 32.6 % + 2 × 1.1 % = 100 %); the third column's gap is removed with a CSS 2.1 sibling chain (no :last-child in Flying Saucer). */ /* Equal-height rows on screen via flex, same reasoning as .ims-pm-swot. */ .ims-pm-rahmen, .ims-pm-fluss { display: flex; flex-wrap: wrap; overflow: hidden; margin: 8px 0 12px; } /* Flaeche/Padding/Radius/Kopfzeile kommen aus .copiki-card(__head). */ .ims-pm-rahmen__col, .ims-pm-fluss__col { float: left; width: 32.6%; margin-right: 1.1%; min-height: 5em; } .ims-pm-rahmen__col + .ims-pm-rahmen__col + .ims-pm-rahmen__col, .ims-pm-fluss__col + .ims-pm-fluss__col + .ims-pm-fluss__col { margin-right: 0; } /* Prozesseigner / Prozessziel: .copiki-card-Basis; der Eigner bleibt eine einzeilige Kompaktkarte mit eigenem, flacherem Padding. */ .ims-pm-eigner { display: inline-block; margin: 8px 0 12px; padding: 6px 14px; } .ims-pm-eigner__label { color: var(--copiki-secondary-color, #616265); } .ims-pm-eigner .ims-pm-data { display: inline-block; vertical-align: top; } .ims-pm-eigner .ims-pm-data ul, .ims-pm-eigner .ims-pm-data ol { list-style: none; margin: 0; padding: 0; } /* Several owners read as one comma-separated row, not one per line. */ .ims-pm-eigner .ims-pm-data li { display: inline; } .ims-pm-eigner .ims-pm-data li + li:before { content: ", "; } .ims-pm-ziel { margin: 8px 0 12px; /* Hauptfarben-Kette (C1) als linker Rand (Weg 2 der .copiki-card- Faerbung): erst die sichtbare Instanz-Primaerfarbe des Discovery- Skins, dann Copiki-Default. PDF bleibt beim Literal. */ border-left: 4px solid var(--mws-primary-bg, var(--copiki-primary-color, #c0143c)); } /* Hover der Baustein-Karten kommt aus .copiki-card:hover. Kennzahlen- Datenzeilen von Weiss auf verylightgrey, die Kopfzeile bleibt aussen vor (traegt verylightgrey bereits als Grundton). */ .ims-pm-kz__row { transition: background-color .15s ease; } .ims-pm-kz__row:not(.ims-pm-kz__row--head):hover { background-color: var(--copiki-verylightgrey, #f6f6f6); } /* ---- IMS Steckbrief-Status PDF substitute (, sub-task 6c) ---- The renderer always emits BOTH branches (no context detection — same precedent): the interactive dashboard inside .ims-sbs__screen.bs-universalexport-exportexclude, and this plain-table PDF substitute as a sibling. On screen only the export pipeline should ever remove the .exportexclude branch, so the substitute stays hidden here unconditionally. Task 7 ports the full sbd screen design as its own "IMS Steckbrief-Status" theme section (.ims-sbs*, sortable Detailtabelle etc.) — this one rule is the only screen-CSS surface sub-task 6c owns. */ .ims-sbs__pdf { display: none; } /* ---- IMS Steckbrief-Status () ---- Screen theme for the six-view Prozesssteckbrief-Status dashboard (Task 6: Detailtabelle, Abdeckung, Bewertungsstand, Verantwortlichkeiten, Kennzahlen, Risiken & Chancen). This is a class-for-class PORT of the old Widget:Steckbriefdashboard (siemag-tecberg) onto the ims-sbs__* markup Task 6 emits, corrected against the widget's actual sbd-* CSS (re-fetched read-only from the production instance it lives on, fix round 1) rather than only the class-mapping table -- so paddings, radii, font sizes, gaps and the like are the ORIGINAL widget's own values, not a recreation. The owner's one stated aesthetic requirement for this feature is that the replaced dashboard's look survives the rewrite, so the only sanctioned adaptations are: the sbd- -> ims-sbs__ class prefix, font-family: inherit (the wiki font) instead of the original's system font stack, and mapping the original's neutral greys onto this theme's --copiki-* custom properties (original literal kept as the var() fallback). The four family colors (F/K/U/X), the four review-status colors (st-0..st-3) and the widget's own blue accent (series-1/ series-1-soft, numerically identical to --s-F) are semantic DATA, not theme -- they stay fixed hex at the ORIGINAL's exact values throughout, matching BlueSpiceUEModulePDF/common/stylesheets/copiki.css's .ims-sbs__pdf-fam--* / .ims-sbs__pdf-status--* rules (sub-task 6c), so screen and PDF never disagree on what a color means. The filter bar (sbd-filters/sbd-fg/sbd-chip/sbd-sw/sbd-count in the original) is the ONE exception to the class-for-class port described above -- added by a later follow-up task, its markup is + , not the original's own
      to attach it to, and switching the table's own display mode to add horizontal-scroll behavior without a wrapper is a real layout-algorithm change no browser test could verify this session, so it is left out rather than guessed at. td.mid / sbd-yes / sbd-no have no matching class anywhere in the renderer's output (no cell is ever centered or gets a yes/no-colored class) and are therefore not ported (dead weight). Fix round 2: the th/td rules below are written as .wikitable.ims-sbs__tbl > * > tr > th/td (specificity (0,2,2)), matching core's own .wikitable > * > tr > th/td shape (mediawiki.skinning/content.tables.less, specificity (0,1,2)) plus the ims-sbs__tbl class -- a plain .ims-sbs__tbl th/td descendant selector is only (0,1,1) and silently loses every colliding longhand (padding, both border-bottom declarations, and centered th text-align) to core's more specific rule, which is exactly what round 1 shipped and what this round corrects. text-align: left was also missing outright in round 1 (the original states it explicitly on both th and td) and is the one declaration core overrides most visibly (its own th rule center-aligns). The plain ">tr>" (no "*") branches are included only to mirror core's own selector shape/robustness; this renderer's table always wraps rows in thead/tbody, so only the "> * > tr >" branches ever actually match. */ .ims-sbs__tbl { width: 100%; font-size: 0.82em; background: var(--sbs-surface); } .wikitable.ims-sbs__tbl > tr > th, .wikitable.ims-sbs__tbl > tr > td, .wikitable.ims-sbs__tbl > * > tr > th, .wikitable.ims-sbs__tbl > * > tr > td { padding: 7px 9px; border-bottom: 1px solid var(--sbs-grid); vertical-align: top; text-align: left; } .wikitable.ims-sbs__tbl > tr > th, .wikitable.ims-sbs__tbl > * > tr > th { font-weight: 600; color: var(--sbs-ink-2); white-space: nowrap; border-bottom: 1px solid var(--sbs-axis); } .ims-sbs__tbl tbody tr:hover { background: var(--sbs-plane); } .ims-sbs__tbl a { color: var(--sbs-ink-1); } .ims-sbs__row--nosteckbrief td, .ims-sbs__row--never-approved td { /* No original counterpart -- collapsed-row states are unique to this renderer's audit-gating (Task 5/6), not a widget concept. */ color: var(--sbs-ink-2); } .ims-sbs__no-steckbrief, .ims-sbs__never-approved { font-style: italic; text-align: center; } .ims-sbs__unresolved { margin-top: 16px; } .ims-sbs__unresolved-heading { font-weight: 600; margin-bottom: 6px; } .ims-sbs__unresolved ul { margin: 0 0 0 20px; padding: 0; } /* Browser printing (Strg+P) is a different medium from the PDF export (BlueSpiceUEModulePDF/Flying Saucer, sub-task 6c's .ims-sbs__pdf branch). Ported directly from the original's own @media print block (hide the tab bar, force every view visible with !important, exactly as the original does) -- the first draft's extra page-break-avoidance and inter-view divider styling was not in the original and has been removed for fidelity. sbd-act/sbd-modal have no matching markup here (see header comment) and stay omitted; .ims-sbs__filter (the filter bar's later follow-up task, own header comment above .ims-sbs__tabs) is added below -- the original's own print block hides sbd-filters too, and a live chip/search bar printed alongside a now-forced-visible full page of every view would be pure UI chrome on paper. */ @media print { .ims-sbs__filter { display: none; } .ims-sbs__tabs { display: none; } .ims-sbs__view { display: block !important; } } /* ========================================================================== AtMentions: Erwähnungs-Hervorhebung im Lesemodus neutralisieren -------------------------------------------------------------------------- Extension:AtMentions (BlueSpice, aktiviert in settings.copiki.d/ 080-AtMentions.php) dekoriert in ProcessMentions::onHtmlPageLinkRendererEnd jeden Link auf eine als "erwähnt" registrierte Benutzerseite mit HART- KODIERTEN Inline-Styles (lila Chip: #e5e4ff / #acaeff) — deshalb taucht das Styling in keiner CSS-Datei auf ("element.style"). Der Chip passt nicht ins Copiki-Theme; !important ist hier nötig und zulässig, weil nur so Inline- Styles eines Vendor-Hooks übersteuert werden können (.claude/rules/ frontend.md, Abschnitt !important). Die Hervorhebung im VisualEditor (resources/ce/Mention.js) bleibt bewusst erhalten — im Editor zeigt sie das Mention-Feature an. Im Lesemodus ersetzt eine dezente, themekonforme Kennzeichnung den Chip: gepunktete Unterstreichung in der Markenfarbe der Instanz (--primary-element-highlight-color, white-label-sicher), beim Hover ein leichter Hintergrund in der Lighter-Variante. */ a.at-mention { background-color: transparent !important; border: none !important; padding: 0 !important; border-radius: 2px !important; border-bottom: 1px dotted var(--primary-element-highlight-color, var(--mws-primary-bg, #96bfe5)) !important; } a.at-mention:hover { background-color: var(--primary-element-highlight-color-lighter, var(--copiki-verylightgrey, #f6f6f6)) !important; border-bottom-style: solid !important; } /* ---- Bootstrap-Tooltips im Copiki-Look (Owner-Entscheid 2026-08-28) ---- BS 5.3 stylt Tooltips vollstaendig ueber --bs-tooltip-*-Variablen auf .tooltip; diese eine Sektion restylt daher JEDEN data-bs-toggle="tooltip" fleet-weit (Terminstatus-Kacheln, KPI-Labels, IMS-Listen, Agenten, DL-Box). Karten-Look statt Bootstrap-Schwarz: verylightgrey-Fuellung, grauer Rahmen, dunkler Text, volle Deckkraft. Der Pfeil wird zweilagig neu gebaut (::before = Rahmenkontur, ::after = Fuellung, 1px eingerueckt), damit er dieselbe 1px-Kontur traegt wie die Blase; dafuer feste px-Masse statt der rem-Defaults. */ .tooltip { --bs-tooltip-bg: var(--copiki-verylightgrey, #f6f6f6); --bs-tooltip-color: var(--copiki-verydarkgrey, #3d3d3d); --bs-tooltip-opacity: 1; --bs-tooltip-border-radius: 6px; --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 6px; --bs-tooltip-max-width: 260px; --bs-tooltip-arrow-width: 14px; --bs-tooltip-arrow-height: 7px; } .tooltip .tooltip-inner { border: 1px solid var(--copiki-grey, #d8d8d9); box-shadow: 0 2px 8px rgba(0, 0, 0, .12); text-align: left; } .tooltip .tooltip-arrow::after { position: absolute; content: ""; border-color: transparent; border-style: solid; } /* oben: Pfeil zeigt nach unten */ .bs-tooltip-top .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before { border-top-color: var(--copiki-grey, #d8d8d9); } .bs-tooltip-top .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::after { top: -1px; left: 1px; border-width: 6px 6px 0; border-top-color: var(--copiki-verylightgrey, #f6f6f6); } /* unten: Pfeil zeigt nach oben */ .bs-tooltip-bottom .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before { border-bottom-color: var(--copiki-grey, #d8d8d9); } .bs-tooltip-bottom .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::after { bottom: -1px; left: 1px; border-width: 0 6px 6px; border-bottom-color: var(--copiki-verylightgrey, #f6f6f6); } /* rechts: Pfeil zeigt nach links */ .bs-tooltip-end .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before { border-right-color: var(--copiki-grey, #d8d8d9); } .bs-tooltip-end .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::after { right: -1px; top: 1px; border-width: 6px 6px 6px 0; border-right-color: var(--copiki-verylightgrey, #f6f6f6); } /* links: Pfeil zeigt nach rechts */ .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before { border-left-color: var(--copiki-grey, #d8d8d9); } .bs-tooltip-start .tooltip-arrow::after, .bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::after { left: -1px; top: 1px; border-width: 6px 0 6px 6px; border-left-color: var(--copiki-verylightgrey, #f6f6f6); }