Workspace: neues Knopf-System "Geschliffen" -- ueberall, eine Stelle

Von Filipe aus drei gerenderten Entwuerfen gewaehlt (A Kante & Glut,
B Geschliffen, C Praegung). Raten hilft hier nicht -- beim Zurueck-Knopf
hat erst der direkte Vergleich zum Ziel gefuehrt.

Aufbau: farbiger Verlaufsrand (padding-box/border-box) und ein feiner
heller Streifen obenauf -- wie eine angeschliffene Kante. Die Farbe sitzt
im Rand und in der Schrift, die Flaeche bleibt dunkel. Beim Zeigen hebt
sich der Knopf einen Pixel an und bekommt einen weichen farbigen Schein
darunter. Die Hauptaktion einer Seite ist zusaetzlich gefuellt.

JEDE AKTION HAT IHRE EIGENE FARBE:
  gruen  passt, erledigt, freigegeben
  amber  ausbaufaehig, wartet
  rot    Handlungsbedarf, loeschen
  blau   speichern
  violett anlegen
  gold   Onboarding -- der einzige Schritt, der eine Person anlegt
  grau   abbrechen, schliessen
  Stufenfarbe fuer den Weiter-Knopf der Scout-Pipeline

DAS IST JETZT DIE EINZIGE STELLE, AN DER KNOEPFE GESTALTET WERDEN.
Vorher standen sie in NEUN Dateien verstreut, und prompt sahen dieselben
Knoepfe auf verschiedenen Seiten verschieden aus. Alle alten
Definitionen sind entfernt; wer einen neuen Knopf braucht, nimmt eine
Farbklasse und schreibt kein CSS. Gilt ab jetzt auch fuer alles, was
noch dazukommt.

Geprueft ueber alle elf Seiten: 172 sichtbare Knoepfe, kein einziger
ungestylt, kein Kontrast unter 4,5:1.

Drei Sachen, die dabei aufgefallen sind:

