From 677bcb565304cdcca8078a8eabf572e3b80247f9 Mon Sep 17 00:00:00 2001 From: Dogfather Date: Fri, 28 Aug 2026 12:13:11 +0200 Subject: [PATCH] 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 | 23 +--- workspace/assets/css/bereich.css | 13 +- workspace/assets/css/calls.css | 8 -- workspace/assets/css/dateien.css | 13 +- workspace/assets/css/gate.css | 205 +++++++++++++++++++++++----- workspace/assets/css/kalender.css | 13 +- workspace/assets/css/scouting.css | 20 --- workspace/assets/css/start.css | 22 --- workspace/assets/css/startcheck.css | 18 --- 9 files changed, 207 insertions(+), 128 deletions(-) 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;