/* AuxData.ai — Komponenten des neuen Designs.
Quelle: Figma "AuxData.ai — Core (Design System)", Seite 04 · Core.
Geladen NACH tokens.css. JEDE Regel in dieser Datei steht unter
[data-design="new"] — eine Regel ohne diesen Selektor faerbt das alte
Design mit ein und wird vom Unit-Test abgewiesen.
RESCOPE (2026-09-07, siehe .superpowers/sdd/2026-09-07-designsystem-core-
components/rescope-report.md): die Basisregeln, die ein nacktes HTML-
Element restylen (button/a/input[type=text]/select/textarea/input[type=
date|time|url|search]/hr, inkl. all ihrer :hover/:active/:focus-visible/
:disabled-Zustaende), stehen jetzt unter ":where([data-design=\"new\"])"
statt "[data-design=\"new\"]". :where() traegt selbst KEINE Spezifitaet
bei -- die Regeln landen dadurch wieder bei der Spezifitaet, die ihr
unscoped Legacy-Gegenstueck in webapp.css hatte (0,0,1 fuer button/a/
select/textarea/hr; 0,1,1 fuer die type-gebundenen input-Selektoren, weil
ein Attributselektor selbst schon wie eine Klasse zaehlt). Vier
Durchgaenge Einzelfall-Restaurierung hatten sich davor an genau der
Umkehrung abgearbeitet, die der [data-design="new"]-Praefix (0,1,1 bzw.
0,2,1) auf diesen Basisregeln erzeugt: jede bestehende Zweck-Klasse in
webapp.css, die den nackten Legacy-button{}/a{}/... bei (0,1,0) oder
Gleichstand schlug, verlor gegen die praefigierte Basisregel unabhaengig
von ihrem eigenen Wert. :where() nimmt genau diese eine Spezifitaets-
Stufe wieder zurueck.
Wichtig, und Grund, warum unten trotzdem noch viele Einzelfall-Regeln
stehen: :where() repariert NUR die Spezifitaets-Umkehrung fuer
Eigenschaften, die die Legacy-Zweck-Klasse SELBST deklariert. Die
Basisregeln fuehren mehrere Eigenschaften NEU ein, die keine Legacy-
Klasse je gesetzt hat (v.a. min-height bei button, font-family/-size/
line-height/font-weight bei a) -- fuer die gibt es keine konkurrierende
Legacy-Deklaration, gegen die :where() etwas gewinnen koennte; diese
Werte gelten unabhaengig von jeder Spezifitaet, sobald nichts sie
zuruecksetzt. Ebenso unveraendert: der :hover/:active/:focus-visible-
Zustand der Basisregel ist eine EIGENE Spezifitaetsrechnung (Element +
Pseudoklassen, ohne die Praefix-Klasse jetzt bei (0,2,1) statt (0,3,1))
-- eine Legacy-Zweck-Klasse, die selbst kein eigenes :hover traegt,
kollidiert damit weiterhin. Jede verbliebene Einzelfall-Regel unten
traegt deshalb einen Kommentar, WARUM sie trotz :where() noetig bleibt.
NACHTRAG (2026-09-08, erste Korrektur, seither UEBERHOLT): "min-height"
auf der Button-Basisregel wurde zunaechst durch "height" ersetzt, weil
Legacy-Zweck-Klassen mit eigener Groesse "height" ueberwiegend SELBST
deklarieren und die Kaskade das dadurch arbitrieren konnte. Das loeste nur
EINE von sechs unkontestierten Eigenschaften -- "justify-content" bekam
danach seinen ZWEITEN Einzelfall-Patch (.tool-invocation-toggle,
.resource-group-header), exakt die Aufzaehlung, die :where() eigentlich
beenden sollte, jetzt auf einer anderen Eigenschaft.
FINALE ENTSCHEIDUNG (2026-09-08, siehe rescope-report.md): die Basisregel
darf NUR NOCH Eigenschaften deklarieren, die das nackte Legacy-"button{}"
(webapp.css:844) ebenfalls deklariert -- border-radius/padding/display/
background/color/font-family/font-size/font-weight/border. Jede so
gesetzte Eigenschaft ist dadurch IMMER kontestiert, unabhaengig davon,
welche Eigenschaft Figma als naechstes verlangt -- kein siebter Durchgang
mehr moeglich. "height" ist komplett entfernt (36px kommt jetzt aus
"padding", das Legacy selbst deklariert und das eine Zweck-Klasse mit
"padding: 0" deshalb per Kaskade unterlaeuft, statt es nur unwirksam zu
floor(t)en). "gap"/"align-items"/"justify-content"/"line-height"/
"transition" (Legacy kennt keins davon) sind ersatzlos entfernt, bis auf
"align-items"/"justify-content" auf ".button-icon" selbst (echte Klasse,
quadratische Icon-Zentrierung, kein Leck). Alle ~21 "height: auto"-
Einzelfall-Resets und die zwei "justify-content: flex-start"-Resets
sind damit strukturell ueberfluessig und entfernt (rescope-report.md
listet jede Regel einzeln). Ein neuer Unit-Test erzwingt die Teilmengen-
Eigenschaft automatisch, siehe tests/unit/components-css.test.js. */
/* Galerie — Entwicklungswerkzeug, kein Anwender-Feature. */
[data-design="new"] .gallery-group {
display: flex;
flex-wrap: wrap;
gap: var(--ax-space-4);
padding: var(--ax-space-4);
border: 1px solid var(--ax-border-default);
border-radius: var(--ax-radius-lg);
margin-bottom: var(--ax-space-6);
background: var(--ax-bg-surface-1);
}
[data-design="new"] .gallery-tile {
display: flex;
flex-direction: column;
gap: var(--ax-space-2);
padding: var(--ax-space-3);
border: 1px solid var(--ax-border-soft);
border-radius: var(--ax-radius-md);
min-width: 200px;
}
[data-design="new"] .gallery-tile-label {
font-size: var(--ax-font-size-label-sm);
line-height: var(--ax-line-height-label-sm);
color: var(--ax-text-muted);
}
/* --- Aktionen ------------------------------------------------------------ */
/* Primary. Die nackte button-Regel in webapp.css ist bereits der
Primary-Button; hier wird sie auf Figmas Geometrie und Tokens gehoben.
NUR Eigenschaften, die Legacys "button{}" (webapp.css:844) selbst
deklariert -- border-radius/padding/display/background/color/font-family/
font-size/font-weight/border -- damit jede hier gesetzte Eigenschaft
IMMER kontestiert bleibt (rescope-report.md, "Die Entscheidung").
"height" (36px) ist ersetzt durch "padding": 9px oben/unten + Figmas
line-height/label-md (18px, ueberwiegend Browser-"normal" nahe genug,
siehe Report) ergeben 36px, OHNE eine unkontestierte fixe Hoehe zu setzen
-- eine Zweck-Klasse mit "padding: 0" (0,1,0) gewinnt jetzt direkt gegen
diese Basisregel (0,0,1), statt nur eine wirkungslose min-Hoehe zu
unterlaufen. "gap"/"align-items"/"justify-content"/"line-height"/
"transition" sind ersatzlos entfernt (kein Legacy-Gegenstueck, siehe
Report fuer die Einzelbegruendung je Eigenschaft). */
:where([data-design="new"]) button {
border-radius: var(--ax-radius-md);
padding: 9px var(--ax-space-4);
display: inline-flex;
background: var(--ax-action-primary);
color: var(--ax-action-on-primary);
font-family: var(--ax-font-sans);
font-size: var(--ax-font-size-label-md);
font-weight: 600;
border: none;
}
:where([data-design="new"]) button:hover:not(:disabled) { background: var(--ax-action-primary-hover); }
:where([data-design="new"]) button:active:not(:disabled) { background: var(--ax-action-primary-pressed); }
:where([data-design="new"]) button:focus-visible {
box-shadow: var(--ax-focus-ring);
outline: 2px solid transparent; /* Versatz sichtbar halten, ohne Outline zu entfernen */
outline-offset: 2px;
}
:where([data-design="new"]) button:disabled {
opacity: .5;
cursor: default;
}
[data-design="new"] button.btn-secondary {
background: var(--ax-bg-surface-2);
border: 1px solid var(--ax-border-default);
color: var(--ax-text-primary);
}
[data-design="new"] button.btn-secondary:hover:not(:disabled) { background: var(--ax-bg-hover); }
[data-design="new"] button.btn-ghost {
background: none;
border: none;
color: var(--ax-text-link);
}
[data-design="new"] button.btn-ghost:hover:not(:disabled) { background: var(--ax-bg-hover); }
/* Icons folgen der Textfarbe, nicht dem Stil. webapp.css:867 erzwingt
filter: brightness(0) invert(1) (weiss) fuer ALLE Button-Icons. Das ist
fuer Secondary/Ghost/Icon-Button falsch, sobald deren Flaeche/Umgebung mit
dem Theme kippt (siehe Tabelle im Task-Report) -- deshalb im Light-Theme
auf Schwarz umschalten, im Dark-Theme unveraendert lassen. */
[data-design="new"][data-theme="light"] button.btn-secondary img:not(.logo),
[data-design="new"][data-theme="light"] button.btn-ghost img:not(.logo),
[data-design="new"][data-theme="light"] button.button-icon img:not(.logo) {
filter: brightness(0);
opacity: 1;
}
/* Primary-Icons weiss halten. webapp.css:444 setzt fuer JEDES Button-Icon im
Light-Theme -- design-unabhaengig, keine [data-design]-Bindung -- filter:
brightness(0) (schwarz). Die Primary-Flaeche (--ax-action-primary) ist
farbig und traegt weissen Labeltext (--ax-action-on-primary, reines Weiss
in beiden Themes); ein schwarzes Icon stuende dort neben weisser Schrift.
Deshalb wird es fuer Primary auf Weiss zurueckgedreht.
HIER STAND EINE AUSSCHLUSSKETTE, UND SIE WAR ZU WEIT. Berichtigt am
2026-09-17, nachdem der Auftraggeber in der Sichtpruefung zweimal
unsichtbare Symbole gemeldet hatte ("06 Shell & Nav" Punkt 9, Zurueck-
Knopf; "07 Chat & AI" Teil B Punkt 1, Composer):
vorher: button:not(.btn-secondary):not(.btn-ghost):not(.button-icon)
Die Kette unterstellte "alles, was nicht Secondary, Ghost oder Icon-Button
ist, ist Primary". Das ist falsch: im neuen Design ist Primary der NACKTE
Knopf, und jeder Knopf, der eine eigene Legacy-Flaeche mitbringt, fiel
ebenfalls in die Regel -- und bekam ein weisses Symbol auf heller Flaeche.
Gemessen im hellen Theme, neues Design, sichtbare Flaeche gegen Filter:
chatbot-button Flaeche #ffffff Symbol WEISS
chatbot-button chatbot-btn-secondary Flaeche #ffffff Symbol WEISS
chatbot-button-deactivated … Flaeche #ffffff Symbol WEISS
image Flaeche #ffffff Symbol WEISS
image-small Flaeche #ffffff Symbol WEISS
page-action-btn Flaeche #f4f3f7 Symbol WEISS
Sechs Klassen, alle praktisch unsichtbar. Der Auftraggeber hat gemeldet,
was ihm begegnet ist; die anderen vier standen genauso da.
DIE RICHTUNG IST JETZT UMGEKEHRT, und das ist eine Entscheidung des
Auftraggebers vom 2026-09-17: dunkel ist der Grundfall (er kommt ohne
eigene Regel aus webapp.css:444), weiss bekommt nur, wer nachweislich eine
farbige Flaeche traegt. Uebersieht jemand kuenftig einen farbigen Knopf,
steht dort ein dunkles Symbol auf Farbe -- lesbar, nur nicht ideal. Der
Fehlerfall ist damit harmlos; vorher war er unsichtbar.
DIE LISTE IST GEMESSEN, NICHT GERATEN. Gemessen wurden #ffffff bzw.
rgb(0,122,176) als sichtbare Flaeche ueber /designgallery.html,
/agentmanager.html und /cockpit.html:
- der NACKTE Knopf: die Basisregel dieses Designs (oben, ":where(…)
button") faerbt ihn action/primary. "button:not([class])" trifft genau
ihn.
- ".voice-control-stop" setzt SELBST keine Flaeche (webapp.css:5917 nur
Geometrie) und ist damit ebenfalls Primary aus der Basisregel --
gemessen rgb(0,122,176). Eine Klasse zu tragen heisst hier nicht, eine
Flaeche zu haben.
- ".chatbot-button-send" ueberschreibt die transparente Flaeche seines
".chatbot-button" auf den Akzent -- gemessen rgb(0,122,176).
- ".page-action-btn.primary" setzt "background: var(--clr-accent)"
(components.css:2199). Nicht ueber die Sonde gefunden, weil auf den
drei Seiten kein primaerer Kopfknopf stand -- aus der Regel gelesen
und deshalb hier genannt.
Zugesichert in tests/features/design-knopfsymbole.spec.ts, zweiseitig. */
[data-design="new"][data-theme="light"] button:not([class]) img:not(.logo),
[data-design="new"][data-theme="light"] button.voice-control-stop img:not(.logo),
[data-design="new"][data-theme="light"] button.chatbot-button-send img:not(.logo),
[data-design="new"][data-theme="light"] button.page-action-btn.primary img:not(.logo) {
filter: brightness(0) invert(1);
opacity: 1;
}
/* Review-Fund ("Critical 1"), RESCOPE-STAND: acht bestehende Zweck-Buttons
ueberschnitten sich mit der (vor dem Rescope) praefigierten Basisregel:
.button-command/-small (webapp.css:1421/1434), .image/-tabwidget/-small
(webapp.css:3944/3956/3972), .delete (webapp.css:3932), .white
(webapp.css:3984), .button-action (webapp.css:4652). Alle acht bleiben
bewusst unreskinnt (Spec §4: nur Primary/Secondary/Ghost/Danger sind
Achsen-Rollen). Seit :where() auf der Basisregel (Header-Kommentar) reicht
Legacys eigene Spezifitaet fuer JEDE Eigenschaft, die die jeweilige Klasse
SELBST deklariert, wieder aus -- die Restaurierung unten ist deshalb pro
Klasse einzeln darauf reduziert, was WEITERHIN noetig ist:
- height: seit die Basisregel "height" ueberhaupt nicht mehr setzt
(finale Entscheidung, Header-Kommentar), gibt es fuer KEINE der acht
Klassen mehr etwas zu resetten -- die vier vormaligen "height: auto"-
Eintraege (.button-command/.delete/.white/.button-action) sind
ersatzlos entfernt.
- display/padding/border-radius/font-size: .button-command/-small und
.button-action deklarieren diese SELBST (0,1,0), das reicht nach dem
Rescope gegen die fixierte Basisregel (0,0,1) -- redundant, aber
.button-action's "display" faellt auf die UNSCOPED, bare
"button{display:inline-block}" (webapp.css:844, 0,0,1) zurueck, die
mit der fixierten Basisregel GLEICHSTAND haelt und die Ladereihenfolge
(webapp.css zuerst) verliert -- "display" bleibt deshalb fuer
.button-action bestehen. .delete/.white deklarieren NUR Flaeche/Text/
Rahmen selbst; display/padding/border-radius/font-size kommen bei
ihnen ebenfalls aus der TIED bare button{}-Regel -- bleiben deshalb
fuer beide bestehen.
- Hover: die Basisregel setzt bei :where() weiterhin eine EIGENE
Spezifitaetsrechnung fuer ":hover:not(:disabled)" (Element +
2 Pseudoklassen, (0,2,1)) -- unveraendert von der REST-Faelligkeit.
.image-small/.delete tragen eigene :hover-Regeln bei GLEICHSTAND
(0,2,1) mit dieser Basisregel, verlieren die Ladereihenfolge (diese
Datei laedt nach webapp.css) -- Gegenregel bleibt fuer beide noetig.
.image und .image-tabwidget (webapp.css:3944/3956) deklarieren
display/padding/background/border SELBST bei (0,1,1) -- schlagen die
fixierte Basisregel (0,0,1) jetzt direkt, kein Ruecksprung auf die tied
bare button{}-Regel noetig. Ihre REST-Zustandsregeln sind deshalb komplett
entfernt -- nur ihre :hover-Gegenregeln bleiben (eigener Kommentar
unten). .button-command braucht seit dem Wegfall von "height" auf der
Basisregel ueberhaupt keine eigene Regel mehr (vormals nur "height: auto"
-- ersatzlos entfernt). */
/* .button-command-small (webapp.css:1434) und .image-small (webapp.css:
3972) deklarieren ihre eigene Hoehe SELBST -- brauchten schon vor dieser
Runde keine Restaurierung (die Basisregel setzt jetzt gar keine Hoehe
mehr, statt vormals "min-height" bzw. "height"). */
[data-design="new"] button.image-small:hover:not(:disabled) {
background-color: var(--background-color-button-hover);
}
/* button.image / button.image.page-btn / button.image-tabwidget (REST-
Zustand) sind entfernt (siehe Block-Kommentar oben) -- webapp.css:3944/
3938/3956 gewinnen nach dem Rescope allein, unabhaengig von der Lade-
reihenfolge, fuer alle drei dort deklarierten Eigenschaftsgruppen. Nur
die :hover-Gegenregeln bleiben, weil die Hover-Spezifitaetsrechnung der
Basisregel von :where() unberuehrt bleibt (Block-Kommentar oben) und
button.image:hover/button.image-tabwidget:hover (webapp.css:4253/3968,
je (0,2,1)) mit ihr GLEICHSTAND halten. */
[data-design="new"] button.image:hover:not(:disabled) {
background: var(--clr-surface-2);
color: var(--clr-text-primary);
}
[data-design="new"] button.image-tabwidget:hover:not(:disabled) {
background: var(--clr-surface-1);
}
/* RESCOPE: .delete (webapp.css:3932, button.delete, (0,1,1)) deklariert
SELBST nur background/color/border -- die schlagen die fixierte
Basisregel (0,0,1) jetzt direkt, keine Restaurierung mehr noetig.
display/border-radius/padding/font-size deklariert .delete NICHT selbst,
faellt also auf die TIED unscoped button{}-Regel (webapp.css:844, (0,0,1),
Gleichstand mit der fixierten Basisregel, verliert die Ladereihenfolge)
zurueck -- bleiben deshalb hier stehen. Kein "height" mehr noetig: die
Basisregel setzt seit der finalen Entscheidung ueberhaupt keine Hoehe. */
[data-design="new"] button.delete {
display: inline-block;
border-radius: 5px;
padding: 6px 16px;
font-size: 12px;
}
[data-design="new"] button.delete:hover:not(:disabled) {
border-color: var(--clr-danger);
background: transparent;
}
/* .white (webapp.css:3984, button.white, (0,1,1)) deklariert SELBST nur
background/color -- schlagen die fixierte Basisregel direkt, entfernt.
display/border-radius/padding/font-size bleiben aus demselben TIED-
button{}-Grund wie bei .delete oben stehen; .white hat kein eigenes
:hover (faellt auf die generische, jetzt korrekt niedrig-spezifische
Hover-Flaeche der Basisregel zurueck -- Token-Wechsel akzeptiert, gleiche
Einstufung wie beim Help-Widget-Launcher weiter unten). Kein "height"
mehr noetig, aus demselben Grund wie bei .delete. */
[data-design="new"] button.white {
display: inline-block;
border-radius: 5px;
padding: 6px 16px;
font-size: 12px;
}
/* .button-action (webapp.css:4652, KLASSE OHNE Element, (0,1,0)) deklariert
SELBST background-color/color/border/border-radius/padding/font-size --
schlagen die fixierte Basisregel (0,0,1) direkt, entfernt. NUR "display"
faellt (wie bei .delete/.white) auf die TIED button{}-Regel zurueck und
bleibt deshalb stehen; kein "height" mehr noetig. */
[data-design="new"] button.button-action {
display: inline-block;
}
[data-design="new"] button.button-action:hover:not(:disabled) {
background-color: var(--background-color-application);
color: var(--font-color-application);
}
/* .chatbot-button/-deactivated/-send (webapp.css:5624/5646/5666) deklarieren
border/background/border-radius/padding/display/height SELBST -- die
Basisregel setzt seit der finalen Entscheidung (Header-Kommentar) KEINE
dieser Eigenschaften mehr, also gibt es fuer keine von ihnen mehr etwas
zu resetten -- alle drei REST-Regeln sind komplett entfernt. width/opacity
waren nie Teil der Basisregel (unveraendert unangetastet, vorbestehende
Redundanz).
REGRESSIONSFUND (Sweep-Nachtrag, unveraendert gueltig): ".chatbot-button-
send" deklarierte zusaetzlich box-shadow (0,1,0) -- das schlug
".chatbot-input--focused .chatbot-button-send" (webapp.css:5681, 2
Klassen, (0,2,0)) permanent, weil die vorherige Restaurierung box-shadow
bei (0,2,1) hielt (HOEHER als die Fokus-Regel) und den Fokus-Glow der
Chat-Eingabeleiste dadurch dauerhaft unterdrueckte -- unabhaengig vom
Fokuszustand. box-shadow ist entfernt (schon in der vorherigen Fassung
dieses Kommentars); mit der gesamten REST-Regel jetzt komplett entfernt
entscheidet fuer box-shadow (und border/background) wieder allein Legacys
eigene Kaskade: ".chatbot-button-send" (0,1,0, box-shadow:0 2px 8px) an
Ruhe, ".chatbot-input--focused .chatbot-button-send" (0,2,0, box-shadow:
0 2px 14px, hoehere Spezifitaet) bei fokussierter Eingabeleiste -- exakt
wie vor diesem gesamten Projekt, der Fokus-Glow verstaerkt sich wieder
sichtbar.
sendButton (chatwindowinput.js:106) traegt PRODUKTIV BEIDE Klassen
zugleich ("chatbot-button chatbot-button-send") -- fuer border/background/
height entscheidet jetzt wieder allein Legacys eigene Ladereihenfolge in
webapp.css (chatbot-button-send nach chatbot-button, beide (0,1,0)),
exakt wie vor diesem gesamten Projekt.
.chatbot-button-deactivated ist trotz des Namens NICHT :disabled (das
Element bleibt klickbar) -- die Hover-Spezifitaetsrechnung der Basisregel
bleibt von :where() unberuehrt (Header-Kommentar), trifft es deshalb auf
echten Mausover weiterhin und wuerde die Cyan-Flaeche einblenden, wo
Legacy nur den Cursor auf "help" aendert -- Gegenregel bleibt noetig.
Mobile (webapp.css:10608-10616, @media max-width:640px): dieselben drei
Klassen wachsen dort UNSCOPED auf 36x36 (Touch-Ziel), ebenfalls (0,1,0).
Das eigene @media unten in dieser Datei bleibt unabhaengig davon noetig
(0,2,1) -- es schlaegt sowohl Legacys REST-Hoehe (0,1,0, 28px) als auch
Legacys eigene Mobile-Hoehe (0,1,0, 36px) unabhaengig von der jetzt
geloeschten REST-Restaurierung, war also nie auf sie angewiesen. */
[data-design="new"] button.chatbot-button:hover:not(:disabled) {
background: rgba(var(--clr-accent-rgb), 0.08);
border-color: rgba(var(--clr-accent-rgb), 0.3);
}
[data-design="new"] button.chatbot-button-deactivated:hover:not(:disabled) {
background: transparent;
border-color: var(--clr-border);
}
[data-design="new"] button.chatbot-button-send:hover:not(:disabled) {
background: linear-gradient(135deg, var(--clr-accent-btn), var(--clr-accent-btn-hover));
}
@media (max-width: 640px) {
[data-design="new"] button.chatbot-button,
[data-design="new"] button.chatbot-button-deactivated,
[data-design="new"] button.chatbot-button-send {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
}
}
/* RESCOPE: ".copy-button" (webapp.css:746, Teil der Kommaliste ".copy-button,
pre.mermaid-diagram .download-button", als eigenstaendiger Selektor
KLASSE OHNE Element, (0,1,0)) deklariert SELBST padding/font-size/border-
radius/border/background/color/transition -- schlagen die fixierte
Basisregel (0,0,1) jetzt direkt, alle sieben sind entfernt.
".success"/".error" (webapp.css:779/785, je (0,2,0)) brauchen dadurch
KEINE Gegenregel mehr: die vormals noetige Ausnahme bestand nur, weil die
Restaurierung selbst border-color/color auf (0,2,1) gesetzt hatte, hoeher
als ihr (0,2,0) -- ohne diese beiden Eigenschaften in der Restaurierung
gewinnen ".success"/".error" wieder unmittelbar durch ihre eigene, hoehere
Spezifitaet gegenueber ".copy-button" selbst (0,2,0 > 0,1,0), wie vor
diesem gesamten Projekt. Beide Gegenregeln sind deshalb geloescht.
Kein "height" mehr noetig: weder ".copy-button" noch der zweite
Kommaglied-Selektor "pre.mermaid-diagram .download-button" (webapp.css:747
-- derselbe echte Knopf, mermaidrenderer.js:252-257, mit eigenem, nicht
"copy-button" lautendem Klassennamen, siehe dortiger Kommentar "beide
Knoepfe wuerden sonst denselben Selektor beantworten") deklariert selbst
eine Hoehe, aber die Basisregel setzt seit der finalen Entscheidung
ueberhaupt keine Hoehe mehr, also entfaellt der bisherige Reset ersatzlos.
Die Hover-Gegenregel bleibt fuer beide noetig: keiner der beiden Selektoren
traegt ein eigenes Legacy-":hover" fuer "background" (nur ein gemeinsames,
unbedingtes ":focus-within"/":hover" auf einem VORFAHREN fuer "opacity",
eine andere Eigenschaft) -- Legacys REST-Flaeche (0,1,0/(0,2,1),
"background: var(--background-color-input)") verliert waehrend echtem
Hover gegen die Hover-Spezifitaetsrechnung der Basisregel (0,2,1,
"background") bei Gleichstand mit ".copy-button" bzw. direkt bei
".download-button".
Defekt (Abschlussreview): dieselbe Hover-Spezifitaetsrechnung (0,4,1)
schlaegt auch Legacys ".copy-button.success"/".error" (0,2,0) bzw.
"pre.mermaid-diagram .download-button.success"/".error" (0,3,1) --
_showFeedback() (mermaidrenderer.js:258/260) haengt diese Klassen an,
waehrend der Zeiger noch auf dem Knopf steht (Klick => :hover bleibt
aktiv), die gruene/rote Bestaetigungsfarbe fuer border-color wurde also
von der eigenen Hover-Regel hier unterdrueckt. ":not(.success):not(.error)"
nimmt beide Zustaende jetzt strukturell aus der Hover-Regel heraus, statt
noch eine dritte Restaurierungsebene fuer .success/.error draufzusetzen --
ohne Treffer gewinnt Legacys eigene .success/.error-Regel wieder
unbestritten. ".download-button:hover" bekommt zusaetzlich ":not(:disabled)",
das die Copy-Haelfte schon trug. */
[data-design="new"] button.copy-button:hover:not(:disabled):not(.success):not(.error),
[data-design="new"] pre.mermaid-diagram .download-button:hover:not(:disabled):not(.success):not(.error) {
background: var(--background-color-input);
border-color: var(--clr-border);
}
/* Icon Button — Figma "Icon Button", Style=Ghost/Danger, Size=Medium
(38:12/17 Ghost, 38:52/57 Danger): 36x36, quadratisch, Radius 10, kein
Innenabstand, Icon 20x20 (--ax-size-icon-md). Eigene Geometrie statt der
Text-Button-Geometrie oben, deshalb volle Ueberschreibung von
width/padding/background/border.
Produktivklasse: atombuttoncommand.js setzt "button-icon" (Ghost-Default).
Figmas "Style=Filled" (38:32/37) wird bewusst nicht umgesetzt: keine
Produktivklasse erzeugt diesen Stil heute, siehe designgallerypage.js.
align-items/justify-content stehen jetzt HIER statt auf der Basisregel
(die keins von beiden mehr setzt, siehe Header-Kommentar) -- ohne sie
saesse das einzelne Icon oben-links in der 36x36-Flaeche statt zentriert.
Legacys eigenes ".button-icon" (webapp.css:1358, class only, (0,1,0))
deklariert dieselben zwei Werte zufaellig identisch (center/center) und
wuerde sie mangels Gegenregel ohnehin unkontestiert durchreichen -- die
Regel hier macht daraus eine bewusste, nicht zufaellige Design-Aussage. */
[data-design="new"] button.button-icon {
width: var(--ax-size-control-md);
min-height: var(--ax-size-control-md);
padding: 0;
border-radius: var(--ax-radius-md);
background: none;
border: none;
align-items: center;
justify-content: center;
}
[data-design="new"] button.button-icon img {
width: var(--ax-size-icon-md);
height: var(--ax-size-icon-md);
}
[data-design="new"] button.button-icon:hover:not(:disabled) { background: var(--ax-bg-hover); }
/* Danger: atombuttondelete.js setzt "button-icon button-icon--danger".
Flaeche = Figmas status/danger-bg (38:52/38:57), nicht die solide
status/danger -- so wie tatsaechlich aus Figma ausgelesen. */
[data-design="new"] button.button-icon--danger {
background: var(--ax-status-danger-bg);
}
/* Hover: kein Figma-Hover-Wert vorhanden (38:52/38:57 sind nur Default/
Disabled). Statt der neutralen --ax-bg-hover der Geschwisterstile (die
den Rotton komplett aufheben wuerde) hier auf die gesaettigtere, solide
status/danger-Flaeche intensivieren -- bleibt in der Rot-Familie, aendert
sich sichtbar gegenueber dem Ruhezustand (status/danger-bg). */
[data-design="new"] button.button-icon--danger:hover:not(:disabled) { background: var(--ax-status-danger); }
/* Nachtrag F3 (2026-09-22): die Diktierfunktion entfaellt ueberall (Anwender:
"Es gibt den Voice Chat, das reicht."), damit auch der Diktier-Button und
seine Klasse ".dictation-active" -- die Regel dafuer (frueher hier, siehe
Historie) ist damit Waise und entfernt. */
/* Link — Figma "Link" (110:38 Inline, 110:47 Standalone; beide Style-Varianten
sind optisch identisch, AtomDisplayLink unterscheidet den Kontext nicht,
eine Regel fuer genuegt). Textstil "Label/Button": derselbe Inter Semi
Bold 13/18 wie der Button, keine Unterstreichung im Ruhezustand. */
:where([data-design="new"]) a {
font-family: var(--ax-font-sans);
font-size: var(--ax-font-size-label-md);
line-height: var(--ax-line-height-label-md);
font-weight: 600;
color: var(--ax-text-link);
text-decoration: none;
cursor: pointer;
transition: color 120ms ease-out, box-shadow 120ms ease-out;
}
:where([data-design="new"]) a:hover:not(.disabled) { text-decoration: underline; }
:where([data-design="new"]) a:focus-visible {
box-shadow: var(--ax-focus-ring);
outline: 2px solid transparent;
outline-offset: 2px;
transition: none;
}
/* AtomDisplayLink rendert ohne href (Befehls-Trigger, keine Navigation);
:disabled existiert fuer nicht. Atom.disable() setzt stattdessen die
Klasse .disabled (ElementVisibility.disable), deshalb hier statt :disabled.
ElementVisibility.disable() setzt IMMER beides: element.disabled UND die
Klasse "disabled" -- letztere kollidiert mit dem UNSCOPED, designunabhaengigen
webapp.css:1283 (".disabled { color: var(--font-color-disabled); background-
color: var(--background-color-disabled); }"). Fuer color gewinnt die Basis-
regel [data-design="new"] a { color: var(--ax-text-link); } bereits per
Spezifitaet (0,1,1 > 0,1,0) -- aber KEINE Regel hier setzt bislang
background, also gewinnt webapp.css:1283 dafuer unbestritten: ein Link im
Disabled-Zustand bekaeme einen grauen Kasten (--clr-surface-3), den Figma
fuer Links nicht kennt (keine Flaeche in keinem Link-Zustand). Deshalb hier
explizit auf "none" zurueckgesetzt -- gefunden erst, seit .disable() auf
dieser Kachel ueberhaupt greift (siehe Fix zu Concern 1, vorige Runde). */
[data-design="new"] a.disabled {
opacity: .5;
cursor: default;
pointer-events: none;
background: none;
}
@media (prefers-reduced-motion: reduce) {
:where([data-design="new"]) a { transition: color 120ms ease-out; }
}
/* RESCOPE (vormals "Critical 2"): zehn bestehende Anker-Stellen
(webapp.css:1110/2277/2287/2649/3271/4686/5005/6129/11805/12807/13262)
ueberschnitten sich mit der (vor dem Rescope) praefigierten Basisregel.
AtomDisplayLink (atomdisplaylink.js) rendert ein ohne unterscheidende
Klasse -- eine Markup-Aenderung ist laut Plan nicht sanktioniert, die
Restaurierung bleibt darum je Klasse bestehen. Seit :where() (Header-
Kommentar) reicht Legacys eigene Spezifitaet fuer JEDE Eigenschaft, die
die jeweilige Klasse SELBST deklariert, wieder aus -- geblieben ist nur,
was WEITERHIN noetig ist:
- Typografie (font-family/-size/line-height/font-weight): KEINE der
zehn Stellen hatte je eine eigene Schriftregel (Ausnahme: .branding-
preview-card setzt font-size:0.875rem, .dropdown-content-small/
.navbar2 .dropdown-content setzen font-size:10px/12px direkt selbst
-- dort jeweils nur "font-family" als Leck geblieben, "font-size" ist
redundant und entfernt; die uebrigen sieben behalten alle vier
Eigenschaften). Kein Legacy-Gegenstueck bedeutet: :where() aendert
nichts (keine Spezifitaet noetig, wenn niemand sonst die Eigenschaft
setzt) -- bleibt bestehen als "inherit"/literaler Legacy-Wert.
- Farbe/Unterstreichung: ALLE zehn Klassen deklarieren color SELBST
direkt auf dem Anker-Selektor (mindestens (0,1,1), teils (0,0,2) bei
"td a") -- das schlaegt die fixierte Basisregel (0,0,1) jetzt direkt,
unabhaengig von der Ladereihenfolge. Die vier ":not(:hover)"-Farb-
Ausnahmen (.cardlist/.dropdown-content(-small)/.navbar2 .dropdown-
content) sind deshalb komplett entfernt -- ihr einziger Zweck war,
die vormals (0,2,1)-hoehe Ruhezustands-Restaurierung waehrend des
Hovers von der jeweiligen Legacy-:hover-Farbregel fernzuhalten; ohne
diese Ruhezustands-Restaurierung entfaellt der Interessenkonflikt,
Legacys eigene .KLASSE-a(-Ruhezustand, niedriger) gegen .KLASSE-
a:hover(hoeher) loest sich unveraendert durch normale Kaskade.
- "td a" (webapp.css:2287, ZWEI Elemente ohne Klasse, (0,0,2)) schlaegt
die fixierte Basisregel (0,0,1) fuer color/text-decoration ebenfalls
direkt (b-Spalte gleich null bei beiden, c-Spalte 2>1) UND verliert
gegen ".bot-message a"/".msg-bubble-bot a" (je (0,1,1), b-Spalte
1>0) unveraendert bei einem Link innerhalb einer Tabelle in einer
Bot-Antwort -- derselbe vereinheitlichte Linkstil wie zuvor, jetzt
aus Legacys eigener Spezifitaet statt aus zwei komponenten.css-
Restaurierungen. */
[data-design="new"] .bot-message a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .msg-bubble-bot a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] td a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .result-card a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .cardlist a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .notification-markdown a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .function-assistant-explanation a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
}
[data-design="new"] .branding-preview-card a {
font-family: inherit;
line-height: inherit;
font-weight: inherit;
}
/* Defekt (Abschlussreview): .sourceinfo a (webapp.css:1110) deklariert nur
color/cursor, KEIN text-decoration -- die Basisregel-Zeile "a { ...
text-decoration: none }" traf deshalb unbestritten, und die Quellenangaben-
Links in Chat-Antworten/Ergebniskarten/Wissensdatenbank-Suche verloren im
Ruhezustand ihre Unterstreichung. Hier explizit wiederhergestellt. */
[data-design="new"] .sourceinfo a {
font-family: inherit;
font-size: inherit;
line-height: inherit;
font-weight: inherit;
text-decoration: underline;
}
/* Defekt (Core-Spec Abschnitt 14, Punkt 2 -- in Task 6 GEMESSEN und mit
einer ANDEREN Ursache als der dort genannten): diese Regel trifft auch
".navbar2 .dropdown-content a", denn ".dropdown-content a" ist darin
enthalten. Mit dem rohen Attributpraefix stand sie bei (0,2,1) im
Spezifitaets-Gleichstand mit Legacys ".navbar2 .dropdown-content a"
(webapp.css:4994, ebenfalls (0,2,1)) und gewann ihn ueber die
Ladereihenfolge -- die Eintraege des aufgeklappten Seitennavigations-
Untermenues verloren damit ihre eigenen 12px und erbten 13,3333px vom
Dokument. Gemessen im vollen Stapel (1280x720, neues Design, beide
Themes): 13.3333px mit dieser Regel, 12px nachdem sie per deleteRule
entfernt war.
":where()" traegt keine Spezifitaet bei: die Regel faellt damit auf
(0,1,1) und
- schlaegt weiterhin die Basisregel ":where([data-design=new]) a"
(0,0,1), deren "font-size: var(--ax-font-size-label-md)" sonst
unbestritten traefe -- ohne diese Regel misst ".dropdown-content a"
13px statt der geerbten 13.3333px (per deleteRule gemessen),
- verliert jetzt gegen ".navbar2 .dropdown-content a" (0,2,1) und
gegen ".wf-step-list-footer .dropdown-content a" (workfloweditor.css
:459, auch (0,2,1), font-size 12px) -- bei letzterer bisher nur ueber
die Ladereihenfolge (workfloweditor.css steht in aiprocesseditor.html
:17 und aiprocessstepeditor.html:17 NACH components.css), jetzt
unabhaengig davon. */
:where([data-design="new"]) .dropdown-content a {
font-size: inherit;
}
/* Defekt (Abschlussreview): der vorherige Kommentar hier behauptete, WEDER
.dropdown-content-small NOCH .navbar2 .dropdown-content deklariere
font-family selbst -- falsch, beide tun es (webapp.css:6134/4999,
"font-family: var(--txt)"), genau wie .dropdown-content a oben (webapp.css
:5010), dessen font-family-Restaurierung deshalb schon vorher korrekt
geloescht war ("font-family" fehlt in dessen Regel oben). Das hier
verbliebene "font-family: inherit" ueberschrieb Legacys eigenen Wert also,
statt ein echtes Leck zu stopfen -- entfernt, zur selben Behandlung wie
.dropdown-content a. font-size war schon vorher korrekt entfernt (beide
Klassen deklarieren es SELBST, 10px/12px, webapp.css:6136/5000) -- fuer
diese beiden Klassen bleibt damit ueberhaupt keine Restaurierung noetig. */
/* --- Formulare -------------------------------------------------------------
Figma 13:2 (Input Text), 13:26 (Textarea), 13:50 (Select), 234:38
(Multi-select), 234:2395/234:2447 (Stepper Integer/Decimal), 235:2401
(Secret). Sollwerte (Spec §6, gegen die eigene Extraktion geprueft):
Feld 42px (--ax-size-field-md), Radius 10px (--ax-radius-md), Innenabstand
0/8/0/12 (--ax-space-2/--ax-space-3), Flaeche bg/input, Rahmen 1px
border/default, Wert text/primary.
Betrifft laut Task atominputtext.js, atominputtextarea.js,
atominputselection.js, atominputselectionmulti.js, atominputint.js,
atominputfloat.js, atominputpasswordsecret.js -- alle rendern entweder ein
, ein