/* 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; } /* ── MESS-RUHE: waehrend ToolbarResponsive misst, stehen alle Transitions still ── `_measure` setzt `data-tb-messung` fuer die Dauer seines synchronen Laufs. Ohne diese Regel liest die Kette ZWISCHENWERTE: `.btn` traegt `transition: all 140ms`, und innerhalb eines synchronen JS-Blocks schreitet die Dokument-Zeit nicht voran — jede Messung der Eskalations-/Rueckfeder-Schleife sieht das Padding dort eingefroren, wo die gerade laufende Animation stand (ein Button, der von Tier 6 zurueckkommt, misst 36px statt ~73px). Die Kette federt damit zu weit zurueck und bleibt auf einem Tier stehen, den eine spaetere Messung widerlegt — gemessen 2026-08-02 auf /firmen (gerendert Tier 4, erzwungene Messung 6). Ausgesetzte Transitions springen auf ihren Zielwert; da der Block synchron ist, malt der Browser den Zustand nie — sichtbar ist nur, dass eine just laufende Animation am Ende des Mess-Laufs auf ihrem Ziel steht. */ .app-scope [data-tb-messung], .app-scope [data-tb-messung] * { transition: none !important; } /* 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; /* In schmalen Feldern (Mein-Tag-Mitte auf ihrem Raster-Minimum, Boden-Tiers) wird ein langer Placeholder sonst MITTEN IM WORT abgeschnitten („Suche nach Tite") — die Ellipse gilt fuer Wert UND Placeholder; der Mobile-Kurztext aus search-input.js greift erst unter 600px Viewport, nicht bei einem schmalen Feld in breitem Fenster. */ text-overflow: ellipsis; } .app-scope .app-search-input-field:focus { outline: none; } .app-scope .app-search-input-field::placeholder { color: var(--lod-gray-500); text-overflow: ellipsis; } .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); } /* Icon-only Toolbar-Knopf: QUADRATISCH und zentriert. `.app-tb-btn` ist auf Text mit Icon davor gebaut (`gap` + waagerechtes Padding) — ohne Beschriftung sass das Icon sichtbar links der Mitte. Feste Breite statt Padding, damit das Zeichen unabhaengig von seiner eigenen Groesse mittig steht (36px = Toolbar-Hoehe, also ein Quadrat). */ .app-scope .app-tb-btn-icon { width: 36px; padding: 0; justify-content: center; gap: 0; } /* 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; } /* counter: { anchor: 'end' } (PageToolbar-Option): Counter ans ENDE des rechtsbuendigen RIGHT-Clusters verankern — sein rechter Rand klebt dann am Container-Padding, unabhaengig davon, welche Aktions-Buttons die aktive View zeigt. Fuer Sections, die ihre RIGHT-Buttons je View togglen (Firmen: „Auswaehlen"/„Ansichten" nur in Firmen/Kontakte) — ohne Anker springt der Counter beim View-Wechsel um deren Breite. Vorher lag genau diese Regel als `order:9` im SECTION-CSS (firmen.css) gegen den SSOT. */ .app-scope .app-toolbar-right [data-counter-anchor="end"] { order: 9; } .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: FLAECHE UND ICON GEHOEREN ZUSAMMEN — und genau das war hier auseinandergefallen. Die Zeile darunter nimmt das Invert zurueck, weil die Variante „hellen Hintergrund" hat; die helle Flaeche stand aber NUR in `button.css` unter `.app-scope button.app-cta-btn.btn-outline:not(.btn)`. Der Page-Header liegt NICHT im `.app-scope`-Baum (gemessen: `closest('.app-scope')` ist null) — dort blieb also das Dunkelblau der Basis-Regel stehen, waehrend das Icon seinen dunkelblauen Default-Filter behielt: DUNKEL AUF DUNKEL, und CSS wirft nie. Betroffen war jeder Outline-CTA im Header (gemessen 2026-07-30: 4 Knoepfe, Flaeche rgb(26,75,118) bei Icon-Filter `none`; der Text blieb weiss und damit lesbar, weshalb nur die Icons auffielen). Die Flaeche steht deshalb jetzt HIER, im selben `:where(.app-scope, .page-header)`- Geltungsbereich wie das Icon-Verhalten — Werte gespiegelt aus button.css. Damit ist die Praemisse der Icon-Regel wieder wahr, statt nur behauptet. */ :where(.app-scope, .page-header) .app-cta-btn.btn-outline { background: var(--card-bg, #fff); color: var(--lod-darkblue-900); border: 1px solid var(--color-border); } :where(.app-scope, .page-header) .app-cta-btn.btn-outline:hover { background: var(--bg-secondary, #f6f7f9); border-color: var(--color-border-hover); color: var(--lod-darkblue-900); } /* Icon im Original — die Flaeche darueber ist hell (sonst weiss-auf-weiss, unsichtbar). Nur gefuellte/primary-Buttons brauchen das Invert. */ :where(.app-scope, .page-header) .app-cta-btn.btn-outline img, :where(.app-scope, .page-header) .app-cta-btn.btn-outline:hover 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); } /* ── Split-CTA (PageToolbar.buildPrimaryButton({ menu })) ────────────────── Hauptaktion + Chevron-Haelfte als EIN Bedienelement: der Chevron klont die Klassen des Hauptknopfs (gleicher Radius/Fluss per Konstruktion, siehe page-toolbar.js), hier stehen nur Naht und Masse. Geltungsbereich wie die CTA-Basis (`:where(.app-scope, .page-header)`): der Split sitzt im Page-Header und wandert auf <600px als Einheit in die Toolbar. Ersetzt die frueheren bespoke `.abw-cta`-Regeln der Abwesenheiten-Seite. */ :where(.app-scope, .page-header) .app-cta-split { display: inline-flex; align-items: center; flex-shrink: 0; } :where(.app-scope, .page-header) .app-cta-split > .app-cta-btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } :where(.app-scope, .page-header) .app-cta-split .app-cta-split-mehr { flex: 0 0 auto; width: 30px; min-width: 30px; padding: 0; justify-content: center; border-top-left-radius: 0; border-bottom-left-radius: 0; /* Naht als Innenlinie statt Border: eine Border veraenderte die Hoehe. */ box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.28); } :where(.app-scope, .page-header) .app-cta-split .app-cta-split-mehr img { width: 14px; height: 14px; } /* ══════════════════════════════════════════════════════════════════════ * 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; } /* ── Zweiter Auslöser für dieselbe Icon-only-CTA: Page-Header unter Platzdruck ── Der Primary-Button kann statt in der Toolbar auch im Page-Header sitzen (LoD.SectionHeader). Dort gibt es keine Tiers — die gemessene Kollaps-Kette (page-header-responsive.js, Stufe 4) setzt `.is-primary-iconly` am Header, wenn selbst nach Titel- und Pill-Kollaps noch Pixel fehlen und die Sub-Tabs sonst auf einen unbrauchbaren Streifen zusammenfielen. Geometrie bewusst identisch zum Tier-6-Block direkt darüber — beide Wege müssen gleich aussehen; deshalb stehen sie hier zusammen und nicht in layout.css. Den Accessible Name des dann iconlosen Buttons stellt die Kollaps-Kette sicher (aria-label aus dem Label-Text). */ .page-header.is-primary-iconly .page-header-primary .app-kanban-newtask-btn span, .page-header.is-primary-iconly .page-header-primary .app-cta-btn span { display: none; } .page-header.is-primary-iconly .page-header-primary .app-kanban-newtask-btn, .page-header.is-primary-iconly .page-header-primary .app-cta-btn { width: 36px; padding: 0; justify-content: center; } /* ── Kontext-/Board-Switcher im Page-Header darf unter Platzdruck schrumpfen ── Der Switcher sitzt in manchen Sections (Kanban, Mein Bereich, Verwaltung) ANSTELLE von Sub-Tab-Pills im Header-Slot — die Pill-Stufe der Kollaps-Kette greift dort also nicht. Kürzen kann er längst selbst: `.app-board-switcher-title` ist nowrap + overflow:hidden + text-overflow:ellipsis. Nur `width:300px` + `flex-shrink:0` (oben) verhinderten es, wodurch er im Header stattdessen HART abgeschnitten wurde (gemessen Kanban@640: 133 von 312px sichtbar). `min-width` ist der Boden, unter dem der Titel nichts mehr aussagt — darunter scrollt der Slot wieder (mit Fade-Kante), statt den Switcher zum Streifen zu quetschen. Im Schrumpf-Zustand weicht zusätzlich die statische Kaption („BOARD"/„BEREICH"), damit der Boden dem NAMEN zugutekommt statt einem Dekowort — ohne diesen Kniff blieben ~30px für den Titel. **120px, nicht mehr:** ein 150px-Boden war im engsten gemessenen Slot (133px bei 640px) 29px zu breit — der Slot schnitt dann das rechte Switcher-Ende ab, und dort sitzt der Chevron. Ergebnis war ein Auslöser, der nicht mehr wie ein Dropdown aussah (per Screenshot gesehen, nicht errechnet). Bei 120px passt der Switcher komplett, Chevron inklusive; der Titel kürzt dafür per Ellipsis. Bewusst NUR im Page-Header unter gemessenem Druck: in der Section-Toolbar ist `flex-shrink:0` tragend für die Tier-Kollaps-Kette (check:toolbar-collapse). */ .page-header.is-subtabs-shrink .page-header-subtabs .app-board-switcher { flex: 0 1 300px; width: auto; min-width: 120px; } .page-header.is-subtabs-shrink .page-header-subtabs .app-board-switcher-label { display: none; } /* 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. */ /* Bindet nur in FLEXIBLEN Shells (mt-app-shells: Suche `flex: 1 1 auto`, min-width 176 → hier auf 180 angehoben). In der Standard-Toolbar ist die Suche `flex: 0 0 440px` (shrink 0) — eine min-width an einem nicht schrumpfbaren Element hat dort keine Wirkung. */ .app-scope [data-tb-tier="9"] .app-search-input { min-width: 180px; } /* ★★ TIER 10 IST DER BODEN DER KETTE — UND EIN BODEN DARF NICHT NACH UNTEN DRUECKEN. Hier stand `min-width: 120px`, und genau das war die Ursache der gemeldeten Ueberlappung „Suche und Offen liegen uebereinander" (Mein Tag, Mitte-Spalte auf ihrem Raster-Minimum): reicht Tier 10 NICHT aus, hat die Kette keine Stufe mehr — das Defizit landet dann beim einzigen schrumpfbaren Slot. In den Mein-Tag-Shells ist das der LEFT-Slot (`flex: 1 1 auto`, mt-app-shells.css), er hat `min-width: 0` und schrumpft unter seinen Inhalt; die Suche mit HARTER min-width kann nicht nachgeben und ragt heraus. Slots klippen einander nicht, CENTER wird spaeter gemalt → die Status-Pille liegt ueber der Suche. Im Browser gemessen 2026-07-31 (Viewport 1400–1540px): Bedarf 378px bei 370px Platz, LEFT-Slot 112px, Suche 120px → 8px Austritt, Spalt zur „Offen"-Auswahl 0px statt 8px, Suchfeld innen 74px („Suche na" bricht mitten im Wort ab). ★ Der Fehlermodus ist stumm: CSS wirft nie, JS laeuft fehlerfrei, kein Test wird rot — aufgefallen ist es per Auge. Deshalb `min-width: 0` bei GLEICHBLEIBENDER `flex-basis: 120px`. Beides ist noetig und keine Doppelung: die Basis ist das, was die Tier-Engine als Bedarf SIEHT (`_intrinsicWidth` rechnet ein grow-Element ueber `max(min-width, flex-basis)`) — ohne sie faellt die Messung auf die gerenderte Breite zurueck und unterschaetzt den Suchbedarf, die Kette eskaliert dann zu spaet. Die min-width ist das, was die Suche am Boden noch NACHGEBEN laesst, statt in den Nachbarn zu ragen. Gemessen danach: Bedarf 370 bei 370px, kein Austritt, Spalt wieder 8px. */ .app-scope [data-tb-tier="10"] .app-search-input { max-width: 240px; min-width: 0; flex: 1 1 120px; } /* ★ SICHERHEITSNETZ, damit dieselbe Klasse nie wieder als Ueberlappung endet: ist die Kette erschoepft und fehlen trotzdem Pixel, klippt der LEFT-Slot seinen Inhalt statt ihn in den Nachbar-Slot malen zu lassen. Nur auf Tier 10 (dem Boden) und nur >=600px — unter 600px gilt der Mobile-Block weiter oben, der denselben Slot bewusst SCROLLBAR macht (dort wandert der Section-ViewSwitcher hinein, und Kuerzen waere dort Informationsverlust ohne Rueckweg). Diese Regel ist bewusst KEIN Ersatz fuer die nachgebende Suche darueber: klippen sieht man (angeschnittene Rundung), nachgeben nicht. Sie ist die letzte Zusicherung, nicht der Fix. ★★ `flex-shrink: 1` IST DIE BEDINGUNG, UNTER DER DIE NACHGEBENDE SUCHE UEBERHAUPT GREIFT. Der Stabilitaets-SSOT setzt LEFT auf `flex: 0 0 auto` — ein Slot, der nie schrumpft, bemisst sich an seiner Max-Content-Breite, und die rechnet die Suche mit ihrem INHALT (Eingabefeld ~217px), nicht mit ihrer flex-basis 120. Die Suche kommt damit nie unter Druck, ihr `min-width: 0` ist ein toter Buchstabe, und das Defizit schiebt den RIGHT-Slot aus der Toolbar — dessen Knoepfe das `overflow: hidden` der Toolbar dann KLIPPT: bedienbare Aktionen sind unerreichbar, und nichts wirft. Im Browser gemessen 2026-08-02 (/firmen @640px, Tier 10): LEFT 417px rendered gegen 320px intrinsisch, zwei 36px-Buttons +9/+53px jenseits der Innenkante — waehrend die Engine korrekt „Bedarf 504 auf 548" meldete, weil ihre Messung die flex-basis der Suche ansetzt (genau die dokumentierte Absicht der Tier-10-Regel darueber). Mit dem Shrink loest das Layout die Zusage ein: LEFT 364px, Suche 164px, kein Austritt. In den Mein-Tag-Shells ist LEFT ohnehin `flex: 1 1 auto` (mt-app-shells.css) — deshalb trat der Fall dort nie auf; dies zieht die Standard-Toolbar nach. */ @media (min-width: 600px) { .app-scope [data-tb-tier="10"] .app-toolbar-left { overflow-x: hidden; flex-shrink: 1; } } /* ── TIER 10: Status-Auswahl ikonisch ──────────────────────────────────── Der kollabierte Status-Trigger („Offen ⌄") kostet 74px — bei 370px Gesamtplatz ist das ein Fuenftel der Toolbar fuer EIN Wort. Auf dem Boden der Kette weicht deshalb auch er auf 36×36, und die Suche gewinnt die Differenz (gemessen: Bedarf 340 statt 378, Suchbreite 150 statt 120, Feld innen 104 statt 74px). ★ Der WERT darf dabei nicht verloren gehen — er ist die Antwort auf „wonach ist gerade gefiltert". Er reist weiter in `title` + `aria-label` („Status-Filter: Offen", gesetzt in page-toolbar.js `_updateSegmentedVisual`), und die Flaeche bleibt darkblue-getoent, also als AKTIVER Filter erkennbar. ★ Der Chevron wird NICHT einzeln geopfert (waere mit 16px billiger): ein Auslöser ohne Chevron sieht nicht mehr wie ein Dropdown aus — dieselbe Lehre wie beim Board-Switcher-Boden im Page-Header. Stattdessen traegt das ::before das Symbol, genau wie beim Board-Switcher ab Tier 8. */ .app-scope [data-tb-tier="10"] .app-segmented-collapsed-label, .app-scope [data-tb-tier="10"] .app-segmented-collapsed > img { display: none; } .app-scope [data-tb-tier="10"] .app-segmented-wrap .app-segmented-collapsed { width: 36px; min-width: 36px; padding: 0; justify-content: center; } .app-scope [data-tb-tier="10"] .app-segmented-collapsed::before { content: ''; width: 16px; height: 16px; background: url('/assets/icons/fluent/flag_24_regular.svg') no-repeat center / contain; opacity: 0.75; } /* ══════════════════════════════════════════════════════════════════ 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). Der Chip ist inline-flex mit [Name-][✕-]; nur der Name kuerzt, das ✕ bleibt immer sichtbar (Filter jederzeit entfernbar). ★★ HIER LIEGT AUCH DIE OPTIK — vorher trug diese Klasse nur die Kollaps-Breiten, waehrend die Chip-Optik in FUENF Sektions-Stylesheets zeichengleich abgeschrieben stand (`anfr-` · `anfrko-` · `pj-` · `kont-` · `fk-`, je 13 Deklarationen + Hover + Focus + ✕). Beide Bauer haengen ausnahmslos `app-tb-firmachip` an, es gab also nie einen Chip ohne diese Klasse — die fuenf Kopien waren reine Redundanz. Sie liefen trotzdem auseinander (`--fs-badge` vs. `11px` am ✕ — wertgleich, aber zwei Quellen; dazu redundante Fallbacks `var(--radius-pill, 999px)`), und wer einen sechsten Chip baute, bekam einen unformatierten Button, ohne dass etwas einen Fehler wirft. ★ `.app-scope`-PRAEFIX IST PFLICHT: der Chip ist ein echter `