/* toolbar.css — Container, Search-Input, Segmented (State-Filter), Toolbar-Buttons, Counter-Block, Neue-Aufgabe-CTA, Tier-Responsive-Konvention. */ /* ────────────────────────────────────────────────────────────────────── * Toolbar-Container — eine Zeile, stabile Positionen * ────────────────────────────────────────────────────────────────────── */ /* Toolbar-Container - generische Klasse .app-page-toolbar steht allen v2-Tabs zur Verfuegung, .app-kanban-toolbar ist der (aeltere) Kanban-spezifische Alias. Responsiveness wird von ToolbarResponsive (JS) live berechnet - siehe toolbar-responsive.js. */ .app-scope .app-kanban-toolbar, .app-scope .app-page-toolbar { padding: var(--space-3) var(--space-4-5); border-bottom: 1px solid var(--lod-gray-100); background: var(--color-surface); /* Relativ positionierter Container fuer das Tier-10-Suche-Overlay (Expand-on-Focus legt sich ueber die Toolbar-Breite). */ position: relative; } .app-scope .app-toolbar { display: flex; align-items: center; /* Einheitliche 8px-Abstaende zwischen ALLEN Toolbar-Elementen. */ gap: var(--space-2); flex-wrap: nowrap; /* niemals umbrechen */ /* min-height 36px = einheitliche Hoehe der Inhalts-Items (Search 36, Filter 36, Switcher 36). Container-Padding 12+12 ergibt zusammen 60px Toolbar- Hoehe — identisch fuer Kanban, Projekte, Kontingente, Anfragen, Wissen. */ min-height: 36px; /* Falls die Messung kurz hinterherhinkt, verstecken wir Overflow hart — damit keine Elemente sichtbar ueberragen. ToolbarResponsive reagiert innerhalb von ~1 Frame mit einer Tier-Erhoehung. */ overflow: hidden; min-width: 0; } .app-scope .app-toolbar-slot { display: flex; align-items: center; gap: var(--space-2); min-width: 0; } /* ── POSITIONS-STABILITAETS-SSOT (gilt fuer ALLE Toolbars, alle Views) ─────── Invariante: Genau EIN wachsendes Element in der Toolbar — der Spacer `.app-toolbar-flex`. LEFT/CENTER/RIGHT tragen natuerliche Breite (flex: 0 0 auto). Der Spacer sitzt zwischen CENTER und RIGHT und schluckt allen variablen Raum. Layout (>=600px): [LEFT][CENTER][··· Spacer waechst ···][RIGHT] LEFT — links verankert (Suche, ggf. Context-Switcher/Firma-Chip) CENTER — links verankert direkt hinter LEFT (State-Segmente, View-Controls) Spacer — einziges flex-grow; absorbiert JEDE Breiten-Varianz RIGHT — rechts verankert (Counter, Filter, Sort, CTA) Folge: LEFT + CENTER kleben links und bleiben stehen, RIGHT klebt rechts und atmet frei — egal wie sich Center-Controls oder der (asynchrone) Counter je View/Section aendern. Nichts springt beim View-/Bereichswechsel. HARTE REGEL: NIE einem Slot ODER der Suche `flex-grow` geben (>=600px). Eine greedy Suche macht ihre Breite zum Varianz-Absorber und schiebt damit die Nachbarn (Pills/Controls/Counter) bei jeder Aenderung horizontal — genau das war der chronische „Toolbar-Elemente springen beim View-Wechsel"-Bug. Die Suche hat feste Komfortbreite (flex-basis 440px, kein grow-Zuwachs weil LEFT nicht waechst). Mobile (<600px) hat einen eigenen greedy-Modus, siehe @media-Block weiter unten. — War bis 2026-07-13 nur der Abrechnung-Sonderfall (abrechnung.css), dann zum globalen Default erhoben (SSOT fuer alle Toolbars). Regelwerk: docs/reference/design-system/modules/toolbar.md. */ .app-scope .app-toolbar-left { flex: 0 0 auto; min-width: 0; justify-content: flex-start; margin: 0; padding: 0; } .app-scope .app-toolbar-center { flex: 0 0 auto; justify-content: flex-start; margin: 0; padding: 0; } .app-scope .app-toolbar-right { flex: 0 0 auto; justify-content: flex-start; margin: 0; padding: 0; } .app-scope .app-toolbar-flex { flex: 1 1 auto; min-width: 0; display: block; } /* Leere Slots kollabieren, damit Gaps um sie herum nicht als "doppelte" Luecken sichtbar werden (z.B. Kontingente hat aktuell kein CENTER-State). */ .app-scope .app-toolbar-slot:empty { display: none; } /* Auf schmalen Viewports (<1000px) wird das State-Segmented und der Grouping-Trigger ausgeblendet, damit Board-Switcher + Suche + Filter + Primary garantiert in eine Zeile passen. Der Counter hat :empty-Fallback (display:none). CENTER-Slot selbst auch verstecken wenn er NUR ein Segmented enthaelt das per media-query versteckt ist — sonst bleibt ein Ghost-Gap zwischen Suche und Filter-Cluster. */ @media (max-width: 999px) { /* Nur die CENTER-State-Tabs (set-state/-extra) weichen. Die RIGHT-Scope- Umschalter (set-state-right: Vertrieb "VK/Leads/Alle", Anfragen "Offen/ Zur Pruefung", Kontingente Typ) sind Funktionsumschalter — sie waren hier faelschlich mit versteckt und damit auf Tablet unerreichbar. Bei Platznot regelt sie das Tier-System (kompakt ab 7, aus ab 9). */ .app-scope .app-toolbar .app-segmented[data-toolbar-state-segmented="set-state"], .app-scope .app-toolbar .app-segmented[data-toolbar-state-segmented="set-state-extra"], .app-scope .app-toolbar .app-tb-btn[data-toolbar-action="open-grouping"] { display: none; } /* Statt das Segmented ersatzlos zu verstecken: kompakten Status-Dropdown zeigen, damit der Status-Filter auf Tablet/schmalen Viewports bedienbar bleibt. Nur set-state/-extra (die oben versteckten) — set-state-right (Vertrieb VK/Leads, Anfragen-Scope) bleibt als volles Segmented. */ .app-scope .app-toolbar .app-segmented-wrap[data-toolbar-state-wrap="set-state"] .app-segmented-collapsed, .app-scope .app-toolbar .app-segmented-wrap[data-toolbar-state-wrap="set-state-extra"] .app-segmented-collapsed { display: inline-flex; } /* CENTER-Ghost-Schutz (Alt): frueher kollabierte ein CENTER, der nur ein media-verstecktes Segmented enthielt, zu einem 0px-Slot mit Doppel-Gap. Jetzt zeigt jeder .app-segmented-wrap seinen Collapsed-Trigger → ein CENTER MIT Wrapper ist nie ghost und darf NICHT versteckt werden (sonst waere der Status-Dropdown auf Tablet weg). Nur CENTER OHNE Wrapper, die ausschliesslich rohe (media-versteckte) Segmenteds enthalten, werden noch kollabiert. */ .app-scope .app-toolbar-center:not(:has(.app-segmented-wrap)):not(:has(> :not(.app-segmented))) { display: none; } } /* Suche ist das einzige Element, das den verfuegbaren Platz optisch fuellt: wir lassen sie nur per max-width wachsen - aber shrink: 0 bleibt. Ihre Minimalgroesse (siehe .app-search-input min-width) ist der harte Bedarf, den die Toolbar-Messung als Teil des Raums pro Tier beruecksichtigt. */ /* Board-Switcher - gleiche Hoehe wie Suchfeld (36px), Fluent-konformer Rahmen. Design aus einem Guss: Hover/Focus bekommt Darkblue-Kontur wie bei allen Toolbar-Elementen. Scope-Anchors : zusaetzlich `.lod-section-mobile-toolbar` — der Switcher wird auf Mobile als alleinige Sub-Tab-Auswahl in einer dedizierten Mini-Toolbar gemountet. */ /* Selektor um `.page-header` erweitert, damit der Kanban-Board-Switcher im SectionHeader gerendert werden kann ohne eigene CSS-Klasse zu erfinden. `:where(...)` haelt die Specificity auf 0. */ :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher { display: inline-flex; align-items: center; gap: var(--space-2-5); padding: 0 var(--space-3) 0 var(--space-2-5); height: 36px; border-radius: var(--radius-lg); background: var(--lod-gray-50); border: 1px solid transparent; box-sizing: border-box; cursor: pointer; min-width: 0; width: 300px; /* breiter, damit Projektnamen nicht gekuerzt werden */ flex-shrink: 0; transition: background var(--duration-quick), border-color var(--duration-quick), box-shadow var(--duration-quick); } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher:hover { background: #fff; border-color: var(--lod-darkblue-300); } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher:focus-visible { outline: none; background: #fff; border-color: var(--lod-darkblue-300); box-shadow: var(--lod-shadow-focus); } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher[aria-expanded="true"] { background: #fff; border-color: var(--lod-darkblue-300); } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher-label { font-size: var(--font-size-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; color: var(--lod-gray-500); line-height: 1; flex-shrink: 0; } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher-title { font-size: 15px; font-weight: var(--fw-semibold); color: var(--lod-darkblue); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; } :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher img { opacity: 0.6; flex-shrink: 0; } /* Paket NAV-2.4 Polish 2026-05-01: Board-Switcher-Icon (mit class `app-board-switcher-icon`). Auf Desktop versteckt — der Switcher zeigt Label + Title. Auf Mobile <600px (Kanban-Toolbar) wird der Switcher zum Icon-Button: Label/Title/Chevron hidden, nur das Icon sichtbar in 36px. Ausnahme: in .lod-section-mobile-toolbar (Mein-Bereich/Admin) bleibt der Trigger Vollbreite mit Title-Text — siehe Mobile-Polish-Block weiter unten. */ :where(.app-scope, .page-header, .lod-section-mobile-toolbar) .app-board-switcher .app-board-switcher-icon { display: none; } /* Month-Switcher-Trigger erbt .app-board-switcher fuer das Grund-Styling, ist aber kompakter — "April 2026" braucht weit weniger als 300px. Statt fixer Pixel-Breite nimmt der Trigger seine natuerliche Content-Breite (Label + Titel + Chevron + Padding). Damit ist der laengste Monats-Titel ("September 2026") garantiert sichtbar, aber kurze Monate verschwenden keinen Raum. flex-shrink: 0 verhindert Stauchung. */ .app-scope .app-month-switcher-trigger { width: auto; min-width: 0; flex-shrink: 0; } /* Monats-Titel im Trigger nie schrumpfen - sonst wuerde er bei knappem Raum per Ellipsis zu "April 2..." gekuerzt. Wir lassen die Nachbarn im LEFT-Slot ihre natuerliche Breite und die Tier-Logik uebernimmt bei Mobile-Viewports den Icon-Only-Switch. */ .app-scope .app-month-switcher-trigger .app-board-switcher-title { flex: 0 0 auto; overflow: visible; } /* ────────────────────────────────────────────────────────────────────── * Search-Input (in Toolbar-Left) * ────────────────────────────────────────────────────────────────────── */ .app-scope .app-search-input { position: relative; display: flex; align-items: center; gap: var(--space-1-5); /* Feste Komfortbreite 440px, KEIN flex-grow (Teil des Stabilitaets-SSOT, siehe Slot-Kommentar oben): eine wachsende Suche waere der Varianz-Absorber der Toolbar und wuerde ihre Nachbarn (Pills/Controls/Counter) bei jeder Aenderung horizontal verschieben. grow:0 → waechst nie ueber 440. shrink:0 → schrumpft nicht durch Nachbar-Druck (verhindert, dass der `flex:0 0 auto`- LEFT-Slot die Suche auf ihre min-width kollabiert). Verschmaelern passiert ausschliesslich an definierten Punkten: @media <=999px (basis 240) und der Tier-10-Notfall (flex: 1 1 120px) — nicht kontinuierlich durch Nachbarn. Ueber alle Tabs dadurch identische Suchbreite. Mobile <600px: eigener greedy-Modus (siehe @media-Block). */ flex: 0 0 440px; min-width: 200px; max-width: 600px; padding: 0 var(--space-3); height: 36px; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--lod-gray-50); border: 1px solid transparent; } /* Tablet 600-999: Suche darf kleiner werden, damit Board-Switcher und Primary klar sichtbar bleiben. */ @media (max-width: 999px) { .app-scope .app-search-input { flex-basis: 240px; max-width: 360px; min-width: 160px; } } /* Mobile <600: Suche wird greedy — sie nimmt allen verfuegbaren Platz im LEFT-Slot, damit der Abstand zwischen Suche und naechstem Toolbar-Item exakt der Toolbar-Gap (8px) entspricht — kein Trailing-Whitespace mehr. Paket NAV-2.4 Polish 2026-05-01, ergaenzt Mobile-Toolbar-Gap-SSOT 2026-05-02. CENTER kollabiert per `display: contents` (Pills/Segmented werden direkte Toolbar-Geschwister, kein doppelter Slot-Gap). `!important` auf flex/min-width/max-width der Suche ist noetig, weil die Tier-spezifischen Overrides weiter unten (`[data-tb-tier="10"] .app-search-input { flex: 1 1 120px; max-width: 240px }`) hoehere Spezifitaet haben und sonst die Mobile-Greedy-Logik aushebeln (auf <600 gilt MIN_TIER_MOBILE = 8, der Floor kann bis Tier 10 hochlaufen). Auf Mobile ist der Tier-Algorithmus eh irrelevant — die Layout-Entscheidung soll allein vom Mobile-Block kommen. Effekt: Vorher: Suche per Tier auf flex-basis 120px / max-width 240px begrenzt → Trailing-Whitespace im LEFT-Slot → visueller Gap zur Pille Nachher: Suche fuellt LEFT-Slot bis 8px vor naechstem Item — alle sicht- baren Gaps zwischen Toolbar-Items = 8px. */ @media (max-width: 599px) { .app-scope .app-search-input { flex: 1 1 0 !important; min-width: 100px !important; max-width: none !important; width: auto !important; } /* 16px verhindert den iOS-Safari-Fokus-Auto-Zoom (<16px zoomt rein und der Zoom bleibt nach Blur haeufig stehen — "Ansicht geht nicht weg"). */ .app-scope .app-search-input-field { font-size: 16px; } .app-scope .app-toolbar-center { display: contents; } /* Mobile-Greedy-Modus: der stabile >=600px-Default (LEFT fix, Spacer waechst) gilt auf <600px NICHT. Hier soll die Suche wieder den ganzen Rest-Raum fuellen (flex:1 1 0 oben), also muss der LEFT-Slot wachsen und der Spacer verschwinden — sonst haette die greedy Suche keinen Raum und der Spacer wuerde den Platz schlucken. LEFT-Slot darf zusaetzlich horizontal scrollen statt zu ueberlappen: auf Mobile wandert der Section-ViewSwitcher in diesen Slot (SectionHeader) — bei vielen Views (Firmen: 6) lief sein Inhalt sonst optisch UNTER die RIGHT-Slot-Buttons (Slots clippen nicht untereinander). */ .app-scope .app-toolbar-left { flex: 1 1 auto; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; } .app-scope .app-toolbar-left::-webkit-scrollbar { display: none; } .app-scope .app-toolbar-flex { display: none; } } .app-scope .app-search-input:focus-within { background: var(--color-surface); border-color: var(--lod-darkblue-300); box-shadow: var(--lod-shadow-focus); } .app-scope .app-search-input-icon { width: 14px; height: 14px; opacity: 0.5; flex-shrink: 0; } .app-scope .app-search-input-field { flex: 1; border: none; background: transparent; font-size: var(--fs-body); color: var(--lod-darkblue); min-width: 0; } .app-scope .app-search-input-field:focus { outline: none; } .app-scope .app-search-input-field::placeholder { color: var(--lod-gray-500); } .app-scope .app-search-input-clear { width: 18px; height: 18px; border-radius: var(--radius-sm); background: transparent; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .app-scope .app-search-input-clear:hover { background: var(--lod-gray-100); } .app-scope .app-search-input-clear img { width: 10px; height: 10px; opacity: 0.55; } /* ────────────────────────────────────────────────────────────────────── * Segmented (State-Filter) * ────────────────────────────────────────────────────────────────────── */ .app-scope .app-segmented { position: relative; display: inline-flex; align-items: center; padding: 3px; height: 36px; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--lod-gray-100); border: 1px solid var(--lod-gray-200); flex-shrink: 0; } .app-scope .app-segmented-thumb { position: absolute; top: 3px; bottom: 3px; /* Pixelgenau aus JS via offsetLeft/offsetWidth des Active-Items. */ left: 0; width: var(--pill-thumb-w, 0px); transform: translate3d(var(--pill-thumb-x, 0px), 0, 0); /* Toolbar-Sprache: helles Blau wie .has-value / .is-active andernorts. */ background: var(--lod-darkblue-100); border: 1px solid var(--lod-darkblue-300); border-radius: 5px; box-sizing: border-box; transition: transform var(--duration-bounce) var(--ease-drawer), width var(--duration-bounce) var(--ease-drawer); pointer-events: none; opacity: 0; } .app-scope .app-segmented[data-thumb-ready="true"] .app-segmented-thumb { opacity: 1; } @media (prefers-reduced-motion: reduce) { .app-scope .app-segmented-thumb { transition: none; } } .app-scope .app-segmented-btn { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-3-5); border-radius: var(--radius-md); background: transparent; color: var(--lod-gray-700); font-size: 12.5px; font-weight: var(--fw-medium); line-height: 1; cursor: pointer; white-space: nowrap; transition: color var(--duration-normal) var(--ease-soft), font-weight var(--duration-normal) var(--ease-soft); } .app-scope .app-segmented-btn:hover { color: var(--lod-darkblue); } .app-scope .app-segmented-btn.is-active { color: var(--lod-darkblue); font-weight: var(--fw-semibold); } .app-scope .app-segmented-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lod-turquoise); } /* Kollabierbarer Zwilling: der Wrapper haelt das breite Segmented UND einen kompakten Dropdown-Trigger. Es ist immer nur EINER sichtbar — das Segmented per Default, der Trigger wenn die Tier-Kette (Tier 9) oder ein schmaler Viewport (@media <=999px) einklappt. So bleibt der Status-Filter bedienbar, ohne die Suche zu erdruecken (statt das Segmented ersatzlos zu verstecken). */ .app-scope .app-segmented-wrap { display: inline-flex; align-items: center; min-width: 0; flex-shrink: 0; } /* Selektor mit .app-segmented-wrap-Ancestor (Specificity 0,3,0), damit dieses display:none das generische `.app-tb-btn { display:inline-flex }` (0,2,0, spaeter im File) sicher schlaegt — sonst waeren Segmented UND Trigger sichtbar. */ .app-scope .app-segmented-wrap .app-segmented-collapsed { display: none; /* nur sichtbar wenn das Segmented einklappt (Tier/Media) */ gap: var(--space-1-5); /* Optik des aktiven Status-Pills — signalisiert „hier steckt der Status-Filter". */ background: var(--lod-darkblue-100); border-color: var(--lod-darkblue-300); color: var(--lod-darkblue); font-weight: var(--fw-semibold); } .app-scope .app-segmented-collapsed:hover { border-color: var(--lod-darkblue-300); background: var(--lod-darkblue-100); } .app-scope .app-segmented-collapsed-label { white-space: nowrap; } .app-scope .app-segmented-collapsed img { opacity: 0.6; flex-shrink: 0; } /* ────────────────────────────────────────────────────────────────────── * Toolbar-Buttons (Filter / Gruppierung / Sort) * ────────────────────────────────────────────────────────────────────── */ .app-scope .app-tb-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-3); height: 36px; /* einheitliche Toolbar-Hoehe */ box-sizing: border-box; border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--lod-gray-200); color: var(--lod-darkblue); font-size: 12.5px; font-weight: var(--fw-medium); cursor: pointer; white-space: nowrap; flex-shrink: 0; /* nie stauchen — bei zu wenig Platz Tier++ */ } .app-scope .app-tb-btn:hover { border-color: var(--lod-darkblue-300); } .app-scope .app-tb-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); } .app-scope .app-tb-btn.has-value { background: var(--lod-darkblue-100); border-color: var(--lod-darkblue-300); } .app-scope .app-tb-btn img { opacity: 0.6; flex-shrink: 0; } .app-scope .app-tb-btn strong { font-weight: var(--fw-semibold); } .app-scope .app-tb-btn-icon { padding: var(--space-1-5) var(--space-2); } /* Sichtbares Sortier-Label (PageToolbar sort.label) — zeigt den Modus statt nur Icon. */ .app-scope .app-tb-sort-label { font-weight: var(--fw-medium); } /* Gruppierungs-Button mit fester Mindestbreite, damit der Trigger beim Wechsel zwischen Labels (Fälligkeit/Phase/Status/…) nicht die Nachbar- Elemente verschiebt. Breite ist an das längste Label angepasst. */ .app-scope .app-tb-btn[data-toolbar-action="open-grouping"] { min-width: 210px; justify-content: flex-start; } .app-scope .app-tb-btn[data-toolbar-action="open-grouping"] > span { flex: 1 1 auto; } .app-scope .app-tb-btn[data-toolbar-action="open-grouping"] > img:last-child { margin-left: auto; } /* Filter-Trigger-Badge */ .app-scope .app-filter-trigger-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--radius-grouped-count); background: var(--lod-darkblue); color: var(--lod-white); font-size: 10.5px; font-weight: var(--fw-bold); line-height: 1; } /* ────────────────────────────────────────────────────────────────────── * Counter-Block * ────────────────────────────────────────────────────────────────────── */ .app-scope .app-counter-block { /* Counter reiht sich ueber den RIGHT-Slot-Gap (8px) an die anderen Buttons — kein eigener margin-right + kein Left-Padding noetig. Items selbst haben natuerliche Breite, Gap 14px zwischen den KPI-Items. */ display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-3-5); font-size: var(--font-size-sm); color: var(--lod-gray-500); white-space: nowrap; flex-shrink: 0; } /* Leerer Counter-Block verschwindet komplett — kein 0-Breite-Ghost, kein Gap. */ .app-scope .app-counter-block:empty { display: none; } .app-scope .app-counter-item { display: inline-flex; align-items: center; gap: var(--space-1-5); /* Positions-Stabilitaet ueber fixe Value-Breite. Das Item hat natuerliche Breite (kein min-width), der Value-Teil hat aber min-width + rechtsbuendig. Dadurch: - kurzer Value ("0") und langer Value ("10000h") landen in derselben Value-Spalte, der RECHTE Rand des Values bleibt an derselben Position. - Label steht immer im gleichen Abstand zum Value-Rand. - Gesamt-Item-Breite ist stabil, Nachbarn verschieben sich nicht. Icons werden nicht mehr gesetzt — Counter sind Info-Anzeigen, Label allein ist selbsterklaerend. Falls doch ein Icon rendert (Altlasten), schrumpft es auf 0 Gap durch Label-Logik. */ justify-content: flex-start; flex-shrink: 0; font-variant-numeric: tabular-nums; } .app-scope .app-counter-value { font-weight: var(--fw-bold); font-size: var(--fs-body); color: var(--lod-darkblue); text-align: right; min-width: 40px; } .app-scope .app-counter-label { color: var(--lod-gray-500); } .app-scope .app-counter-item.tone-overdue .app-counter-value, .app-scope .app-counter-item.tone-overdue .app-counter-label { color: var(--lod-danger); } .app-scope .app-counter-item.tone-overdue img { opacity: 0.9; } .app-scope .app-counter-item.tone-muted .app-counter-value { color: var(--lod-gray-500); } .app-scope .app-counter-item.tone-success .app-counter-value { color: var(--lod-turquoise-900); } .app-scope .app-counter-item.tone-warn .app-counter-value { color: var(--lod-amber-700); } .app-scope .app-counter-item.tone-brand .app-counter-value { color: var(--lod-turquoise); } /* ────────────────────────────────────────────────────────────────────── * Neue-Aufgabe-Button * ────────────────────────────────────────────────────────────────────── */ /* Primaere CTA in v2-Toolbars - klassen-agnostisch nutzbar: - .app-kanban-newtask-btn (Kanban) - .app-cta-btn (generisch fuer andere Tabs) Beide liefern dasselbe Look&Feel, dieselbe Icon-only-Mobile-Logik. Selektor um `.page-header` erweitert, damit LoD.SectionHeader denselben Button im Page-Header rendern kann ohne eigene CSS-Klasse zu erfinden. `:where(...)` haelt die Specificity auf 0 — Mobile-Tier-Overrides unten greifen weiter. */ :where(.app-scope, .page-header) .app-kanban-newtask-btn, :where(.app-scope, .page-header) .app-cta-btn { display: inline-flex; align-items: center; gap: var(--space-1-5); padding: 0 var(--space-3-5); height: 36px; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--lod-darkblue); color: var(--lod-white); font-weight: var(--fw-semibold); font-size: var(--fs-body); border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; /* nie stauchen */ } :where(.app-scope, .page-header) .app-kanban-newtask-btn:hover, :where(.app-scope, .page-header) .app-cta-btn:hover { background: var(--lod-turquoise); color: var(--lod-darkblue-900); } :where(.app-scope, .page-header) .app-kanban-newtask-btn img, :where(.app-scope, .page-header) .app-cta-btn img { filter: brightness(0) invert(1); } :where(.app-scope, .page-header) .app-kanban-newtask-btn:hover img, :where(.app-scope, .page-header) .app-cta-btn:hover img { filter: none; } /* Outline-Variante hat hellen Hintergrund → Icon NICHT auf weiss invertieren (sonst weiss-auf-weiss, unsichtbar). Nur gefuellte/primary-Buttons brauchen das Invert. */ :where(.app-scope, .page-header) .app-cta-btn.btn-outline img { filter: none; } :where(.app-scope, .page-header) .app-kanban-newtask-btn:focus-visible, :where(.app-scope, .page-header) .app-cta-btn:focus-visible { outline: none; box-shadow: var(--lod-shadow-focus); } /* ══════════════════════════════════════════════════════════════════════ * RESPONSIVE-TOOLBAR-KONVENTION * * Neuer Standard fuer ALLE v2-Tabs (Kanban, Projekte, Kontingente, Anfragen, * Wissen, ...). Toolbars werden aus denselben Bausteinen gebaut und folgen * denselben Responsive-Regeln. Nichts ueberlappt auf keiner Bildschirmgroesse. * * Bausteine (generisch, Tab-unabhaengig): * .app-toolbar Outer-Container (flex, eine Zeile) * .app-toolbar-left Primaeres Context-Element (Board-Switcher, Filter-Hub) * .app-toolbar-center Sekundaer-Aktionen (State, Filter, Gruppierung, Sort) * .app-toolbar-right Tertiaer-Info + Primaeraktion (Counter, "Neu"-Btn) * * Einzelelemente (hinzufuegen / weglassen je Tab - nicht alle haben z.B. Gruppierung): * .app-board-switcher Kontext-Wechsler (z.B. "Meine Aufgaben") * .app-search-input Suchfeld * .app-segmented State-Tabs (Alle/Offen/...) * .app-tb-btn[data-toolbar-action=*] Filter / Gruppierung / Sort * .app-counter-block Optionale Metrik-Anzeige * .app-kanban-newtask-btn Primaere CTA ("+ Neu") * * Collapse-Priorisierung (was zuerst verschwindet/schrumpft): * 1. Counter-Items (am wenigsten kritisch) * 2. Sort-Button (Sort wandert ins Filter-Popover) * 3. Labels der Toolbar-Buttons (Icon-Only-Modus) * 4. Board-Switcher-Label ("BOARD"-Praefix + Titel auf Titel-Only) * 5. State-Segmented-Labels (kurze Icons) * 6. Board-Switcher Titel (Icon-Only) * 7. Primaere CTA (Icon-Only) * 8. Suche kollabiert auf Icon (expandiert bei Focus) * * Breakpoints: * >=1400px Desktop XL Alles voll sichtbar * 1200-1399 Desktop Counter reduziert * 1000-1199 Desktop S Counter weg * 800-999 Notebook Gruppierung+Filter Icon-only, Board schmaler * 600-799 Tablet Board-Label weg, Sort weg, CTA Icon-only * <600 Mobile Alles Icon-only, Suche expandiert bei Focus * * Utility-Klasse: * .app-tb-btn.is-icon-only Erzwingt Icon-Only-Modus unabhaengig vom Breakpoint * * Beispiele fuer andere Tabs: * - Projekte-Toolbar: [Kein Board-Switcher] [Search] [Filter] [Sort] [Counter] [+ Projekt] * - Wissen-Toolbar: [Kategorie-Chips] [Search] [Filter] [Sort] [+ Artikel] * - Mein-Tag-Toolbar: [Datum-Switcher] [Search] [+ Zeit buchen] * ══════════════════════════════════════════════════════════════════════ */ /* Helper: Icon-Only-Modus fuer jeden Toolbar-Button */ .app-scope .app-tb-btn.is-icon-only span, .app-scope .app-tb-btn.is-icon-only strong { display: none; } .app-scope .app-tb-btn.is-icon-only { width: 36px; padding: 0; justify-content: center; min-width: 36px !important; /* override sep min-widths */ } /* ══════════════════════════════════════════════════════════════════ Tier-basierte Kollabier-Stufen (JS-gesteuert, toolbar-responsive.js). Priorisierung (Kyles Logik): die SUCHE ist Primaer-Interaktion und bleibt moeglichst breit. Andere Elemente geben zuerst Platz ab. Ganz am Ende wird auch die Suche zum Icon (Expand-on-Focus). tier=0 alles voll tier>=1 Counter "erledigt" aus tier>=2 Counter komplett aus + Separator tier>=3 Gruppierungs-Label aus + Filter-Label aus (Icon-only) tier>=4 Sort-Button aus tier>=5 Board-Switcher "BOARD"-Praefix aus tier>=6 Primaere CTA Icon-only tier>=7 State-Tabs kompakter tier>=8 Board-Switcher Icon-only tier>=9 State-Segmented versteckt + Gruppierung versteckt tier>=10 Suche Icon-only (Expand-on-Focus) ══════════════════════════════════════════════════════════════════ */ /* Tier 1: Counter-Item "erledigt" aus (drittes Item) - spart ~70px */ .app-scope [data-tb-tier="1"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="2"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="3"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="4"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="5"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="6"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="7"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="8"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="9"] .app-counter-item:nth-child(3), .app-scope [data-tb-tier="10"] .app-counter-item:nth-child(3) { display: none; } /* Tier 2: Counter + Separator komplett aus */ .app-scope [data-tb-tier="2"] .app-counter-block, .app-scope [data-tb-tier="3"] .app-counter-block, .app-scope [data-tb-tier="4"] .app-counter-block, .app-scope [data-tb-tier="5"] .app-counter-block, .app-scope [data-tb-tier="6"] .app-counter-block, .app-scope [data-tb-tier="7"] .app-counter-block, .app-scope [data-tb-tier="8"] .app-counter-block, .app-scope [data-tb-tier="9"] .app-counter-block, .app-scope [data-tb-tier="10"] .app-counter-block { display: none; } /* ── TIER 3: Filter+Gruppierung Icon-only (Labels ausblenden) ──────── */ .app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"] span, .app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge), .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-filter"] span:not(.app-filter-trigger-badge) { display: none; } .app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"], .app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-filter"], .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-filter"] { min-width: 36px; width: 36px; padding: 0; justify-content: center; position: relative; } /* Chevron am Gruppieren-Button ausblenden (zweites img) wenn Icon-only */ .app-scope [data-tb-tier="3"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child, .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-grouping"] img:last-child { display: none; } .app-scope [data-tb-tier="3"] .app-filter-trigger-badge, .app-scope [data-tb-tier="4"] .app-filter-trigger-badge, .app-scope [data-tb-tier="5"] .app-filter-trigger-badge, .app-scope [data-tb-tier="6"] .app-filter-trigger-badge, .app-scope [data-tb-tier="7"] .app-filter-trigger-badge, .app-scope [data-tb-tier="8"] .app-filter-trigger-badge, .app-scope [data-tb-tier="9"] .app-filter-trigger-badge, .app-scope [data-tb-tier="10"] .app-filter-trigger-badge { position: absolute; top: -4px; right: -4px; } /* TIER 3+: Mein-Tag Section-Pills (Projekt/Firma/Kunde) auf Icon-only — gleiche Mechanik wie Filter-Trigger, integriert ins bestehende Tier-System statt eigene Mobile-Hacks. Pills haben jeweils ein Label- und ein Chevron- als zweites Img-Kind, plus das Icon- als erstes Kind. Wir verstecken Label + Chevron, halten den Button auf 36×36 px (.app-tb-btn ist eh 36px hoch). `has-value`-Background bleibt sichtbar als Aktiv-Indicator. Paket NAV-2.4 Polish 2026-05-01. */ .app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill, .app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill, .app-scope [data-tb-tier="3"] .mt-vk-firma-pill, .app-scope [data-tb-tier="4"] .mt-vk-firma-pill, .app-scope [data-tb-tier="5"] .mt-vk-firma-pill, .app-scope [data-tb-tier="6"] .mt-vk-firma-pill, .app-scope [data-tb-tier="7"] .mt-vk-firma-pill, .app-scope [data-tb-tier="8"] .mt-vk-firma-pill, .app-scope [data-tb-tier="9"] .mt-vk-firma-pill, .app-scope [data-tb-tier="10"] .mt-vk-firma-pill { min-width: 36px; width: 36px; max-width: 36px; padding: 0; justify-content: center; } /* Label + Chevron ausblenden — erstes (Icon) bleibt sichtbar. */ .app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill-label, .app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill-label, .app-scope [data-tb-tier="3"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="4"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="5"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="6"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="7"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="8"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="9"] .mt-vk-firma-pill-label, .app-scope [data-tb-tier="10"] .mt-vk-firma-pill-label { display: none; } .app-scope [data-tb-tier="3"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="4"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="5"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="6"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="7"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="8"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="9"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="10"] .mt-aufg-projekt-pill > img:last-child, .app-scope [data-tb-tier="3"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="4"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="5"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="6"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="7"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="8"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="9"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="10"] .mt-anfr-kunde-pill > img:last-child, .app-scope [data-tb-tier="3"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="4"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="5"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="6"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="7"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="8"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="9"] .mt-vk-firma-pill > img:last-child, .app-scope [data-tb-tier="10"] .mt-vk-firma-pill > img:last-child { display: none; } /* ── TIER 3: Sort-Label aus (Button wird icon-only) ───────────────────── Spiegelt die Filter-Icon-only-Stufe: der Sort-Button gibt zuerst sein Label ab (schmaler) und überlebt so eine Tier-Stufe länger, bevor ihn Tier 4 ganz versteckt. Ohne diese Rung springt ein `sort.label`-Button direkt von „breit mit Label" auf „weg" — er kollabiert früher als der icon-only-Sort es täte. */ .app-scope [data-tb-tier="3"] .app-tb-sort-label, .app-scope [data-tb-tier="4"] .app-tb-sort-label, .app-scope [data-tb-tier="5"] .app-tb-sort-label, .app-scope [data-tb-tier="6"] .app-tb-sort-label, .app-scope [data-tb-tier="7"] .app-tb-sort-label, .app-scope [data-tb-tier="8"] .app-tb-sort-label, .app-scope [data-tb-tier="9"] .app-tb-sort-label, .app-scope [data-tb-tier="10"] .app-tb-sort-label { display: none; } /* ── TIER 4: Sort-Button aus ────────────────────────────────────────── */ .app-scope [data-tb-tier="4"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="5"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="6"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="7"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="8"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="9"] .app-tb-btn[data-toolbar-action="open-sort"], .app-scope [data-tb-tier="10"] .app-tb-btn[data-toolbar-action="open-sort"] { display: none; } /* ── TIER 5: Board-Switcher "BOARD"-Praefix aus + kompaktere Width ──── */ .app-scope [data-tb-tier="5"] .app-board-switcher-label, .app-scope [data-tb-tier="6"] .app-board-switcher-label, .app-scope [data-tb-tier="7"] .app-board-switcher-label, .app-scope [data-tb-tier="8"] .app-board-switcher-label, .app-scope [data-tb-tier="9"] .app-board-switcher-label, .app-scope [data-tb-tier="10"] .app-board-switcher-label { display: none; } /* :not(.app-month-switcher-trigger): der Monats-Trigger erbt die Switcher- Optik, behaelt aber bewusst Content-Breite (width:auto, kein Ellipsis) — die fixen Tier-Breiten liessen laengere Monatsnamen auf den Next-Chevron ragen (Spezifitaet 0,3,0 schlug die width:auto-Regel mit 0,2,0). */ .app-scope [data-tb-tier="5"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 220px; } .app-scope [data-tb-tier="6"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 200px; } .app-scope [data-tb-tier="7"] .app-board-switcher:not(.app-month-switcher-trigger) { width: 180px; } /* ── TIER 6: Primaere CTA Icon-only ─────────────────────────────────── */ .app-scope [data-tb-tier="6"] .app-kanban-newtask-btn span, .app-scope [data-tb-tier="7"] .app-kanban-newtask-btn span, .app-scope [data-tb-tier="8"] .app-kanban-newtask-btn span, .app-scope [data-tb-tier="9"] .app-kanban-newtask-btn span, .app-scope [data-tb-tier="10"] .app-kanban-newtask-btn span, .app-scope [data-tb-tier="6"] .app-cta-btn span, .app-scope [data-tb-tier="7"] .app-cta-btn span, .app-scope [data-tb-tier="8"] .app-cta-btn span, .app-scope [data-tb-tier="9"] .app-cta-btn span, .app-scope [data-tb-tier="10"] .app-cta-btn span { display: none; } .app-scope [data-tb-tier="6"] .app-kanban-newtask-btn, .app-scope [data-tb-tier="7"] .app-kanban-newtask-btn, .app-scope [data-tb-tier="8"] .app-kanban-newtask-btn, .app-scope [data-tb-tier="9"] .app-kanban-newtask-btn, .app-scope [data-tb-tier="10"] .app-kanban-newtask-btn, .app-scope [data-tb-tier="6"] .app-cta-btn, .app-scope [data-tb-tier="7"] .app-cta-btn, .app-scope [data-tb-tier="8"] .app-cta-btn, .app-scope [data-tb-tier="9"] .app-cta-btn, .app-scope [data-tb-tier="10"] .app-cta-btn { width: 36px; padding: 0; justify-content: center; } /* Mobile-Hard-Override <600px: Primary-Button IMMER Icon-only — egal welches Tier der Responsive-Algorithmus berechnet hat. Auf 320..599px ist kein Platz fuer ein Label, und manche Toolbars (z.B. Projekte) erreichen das benoetigte Tier 6+ nicht zuverlaessig wenn der ViewSwitcher den Platzcheck verfaelscht. Deckt alle Tabs ab — kein Section-spezifischer Workaround mehr noetig. */ @media (max-width: 599px) { .app-scope .app-toolbar .app-kanban-newtask-btn span, .app-scope .app-toolbar .app-cta-btn span { display: none; } .app-scope .app-toolbar .app-kanban-newtask-btn, .app-scope .app-toolbar .app-cta-btn { width: 36px; padding: 0; justify-content: center; } } /* ── TIER 5+: Kanban-V2 Custom-Slot-Buttons (Neue Phase, Projekt bearbeiten) ── Beide sitzen als .app-tb-btn[data-kanban-new-phase]/[data-kanban-projekt-edit] im rightSlot. Im Mobile-Modus Label ausblenden + auf Icon-only schrumpfen, damit die Toolbar-Reihe sauber zusammenbricht. */ .app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase] span, .app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-projekt-edit] span, .app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-projekt-edit] span, .app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-projekt-edit] span, .app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-projekt-edit] span, .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit] span, .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] span { display: none; } .app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="5"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="6"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="7"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="8"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] { width: 36px; min-width: 36px; padding: 0; justify-content: center; } /* Ab Tier 9: Beide Custom-Buttons ganz ausblenden — bei sehr schmalen Viewports bleibt dann nur noch der CTA "+". */ .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-new-phase], .app-scope [data-tb-tier="9"] .app-tb-btn[data-kanban-projekt-edit], .app-scope [data-tb-tier="10"] .app-tb-btn[data-kanban-projekt-edit] { display: none; } /* ── TIER 7: State-Tabs kompakter ───────────────────────────────────── */ .app-scope [data-tb-tier="7"] .app-segmented-btn, .app-scope [data-tb-tier="8"] .app-segmented-btn, .app-scope [data-tb-tier="9"] .app-segmented-btn, .app-scope [data-tb-tier="10"] .app-segmented-btn { padding: 3px var(--space-2); font-size: 11.5px; } /* ── TIER 8: Board-Switcher Icon-only ───────────────────────────────── */ .app-scope [data-tb-tier="8"] .app-board-switcher-title, .app-scope [data-tb-tier="9"] .app-board-switcher-title, .app-scope [data-tb-tier="10"] .app-board-switcher-title { display: none; } .app-scope [data-tb-tier="8"] .app-board-switcher, .app-scope [data-tb-tier="9"] .app-board-switcher, .app-scope [data-tb-tier="10"] .app-board-switcher { width: 36px; min-width: 36px; max-width: 36px; padding: 0; justify-content: center; } .app-scope [data-tb-tier="8"] .app-board-switcher > img:last-child, .app-scope [data-tb-tier="9"] .app-board-switcher > img:last-child, .app-scope [data-tb-tier="10"] .app-board-switcher > img:last-child { display: none; } .app-scope [data-tb-tier="8"] .app-board-switcher::before, .app-scope [data-tb-tier="9"] .app-board-switcher::before, .app-scope [data-tb-tier="10"] .app-board-switcher::before { content: ''; width: 16px; height: 16px; background: url('/assets/icons/fluent/board_24_regular.svg') no-repeat center / contain; opacity: 0.7; } /* Month-Switcher-Trigger erbt die .app-board-switcher-Klasse (fuer das gleiche Grund-Styling), bekommt aber im Icon-Only-Modus ein Kalender-Icon statt Board (sonst gleiches Symbol wie der Board-Switcher). */ .app-scope [data-tb-tier="8"] .app-month-switcher-trigger::before, .app-scope [data-tb-tier="9"] .app-month-switcher-trigger::before, .app-scope [data-tb-tier="10"] .app-month-switcher-trigger::before { background-image: url('/assets/icons/fluent/calendar_ltr_24_regular.svg'); } /* Prev/Next-Chevron-Buttons neben dem Monats-Trigger: auf engen Viewports ausblenden (Tier 8+). Mobil ist der Popover die primaere Interaktion — die zwei kleinen Chevrons verbrauchen nur Platz und sind fuer Touch-Target ohnehin zu schmal. */ .app-scope [data-tb-tier="8"] [data-app-month-nav], .app-scope [data-tb-tier="9"] [data-app-month-nav], .app-scope [data-tb-tier="10"] [data-app-month-nav] { display: none; } /* ── TIER 9: State-Segmented klappt zum kompakten Status-Dropdown ein ── Frueher wurde das Segmented hier ersatzlos versteckt (Status-Filter weg). Jetzt uebernimmt der kollabierte Zwilling (.app-segmented-collapsed) — der Status bleibt per Dropdown bedienbar und die Suche gewinnt Platz. */ .app-scope [data-tb-tier="9"] .app-segmented, .app-scope [data-tb-tier="10"] .app-segmented { display: none; } .app-scope [data-tb-tier="9"] .app-segmented-wrap .app-segmented-collapsed, .app-scope [data-tb-tier="10"] .app-segmented-wrap .app-segmented-collapsed { display: inline-flex; } /* Gruppierung bleibt bis Tier 10 als Icon-Button sichtbar — sie ist Kern-Funktionalitaet und darf nicht in schmalen Viewports verschwinden. Ab Tier 10 kann der Nutzer bei Bedarf nachgelegen. */ /* Suche fuellt auf allen Tiers den verbleibenden Platz im LEFT-Slot (bis zur globalen max-width: 600px aus der Basis-Regel). Sie wird NICHT per Tier kuenstlich gedeckelt — erst Tier 10 schrumpft als allerletzte Massnahme die flex-basis. Warum die alten Tier-7/8/9-Caps (max-width 300/260/240) raus mussten: Die Toolbar-Messung (toolbar-responsive.js) rechnet die Suche IMMER mit ihrer flex-basis (440px), nie mit der gerenderten max-width. Eine Tier-Deckelung der Suche reduziert den gemessenen Platzbedarf also gar nicht — der Tier-Algorithmus kann "Suche schmaler" nie als Entlastung nutzen und klappt stattdessen Pillen/Segmented weg. Auf Tabs mit ZWEI breiten Segmented-Gruppen (Projekte: Herkunft+Status, Vertrieb: Phase+Bereich) landete die Toolbar dadurch in Tier 7-9 und kappte die Suche auf 240-300px, OBWOHL im LEFT-Slot reichlich Platz frei blieb — die Suche war dort sichtbar kleiner als auf Tabs mit nur einer/keiner Segmented-Gruppe. Ohne Cap fuellt die Suche den freien Platz und ist ueber alle Tabs gleich breit. Rausdruecken kann sie nichts: Filter/Sort/CTA sind flex-shrink:0, die wachsende Suche bekommt nur den Rest. */ .app-scope [data-tb-tier="9"] .app-search-input { min-width: 180px; } .app-scope [data-tb-tier="10"] .app-search-input { max-width: 240px; min-width: 120px; /* letzte Stufe: hart shrinken, damit Filter/Sort/CTA nie rausfliegen */ flex: 1 1 120px; } /* ══════════════════════════════════════════════════════════════════ BESPOKE SLOT-CONTROLS IN DIE KOLLAPS-KETTE (SSOT) Elemente, die Sektionen selbst in Toolbar-Slots haengen (Firma-Drill-Chip, View-Switcher, …), sind per Default `flex:0 0 auto`/`white-space:nowrap` und geben NIE Breite ab. Der Tier-Algorithmus konnte sie nicht schrumpfen und opferte stattdessen zuerst den Counter (Tier 1–2) und danach sogar die funktionalen Section-Filter (Segmented, Tier 9). Vorbild fuer die saubere Integration ist `.org-tool-group` (mb-organigramm.css). Die folgenden Regeln binden die geteilten bespoke-Controls in dieselbe Kollaps-Kette ein, damit sie nachgeben, BEVOR Counter/Filter sterben. ══════════════════════════════════════════════════════════════════ */ /* Firma-Drill-Chip — geteilte Klasse (gesetzt in fi-drill.js + fk-toolbar.js). Basis: Breite deckeln + Firmenname per Ellipsis kuerzen (statt unbegrenzt zu wachsen). Der Chip ist inline-flex mit [Name-][✕-]; nur der Name kuerzt, das ✕ bleibt immer sichtbar (Filter jederzeit entfernbar). */ .app-scope .app-tb-firmachip { min-width: 0; max-width: 240px; } .app-scope .app-tb-firmachip > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* Tier 3+: Chip deutlich schmaler — der Firmenname darf hart kuerzen, damit die Section-Filter (Segmented) und der Filter/Sort-Cluster erhalten bleiben. */ .app-scope [data-tb-tier="3"] .app-tb-firmachip, .app-scope [data-tb-tier="4"] .app-tb-firmachip, .app-scope [data-tb-tier="5"] .app-tb-firmachip { max-width: 150px; } /* Tier 6+: Chip auf Minimalbreite — nur noch ein angerissener Name + ✕. So bleibt der Entfernen-Affordance erhalten, der Chip frisst aber kaum noch Platz. */ .app-scope [data-tb-tier="6"] .app-tb-firmachip, .app-scope [data-tb-tier="7"] .app-tb-firmachip, .app-scope [data-tb-tier="8"] .app-tb-firmachip, .app-scope [data-tb-tier="9"] .app-tb-firmachip, .app-scope [data-tb-tier="10"] .app-tb-firmachip { max-width: 84px; } /* Permanenter Toolbar-View-Switcher (Wissen Source-Switcher, Vertrieb-Potenziale Facette), markiert via `.view-switcher--toolbar` an der Injektionsstelle. Der Marker haelt diese Regel bewusst von den SectionHeader-View-Switchern fern, die auf <600px in den Toolbar-Left-Slot wandern — die sollen dort NICHT kuerzen. Ab Tier 1 kompakter (Padding/Font), ab Tier 6 Labels per Ellipsis gedeckelt. */ .app-scope [data-tb-tier] .view-switcher--toolbar .anfr-view-switcher-btn { padding-left: var(--space-2); padding-right: var(--space-2); font-size: 11.5px; } .app-scope [data-tb-tier="6"] .view-switcher--toolbar .anfr-view-switcher-btn span, .app-scope [data-tb-tier="7"] .view-switcher--toolbar .anfr-view-switcher-btn span, .app-scope [data-tb-tier="8"] .view-switcher--toolbar .anfr-view-switcher-btn span, .app-scope [data-tb-tier="9"] .view-switcher--toolbar .anfr-view-switcher-btn span, .app-scope [data-tb-tier="10"] .view-switcher--toolbar .anfr-view-switcher-btn span { display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } /* Paket CARD-V2 Cleanup Die kompletten .app-kanban-card-* Regeln (Hover-Actions, Phase-Pill, Footer-Layout, Sub-Badges, Progress- Strip) wurden nach web/styles/card.css migriert. Sie leben jetzt als generische .card-v2-* / .card-v2--compact Regeln und sind damit auch fuer andere Sections (Projekte, Anfragen, Wissen, Kontingente, Startseite) nutzbar. Siehe card.css ab "compact Sub-Elemente". */