DogFatherGitandClaude Opus 5
aaee74818f
Filipe: "soll jeder die möglichkeit auch mehr wie das ziel einzutragen.
die sollen auch gezählt werden. die zahl die die leute erreichen sollen
sollen aber während dems immer gleich bleiben. mit der möglichkeit die
grenzen zu übergehen."
ZUERST GEMESSEN, DANN GEBAUT -- und die Messung hat die Aufgabe
verschoben: Eintragen ueber dem Ziel ging schon immer. Fuenf von fuenf
Versuchen wurden angenommen, es gab nie eine Sperre. Was fehlte, war
das ZAEHLEN.
Gemessen am Beispiel eines Scouts: creator 2/3, meeting 1/2,
schulung 1/2, werbung 2/1. Er hatte sechs Dinge getan, die Seite sagte
"5 von 8". Das Werbe-Video ueber dem Ziel fiel aus der Summe heraus,
weil sie je Aufgabe bei Math.min(zahl, ziel) gedeckelt war -- ohne
Hinweis, und niemand konnte es sehen.
ZWEI ZAHLEN STATT EINER, weil es zwei Fragen sind:
erledigt Wie viel von der PFLICHT ist erfuellt? Je Aufgabe
hoechstens ihr Ziel. Daraus kommt der Ring.
getan Wie viel wurde WIRKLICH getan? Ohne Deckel.
`erledigt` wurde bewusst NICHT entdeckelt: Wer zehn Werbevideos und
sonst nichts macht, haette sonst 10 von 8 und einen vollen Ring bei
drei unberuehrten Aufgaben. Das waere keine Grosszuegigkeit, sondern
eine falsche Auskunft. Gemessen bleibt der Ring bei 75 %, und zwei
Aufgaben bleiben offen.
DAS ZIEL BLEIBT STEHEN -- die naheliegende falsche Loesung waere, es
mitwachsen zu lassen; dann haette nie jemand mehr als sein Ziel.
Nachgemessen: 2 -> 2, waehrend die Zahl von 1 auf 6 stieg.
AUF DEM BILDSCHIRM: "+N" als eigenes Zeichen neben der Zahl, nicht in
ihr ("5/2 +3" statt "5/2"), im Ton von "erledigt" statt in einem
Warnton -- mehr zu tun als verlangt ist nichts, wovor man warnt. Im
Ring ein kleines Plus unter der Pflichtzahl, im Kopf "4 von 8 erledigt
· 2 zusaetzlich". Der Balken waechst NICHT ueber seinen Kasten hinaus
(bei 10 von 1 waeren alle anderen Aufgaben optisch platt), sondern
bekommt eine hellere Kappe. Auch im Verlauf und in der Teamtabelle.
Die Ausgabedatei bekommt "Gesamt getan" NEBEN "Gesamt erledigt" --
eine Zahl, die nur auf dem Bildschirm steht, fehlt in der Liste, die
am Monatsende weitergereicht wird.
pruef-manager-ziele: 216 -> 229 Pruefungen, gruen. Gegenprobe gefahren
(getan wieder gedeckelt -> 2 rot, mit "6 = 11" als Beleg). Beim ersten
Anlauf der Messung lagen alle fuenf Testdaten in der Zukunft; "0 von 5
angenommen" sah nach einer Sperre aus und war der Kalender -- steht
jetzt als Warnung in der Pruefung.
Nebenbei: mess-manager-ziele schrieb seine Bilder in den Projektstamm
statt nach server/ (relativer Pfad). Korrigiert, Stamm aufgeraeumt.
Dazu gruen: xlsx, css-klassen, lesbarkeit, tippziele, fingermass,
haus-trennung, deutsche-texte.
Co-Authored-By: Claude Opus 5 <[email protected]>
515 lines
21 KiB
CSS
515 lines
21 KiB
CSS
/* =====================================================================
|
|
manager-ziele.css — die vier festen Monatsaufgaben (02.10.2026)
|
|
=====================================================================
|
|
|
|
DREI REGELN, DIE HIER ÜBERALL GELTEN:
|
|
|
|
1. KEINE EIGENEN AMPELFARBEN. Das Haus hat sie schon -- `--k-gut`,
|
|
`--k-mittel`, `--k-warn`, `--k-neutral` in gate.css. Sie sind
|
|
gegen den dunklen Grund gemessen und augenschonend gewählt. Ein
|
|
eigenes Grasgrün hier wäre eine fünfte Wahrheit über dieselbe
|
|
Sache und müsste bei jeder Kontrastmessung einzeln nachgezogen
|
|
werden.
|
|
|
|
2. FARBE NIE ALLEIN. Jede Stufe trägt zusätzlich ein Zeichen und
|
|
einen Satz. Wer Farben nicht unterscheiden kann, liest sonst
|
|
vier gleich aussehende Zeilen.
|
|
|
|
3. MOBILE FIRST, und zwar als Regel statt als Zahl. Die Reihen
|
|
brechen über `flex-wrap` um, nicht über eine Schwelle in Pixeln
|
|
-- eine feste Zahl ist eine Rechnung von gestern und wird beim
|
|
nächsten zusätzlichen Element still falsch (gemessen am
|
|
06.09.2026 in der Kopfleiste, wo genau das zweimal passiert ist).
|
|
===================================================================== */
|
|
|
|
.mz-seite {
|
|
--mz-gut: var(--k-gut, #5fc99a);
|
|
--mz-mittel: var(--k-mittel, #e8b877);
|
|
--mz-warn: var(--k-warn, #f0868f);
|
|
--mz-still: var(--k-neutral, #8e9cb0);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------------
|
|
DIE STUFE AN EINEM ELEMENT
|
|
|
|
Ein einziger Griff (`data-stufe`) setzt die Farbe für alles, was
|
|
darunter hängt. Die Alternative wären vier Klassen je Bauteil --
|
|
und beim fünften Bauteil hätte eine davon gefehlt. */
|
|
[data-stufe="gruen"] { --mz-ton: var(--mz-gut); }
|
|
[data-stufe="orange"] { --mz-ton: var(--mz-mittel); }
|
|
[data-stufe="rot"] { --mz-ton: var(--mz-warn); }
|
|
[data-stufe="neutral"] { --mz-ton: var(--mz-still); }
|
|
[data-stufe="aus"] { --mz-ton: var(--mz-still); }
|
|
|
|
/* =====================================================================
|
|
DER KOPF: Monat, Fortschritt, Resttage
|
|
===================================================================== */
|
|
|
|
.mz-kopf {
|
|
display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
|
|
padding: 16px 18px;
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
background: var(--flaeche, rgba(9, 13, 22, .89));
|
|
clip-path: polygon(var(--fase, 18px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--fase, 18px));
|
|
margin-bottom: 18px;
|
|
}
|
|
|
|
/* Der Ring. Eine `conic-gradient` statt eines SVG: Sie lässt sich mit
|
|
einer einzigen Variablen (`--mz-anteil`) bewegen und braucht kein
|
|
zweites Zahlensystem. */
|
|
.mz-ring {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
width: 84px; height: 84px; border-radius: 50%;
|
|
background:
|
|
conic-gradient(var(--mz-ton, var(--mz-still)) calc(var(--mz-anteil, 0) * 1%),
|
|
rgba(150, 186, 220, .13) 0);
|
|
display: grid; place-items: center;
|
|
/* DEZENT, NICHT SPIELERISCH. 600 ms, und bei
|
|
`prefers-reduced-motion` gar nicht -- Hausregel. */
|
|
transition: background .6s ease;
|
|
}
|
|
.mz-ring::after {
|
|
content: ""; position: absolute; inset: 8px; border-radius: 50%;
|
|
background: var(--tinte, #05070d);
|
|
}
|
|
.mz-ring__text {
|
|
position: relative; z-index: 1; text-align: center; line-height: 1.1;
|
|
}
|
|
.mz-ring__zahl { display: block; font-size: 1.3rem; font-weight: 700; color: #f2f7fd; }
|
|
.mz-ring__von { display: block; font-size: .75rem; color: var(--text-leise, #9fb0c6); }
|
|
|
|
.mz-kopf__text { flex: 1 1 240px; min-width: 0; }
|
|
.mz-kopf__monat {
|
|
margin: 0 0 2px; font-size: 1.12rem; font-weight: 700; color: #f2f7fd;
|
|
}
|
|
.mz-kopf__stand { margin: 0 0 4px; color: var(--text, #dbe4ef); font-size: .92rem; }
|
|
.mz-kopf__rest { margin: 0; color: var(--text-leise, #9fb0c6); font-size: .84rem; }
|
|
.mz-kopf__rest[data-stufe="rot"] { color: var(--mz-warn); }
|
|
.mz-kopf__rest[data-stufe="orange"] { color: var(--mz-mittel); }
|
|
|
|
/* =====================================================================
|
|
DIE VIER AUFGABENZEILEN
|
|
===================================================================== */
|
|
|
|
.mz-liste { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
|
|
|
|
.mz-zeile {
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
border-left: 3px solid var(--mz-ton, var(--mz-still));
|
|
background: var(--flaeche, rgba(9, 13, 22, .89));
|
|
}
|
|
|
|
.mz-zeile__kopf {
|
|
display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
|
|
width: 100%; padding: 13px 14px;
|
|
background: none; border: 0; color: inherit; text-align: left;
|
|
font: inherit; cursor: pointer;
|
|
/* 44 Pixel Mindesthöhe -- dasselbe Berührziel wie überall im Haus
|
|
(`--feld-ziel`). pruef-fingermass misst das nach. */
|
|
min-height: 44px;
|
|
}
|
|
.mz-zeile__kopf:focus-visible { outline: 2px solid var(--akzent, #6f89a8); outline-offset: -3px; }
|
|
|
|
/* Das Zeichen der Aufgabe. `--ton` wird hier auf die Ampelfarbe
|
|
gesetzt, weil die Hausgestaltung der kleinen Zeichen (`.dran__svg`)
|
|
genau diese Variable liest -- so traegt das Zeichen die Stufe,
|
|
ohne dass eine einzige Regel doppelt geschrieben waere. */
|
|
.mz-zeile__zeichen {
|
|
--ton: var(--mz-ton, var(--mz-still));
|
|
flex: 0 0 auto; width: 30px; height: 30px;
|
|
display: grid; place-items: center;
|
|
color: var(--mz-ton, var(--mz-still)); font-size: 1rem;
|
|
}
|
|
|
|
/* Das Statuszeichen vor dem Satz. Schmal und mit fester Breite, damit
|
|
die Saetze aller vier Zeilen an derselben Stelle beginnen -- sonst
|
|
wandert der Text je nach Stufe um ein paar Pixel. */
|
|
.mz-zeile__stufe {
|
|
display: inline-block; width: 1.1em; margin-right: 2px;
|
|
font-weight: 700; text-align: left;
|
|
}
|
|
.mz-zeile__text { flex: 1 1 160px; min-width: 0; }
|
|
.mz-zeile__name {
|
|
display: block; font-weight: 650; color: #eaf1f9; font-size: .97rem;
|
|
}
|
|
.mz-zeile__lage {
|
|
display: block; margin-top: 2px;
|
|
font-size: .8rem; color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-zeile__lage[data-stufe="rot"] { color: var(--mz-warn); }
|
|
.mz-zeile__lage[data-stufe="orange"] { color: var(--mz-mittel); }
|
|
.mz-zeile__lage[data-stufe="gruen"] { color: var(--mz-gut); }
|
|
|
|
.mz-zeile__zahl {
|
|
flex: 0 0 auto;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 700; font-size: 1.02rem; color: var(--mz-ton, var(--mz-still));
|
|
}
|
|
.mz-zeile__pfeil {
|
|
flex: 0 0 auto; color: var(--text-leise, #9fb0c6);
|
|
transition: transform .18s ease;
|
|
}
|
|
.mz-zeile[data-auf="ja"] .mz-zeile__pfeil { transform: rotate(90deg); }
|
|
|
|
/* Der eigene Balken je Aufgabe. Liegt UNTER der Kopfzeile und über der
|
|
Liste -- so trennt er beide optisch, ohne eine weitere Linie. */
|
|
.mz-balken {
|
|
height: 4px; margin: 0 14px 10px;
|
|
background: rgba(150, 186, 220, .13);
|
|
overflow: hidden;
|
|
}
|
|
.mz-balken__fuell {
|
|
display: block; height: 100%;
|
|
width: calc(var(--mz-anteil, 0) * 1%);
|
|
background: var(--mz-ton, var(--mz-still));
|
|
transition: width .6s ease;
|
|
}
|
|
|
|
.mz-zeile__fuss {
|
|
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
|
padding: 0 14px 13px;
|
|
}
|
|
.mz-zeile__fuss .knopf { min-height: 44px; }
|
|
|
|
/* =====================================================================
|
|
DER SCHNELL-EINTRAG
|
|
=====================================================================
|
|
`flex-wrap` und keine Schwelle in Pixeln: Die Reihe bricht genau
|
|
dann um, wenn der Platz nicht reicht. Eine feste Zahl waere beim
|
|
naechsten zusaetzlichen Knopf still falsch -- gemessen am
|
|
06.09.2026 in der Kopfleiste, wo genau das zweimal passiert ist. */
|
|
.mz-schnell {
|
|
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
|
width: 100%;
|
|
}
|
|
.mz-schnell .knopf, .mz-schnell .schritt { min-height: 44px; }
|
|
|
|
/* Das Feld nimmt den uebrigen Platz -- aber nie weniger als 180 px,
|
|
sonst steht auf dem Handy ein Schlitz, in den niemand zielt. */
|
|
.mz-schnell__feld {
|
|
flex: 1 1 180px; min-width: 180px; min-height: 44px;
|
|
padding: 10px 12px;
|
|
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
font: inherit;
|
|
}
|
|
.mz-schnell__feld:focus-visible {
|
|
outline: 2px solid var(--akzent, #6f89a8); outline-offset: -2px;
|
|
}
|
|
.mz-schnell__art {
|
|
min-height: 44px; padding: 8px 10px;
|
|
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
font: inherit;
|
|
}
|
|
|
|
/* Die drei fertigen Tage im Dialog. */
|
|
.mz-schnelltage { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 7px; }
|
|
.mz-schnelltage .schritt { min-height: 40px; }
|
|
.mz-schnelltage .schritt[data-an="ja"] {
|
|
border-color: color-mix(in srgb, var(--mz-gut) 60%, transparent);
|
|
color: var(--mz-gut);
|
|
}
|
|
|
|
/* Die aufgeklappte Liste der eigenen Einträge. */
|
|
.mz-eintraege { padding: 0 14px 12px; }
|
|
.mz-eintrag {
|
|
display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline;
|
|
padding: 9px 0;
|
|
border-top: 1px solid rgba(150, 186, 220, .10);
|
|
}
|
|
.mz-eintrag__datum {
|
|
flex: 0 0 auto; font-variant-numeric: tabular-nums;
|
|
font-size: .82rem; color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-eintrag__was { flex: 1 1 160px; min-width: 0; color: var(--text, #dbe4ef); font-size: .9rem; }
|
|
/* Das Beruehrziel eines Links. 20 px hoch war es vorher -- gemessen,
|
|
nicht geschaetzt: `mess-manager-ziele.mjs` meldete „a.-: 20px". Auf
|
|
einem Handy trifft man das nur mit Glueck. */
|
|
.mz-eintrag__was a { color: inherit; display: inline-block; padding: 9px 0; }
|
|
.mz-eintrag__notiz {
|
|
display: block; margin-top: 2px;
|
|
font-size: .8rem; color: var(--text-leise, #9fb0c6);
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.mz-eintrag__marke {
|
|
display: inline-block; margin-left: 6px; padding: 1px 7px;
|
|
/* .75rem und nicht .7rem: Unter 11,5 px wird es im Haus als zu
|
|
klein gezaehlt (pruef-css-klassen misst jede Schriftgroesse). */
|
|
font-size: .75rem; border-radius: 999px;
|
|
background: rgba(150, 186, 220, .14); color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-eintrag__knoepfe { flex: 0 0 auto; display: flex; gap: 6px; }
|
|
.mz-eintrag__knoepfe .schritt { min-height: 40px; }
|
|
|
|
.mz-leer {
|
|
padding: 14px; text-align: center;
|
|
color: var(--text-leise, #9fb0c6); font-size: .88rem;
|
|
}
|
|
|
|
/* =====================================================================
|
|
DIE VORSCHLÄGE AUS DER SCOUT-PIPELINE
|
|
=====================================================================
|
|
Sichtbar abgesetzt, damit niemand sie für bereits gezählt hält.
|
|
Sie sind ein Angebot, kein Stand. */
|
|
.mz-vorschlag {
|
|
margin: 0 14px 12px; padding: 10px 12px;
|
|
border: 1px dashed rgba(150, 186, 220, .26);
|
|
background: rgba(150, 186, 220, .05);
|
|
}
|
|
.mz-vorschlag__titel {
|
|
margin: 0 0 7px; font-size: .82rem; font-weight: 650;
|
|
color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-vorschlag__reihe { display: flex; flex-wrap: wrap; gap: 6px; }
|
|
.mz-vorschlag__knopf { min-height: 40px; }
|
|
|
|
/* =====================================================================
|
|
DER DAUERHAFTE HINWEIS
|
|
===================================================================== */
|
|
.mz-merksatz {
|
|
margin: 0 0 22px; padding: 12px 14px;
|
|
border-left: 3px solid var(--mz-mittel);
|
|
background: rgba(232, 184, 119, .07);
|
|
color: var(--text, #dbe4ef); font-size: .86rem; line-height: 1.5;
|
|
}
|
|
|
|
/* =====================================================================
|
|
VERLAUF UND TEAM
|
|
===================================================================== */
|
|
.mz-block { margin-top: 26px; }
|
|
.mz-block__titel {
|
|
margin: 0 0 10px; font-size: 1.02rem; font-weight: 700; color: #eaf1f9;
|
|
}
|
|
|
|
/* Eine Tabelle, die auf dem Handy nicht quer scrollt: Sie wird dort zu
|
|
Karten. `display: block` je Zeile statt `overflow-x: auto` -- ein
|
|
waagerechter Schiebebalken ist im Haus ausdrücklich unerwünscht. */
|
|
.mz-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
|
|
.mz-tabelle th, .mz-tabelle td {
|
|
padding: 8px 10px; text-align: left;
|
|
border-bottom: 1px solid rgba(150, 186, 220, .10);
|
|
}
|
|
.mz-tabelle th { color: var(--text-leise, #9fb0c6); font-weight: 600; padding: 0; }
|
|
|
|
/* Die Spaltenueberschrift als Knopf. Sie sieht aus wie eine
|
|
Ueberschrift und ist eine -- nur bedienbar, mit Tastatur und mit
|
|
sichtbarem Fokus. */
|
|
.mz-sort {
|
|
display: flex; align-items: center; gap: 5px;
|
|
width: 100%; min-height: 40px; padding: 8px 10px;
|
|
background: none; border: 0; color: inherit;
|
|
font: inherit; font-weight: 600; text-align: left; cursor: pointer;
|
|
}
|
|
.mz-sort:hover { color: var(--text, #dbe4ef); }
|
|
.mz-sort:focus-visible { outline: 2px solid var(--akzent, #6f89a8); outline-offset: -2px; }
|
|
/* Feste Breite, damit die Ueberschriften beim Umsortieren nicht
|
|
springen -- der Pfeil kommt und geht, die Spalte bleibt. */
|
|
.mz-sort__pfeil { display: inline-block; width: .8em; font-size: .8em; }
|
|
|
|
/* Ein Name ohne Knopf: ein geloeschter Zugang, den man nicht mehr
|
|
aufmachen kann. */
|
|
.mz-ehemalig { color: var(--text-leise, #9fb0c6); font-style: italic; }
|
|
.mz-tabelle td { color: var(--text, #dbe4ef); }
|
|
.mz-tabelle .mz-wert { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
/* Der Name ist der Weg zu einer Person -- also das meistgetroffene
|
|
Ziel dieser Tabelle. Die Hausgroesse von `.schritt` sind 33 px; das
|
|
ist fuer einen Nebenknopf richtig und fuer diesen hier zu wenig. */
|
|
.mz-tabelle .schritt { min-height: 40px; }
|
|
|
|
.mz-punkt {
|
|
display: inline-block; width: 9px; height: 9px; margin-right: 6px;
|
|
border-radius: 50%; background: var(--mz-ton, var(--mz-still));
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.mz-steuer {
|
|
display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
|
|
margin-bottom: 12px;
|
|
}
|
|
.mz-steuer .schritt { min-height: 44px; }
|
|
.mz-steuer select, .mz-steuer input {
|
|
min-height: 44px; padding: 8px 10px;
|
|
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.mz-tabelle, .mz-tabelle tbody, .mz-tabelle tr, .mz-tabelle td { display: block; width: 100%; }
|
|
/* Die Ueberschriftenzeile verschwindet im Kartenmodus -- die
|
|
Spaltennamen stehen dort vor jedem Wert (`data-schild`). Das
|
|
Sortieren bleibt trotzdem erreichbar -- ueber das Feld
|
|
„Sortieren" in der Leiste darueber, das genau dafuer gebaut ist
|
|
und mit den Spaltenknoepfen gleichlaeuft. Ohne es waere das
|
|
Sortieren auf einem Telefon schlicht nicht vorhanden. */
|
|
.mz-tabelle thead { display: none; }
|
|
.mz-tabelle tr {
|
|
margin-bottom: 10px; padding: 10px;
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
border-left: 3px solid var(--mz-ton, var(--mz-still));
|
|
}
|
|
.mz-tabelle td { border: 0; padding: 3px 0; }
|
|
/* Der Spaltenname wandert vor den Wert -- sonst stünden auf dem
|
|
Handy nackte Zahlen ohne Bezug. */
|
|
.mz-tabelle td[data-schild]::before {
|
|
content: attr(data-schild) ": ";
|
|
color: var(--text-leise, #9fb0c6);
|
|
}
|
|
}
|
|
|
|
/* =====================================================================
|
|
DAS FORMULAR
|
|
===================================================================== */
|
|
.mz-form { display: grid; gap: 12px; padding: 18px; }
|
|
.mz-feld { display: block; }
|
|
.mz-feld__schild {
|
|
display: block; margin-bottom: 5px;
|
|
font-size: .82rem; color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-feld input, .mz-feld select, .mz-feld textarea {
|
|
width: 100%; min-height: 44px; padding: 10px 12px;
|
|
background: rgba(10, 14, 23, .7); color: var(--text, #dbe4ef);
|
|
border: 1px solid var(--rand, rgba(150, 186, 220, .16));
|
|
font: inherit;
|
|
}
|
|
.mz-feld textarea { min-height: 76px; resize: vertical; }
|
|
|
|
/* Die Namensvorschläge aus der Pipeline. `position: relative` am
|
|
Eltern-Feld, damit die Liste über dem Formular liegt statt es
|
|
auseinanderzuschieben. */
|
|
.mz-feld--vorschlag { position: relative; }
|
|
.mz-treffer {
|
|
position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
|
|
margin: 2px 0 0; padding: 0; list-style: none;
|
|
max-height: 190px; overflow-y: auto;
|
|
background: #0b1019; border: 1px solid var(--rand-hell, rgba(150, 186, 220, .30));
|
|
}
|
|
.mz-treffer li { margin: 0; }
|
|
.mz-treffer button {
|
|
display: block; width: 100%; min-height: 42px; padding: 9px 12px;
|
|
background: none; border: 0; color: var(--text, #dbe4ef);
|
|
font: inherit; text-align: left; cursor: pointer;
|
|
}
|
|
.mz-treffer button:hover, .mz-treffer button:focus-visible {
|
|
background: rgba(150, 186, 220, .12);
|
|
}
|
|
.mz-treffer__lage { display: block; font-size: .76rem; color: var(--text-leise, #9fb0c6); }
|
|
|
|
.mz-form__fehler { margin: 0; min-height: 1.2em; color: var(--mz-warn); font-size: .86rem; }
|
|
.mz-form__warnung { margin: 0; color: var(--mz-mittel); font-size: .84rem; }
|
|
|
|
/* Eine kurze Erfolgsmeldung. Sie verschwindet von selbst; ein Knopf
|
|
zum Wegklicken wäre ein zweiter Handgriff für eine gute Nachricht. */
|
|
.mz-gelungen {
|
|
position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
|
|
z-index: 40; padding: 11px 14px 11px 18px;
|
|
display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
|
|
max-width: min(560px, calc(100vw - 24px));
|
|
background: #0d1520; border: 1px solid var(--mz-gut);
|
|
color: #eaf1f9; font-size: .9rem;
|
|
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .8);
|
|
}
|
|
/* „Rückgängig" ist der Ersatz für die Sicherheitsabfrage VOR dem
|
|
Eintragen. Es muss deshalb gut zu treffen sein -- 40 px, nicht die
|
|
kleine Schriftgröße einer Fußnote. */
|
|
.mz-gelungen__zurueck {
|
|
min-height: 40px; padding: 8px 14px;
|
|
background: rgba(150, 186, 220, .12);
|
|
border: 1px solid var(--rand-hell, rgba(150, 186, 220, .30));
|
|
color: #eaf1f9; font: inherit; cursor: pointer;
|
|
}
|
|
.mz-gelungen__zurueck:hover { background: rgba(150, 186, 220, .2); }
|
|
.mz-gelungen__zurueck:focus-visible {
|
|
outline: 2px solid var(--akzent, #6f89a8); outline-offset: 2px;
|
|
}
|
|
.mz-gelungen__zurueck[disabled] { opacity: .5; cursor: default; }
|
|
|
|
/* =====================================================================
|
|
DIE ZIELZAHLEN (nur DogFather und Spicy Media)
|
|
===================================================================== */
|
|
.mz-ziele__gilt {
|
|
margin: 0 0 12px; font-size: .84rem; color: var(--text-leise, #9fb0c6);
|
|
}
|
|
.mz-ziele__zahl { width: 72px; min-height: 44px; text-align: center; }
|
|
|
|
/* =====================================================================
|
|
RUHIGE BEWEGUNG
|
|
=====================================================================
|
|
Hausregel, nicht Geschmack: Wer `prefers-reduced-motion` gesetzt
|
|
hat, bekommt den Endzustand sofort statt einer Animation. */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.mz-ring, .mz-balken__fuell, .mz-zeile__pfeil { transition: none; }
|
|
}
|
|
|
|
/* =====================================================================
|
|
MEHR ALS GEFORDERT (07.10.2026)
|
|
=====================================================================
|
|
|
|
Filipe: „soll jeder die möglichkeit auch mehr wie das ziel
|
|
einzutragen. die sollen auch gezählt werden. die zahl die die leute
|
|
erreichen sollen sollen aber immer gleich bleiben. mit der
|
|
möglichkeit die grenzen zu übergehen."
|
|
|
|
GEMESSEN AM 07.10.2026, bevor etwas gebaut wurde: Eintragen ging
|
|
schon immer -- fünf von fünf Versuchen wurden angenommen, es gab nie
|
|
eine Sperre. Was fehlte, war das ZÄHLEN. Ein Scout mit creator 2/3,
|
|
meeting 1/2, schulung 1/2 und werbung 2/1 hatte sechs Dinge getan,
|
|
und die Seite sagte „5 von 8": Das Werbe-Video über dem Ziel fiel aus
|
|
der Summe heraus, weil sie je Aufgabe bei `Math.min(zahl, ziel)`
|
|
gedeckelt war. Unsichtbar, ohne Hinweis, und niemand konnte es sehen.
|
|
|
|
DAS PLUS IST EIN EIGENES ZEICHEN, nicht Teil der Zahl. Die geforderte
|
|
Zahl bleibt dadurch stehen -- „5/2" allein liest sich wie ein Fehler
|
|
im Ziel, „5/2 +3" liest sich als das, was es ist.
|
|
|
|
IM TON VON „ERLEDIGT" (--mz-gut), nicht in einem Warnton: Mehr zu tun
|
|
als verlangt ist nichts, wovor jemand gewarnt werden müsste. Gedeckt
|
|
gehalten wie alles im Haus. */
|
|
.mz-zeile__plus,
|
|
.mz-ring__plus {
|
|
flex: 0 0 auto;
|
|
font-variant-numeric: tabular-nums;
|
|
font-weight: 800;
|
|
color: var(--mz-gut);
|
|
}
|
|
.mz-zeile__plus {
|
|
/* .78rem = 12,5px -- über der Hausgrenze von 11,5px. */
|
|
font-size: .78rem;
|
|
margin-left: 6px;
|
|
padding: 1px 7px;
|
|
border-radius: 999px;
|
|
background: color-mix(in srgb, var(--mz-gut) 14%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--mz-gut) 32%, transparent);
|
|
}
|
|
/* Im Ring steht das Plus unter „von 8" und bleibt klein -- die große
|
|
Zahl dort ist und bleibt der Pflichtstand. */
|
|
.mz-ring__plus {
|
|
display: block;
|
|
margin-top: 1px;
|
|
font-size: .72rem;
|
|
}
|
|
|
|
/* Der Balken wächst NICHT über seinen Kasten hinaus (bei 10 von 1 wären
|
|
alle anderen Aufgaben optisch platt). Stattdessen eine hellere Kappe
|
|
am Ende: Man sieht, dass dort noch etwas ist, und die Zahl steht
|
|
oben in der Zeile.
|
|
|
|
`inset-inline-end` statt `right`: Die Kappe sitzt damit auch dann am
|
|
Ende des Balkens, wenn die Seite einmal von rechts nach links läuft. */
|
|
.mz-balken[data-ueber="ja"] {
|
|
position: relative;
|
|
background: color-mix(in srgb, var(--mz-gut) 22%, rgba(150, 186, 220, .13));
|
|
}
|
|
.mz-balken[data-ueber="ja"]::after {
|
|
content: "";
|
|
position: absolute; inset-block: 0; inset-inline-end: 0;
|
|
width: 10px;
|
|
background: var(--mz-gut);
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
.mz-zeile__plus { border: 1px solid CanvasText; }
|
|
.mz-balken[data-ueber="ja"]::after { background: CanvasText; }
|
|
}
|