diff --git a/workspace/assets/css/aufgaben.css b/workspace/assets/css/aufgaben.css
index 1168aed0..b767050a 100644
--- a/workspace/assets/css/aufgaben.css
+++ b/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 {
-  margin-left: auto; padding: 3px 8px;
-  background: none; border: 0; border-radius: 7px;
-  color: var(--text-still); font: inherit; font-size: .75rem; cursor: pointer;
-}
-.karte__stift:hover { background: rgba(255, 255, 255, .07); color: var(--text-leise); }
+/* Der Bearbeiten-Stift war nie ein richtiger Knopf, sondern nackter
+   Text -- man sah nicht, dass man draufdruecken kann. Jetzt traegt er
+   das Knopf-System in der kleinsten, ruhigsten Groesse. */
+.karte__stift { margin-left: auto; }
 .karte__kopf { display: flex; align-items: flex-start; gap: 8px; }
 .karte__kopf .karte__titel { flex: 1 1 auto; }
diff --git a/workspace/assets/css/bereich.css b/workspace/assets/css/bereich.css
index a0f4f126..27a12b0a 100644
--- a/workspace/assets/css/bereich.css
+++ b/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);
-  border-color: rgba(63, 189, 245, .55);
-  color: var(--text);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
+  --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 {
diff --git a/workspace/assets/css/calls.css b/workspace/assets/css/calls.css
index 51786b8d..3d14b74d 100644
--- a/workspace/assets/css/calls.css
+++ b/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);
diff --git a/workspace/assets/css/dateien.css b/workspace/assets/css/dateien.css
index b36295ab..21541f62 100644
--- a/workspace/assets/css/dateien.css
+++ b/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);
-  border-color: rgba(63, 189, 245, .55);
-  color: var(--text);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
+  --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 ------------------------------------------------------- */
diff --git a/workspace/assets/css/gate.css b/workspace/assets/css/gate.css
index 08f4bd9a..ca08f7f5 100644
--- a/workspace/assets/css/gate.css
+++ b/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; }
+}
diff --git a/workspace/assets/css/kalender.css b/workspace/assets/css/kalender.css
index da1c50ec..6cc08e4c 100644
--- a/workspace/assets/css/kalender.css
+++ b/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);
-  border-color: rgba(63, 189, 245, .55);
-  color: var(--text);
+  /* Gedrueckt = der "voll"-Auftritt des Knopf-Systems. Vorher stand
+     hier eine eigene Flaeche, die den geschliffenen Rand ueberschrieb. */
+  --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; }
diff --git a/workspace/assets/css/scouting.css b/workspace/assets/css/scouting.css
index c4ed5d4b..80f3de12 100644
--- a/workspace/assets/css/scouting.css
+++ b/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;
diff --git a/workspace/assets/css/start.css b/workspace/assets/css/start.css
index f3df3af9..e5e10e63 100644
--- a/workspace/assets/css/start.css
+++ b/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
diff --git a/workspace/assets/css/startcheck.css b/workspace/assets/css/startcheck.css
index 74d06fe9..1f8d122d 100644
--- a/workspace/assets/css/startcheck.css
+++ b/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;