/* ══════════════════════════════════════════════════ v2 BUTTONS Destilliert aus Zeile 292-427 (Buttons) und 684-724 (Textlink) des Prototyps. Klassennamen bewusst ohne "mkpi"-Praefix, aber inhaltlich 1:1. ══════════════════════════════════════════════════ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-btn-gap); font-size: var(--ms-control-font); line-height: 1.4; letter-spacing: -0.01em; border-radius: var(--ms-radius-pill); transition: all var(--ms-transition-base); cursor: pointer; text-decoration: none; } .btn-primary { background-color: var(--ms-accent); border: 2px solid var(--ms-accent); color: var(--ms-on-accent); font-size: var(--ms-btn-s-font); font-weight: var(--ms-weight-medium); padding: var(--ms-btn-padding-y) var(--ms-btn-padding-x); min-height: var(--ms-btn-min-height); border-radius: var(--ms-radius-pill); transition: all var(--ms-transition-base); letter-spacing: -0.01em; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-btn-gap); cursor: pointer; text-decoration: none; } /* HOVER IST EIN FARBWECHSEL, NICHT MEHR (Weisung des Betreibers, 2026-09-07). Hier standen `transform: scale(1.02)` und ein farbiger Schlagschatten (`0 4px 16px rgba(accent, .25)`) — uebernommen aus `mkpi-design.css` der Website, dort Zeile fuer Zeile identisch. Die Website hat im Designsystem Vorrang, ABER Abschnitt 4.2 kennt ausdruecklich das Weglassen von Altlasten, und myOFFICE als das andere Verwaltungswerkzeug macht es genau so: `.mo-btn--primary:hover { background: var(--mo-accent-hover); }`. Der Grund ist der Unterschied der Aufgaben. Auf einer Website steht ein Handlungsknopf ein- oder zweimal je Seite und darf antworten. In der Verwaltung stehen Knoepfe in jeder Tabellenzeile, in jeder Werkzeugleiste und in jedem Dialogfuss — dort ist ein wachsender, leuchtender Knopf unter dem Zeiger Unruhe, und beim Ueberfahren einer Liste flackert die halbe Maske. WAS BLEIBT: der Farbwechsel (deutlich, ruhig, aus dem Token) und der Fokusring fuer die Tastatur. Der Druckzustand behaelt sein leichtes Einsinken — das ist eine ANTWORT auf eine Handlung und kein Schmuck. */ .btn-primary:hover { background-color: var(--ms-accent-hover); border-color: var(--ms-accent-hover); } .btn-primary:active { background-color: var(--ms-accent-active); border-color: var(--ms-accent-active); transform: scale(0.98); box-shadow: none; } .btn-primary:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 3px; } .btn-outline { background-color: transparent; /* `--ms-border-control` und nicht `--ms-border-light`: der abgesetzte Knopf IST ein Bedienelement, und dort gehoert der Steuerton hin (designsystem.md, „--ms-border-control gehoert an Bedienelemente"). `--ms-border-light` ist die Kante einer FLAECHE. Der Unterschied ist klein (1,24:1 gegen 1,56:1), aber er zaehlt, wo der Knopf neben einem Formularfeld steht: bei halbdurchsichtigem Grau liest sich ein anderer Ton nicht als andere Staerke, sondern als andere Farbe. Die 1,5 px sind schon der Steuerwert — nur die Farbe war es nicht. */ /* Breite AUS DEM TOKEN, nicht als Zahl: `bin/design-check` verlangt das, sobald der Steuerton im Spiel ist (pruefe_feldrand) — und zu Recht, denn genau daran waren die Feldraender vorher auseinandergelaufen. Der Wert ist unveraendert 1,5 px. */ border: var(--ms-control-border-w) solid var(--ms-border-control); color: var(--ms-text-primary); font-size: var(--ms-control-font); font-weight: var(--ms-weight-medium); padding: var(--ms-btn-padding-y) var(--ms-btn-padding-x); min-height: var(--ms-btn-min-height); border-radius: var(--ms-radius-pill); transition: all var(--ms-transition-base); letter-spacing: -0.01em; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-btn-gap); cursor: pointer; text-decoration: none; } .btn-outline:hover { /* Vorher `--ms-text-primary` — der TEXTTON als Rahmen, 16,83:1 auf Weiss und damit praktisch Schwarz (im Dunkelmodus 15,63:1, praktisch Weiss). Es war die einzige Stelle im ganzen Stylesheet, die einen Textton als Rahmenfarbe benutzte, und sie sah entsprechend aus. Jetzt der dafuer gedachte Randton: 2,32:1 hell, 3,25:1 dunkel — sichtbar staerker als der ruhende Rand, und immer noch schwaecher als der Fokus. */ border-color: var(--ms-border-control-hover); /* Grauer Tint statt Schwarz mit 4 %: auf dunklem Grund waere Schwarz unsichtbar. */ background-color: rgba(var(--ms-text-tertiary-rgb), 0.12); color: var(--ms-text-primary); } /* Rot bleibt hier bewusst (z.B. "keine Abholung geplant"): es signalisiert eine Information, keine Zierde — dieselbe Absicht wie im alten System. */ /* Rand und Schrift tragen verschiedene Anforderungen: die Begrenzung eines Bedienelements braucht 3:1 (WCAG 1.4.11) — --ms-error liegt auf Weiss bei 3,55:1 und genuegt —, die Beschriftung 4,5:1, und dort genuegt es nicht. Deshalb --ms-error am Rand und --ms-error-text in der Schrift. */ .btn-outline-danger { border-color: var(--ms-error); color: var(--ms-error-text); } .btn-outline-danger:hover { background-color: rgba(var(--ms-error-rgb),0.06); border-color: var(--ms-error); color: var(--ms-error-text); } /* ══ AKTIONS-SYMBOL ══════════════════════════════════════════════════ Ein Symbol, das eine Handlung IST — Stift, Papierkorb, Pfeil, Auge. KEIN sichtbarer Knopf: kein Rahmen, kein Grund, keine Fuellung. Was man sieht, ist das Symbol; dass es bedienbar ist, sagt der Zeiger und der Hover. ABGELOEST HAT ES ZWEI BAUTEILE (2026-09-10, Weisung des Betreibers): .icon-btn 44px Flaeche, ohne Rahmen, Glyphe 1em .detail-file-btn 32px Flaeche, MIT Rahmen und gefuelltem Grund, Glyphe 1em — es sah aus wie ein Knopf, und mit 63 Fundstellen war es zugleich das haeufigere Zwei Bauteile fuer dieselbe Sache heissen zwei Groessen, zwei Hoverbilder und zwei Orte, an denen man etwas aendern muss. Die Namen bleiben als Uebergang bestehen (ganz unten), damit keine Vorlage stillschweigend ohne Gestaltung dasteht. DIE GLYPHE HAENGT NICHT MEHR AN DER SCHRIFTGROESSE. `.ms-ico` misst in `em` — richtig fuer ein Symbol IM Text, falsch fuer eines, das allein in einer Zelle steht: es war in der Verwaltung (15px Zeilentext) kleiner als im Kundenbereich. Hier zaehlt `--ms-action-ico`, und damit ist ein Aktions-Symbol ueberall gleich gross. HOVER: FLAECHE, FARBE UND EIN WENIG BEWEGUNG. myOFFICE nimmt Flaeche und Farbe; die Vergroesserung ist die Zutat, nach der gefragt wurde. Sie ist klein gehalten (`--ms-action-scale-hover`, 1.12): in einer Handlungsspalte stehen drei bis vier Symbole nebeneinander, und jede Bewegung darin wird viermal gesehen. Bewegt wird die GLYPHE, nicht die Flaeche — sonst verschoebe sich die Trefferflaeche unter dem Zeiger, und ein Klick ginge daneben. ═══════════════════════════════════════════════════════════════════ */ .icon-action { display: inline-flex; align-items: center; justify-content: center; width: var(--ms-action-hit); height: var(--ms-action-hit); flex: none; padding: 0; border: none; border-radius: var(--ms-radius-sm); background: none; color: var(--ms-action-color); cursor: pointer; text-decoration: none; vertical-align: middle; transition: background var(--ms-transition-fast), color var(--ms-transition-fast); } /* Die Groesse steht HIER und nicht am Symbol: `.ms-ico` bleibt das Bauteil fuer Symbole im Text, dieses Bauteil setzt seine eigene. */ .icon-action .ms-ico { width: var(--ms-action-ico); height: var(--ms-action-ico); vertical-align: middle; transition: transform var(--ms-transition-fast); } .icon-action:hover { background: var(--ms-action-bg-hover); color: var(--ms-action-color-hover); } .icon-action:hover .ms-ico { transform: scale(var(--ms-action-scale-hover)); } /* Der Druckpunkt: die Glyphe geht kurz unter ihre Ruhegroesse. Das ist die Rueckmeldung, die ein Knopf sonst ueber seinen Rahmen gibt. */ .icon-action:active .ms-ico { transform: scale(var(--ms-action-scale-active)); } .icon-action:focus-visible { outline: 2px solid var(--ms-accent); outline-offset: 2px; } /* ── Zurueckhaltende Fassung ── Eine Stufe heller: `--ms-text-tertiary` statt `--ms-text-secondary` (3,62:1 auf Weiss, 5,22:1 auf der dunklen Karte). Das ist GENAU der Gebrauch, den Regel 8 des Designsystems fuer diesen Ton vorsieht — er ist „fuer Text, den man lesen soll, nicht zulaessig — es bleibt Bedien-Symbolen und Platzhaltern vorbehalten" —, und er liegt ueber den 3:1, die WCAG 1.4.11 fuer Bedienelemente verlangt. FUER SYMBOLE NEBEN EINER UEBERSCHRIFT, nicht fuer Handlungen in einer Tabellenzeile: dort ist das Symbol der einzige Weg zur Handlung und darf nicht zurueckweichen. Hier steht es neben einem Titel, der die Aufmerksamkeit traegt (Weisung des Betreibers, 2026-09-16: das Zahnrad ueber dem Kennzahlenband). Beim Zeigen und beim Tasten-Fokus gilt unveraendert die volle Farbe — die Zurueckhaltung ist der RUHEZUSTAND und keine Abschwaechung des Bedienelements. */ .icon-action--muted { --ms-action-color: var(--ms-text-tertiary); } /* Loeschen zeigt seine Folge erst beim Hinsehen — dauerhaft rot waere jede Zeile einer Liste ein Warnsignal. Uebernommen aus `.icon-btn--danger`. */ .icon-action--danger:hover { background: var(--ms-error-muted); color: var(--ms-error-text); } .icon-action--success:hover { color: var(--ms-success-text); } /* EINGESCHALTET, nicht ueberfahren: der Stern an der eigenen Vorgabe. Eine eigene Klasse und nicht `:hover`, weil der Zustand auch ohne Maus sichtbar sein muss. */ .icon-action--active { color: var(--ms-accent); } /* ── Ungelesene Notizen in einer Bestellzeile (2026-09-21) ── ZWEI ZUSTAENDE UND KEINE ZAHL (Weisung des Betreibers): ob etwas Neues da ist, nicht wie viel. Der Ruhezustand ist gedaempft, der Signalzustand traegt den Akzent — dieselbe Farbe, die vorher der Streifen am Zeilenanfang trug. WARUM EINE EIGENE KLASSE UND NICHT `.icon-action--muted`: jene schliesst den gedaempften Ruhezustand fuer Tabellenzeilen ausdruecklich aus, weil dort das Symbol der einzige Weg zur Handlung ist und nicht zurueckweichen darf. Hier ist es eine ZUSTANDSANZEIGE — der Ruhezustand IST die Aussage „nichts Neues", und zu den Notizen fuehrt daneben die Bestellung selbst. Die Regel bleibt damit unangetastet, statt mit einer Ausnahme aufgeweicht zu werden. `--ms-text-tertiary` liegt bei 3,62:1 auf Weiss und 5,22:1 auf der dunklen Karte — ueber den 3:1, die WCAG 1.4.11 fuer Bedienelemente verlangt. Beim Zeigen und beim Tasten-Fokus gilt unveraendert `--ms-action-color-hover`. Die Farbe ist ausserdem nie der EINZIGE Traeger der Aussage: Sprechblase und `aria-label` sagen sie in Worten (WCAG 1.4.1). */ .icon-action--notiz { --ms-action-color: var(--ms-text-tertiary); } /* DER SIGNALZUSTAND IST EINE GEFUELLTE FLAECHE (Weisung des Betreibers, 2026-09-21: „koennen wir das in ausgefuellt darstellen"). Die blosse Einfaerbung der Glyphe stand zwischen zwei anderen Strichsymbolen und war auf einem Blick ueber fuenfzig Zeilen leicht zu uebersehen — im Browser nebeneinandergestellt und verglichen. ZWEI TOKENS, MEHR NICHT: `--ms-accent` als Grund, `--ms-on-accent` als Glyphe. Das ist genau das Paar, das `bin/design-check` fuer Knopftext auf dem Akzent nachrechnet (4,61:1 im Dunkelmodus, Weiss auf #0072E3 im Hellen) — hier traegt es eine 18px-Strichzeichnung, also Grossschrift-Verhaeltnisse. Die Form kommt unveraendert von `.icon-action` (36px, `--ms-radius-sm`); es wird nichts vergroessert, sonst ruecken die drei Nachbarn in jeder Zeile an eine andere Stelle. DER HOVER MUSS MIT: `.icon-action:hover` legt einen GRAUSCHLEIER (`--ms-action-bg-hover`) auf und setzt die Glyphe auf `--ms-action-color-hover` — auf dem gefuellten Akzent waere der Schleier Matsch und die Glyphe (`--ms-text-primary`) im Hellen fast unlesbar. Beide Werte werden deshalb hier gedreht: Grund auf `--ms-accent-hover`, Glyphe bleibt `--ms-on-accent`. Die Spezifitaet (0,3,0 gegen 0,2,0) genuegt dafuer. DIE FARBE IST NIE DER EINZIGE TRAEGER: Sprechblase und `aria-label` sagen in Worten, was sie bedeutet (WCAG 1.4.1). */ .icon-action--notiz.is-neu { --ms-action-color: var(--ms-on-accent); --ms-action-color-hover: var(--ms-on-accent); background: var(--ms-accent); } .icon-action--notiz.is-neu:hover { background: var(--ms-accent-hover); } /* Gesperrt: sichtbar da, aber ohne Wirkung. `pointer-events: none` nimmt ihm zugleich den Hover — ein Symbol, das aufleuchtet und nichts tut, ist eine Falschauskunft. */ .icon-action:disabled, .icon-action.is-disabled, .icon-action[aria-disabled="true"] { opacity: 0.35; cursor: not-allowed; pointer-events: none; } /* Wer Bewegung abbestellt hat, bekommt Flaeche und Farbe — die Auskunft bleibt vollstaendig, nur die Vergroesserung entfaellt. */ @media (prefers-reduced-motion: reduce) { .icon-action .ms-ico { transition: none; } .icon-action:hover .ms-ico, .icon-action:active .ms-ico { transform: none; } } /* Eine Reihe von Aktions-Symbolen — der Abstand kommt aus dem Token, damit Handlungsspalten und Kartenecken denselben Rhythmus haben. */ .icon-actions { display: inline-flex; align-items: center; gap: var(--ms-action-gap); } /* `.icon-btn` und `.detail-file-btn` sind am 2026-09-10 in `.icon-action` aufgegangen. `.detail-file-btn` stand einen halben Tag als Alias hier, weil eine parallele Sitzung eine Vorlage hielt, die den Namen schrieb; sie ist umgestellt, der Alias ist weg. Beide Namen kommen in dieser Datei nur noch im Kopf des Bauteils vor, als Herkunft. */ .btn-outline:active { background-color: rgba(var(--ms-text-tertiary-rgb), 0.24); } /* Grundform aller gefuellten/umrissenen Varianten. Im Prototyp steckt sie in .btn, das dort IMMER mitgegeben wird (`class="btn btn-success"`). Hier traegt jede Variante sie selbst, damit ein Knopf nie versehentlich ohne Form dasteht — genau das war bei .btn-success passiert (display:block, border-radius:0, cursor:default). */ .btn-primary, .btn-outline, .btn-success, .btn-teal { display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-btn-gap); border-radius: var(--ms-radius-pill); line-height: 1.4; letter-spacing: -0.01em; cursor: pointer; text-decoration: none; transition: all var(--ms-transition-base); } .btn-success { background-color: var(--ms-success); border: 2px solid var(--ms-success); color: var(--ms-on-accent); font-weight: var(--ms-weight-medium); padding: var(--ms-btn-xl-py) var(--ms-btn-xl-px); min-height: var(--ms-btn-xl-height); font-size: var(--ms-btn-xl-font); } .btn-success:hover { background-color: var(--ms-success-hover); border-color: var(--ms-success-hover); } /* Tuerkis aus dem Markenverlauf (--ms-gradient-end), helle Schrift wie bei den anderen gefuellten Knoepfen (--ms-text-primary-dark ist die helle Textfarbe fuer dunkle Flaechen, dieselbe wie in .btn-primary). Hinweis fuer spaetere Anpassungen: Hell auf #00B4A0 ergibt rechnerisch 2,6:1 und liegt damit unter den 4,5:1 der WCAG-Stufe AA — bewusst so entschieden, weil der Markenton erhalten bleiben soll. Wer den Kontrast spaeter anheben will, ohne die Schriftfarbe zu tauschen, muesste das Tuerkis abdunkeln (ab etwa #00806F traegt helle Schrift). Halbfette Schrift steht hier deshalb bewusst statt der sonst ueblichen mittleren. */ .btn-teal { background-color: var(--ms-teal); border: 2px solid var(--ms-teal); color: var(--ms-on-accent); font-weight: var(--ms-weight-semibold); font-size: var(--ms-btn-s-font); padding: var(--ms-btn-padding-y) var(--ms-btn-padding-x); min-height: var(--ms-btn-min-height); } .btn-teal:hover { background-color: var(--ms-teal-hover); border-color: var(--ms-teal-hover); } .btn-teal:active { background-color: var(--ms-teal-active); border-color: var(--ms-teal-active); transform: scale(0.98); box-shadow: none; } .btn-teal:focus-visible { outline: 2px solid var(--ms-teal-active); outline-offset: 3px; } /* T-Shirt-Groessen — auf .btn-primary/.btn-outline/.btn-success anwendbar */ .btn-xs { padding: var(--ms-btn-xs-py) var(--ms-btn-xs-px); font-size: var(--ms-btn-xs-font); min-height: var(--ms-btn-xs-height); } .btn-s { padding: var(--ms-btn-s-py) var(--ms-btn-s-px); font-size: var(--ms-btn-s-font); min-height: var(--ms-btn-s-height); } .btn-m { padding: var(--ms-btn-m-py) var(--ms-btn-m-px); font-size: var(--ms-btn-m-font); min-height: var(--ms-btn-m-height); } .btn-l { padding: var(--ms-btn-l-py) var(--ms-btn-l-px); font-size: var(--ms-btn-l-font); min-height: var(--ms-btn-l-height); } .btn-xl { padding: var(--ms-btn-xl-py) var(--ms-btn-xl-px); font-size: var(--ms-btn-xl-font); min-height: var(--ms-btn-xl-height); } /* ───────────────────────────────────────────────────────────────────────── DIE HOEHEN-TOKEN GELTEN AB HIER WOERTLICH. Vorher war `--ms-btn-*-height` nur eine UNTERGRENZE, die tatsaechliche Hoehe bildete sich aus Schrift, senkrechtem Innenabstand und Rahmen — und lag ueber dem Token: .btn-s (16px Schrift, Zeilenhoehe 1.4 = 22,4px) + 2x10px Abstand + 2x2px Rahmen = 46,4px statt der genannten 44px (.btn-primary) + 2x1,5px = 45,4px (.btn-outline) Das hatte drei sichtbare Folgen: - Knopf und Eingabefeld in einer Reihe waren nie gleich hoch (Felder sitzen auf --ms-control-h = --ms-btn-s-height = 44px). Genau das ist beim Umbau der Produktuebersicht und der Anmeldung je einzeln aufgefallen und je einzeln geflickt worden. - Zwei Knoepfe NEBENEINANDER waren unterschiedlich hoch, sobald sie verschiedene Rahmenbreiten hatten: im Bestaetigungsdialog des Adressbuchs „Abbrechen" 45px gegen „Löschen" 44px. - Wer eine Hoehe aus dem Token ablas, rechnete mit einem falschen Wert. Mit `padding-block: 0` ergibt `min-height` plus die mittige Ausrichtung des Flex-Kastens genau die Token-Hoehe — unabhaengig von der Rahmenbreite, weil `box-sizing: border-box` gilt. Der WAAGERECHTE Abstand bleibt unberuehrt, die Knopfbreiten aendern sich also nicht. ABWEICHUNG VON mkpi.de: dort sind kleine Knoepfe dadurch 2,4px hoeher. Die Token-WERTE bleiben unveraendert (sie haben Vorrang), nur ihre Auslegung wird verbindlich. Der Gewinn — jedes Bedienelement der Anwendung auf einer Hoehe — wiegt 2,4px auf. Siehe docs/architecture/designsystem.md, Regel 7. EINSCHRAENKUNG: bei einer Beschriftung, die auf zwei Zeilen umbricht, waechst der Knopf ueber die Token-Hoehe (das soll `min-height` auch) und der Text liegt dann ohne Luft an den Kanten. Knopfbeschriftungen sind im System kurz; bricht eine um, ist die Beschriftung das Problem, nicht die Hoehe. ───────────────────────────────────────────────────────────────────────── */ .btn, .btn-primary, .btn-outline, .btn-success, .btn-teal, .btn-xs, .btn-s, .btn-m, .btn-l, .btn-xl { padding-top: 0; padding-bottom: 0; } /* Textlink-Button: Fliesstext-Farbe (siehe base.css), kein Rahmen/Hintergrund, Chevron als Hover-Hinweis. */ .btn-text { background: none; border: none; box-shadow: none; color: var(--ms-link); font-weight: var(--ms-weight-medium); font-size: var(--ms-text-body); line-height: 1.4; padding: 0; margin: 0; text-decoration: none; transition: color var(--ms-transition-fast); cursor: pointer; display: inline-flex; align-items: center; gap: var(--ms-space-1); } /* DIE FALLE, DIE DAS HAUS INZWISCHEN ACHT MAL KENNT (`.badge[hidden]`, `.tab-pane[hidden]`, `.panel-foot--bar[hidden]`, `.scan-stage[hidden]`, `.scan-start[hidden]`, `.toolbar-daterange[hidden]`, `.suggest-wrap[hidden]`, `.image-preview[hidden]`): `display: inline-flex` oben ist eine Autorenregel und schlaegt die Browser-Regel `[hidden] { display: none }`. ZWEI STELLEN IM BETRIEB (gefunden 2026-09-16 von der neuen Pruefung `pruefe_verborgene_bauteile`): „Bild entfernen" in der Artikelmaske stand auch bei einem Artikel OHNE Bild da, und derselbe Knopf in der Katalogmaske ebenso. Ein Knopf, der etwas entfernen will, das es nicht gibt. */ .btn-text[hidden] { display: none; } /* Erledigt — dieselbe Aussage, die `.aside-action.is-done` in der frueheren Seitenspalte trug: der Haken im Knopf wird gruen, der Knopf bleibt ein Knopf. Er MUSS einer bleiben, weil sich eine Rueckgabemenge korrigieren laesst (der Controller bucht dann die Differenz). */ .btn-outline.is-done .ms-ico { color: var(--ms-success-text); } .btn-text:hover { color: var(--ms-accent-hover); } /* Gedaempfte Fassung fuer nachgeordnete Aktionen, die direkt neben einem Hauptknopf stehen (Zuruecksetzen in der Werkzeugleiste). In Blau und Fliesstextgroesse ist ein solcher Verweis ein zweiter Blickfang und konkurriert mit dem Knopf, obwohl er den Ruecksprung und nicht das Ziel beschreibt. Drei Stufen leiser, alle aus dem System: Farbe --ms-text-secondary statt --ms-link Groesse --ms-text-small (14px) statt --ms-text-body (16-18px) Gewicht regular statt medium WARUM NICHT NOCH HELLER: die naechste Stufe waere --ms-text-tertiary (#86868B). Auf dem grauen Band der Werkzeugleiste (#F5F5F7) ergibt das 3,33:1 und verfehlt die AA-Grenze von 4,5:1 fuer normalen Text; --ms-text-secondary liegt bei 4,66:1. Heller heisst hier also unlesbar, deshalb ist die Groesse das Mittel und nicht die Farbe. WARUM NICHT --ms-text-caption (12px): 12px ist fuer ein anklickbares Element zu klein — der Text schrumpft dann schneller als die Trefferflaeche, die er beschreibt. Wer noch weiter herunter will, sollte stattdessen den Chevron und das Wort kuerzen. */ .btn-text--muted { color: var(--ms-text-secondary); font-size: var(--ms-text-small); font-weight: var(--ms-weight-regular); } .btn-text--muted:hover { color: var(--ms-text-primary); } .btn-text::after { content: ' \203A'; font-size: var(--ms-ico-plus); transition: transform var(--ms-transition-fast); display: inline-block; } .btn-text:hover::after { transform: translateX(3px); } /* Ohne Chevron: das Zeichen zeigt nach VORN ("mehr davon", "weiter") und ist fuer einen Ruecksprung inhaltlich falsch. Es weglassen macht den Verweis zugleich ruhiger. ZUR REIHENFOLGE: muss NACH .btn-text::after stehen. Beide haben dieselbe Spezifitaet (eine Klasse plus Pseudoelement), also entscheidet die Position — davor gesetzt verlor die Regel und der Chevron blieb sichtbar. */ .btn-text--muted::after { content: none; } /* ── Gesperrter Knopf ── Ein Formular, dessen Pflichtfelder nicht stimmen, sperrt seinen Speichern- Knopf (assets/v2-validate.js). Gesperrt heisst: flach, grau, kein Zeiger, keine Hover-Bewegung. Der Kontrast des Textes liegt hier absichtlich unter AA — WCAG 1.4.3 nimmt inaktive Bedienelemente aus, und ein gesperrter Knopf SOLL zuruecktreten; wer wissen will warum, sieht es an den roten Feldern und am Fortschritt daneben. `aria-disabled` deckt den Fall ab, in dem ein Knopf ausserhalb des
steht (LiveComponent) und `disabled` allein das Absenden per Tastatur nicht verhinderte. */ .btn-primary:disabled, .btn-primary[aria-disabled="true"], .btn-success:disabled, .btn-success[aria-disabled="true"], .btn-teal:disabled, .btn-teal[aria-disabled="true"], .btn-outline:disabled, .btn-outline[aria-disabled="true"] { background-color: var(--ms-bg-secondary); border-color: var(--ms-border-light); color: var(--ms-text-tertiary); cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; }