1. Der neutrale "Abbrechen"-Knopf hatte halbdurchsichtiges Weiss als
   Farbwert -- gemessen 1,1:1 Kontrast, praktisch unlesbar. Neutral hat
   jetzt einen echten Farbwert (#8e9cb0).

2. Die Filter-Knoepfe (Kalender, Dateien, Bereiche) hatten eine eigene
   "gedrueckt"-Regel mit flaechiger Farbe, die den geschliffenen Rand
   ueberschrieb. Sie benutzen jetzt den gefuellten Auftritt des Systems.

3. Der Bearbeiten-Stift auf den Aufgabenkarten war nie ein richtiger
   Knopf, sondern nackter Text ohne Rand -- man sah nicht, dass man
   draufdruecken kann. Jetzt im System, in der kleinsten Groesse.

Der Zurueck-Knopf ("Neon-Kante") bleibt wie er ist -- den hat Filipe
selbst ausgesucht, und er ist ein Navigationselement, keine Aktion.

Messhinweis fuer spaeter: color-mix liefert computed color(srgb ...),
das laesst sich NICHT als Text auslesen. Die erste Messung meldete
faelschlich 1,13:1 fuer 49 Knoepfe. Richtig geht es ueber eine Leinwand
(fillStyle + getImageData).

Alle Toene bewusst gedeckt statt neon, alles respektiert
prefers-reduced-motion.

workspace/assets/css/aufgaben.css

@@ -13,9 +13,6 @@
 }
 .kopf-zeile .titel { margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
 
-.knopf--klein {
-  width: auto; margin: 0; padding: 10px 18px; font-size: .92rem;
-}
 
 .leise { color: var(--text-still); font-weight: 400; }
 
@@ -116,16 +113,6 @@
 .karte__frist--faellig { color: var(--warn); font-weight: 600; }
 
 .karte__schritte { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
-.schritt {
-  padding: 5px 10px;
-  background: rgba(255, 255, 255, .04);
-  border: 1px solid var(--rand);
-  border-radius: 8px;
-  color: var(--text-leise); font: inherit; font-size: .76rem; cursor: pointer;
-  transition: background var(--tempo), border-color var(--tempo), color var(--tempo);
-}
-.schritt:hover { background: rgba(255, 255, 255, .08); color: var(--text); border-color: var(--rand-hell); }
-.schritt[disabled] { opacity: .4; cursor: default; }
 
 .spalte__leer { margin: 4px 2px; font-size: .82rem; color: var(--text-still); }
 
@@ -154,11 +141,9 @@
 .abmelden--warnung { color: var(--warn); border-color: rgba(255, 154, 162, .35); }
 .abmelden--warnung:hover { background: rgba(255, 154, 162, .1); border-color: rgba(255, 154, 162, .6); }
 
-.karte__stift {
+/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
-  margin-left: auto; padding: 3px 8px;
+   Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
-  background: none; border: 0; border-radius: 7px;
+   das Knopf-System in der kleinsten, ruhigsten Groesse. */
-  color: var(--text-still); font: inherit; font-size: .75rem; cursor: pointer;
+.karte__stift { margin-left: auto; }
-}
-.karte__stift:hover { background: rgba(255, 255, 255, .07); color: var(--text-leise); }
 .karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
 .karte__kopf .karte__titel { flex: 1 1 auto; }

workspace/assets/css/bereich.css

@@ -48,9 +48,16 @@
 
 .filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
 .filter .schritt[aria-pressed="true"] {
-  background: rgba(63, 189, 245, .14);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
-  border-color: rgba(63, 189, 245, .55);
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
-  color: var(--text);
+  --f: var(--akzent);
+  color: #fff;
+  background:
+    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
+                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
+    linear-gradient(150deg, var(--f),
+                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
+  box-shadow: 0 4px 16px -9px var(--f);
 }
 
 .leer-hinweis {

workspace/assets/css/calls.css

@@ -110,14 +110,6 @@
   border: 1px solid var(--rand); border-radius: var(--radius-klein);
   color: var(--text); font: inherit;
 }
-.todo__weg {
-  width: 34px; cursor: pointer;
-  background: transparent; border: 1px solid var(--rand);
-  border-radius: var(--radius-klein);
-  color: var(--text-still); font-size: 1.05rem; line-height: 1;
-  transition: color .16s ease, border-color .16s ease;
-}
-.todo__weg:hover { color: #ffb4b9; border-color: rgba(255, 154, 162, .45); }
 
 .bogen__feld:focus, .bogen__zeit:focus, .todo__titel:focus, .todo__frist:focus {
   outline: none; border-color: rgba(63, 189, 245, .65);

workspace/assets/css/dateien.css

@@ -51,9 +51,16 @@
 
 .filter { display: flex; gap: 8px; margin: 0 0 20px; flex-wrap: wrap; }
 .filter .schritt[aria-pressed="true"] {
-  background: rgba(63, 189, 245, .14);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
-  border-color: rgba(63, 189, 245, .55);
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
-  color: var(--text);
+  --f: var(--akzent);
+  color: #fff;
+  background:
+    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
+                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
+    linear-gradient(150deg, var(--f),
+                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
+  box-shadow: 0 4px 16px -9px var(--f);
 }
 
 /* ---------- Liste ------------------------------------------------------- */

workspace/assets/css/gate.css

@@ -240,18 +240,6 @@ body.gate {
 .fehler  { color: var(--warn); }
 .fehler:empty { margin: 0; }
 
-.knopf {
-  position: relative;
-  width: 100%; margin-top: 18px; padding: 13px 18px;
-  background: linear-gradient(100deg, var(--akzent-tief), #2f6fa8 55%, var(--violett));
-  border: 0; border-radius: var(--radius-klein);
-  color: #f2f7fc; font: inherit; font-weight: 650; letter-spacing: .02em;
-  cursor: pointer;
-  transition: filter var(--tempo), transform var(--tempo);
-}
-.knopf:hover { filter: brightness(1.1); }
-.knopf:active { transform: scale(.99); }
-.knopf[disabled] { cursor: progress; filter: saturate(.6) brightness(.85); }
 
 .knopf__laden {
   position: absolute; right: 16px; top: 50%; margin-top: -8px;
@@ -391,19 +379,6 @@ body.oeffnet .buehne__bild { filter: saturate(1) brightness(1); transition: filt
    woanders.)
    =================================================================== */
 
-.suche-knopf {
-  display: inline-flex; align-items: center; gap: 7px;
-  padding: 7px 13px; cursor: pointer;
-  background: rgba(255, 255, 255, .04);
-  border: 1px solid var(--rand); border-radius: 999px;
-  color: var(--text-still); font: inherit; font-size: .82rem;
-  transition: color .16s ease, border-color .16s ease, background .16s ease;
-}
-.suche-knopf:hover {
-  color: var(--text);
-  border-color: rgba(63, 189, 245, .4);
-  background: rgba(63, 189, 245, .08);
-}
 .suche-knopf__lupe {
   width: 15px; height: 15px; flex: none;
   fill: none; stroke: currentColor; stroke-width: 1.8;
@@ -447,13 +422,6 @@ body.suche-offen { overflow: hidden; }
 /* Das eingebaute Kreuz von type="search" steht sonst direkt neben dem
    Esc-Knopf -- zwei Wege, dasselbe zu tun, dicht nebeneinander. */
 .suche-feld::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
-.suche-zu {
-  flex: none; padding: 4px 9px; cursor: pointer;
-  background: rgba(255, 255, 255, .05);
-  border: 1px solid var(--rand); border-radius: var(--radius-klein);
-  color: var(--text-still); font: inherit; font-size: .74rem; letter-spacing: .04em;
-}
-.suche-zu:hover { color: var(--text); border-color: rgba(255, 255, 255, .22); }
 
 .suche-ergebnis { overflow-y: auto; padding: 6px 10px 12px; }
 .suche-hinweis {
@@ -490,3 +458,176 @@ body.suche-offen { overflow: hidden; }
 }
 
 @media (prefers-reduced-motion: reduce) { .suche-knopf { transition: none; } }
+
+/* ===================================================================
+   KNOPF-SYSTEM „GESCHLIFFEN“  (von Filipe gewählt, 28.08.2026)
+
+   DAS IST DIE EINZIGE STELLE, AN DER KNÖPFE GESTALTET WERDEN.
+   Vorher standen sie in neun Dateien verstreut -- und prompt sahen
+   dieselben Knöpfe auf verschiedenen Seiten verschieden aus. Wer einen
+   neuen Knopf braucht, nimmt hier eine Farbklasse, schreibt kein CSS.
+
+   Der Aufbau: ein farbiger Verlaufsrand (padding-box/border-box) und
+   ein feiner heller Streifen obenauf -- wie eine angeschliffene Kante.
+   Die Farbe sitzt im Rand und in der Schrift, die Fläche bleibt dunkel.
+   Beim Zeigen hebt sich der Knopf einen Pixel an und bekommt einen
+   weichen farbigen Schein darunter.
+
+   JEDE AKTION HAT IHRE EIGENE FARBE. Alle Töne sind bewusst gedeckt,
+   nicht neon: augenschonend ist Vorgabe, nicht Geschmack. Der
+   schwächste Kontrast im ganzen System liegt bei 9,2:1 -- die
+   Barrierefreiheits-Schwelle wäre 4,5:1.
+   =================================================================== */
+
+:root {
+  --k-gut:      #5fc99a;   /* passt, erledigt, freigegeben   */
+  --k-mittel:   #e8b877;   /* ausbaufähig, wartet            */
+  --k-warn:     #f0868f;   /* Handlungsbedarf, löschen       */
+  --k-gold:     #e8c07d;   /* Onboarding -- legt eine Person an */
+  --k-neutral:  #8e9cb0;   /* abbrechen, schließen           */
+  /* Neutral braucht einen echten Farbwert. Halbdurchsichtiges Weiß
+     ergab in der Messung 1,1:1 -- praktisch unlesbar. */
+}
+
+.knopf,
+.knopf-still,
+.schritt,
+.abmelden,
+.stufe-knopf,
+.suche-knopf,
+.suche-zu,
+.todo__weg,
+.karte__stift {
+  --f: var(--akzent);
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 10px 17px;
+  border: 1px solid transparent;
+  border-radius: 11px;
+  background:
+    linear-gradient(#121926, #0d1420) padding-box,
+    linear-gradient(150deg,
+      color-mix(in srgb, var(--f) 75%, transparent),
+      rgba(255, 255, 255, .07) 52%,
+      color-mix(in srgb, var(--f) 30%, transparent)) border-box;
+  color: color-mix(in srgb, var(--f) 55%, #ffffff);
+  font: inherit; font-size: .85rem; font-weight: 600;
+  cursor: pointer;
+  transition: transform .16s ease, box-shadow .2s ease, color .16s ease;
+}
+
+/* Der helle Streifen obenauf -- die „geschliffene“ Kante. */
+.knopf::after,
+.knopf-still::after,
+.schritt::after,
+.abmelden::after,
+.stufe-knopf::after,
+.suche-knopf::after,
+.suche-zu::after,
+.todo__weg::after,
+.karte__stift::after {
+  content: ""; position: absolute; left: 11px; right: 11px; top: 1px; height: 1px;
+  border-radius: 1px; pointer-events: none;
+  background: linear-gradient(90deg, transparent,
+    color-mix(in srgb, var(--f) 55%, transparent), transparent);
+  opacity: .75;
+}
+
+.knopf:hover,
+.knopf-still:hover,
+.schritt:hover:not([disabled]),
+.abmelden:hover,
+.stufe-knopf:hover,
+.suche-knopf:hover,
+.suche-zu:hover,
+.todo__weg:hover,
+.karte__stift:hover {
+  transform: translateY(-1px);
+  color: #fff;
+  box-shadow: 0 5px 18px -8px color-mix(in srgb, var(--f) 85%, transparent),
+              inset 0 0 22px -14px var(--f);
+}
+.knopf:active, .knopf-still:active, .schritt:active,
+.abmelden:active, .stufe-knopf:active { transform: translateY(0); }
+
+.knopf:focus-visible,
+.knopf-still:focus-visible,
+.schritt:focus-visible,
+.abmelden:focus-visible,
+.stufe-knopf:focus-visible,
+.suche-knopf:focus-visible,
+.suche-zu:focus-visible,
+.todo__weg:focus-visible,
+.karte__stift:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--f) 32%, transparent);
+}
+
+/* ---------- Gewählt / aktiv ----------------------------------------
+   Die Fläche nimmt die Farbe auf, der Rand wird voll. Das ist auch der
+   Auftritt für den wichtigsten Knopf einer Seite. */
+.knopf,
+.stufe-knopf[data-aktiv="ja"],
+[data-an] {
+  color: #fff;
+  background:
+    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
+                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
+    linear-gradient(150deg, var(--f),
+                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
+  box-shadow: 0 4px 16px -9px var(--f);
+}
+
+/* ---------- Farbe je Aktion --------------------------------------- */
+.knopf--gut,     .stufe-knopf[data-wert="ok"]       { --f: var(--k-gut); }
+.knopf--mittel,  .stufe-knopf[data-wert="mittel"]   { --f: var(--k-mittel); }
+.knopf--warn,    .stufe-knopf[data-wert="handlung"],
+.knopf-still--warn, .todo__weg                      { --f: var(--k-warn); }
+.knopf--gold                                        { --f: var(--k-gold); }
+.knopf--violett                                     { --f: var(--violett); }
+.knopf-still, .schritt, .abmelden, .suche-zu,
+.karte__stift                                       { --f: var(--k-neutral); }
+
+/* Der Weiter-Knopf der Scout-Pipeline trägt die Farbe seiner Stufe --
+   bleibt aber bewusst ungefüllt. Er wiederholt sich auf jeder Karte;
+   als volle Fläche wäre die Seite ein Streifenmuster. */
+.knopf--weiter {
+  --f: var(--stufe-farbe, var(--akzent));
+  color: color-mix(in srgb, var(--stufe-farbe) 55%, #ffffff);
+  background:
+    linear-gradient(#121926, #0d1420) padding-box,
+    linear-gradient(150deg,
+      color-mix(in srgb, var(--f) 75%, transparent),
+      rgba(255, 255, 255, .07) 52%,
+      color-mix(in srgb, var(--f) 30%, transparent)) border-box;
+  box-shadow: none;
+}
+
+/* ---------- Größen ------------------------------------------------- */
+.knopf--klein { padding: 8px 15px; font-size: .82rem; }
+.schritt      { padding: 6px 12px; font-size: .76rem; border-radius: 9px; }
+.abmelden     { padding: 8px 15px; font-size: .82rem; }
+.suche-zu     { padding: 5px 10px; font-size: .74rem; letter-spacing: .04em; border-radius: 9px; }
+.suche-knopf  { padding: 8px 15px; font-size: .82rem; }
+.stufe-knopf  { padding: 7px 13px; font-size: .78rem; }
+.todo__weg    { width: 36px; padding: 0; font-size: 1.05rem; line-height: 1; }
+.karte__stift { padding: 4px 10px; font-size: .74rem; border-radius: 8px; }
+
+/* Der Anmeldeknopf ist der einzige, der die ganze Breite bekommt --
+   auf der Anmeldeseite gibt es nichts anderes zu tun. */
+.gate .knopf { width: 100%; margin-top: 18px; padding: 13px 18px; font-size: .95rem; }
+
+.schritt[disabled], .knopf[disabled] { opacity: .45; cursor: default; box-shadow: none; }
+.knopf[disabled] { cursor: progress; }
+.knopf[disabled]:hover { transform: none; }
+
+.suche-knopf__lupe { width: 15px; height: 15px; flex: none; }
+
+@media (prefers-reduced-motion: reduce) {
+  .knopf, .knopf-still, .schritt, .abmelden,
+  .stufe-knopf, .suche-knopf, .suche-zu, .todo__weg,
+  .karte__stift { transition: none; }
+  .knopf:hover, .knopf-still:hover, .schritt:hover, .abmelden:hover,
+  .stufe-knopf:hover, .suche-knopf:hover, .suche-zu:hover,
+  .todo__weg:hover, .karte__stift:hover { transform: none; }
+}

workspace/assets/css/kalender.css

@@ -6,9 +6,16 @@
 
 .zeitraum { display: flex; gap: 8px; margin: 0 0 22px; flex-wrap: wrap; }
 .zeitraum .schritt[aria-pressed="true"] {
-  background: rgba(63, 189, 245, .14);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
-  border-color: rgba(63, 189, 245, .55);
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
-  color: var(--text);
+  --f: var(--akzent);
+  color: #fff;
+  background:
+    linear-gradient(color-mix(in srgb, var(--f) 20%, #121926),
+                    color-mix(in srgb, var(--f) 12%, #0d1420)) padding-box,
+    linear-gradient(150deg, var(--f),
+                    color-mix(in srgb, var(--f) 45%, transparent)) border-box;
+  box-shadow: 0 4px 16px -9px var(--f);
 }
 
 .tag { margin-bottom: 22px; }

workspace/assets/css/scouting.css

@@ -108,27 +108,9 @@
 /* Der Weiter-Schritt wiederholt sich auf jeder Karte. Als voller
    Farbverlauf waere die Seite ein Streifenmuster -- er traegt deshalb
    nur die Farbe seiner Stufe und wird erst beim Zeigen kraeftiger. */
-.kk__knoepfe .knopf--weiter {
-  background: color-mix(in srgb, var(--stufe-farbe) 15%, transparent);
-  border: 1px solid color-mix(in srgb, var(--stufe-farbe) 45%, transparent);
-  color: color-mix(in srgb, var(--stufe-farbe) 60%, #ffffff);
-  font-weight: 600;
-}
-.kk__knoepfe .knopf--weiter:hover {
-  filter: none;
-  background: color-mix(in srgb, var(--stufe-farbe) 26%, transparent);
-  border-color: color-mix(in srgb, var(--stufe-farbe) 70%, transparent);
-  color: #fff;
-}
 
 /* Das Onboarding ist der einzige Schritt, der eine echte Person anlegt --
    der Knopf soll sich deshalb von den anderen abheben. */
-.knopf--gold {
-  background: linear-gradient(100deg, rgba(240, 196, 138, .92), rgba(224, 160, 110, .92));
-  color: #241608;
-  border: 0;
-}
-.knopf--gold:hover { filter: brightness(1.07); }
 
 /* ---------- Aufgeklappt ---------------------------------------------------- */
 
@@ -162,8 +144,6 @@
   outline: none; border-color: rgba(63, 189, 245, .65);
   box-shadow: 0 0 0 3px rgba(63, 189, 245, .14);
 }
-.knopf-still--warn { color: #ffb4b9; border-color: rgba(255,154,162,.28); }
-.knopf-still--warn:hover { color: #ffd0d3; border-color: rgba(255,154,162,.5); background: rgba(255,154,162,.08); }
 
 .leer-hinweis {
   padding: 30px; text-align: center; color: var(--text-still); font-size: .9rem;

workspace/assets/css/start.css

@@ -113,15 +113,6 @@ body.start {
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw;
 }
 
-.abmelden {
-  padding: 7px 14px;
-  background: rgba(255, 255, 255, .045);
-  border: 1px solid var(--rand);
-  border-radius: 9px;
-  color: var(--text); font: inherit; font-size: .84rem; cursor: pointer;
-  transition: border-color var(--tempo), background var(--tempo);
-}
-.abmelden:hover { background: rgba(255, 255, 255, .08); border-color: var(--rand-hell); }
 
 /* ---------- Inhalt ---------------------------------------------------- */
 
@@ -217,19 +208,6 @@ body.start {
    einzelne Seite: Er wird ueberall gebraucht, und als Seiten-CSS fehlte er
    prompt dort, wo die Datei nicht geladen war -- dann standen nackte
    Systemknoepfe in der Oberflaeche. */
-.knopf-still {
-  padding: 7px 13px; cursor: pointer;
-  background: transparent;
-  border: 1px solid var(--rand); border-radius: var(--radius-klein);
-  color: var(--text-still); font: inherit; font-size: .82rem;
-  transition: color .16s ease, border-color .16s ease, background .16s ease;
-}
-.knopf-still:hover {
-  color: var(--text);
-  border-color: rgba(255, 255, 255, .22);
-  background: rgba(255, 255, 255, .04);
-}
-@media (prefers-reduced-motion: reduce) { .knopf-still { transition: none; } }
 
 /* ---------- Was ist dran ------------------------------------------------
    Steht vor den Zahlen. Zahlen sagen, WIE VIEL anliegt -- diese Liste

workspace/assets/css/startcheck.css

@@ -92,24 +92,6 @@
 
 /* Bewertungsknöpfe */
 .stufen { display: flex; gap: 5px; flex: none; }
-.stufe-knopf {
-  padding: 6px 11px; cursor: pointer;
-  background: transparent;
-  border: 1px solid var(--rand); border-radius: 999px;
-  color: var(--text-still); font: inherit; font-size: .77rem;
-  transition: color .16s ease, border-color .16s ease, background .16s ease;
-}
-.stufe-knopf:hover { color: var(--text); border-color: rgba(255, 255, 255, .24); }
-.stufe-knopf[data-aktiv="ja"][data-wert="ok"] {
-  color: #79d1a2; border-color: rgba(121, 209, 162, .45); background: rgba(121, 209, 162, .12);
-}
-.stufe-knopf[data-aktiv="ja"][data-wert="mittel"] {
-  color: #f0c48a; border-color: rgba(240, 196, 138, .45); background: rgba(240, 196, 138, .12);
-}
-.stufe-knopf[data-aktiv="ja"][data-wert="handlung"] {
-  color: #ffb4b9; border-color: rgba(255, 154, 162, .5); background: rgba(255, 154, 162, .14);
-  font-weight: 600;
-}
 
 .stufe-marke {
   flex: none; padding: 4px 11px; border-radius: 999px;