*, *::before, *::after { box-sizing: border-box; } /* Groessen mit dem Schluesselwort `auto` animierbar machen (Aufgabe BAL-080). Ohne diese Angabe wird zwischen `auto` und einem Pixelwert nicht interpoliert: Die Breite eines Dialogs lief beim Vollbildwechsel weich, die Hoehe sprang. Browser ohne Unterstuetzung verhalten sich wie bisher - die Hoehe springt dort, alles andere bleibt unberuehrt. */ :root { interpolate-size: allow-keywords; } html, body, .app_mount { height: 100%; min-height: 100%; margin: 0; } body { background: var(--surface-soft); color: var(--fg-1); font-family: var(--font-sans); font-weight: var(--w-light); font-size: 15px; line-height: var(--lh-normal); overflow: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } button, input, textarea, select { font: inherit; color: inherit; } /* Kein Hineinzoomen beim Fokus unter iOS (BAL-219, BAL-220). Safari vergroessert die Seite, sobald ein Feld mit weniger als 16 px Schrift den Fokus bekommt, und nimmt das nicht zurueck. Deshalb auf Touch-Geraeten jedes Texteingabefeld mit mindestens 16 px - an `pointer: coarse` statt an der Breite, damit auch ein iPad erfasst ist und der Desktop bleibt, wie er ist. `:is()` traegt die Spezifitaet seines staerksten Arguments (0,9,1) auf alle drei Feldarten; damit schlaegt die Regel die Klassenregeln der Komponenten (hoechstens 0,3,0), ohne `!important`. Kaestchen, Schieber, Datei- und Knopffelder haben keine Schrift, die zaehlt, und bleiben aussen vor. NICHT `maximum-scale=1` im Viewport: Das sperrt auf Android auch das Zoomen mit zwei Fingern, und wer vergroessern muss, koennte es nicht mehr. */ @media (pointer: coarse) { :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]), textarea, select) { font-size: max(16px, 1em); } } button { border: 0; background: transparent; cursor: pointer; } a { color: var(--q-highlight-2); text-decoration: none; } /* Fokusring fuer Elemente, denen der Referenzentwurf KEINEN eigenen gibt. Urspruenglich Befunde A11Y-004 und A11Y-005, Aufgabe BAL-067; berichtigt mit BAL-095. GEMESSEN auf dem Dashboard: Von 47 fokussierbaren Elementen haetten ohne diese Regel 46 gar keine Kennzeichnung - und alle 46 sind Schaltflaechen, Zeilen, Kacheln oder Navigationseintraege. Fuer die ist der Ring noetig, der Entwurf sieht dort nichts vor. EINGABEFELDER UND TABELLENZEILEN SIND AUSGENOMMEN. Eingabefelder kennzeichnet der Entwurf durchgaengig anders: border-color auf --q-highlight-3, bei den randlosen Suchfeldern an der Huelle samt weissem Grund. Diese Regeln stehen alle noch in dieser Datei. Der zusaetzliche Ring legte sich darueber, sodass im Fokus ZWEI Ringe in ZWEI Farben zu sehen waren - teal aus dem Entwurf, dunkelblau von hier. Beanstandet von der Auftraggeberin und behoben. Tabellenzeilen tragen seit BAL-096 eine Flaeche statt einer Umrandung - eine Zeile ist display: table-row und bildet kein eigenes Malrechteck, weshalb von der Umrandung nur Striche uebrig blieben. Siehe tr:focus-visible unten. DER BEFUND A11Y-004 WAR FALSCH: Er stellte fest, das globale Suchfeld sei im Fokus "in JEDER Eigenschaft identisch" zum Ruhezustand. Gemessen wurde aber das EINGABEFELD, waehrend der Entwurf die HUELLE kennzeichnet. Nachgemessen an der Huelle: Rahmen wechselt auf rgb(21,165,181), Grund von rgb(241,242,242) auf Weiss. Eine Kennzeichnung war immer da. --q-highlight-2 deckend ergibt 13,36 : 1 gegen Weiss. Der Versatz von 2px setzt den Ring neben das Element, damit er auch auf dunklen Flaechen (etwa dem aktiven Segment einer Pille) auf hellem Grund steht. */ :focus-visible:not(input):not(select):not(textarea):not(tr) { outline: 2px solid var(--q-highlight-2); outline-offset: 2px; } .hidden { display: none !important; } /* Das Suchfeld der Klappliste ist der einzige randlose Suchbereich OHNE eigene Fokuskennzeichnung im Entwurf - .fsel ist eine Balance-eigene Komponente, die es dort nicht gibt. Es bekommt deshalb dieselbe Sprache wie die uebrigen vier (.global_search, .ltb-search, .detail-search, .planner-search), die ihre Kennzeichnung jeweils an ihrer eigenen Regel tragen. */ .fsel-search:focus-within { border-bottom-color: var(--q-highlight-3); } /* Markenzeichen — hochgestellt und kleiner (BAL-168). `` allein täte es fast: Der Browser stellt hoch und verkleinert auf etwa 83 %. Für ein ® ist das zu groß — es steht dann als eigenes Zeichen neben dem Wort statt als Beifügung dazu. 0,55 em ist die Größenordnung, in der Marken üblicherweise gesetzt werden. `line-height: 0`, damit die Hochstellung die Zeile nicht auseinanderzieht — sonst wächst jede Überschrift, in der die Marke vorkommt, um ein paar Pixel. Die Klasse steht AN `` und ersetzt es nicht: Das Element trägt die Bedeutung, die Klasse nur das Maß. Wo die Marke als reiner Text auftritt (Fenstertitel, `title`- und `aria-label`-Attribute, Meldungen, Exporte, der Kopf der heruntergeladenen Mitschrift), bleibt das nackte Zeichen stehen — dort gibt es keine Auszeichnung, und ein `` ergäbe sichtbare spitze Klammern. */ .marke-r { font-size: 0.55em; vertical-align: super; line-height: 0; } .ui_icon { display: inline-block; flex-shrink: 0; vertical-align: middle; } .ui_icon_mask { background-color: currentColor; -webkit-mask: var(--icon-url) center / contain no-repeat; mask: var(--icon-url) center / contain no-repeat; } .app_shell_nav_item_active .ui_icon_mask, .button .ui_icon_mask { color: currentColor; } /* Die zweite Spalte ist `minmax(0, 1fr)` und nicht `1fr` (Aufgabe BAL-181). Das ist kein Feinschliff, sondern der Unterschied zwischen "die Anwendung passt ins Fenster" und "nicht". `1fr` ist die Kurzform von `minmax(auto, 1fr)`. Das Mindestmass `auto` ist die Min-Content-Breite des Inhalts - die Spalte kann also NICHT schmaler werden als ihr breitester unteilbarer Inhalt, egal wie schmal das Fenster ist. Der Ueberschuss schiebt sich aus dem Bild, und zwar die GANZE Seite: nicht der Inhalt scrollt, sondern das Fenster wandert ueber die Anwendung - samt Seitenleiste, die dabei verschwindet. GEMESSEN am 2026-09-15 bei 820x900 auf dem Dashboard: documentElement .scrollWidth 1058 bei innerWidth 820, seitlich verschiebbar um 238px. Natuerliche Mindestbreite je Bereich zwischen 1021px (Budget) und 1146px (Benachrichtigungen). Betroffen war damit das ganze Band von 781px - dort endet der Umbruch, der das Schmallayout traegt - bis rund 1150px: iPad hoch, geteilte Fenster, kleine Notebookfenster, 150-175% Zoom. Bildbeleg: docs/user-experience/responsive/bilder/820-huelle-seitlich-verschoben.png Mit `minmax(0, 1fr)` darf die Spalte beliebig schmal werden. Der Inhalt scrollt dann dort, wo er es ohnehin tut (`.module_list_body` traegt `overflow-x: auto`), statt die Seite zu verbreitern. WARUM KEIN ZUSAETZLICHER UMBRUCHPUNKT bei etwa 1000px, der die Seitenleiste in den schmalen Zustand zwingt (Entscheidung E-5 der Bestandsaufnahme): Das Breitlayout ist damit bei JEDER Breite tragfaehig statt nur diesseits und jenseits einer weiteren Schwelle, die mitgepflegt werden muesste. Vollstaendige Erhebung: docs/user-experience/responsive-design.md, R-01. */ .app_shell { display: grid; grid-template-columns: var(--sidebar-width, 256px) minmax(0, 1fr); grid-template-rows: 62px 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; height: 100vh; min-height: 100vh; background: var(--surface-soft); transition: grid-template-columns var(--dur-base) var(--ease-std); } .app_shell_sidebar_collapsed { --sidebar-width: 76px; } .app_shell_sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: 2px; overflow: hidden; min-height: 0; padding: 18px 14px; background: var(--surface); border-right: 1px solid var(--divider); } /* Scrollbereich der Navigation (Referenzdesign 2026-10-06, styles.css v80): Marke oben und Fuss unten bleiben stehen, nur die Eintraege dazwischen rollen. Vorher rollte die ganze Leiste, und bei niedrigen Fenstern verschwand der Fuss mit Einklappen und Konto unter dem Rand. Der Ausgleich -14px/14px laesst die Rollleiste am Rand der Leiste stehen statt im Abstand. Unter 780 px (waagrechte Leiste, Schublade) wirkt der Baustein nicht: display: contents laesst die bisherigen Regeln unveraendert greifen. */ .app_shell_brand, .app_shell_sidebar_footer { flex-shrink: 0; } .app_shell_sidebar_scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 2px; margin: 0 -14px; padding: 0 14px 8px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; } .app_shell_sidebar_scroll > * { flex-shrink: 0; } @media (max-width: 780px) { .app_shell_sidebar_scroll { display: contents; } } /* ── Marke oben links: Lockup der Variante 1e "Schnittmenge" ────────────── Entwurf docs/design/logo/project/Quantiz Balance Logo.dc.html. Geschichte: 1c "Gleichgewicht" (BAL-195), ab BAL-200 ohne Zeichen mit Quantiz- Wortmarke, 1d "Welle" (BAL-202), 1e (BAL-203), Signetgroesse (BAL-204). SEIT BAL-210: Zeichen und Schriftzug, OHNE die Zeile "Budgets · Beauftragungen" (so beauftragt). Der Schriftzug steht dafuer hoeher und kraeftiger und passt sich Mission Control an: Comfortaa Medium (500 statt 300), Versalien, Petrol, 22 statt 17 px, Sperrung 0,15 statt 0,5 em - "nicht mehr so breit". Gemessen in der Seitenleiste: 133 px Schriftzug, die Lockup endet bei 217 von 219 px. Verglichen und verworfen: Versalien 20 px / 0,22 em (131 px, wirkte duenner), "Balance" gemischt 26 px (117 px, passt weniger zu Mission Control, das Versalien fuehrt). Was unten ueber Zeile und Masse steht, ist die Geschichte bis BAL-205. Die Lockup bestand aus dem Zeichen, "Balance" und der Zeile "Budgets · Beauftragungen" darunter - OHNE die Quantiz-Wortmarke und ohne den Trennstrich, der sie von "Balance" trennte. FUENF BENANNTE MASSE STATT EINES MASSSTABS (BAL-204). Bis dahin hing alles an `--marke` in festen Verhaeltnissen. Das ging, solange die Lockup gleichmaessig skalierte - jetzt soll das Zeichen WACHSEN und die Schrift dabei kleiner werden, und dafuer ist ein einziger Massstab das falsche Werkzeug. Die Nennerzahl wechselte ausserdem mit jeder Aufgabe (44, dann 66, dann 72), was beim Lesen jedes Mal die Frage aufwarf, worauf sie sich bezieht. Benannte Masse beantworten das von selbst. Vorbild ist die Nachbaranwendung Mission Control (T-270), die denselben Satz fuehrt. DIE GROESSEN SIND GEMESSEN, NICHT GESETZT. Die Seitenleiste bietet innen 219 px. Mission Control bringt darin ein 74-px-Signet unter, weil sein Name zweizeilig und kurz ist (MISSION / CONTROL). Balance hat einen langen Schriftzug und eine Zeile aus 24 Zeichen nebeneinander - beide waren bei den Groessen aus BAL-203 rund 150 px breit, und mehr als 50 px blieben dem Zeichen nicht. Das Signet waechst hier also NUR gegen die Schrift. Gemessen und der Auftraggeberin vorgelegt: Signet 50 (Schrift unveraendert, nur +14 %), Signet 64 ("Balance" 18, Zeile 9) oder Signet 72 ("Balance" 17, Zeile 8,5) - die letzte Zeile sind genau die Groessen, die Mission Control ebenfalls verwendet. GEWAEHLT: 72. DER ABSTAND STEHT SEIT BAL-205 AUF 8 PX statt der 22 des Entwurfs, so beauftragt. Er gilt an BEIDEN Orten: Die Kopfleiste hatte bis dahin einen eigenen, groesseren Wert (15 px), weil sie mit 22 px zu weit auseinander gelaufen waere - bei 8 px waere dieser Wert GROESSER als der der Seitenleiste gewesen, und die Ueberschreibung ist deshalb entfallen. Gemessen wird die Lockup damit 203,6 statt 217,6 px breit; die frei gewordenen 14 px bleiben als Luft stehen und sind NICHT in ein groesseres Zeichen geflossen - beauftragt war der Abstand, nicht die Signetgroesse. Die Zeile verliert dabei ihre Sperrung. 24 Zeichen mal 0,10 em kosten bei 8,5 px rund 20 px Breite, und die fehlen dem Zeichen. Versalien und der Wortabstand halten sie auch ungesperrt lesbar. GEMESSEN WIRD AM TEXTBLOCK, NICHT AM SCHRIFTZUG: `letter-spacing: 0.5em` steht mit `margin-right: -0.5em`, und der negative Rand zaehlt in `getBoundingClientRect()` nicht mit (BAL-203). Farben: "Balance" in Petrol, so der Entwurf - auf Weiss 2,9 : 1, zulaessig, weil Text als Teil eines Logos von WCAG 1.4.3 ausgenommen ist. Die Zeile steht in `--fg-2` und nicht im #BBBBBB des Entwurfs; das ist `--q-medium`, eine Dekorfarbe mit 1,9 : 1. Alle vererbbaren Angaben stehen ausdruecklich - die globalen Grundregeln haben in diesem Projekt schon mehrfach in eine Komponente hineingewirkt. */ .app_shell_brand, .app_shell_topbar_brand { --marke-signet: 72px; /* Kantenlaenge des Zeichens */ --marke-abstand: 8px; /* Zeichen zu Textblock (BAL-205, so beauftragt) */ --marke-schrift: 22px; /* "BALANCE" (BAL-210, vorher 17 px) */ } /* Unten 4 statt 20 px (BAL-217): Die Kreise fuellen nur 46 % des 72-px- Zeichenkastens, darunter liegen in der Grafik selbst rund 19 px leer. Mit 20 px Innenabstand standen sichtbar rund 61 px zwischen Kreisen und "Uebersicht", im Entwurf (34-px-Zeichen) rund 47. Der Rand in der Grafik gehoert zum Zeichen und bleibt; gekuerzt ist nur der Abstand ausserhalb. */ .app_shell_brand { display: flex; align-items: center; gap: var(--marke-abstand); padding: 6px 4px 4px; white-space: nowrap; } .app_shell_brand_mark { width: var(--marke-signet); height: var(--marke-signet); flex: 0 0 auto; object-fit: contain; display: block; } .app_shell_brand_text { display: flex; flex-direction: column; min-width: 0; } .app_shell_brand_name { font-family: var(--font-display); font-weight: var(--w-regular); font-size: var(--marke-schrift); line-height: 1; letter-spacing: 0.15em; margin-right: -0.15em; text-transform: uppercase; color: var(--q-highlight-3); } /* Eingeklappt steht das Zeichen ALLEIN (BAL-202, so beauftragt). Der Grund, aus dem BAL-200 den Markenblock hier ganz entfernt hatte, ist damit entfallen: Es gab kein Zeichen mehr, und weder Wortmarke noch "Balance" tragen in 48 px nutzbarer Breite. Das Zeichen tut es - es ist quadratisch und in dieser Groesse gezeichnet. Zentriert, weil die Navigationssymbole darunter es ebenfalls sind. EIGENE SIGNETGROESSE (BAL-204): Die Leiste ist 76 px breit und bietet innen 48 px (76 abzueglich 2 x 14 Polsterung). Die 72 px der ausgeklappten Leiste passen dort nicht - ohne diese Zeile liefe das Zeichen ueber die Leiste hinaus. 44 px lassen ihm 2 px Luft je Seite und stellen es eine Stufe groesser als die Navigationssymbole darunter. Dieselbe Loesung wie in Mission Control (dort 44 px in 56 px). */ .app_shell_sidebar_collapsed .app_shell_brand { justify-content: center; padding-left: 0; padding-right: 0; --marke-signet: 44px; } .app_shell_sidebar_collapsed .app_shell_brand_text { display: none; } .app_shell_nav_section { margin-top: 12px; padding: 8px 10px 6px; font-size: 10px; letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: #737373; font-weight: var(--w-bold); white-space: nowrap; } .app_shell_sidebar_collapsed .app_shell_nav_section { height: 1px; margin: 13px 14px 9px; padding: 0; font-size: 0; background: var(--divider); } .app_shell_nav_items { display: flex; flex-direction: column; gap: 2px; } .app_shell_nav_item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 11px; border-radius: 10px; color: var(--q-dark); font-size: 14px; font-weight: var(--w-regular); text-align: left; transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .app_shell_nav_item:hover { background: var(--surface-soft); } .app_shell_nav_item_active { background: var(--q-highlight-2); color: #fff; } .app_shell_nav_item_sub { padding-left: 30px; font-size: 13px; } .app_shell_nav_item_icon { width: 20px; flex: 0 0 20px; display: grid; place-items: center; color: currentColor; opacity: 0.86; } .app_shell_nav_item_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app_shell_nav_item_count { margin-left: auto; min-width: 22px; padding: 2px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--q-dark); font-size: 11px; font-weight: var(--w-bold); text-align: center; } .app_shell_nav_item_active .app_shell_nav_item_count { background: rgba(255, 255, 255, 0.18); color: #fff; } .app_shell_sidebar_collapsed .app_shell_nav_item { justify-content: center; padding: 11px 0; } .app_shell_sidebar_collapsed .app_shell_nav_item_title, .app_shell_sidebar_collapsed .app_shell_nav_item_count { display: none; } .app_shell_sidebar_footer { margin-top: auto; } .app_shell_sidebar_divider { height: 1px; margin: 12px 0; background: var(--divider); } .app_shell_user { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; text-align: left; } .app_shell_user_avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--q-highlight-2); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--w-bold); } .app_shell_user_text small { display: block; color: #737373; font-size: 11px; } .app_shell_sidebar_collapsed .app_shell_user_text { display: none; } .app_shell_topbar { grid-area: topbar; display: flex; align-items: center; gap: 14px; padding: 0 24px; background: var(--surface); border-bottom: 1px solid var(--divider); } .app_shell_breadcrumb { font-family: var(--font-display); font-weight: var(--w-bold); color: var(--q-highlight-2); font-size: 18px; white-space: nowrap; } /* Die Marke der Kopfleiste steht nur unterhalb des Umbruchs (BAL-190); oben traegt sie die Seitenleiste. Siehe die Begruendung an `renderTopbarMarke()`. */ .app_shell_topbar_brand { display: none; } .app_shell_topbar_spacer { flex: 1; } .app_shell_main { grid-area: main; overflow: auto; padding: 26px 30px 64px; } .app_shell_icon_button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; position: relative; color: var(--q-dark); transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .app_shell_icon_button:hover, .app_shell_icon_button_active { background: var(--surface-soft); } .app_shell_dot { position: absolute; top: 7px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; } /* Zaehler statt Punkt am Glockensymbol (BAL-169). Der Punkt sagte nur DASS etwas offen ist; die Zahl sagt WIE VIEL - der Unterschied zwischen einem Hinweis und zwoelf entscheidet, ob man gleich hinsieht. Groesse, GEWICHT, Zeilenhoehe, Farbe und Grund alle ausdruecklich: Das Element sitzt in einer Schaltflaeche, und `button` erbt ueber `font: inherit` die Grundschrift des Koerpers (15px, w-light) - ohne eigene Angaben stuende hier eine viel zu grosse, duenne Zahl. Die Breite waechst mit der Stelligkeit (min-width + padding), der Kreis bleibt bis 9 rund. Ab 100 steht 99+ - eine dreistellige Zahl sprengt die Schaltflaeche, und die genaue Menge ist dann ohnehin nicht die Auskunft, auf die es ankommt. `aria-hidden`, weil die Zahl bereits im `aria-label` der Schaltflaeche steht - sonst hoerte man sie zweimal, einmal davon ohne Einheit. */ .app_shell_zaehler { position: absolute; top: 3px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; display: grid; place-items: center; border-radius: var(--radius-pill); border: 2px solid #fff; background: var(--danger); color: var(--q-white); font-family: var(--font-sans); font-size: 10px; font-weight: var(--w-bold); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* `min-width: 0` ist die ZWEITE Haelfte der Berichtigung von BAL-181 - die erste steht an `.app_shell`. Nachdem die Inhaltsspalte schmaler werden durfte, blieb ein Rest: Bei 820px massen alle zwoelf Bereiche weiterhin 58 bis 183px Ueberschuss. Gemessen lag es nicht mehr am Inhalt (`.app_shell_main` 564px bei 549px Inhalt, also Platz uebrig), sondern an DIESER Leiste: `.app_shell_topbar` ist eine flex-Reihe mit `nowrap`, und ihr Inhalt verlangte 659px in 564px. Die drei Symbolschalter am rechten Ende standen bei x=825, 870 und 915 - ausserhalb eines 820px breiten Fensters. Die Ursache ist dieselbe wie beim Raster, nur in flex: Ein flex-Element hat `min-width: auto` und schrumpft daher nicht unter seine Min-Content-Breite. Fuer dieses Feld ist das die Eigenbreite des `` - ein Eingabefeld bringt eine Vorgabebreite von rund 20 Zeichen mit, und `min-width: 0` am Feld selbst (Zeile darunter) hilft nicht, weil die Huelle die Min-Content- Breite ihrer Kinder als eigenes Mindestmass nimmt. Deshalb schrumpfte das Feld nur bis 262px und keinen Pixel weiter. GEMESSEN vor und nach dieser einen Zeile bei 820px: Ueberschuss 95px -> 0, Suchfeld 262px -> 143px. `width: 360px` bleibt als Wunschbreite stehen und gilt unveraendert, sobald das Fenster sie hergibt. Geprueft wurde auch die naheliegende Alternative `flex: 0 1 360px`: Sie aendert nichts, weil `flex-shrink` bereits 1 ist. Das Mindestmass war das Hindernis, nicht der Schrumpffaktor. */ .global_search { position: relative; display: flex; align-items: center; gap: 8px; width: 360px; min-width: 0; padding: 7px 14px; border: 1px solid transparent; border-radius: 999px; background: var(--surface-soft); transition: border-color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); } .global_search:focus-within { border-color: var(--q-highlight-3); background: #fff; } .global_search_icon { width: 16px; height: 16px; color: var(--q-medium); display: grid; place-items: center; } .global_search_input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; font-weight: var(--w-regular); } .global_search_hint kbd { padding: 3px 5px; border: 1px solid var(--q-bright); border-radius: 5px; background: #fff; color: #777; font-size: 10px; } .global_search_panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 80; width: min(520px, calc(100vw - 48px)); max-height: min(620px, calc(100vh - 96px)); overflow: hidden; padding: 6px; border: 1px solid #ececec; border-radius: 18px; background: #fff; box-shadow: var(--shadow-elevated); } .global_search_scroll { max-height: min(536px, calc(100vh - 156px)); overflow: auto; } .global_search_group_title { padding: 10px 12px 6px; font-size: 11px; letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: #888; font-weight: var(--w-bold); } .global_search_count { display: inline-flex; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--surface-soft); color: var(--q-medium); letter-spacing: 0; } .global_search_item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 11px; text-align: left; } .global_search_item:hover, .global_search_item_active { background: var(--surface-soft); } .global_search_item_active { outline: 1px solid rgba(21,165,181,0.24); } .global_search_item_icon { width: 24px; color: var(--q-medium); display: grid; place-items: center; } .global_search_item_title { display: block; color: var(--q-highlight-2); font-weight: var(--w-bold); } .global_search_item_description { display: block; color: #777; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .global_search_item_go { margin-left: auto; color: var(--q-medium); opacity: 0.45; } .global_search_item:hover .global_search_item_go, .global_search_item_active .global_search_item_go { opacity: 1; } .global_search_footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 6px -6px -6px; padding: 10px 12px; border-top: 1px solid var(--divider); background: var(--surface-soft); color: var(--q-medium); font-size: 11.5px; } .global_search_footer span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; } .global_search_footer kbd { min-width: 20px; padding: 2px 5px; border: 1px solid var(--q-bright); border-radius: 5px; background: #fff; color: var(--q-dark); font-size: 10px; text-align: center; } .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 18px; border: 1px solid transparent; border-radius: 999px; font-weight: var(--w-bold); font-size: 13.5px; white-space: nowrap; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); } .button:active { transform: scale(0.98); } .button_primary { background: var(--q-highlight-2); color: #fff; } .button_primary:hover { background: #0a253c; } .button_accent { background: var(--q-highlight-1); color: var(--q-highlight-2); } .button_ghost { background: #fff; border-color: var(--q-medium); color: var(--q-dark); } .button_ghost:hover { border-color: var(--q-highlight-2); } .button_quiet { padding: 7px 12px; background: transparent; color: var(--q-dark); } .button_quiet:hover { background: var(--surface-soft); } .button_small { padding: 6px 12px; font-size: 12.5px; } .button_danger { border-color: transparent; color: var(--danger); } .button_danger:hover { border-color: rgba(192,72,72,0.28); background: #f8e0e0; } .button_danger_fill { background: var(--danger); color: #fff; } .button_danger_fill:hover { background: #a93636; } .button_danger .ui_icon, .button_danger_fill .ui_icon { color: currentColor; } .action-icons { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; } .icon-action { width: 30px; height: 30px; display: inline-grid; place-items: center; border-radius: 8px; color: var(--q-medium); transition: background var(--dur-fast), color var(--dur-fast); } .icon-action:hover, .icon-action:focus-visible { background: var(--surface-soft); color: var(--q-highlight-2); } .icon-action-danger:hover, .icon-action-danger:focus-visible { background: #f8e0e0; color: var(--danger); } .page_header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; } /* `min-width: 0` am Titelblock (BAL-182). Nachdem BAL-181 der Inhaltsspalte erlaubt hat zu schrumpfen, wurde diese Reihe zwischen 781 und rund 1150px eng - genau in dem Band, das es vorher gar nicht gab, weil sich dort die ganze Seite verbreiterte. GEMESSEN bei 820px nach BAL-181: Der Kopf der Benachrichtigungen schob seine Bedienelemente 161px ueber den Inhaltsbereich hinaus, die Freigaben 87px, die Beauftragungen 90px. Der Titelblock hielt seine Min-Content-Breite und liess den Bedienelementen nichts uebrig. HIER STAND ZUERST `flex-wrap: wrap`, UND DAS WAR FALSCH. Flex bricht um, BEVOR es schrumpft: Die Entscheidung faellt anhand der Wunschbreiten, und die Wunschbreite des Titelblocks ist seine Max-Content-Breite - eine mehrzeilige Beschreibung. Gemessen bei 1440px mit `wrap`: Die Bedienelemente sassen nicht mehr rechtsbuendig bei x=1395, sondern linksbuendig bei x=662 unter dem Titel, und der Kopf wuchs von 205 auf 269px. Das haette den Referenzentwurf auf jedem Schreibtisch veraendert, um ein Problem zu loesen, das es nur auf schmalen Geraeten gibt. `min-width: 0` allein genuegt: Der Titelblock schrumpft, die Bedienelemente bleiben rechts, und unterhalb 780px steht der Kopf ohnehin auf Spalte. Gemessen nach der Berichtigung bei 1440px: Bedienelemente wieder bei x=1395, Kopfhoehe wieder 205px. */ .page_header > *:first-child { min-width: 0; } .page_header_pretext { margin-bottom: 7px; font-size: 11px; letter-spacing: var(--tracking-xwide); text-transform: uppercase; color: var(--q-highlight-2); font-weight: var(--w-bold); } .page_header_title { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 1.15; color: var(--q-dark); } .page_header_description { max-width: 70ch; margin-top: 8px; color: #777; font-size: 13.5px; } /* Zweigeteilter Kopf (BAL-114, nach einem Vorbild der Auftraggeberin): oben der Erklaerabsatz, darunter die Handlungen mit eigener Beschriftung. Praefixfamilie page_header_* fortgesetzt - die Klassen stellen sich damit nicht neben den Kopf, sondern hinein (POL-001: lange Reihe, wie die Geschwister pretext, title, description, controls). Die Aufzaehlung ist eine echte