DogFatherGitandClaude Opus 5
db656f6e14
Filipe mit der Vorlage „Prompt · Kachel Agentur-Aufgaben" (02.10.2026):
Scouts, Manager, DogFather und Spicy Media bekommen vier Pflichten je
Monat -- Creator rekrutieren, Manager-Meeting, Schulung oder Community
Talk, Werbung auf TikTok -- mit Fortschritt, Ampel, Warnungen und
einem Monatsschnitt, der nichts loescht.
DREI ENTSCHEIDUNGEN, DIE VON DER VORLAGE ABWEICHEN -- alle abgestimmt:
1. DIE KACHEL HEISST „Manager-Ziele", nicht „Agentur-Aufgaben".
Es gibt bereits eine Kachel „Agentur" und eine „Aufgaben". Eine
dritte mit beiden Woertern im Namen waere auf einem Handy nicht
mehr auseinanderzuhalten.
2. DIE ZIELZAHLEN GELTEN JE ROLLE, und DogFather UND Spicy Media
duerfen sie aendern. Ein Scout muss nicht dieselbe Zahl schaffen
wie die Leitung.
3. DIE SCOUT-PIPELINE IST ANGEBUNDEN, in beide Richtungen: Vorschlaege
aus uebergebenen Leads, Namensvorschlaege beim Tippen, die
Verbindung bleibt am Eintrag gespeichert. Aber NICHTS zaehlt von
selbst -- gezaehlt wird nur, was ein Mensch bestaetigt hat. Ein
Zaehler, der sich allein fuellt, ist einer, dem niemand glaubt.
WAS ANDERS GEBAUT IST, ALS ES NAHELAG
DAS ZIEL WIRD PRO MONAT EINGEFROREN (`mz_ziel` hat den Monat im
Schluessel). Laege nur ein aktueller Wert in `einstellungen`, schriebe
jede spaetere Aenderung rueckwirkend den ganzen Verlauf um: Ein Monat,
der mit 2/2 abgeschlossen war, staende nach einer Erhoehung auf 4
ploetzlich als „nicht erreicht" da. Ein Verlauf, der sich rueckwirkend
aendert, ist keiner. Es gibt deshalb gar keinen Weg, den laufenden
Monat umzuschreiben -- gespeichert wird immer in den naechsten.
DIE SPERRE VERGANGENER MONATE SITZT IN DER DATENBANK, nicht im Code
(drei Trigger). Die Ausnahme fuer DogFather laesst sich in SQLite
nicht ueber die Sitzung abfragen, also ist sie ein sichtbarer Vorgang:
`mz_freigabe` wird fuer die eine Handlung geoeffnet, im `finally`
wieder geschlossen und verfaellt nach zwei Minuten von selbst. Jede
Korrektur steht mit Name und Zeit im Protokoll.
DER LAUFENDE MONAT STEHT IN EINER TABELLE (`mz_lage`), nicht in
`strftime(...,'localtime')`. Sonst entschiede die Zeitzone des Servers,
und am Monatsersten zwischen 00:00 und 02:00 griffe die Sperre fuer
den falschen Monat. Gerechnet wird durchgehend in Europe/Berlin
(identisch mit dem Europe/Luxembourg der Vorlage, aber dieselbe
Zeitrechnung wie der Rest des Hauses).
KEIN ZWEITER ZAEHLER FUER DIE KACHELWAND. Rand und Abzeichen auf der
Startseite kommen aus `workspace-hinweise.js` und damit aus derselben
Rechnung wie die Seite (`standFuer`). Zwei Rechnungen ueber dieselbe
Sache laufen auseinander, und zwar lautlos.
KEIN IMPORTKREIS ZU workspace-push.js. Die Erinnerungen entstehen hier
als Liste (`zielRufe`), verschickt werden sie im vorhandenen
Fuenf-Minuten-Takt. Der Tag steht im Merkmal -- dadurch geht pro
Person hoechstens EINE Meldung am Tag heraus, obwohl der Lauf
288-mal stattfindet.
GETRENNTE HAEUSER: Auf crew.dogfather-universe.com gibt es diese
Kachel nicht, auch nicht fuer DogFather. Gemessen, nicht angenommen.
GEPRUEFT (141 Pruefungen, 0 Fehler) -- mit Gegenproben zu jeder Sperre
* Vier Rollen kommen herein, drei bekommen 404 (nicht 403), und die
ANZAHL steht in der Bedingung. „Alle abgewiesen" waere auf einer
leeren Liste wahr.
* Die Ampel wird mit EINGESETZTEN Tagen gemessen, nie gegen die
Wanduhr -- diese Pruefung sagt am 16. November dasselbe wie heute.
(gate-oeffnung.mjs im Shop war gruen, bis der Kalender sie
ueberholte.)
* Die Datenbank lehnt einen Eintrag im Vormonat selbst ab; danach
wird nachgewiesen, dass die Freigabe nur EINMAL gewirkt hat.
* Neun Absagen mit dem jeweils richtigen Grund -- und eine
Instagram-Adresse, die durchgehen MUSS, weil sonst nur bewiesen
waere, dass die Pruefung streng ist, nicht dass sie richtig ist.
* Am 7. des Monats ist Ruhe: Ohne diese Zeile bewiese der
Erinnerungs-Block nur, dass immer etwas kommt.
ZWEI BEFUNDE KAMEN AUS DER MESSUNG, NICHT AUS DEM NACHDENKEN
* Beim Aufklappen einer Zeile wurde die ganze Liste neu gebaut --
der angeklickte Knopf existierte danach nicht mehr, der Fokus
sprang an den Seitenanfang. Gefunden hat es die Bildmessung, der
die Schaltflaeche unter der Hand wegbrach.
* Zwei meiner Messungen waren falsch, nicht der Code: Der
Haus-Test schickte den Keks nicht mit (401 statt 404), und
`Response.text()` entfernt ein BOM beim Dekodieren -- der Export
hatte eines, die Pruefung sah es nur nicht. Jetzt wird in Bytes
gemessen.
Kachelton 47 (#7368ff) ist mit tools/kachel-farbe-einzeln.mjs gegen
alle 46 vorhandenen gerechnet, nicht ausgesucht: Abstand 0,0899,
Kontrast 4,61:1. Beruehrziele, waagerechtes Schieben und
Schriftgroessen sind am Bildschirm bei 412 px und 1280 px nachgemessen.
Co-Authored-By: Claude Opus 5 <[email protected]>
350 lines
14 KiB
CSS
350 lines
14 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; }
|
|
|
|
.mz-zeile__zeichen {
|
|
flex: 0 0 auto; width: 26px; height: 26px;
|
|
display: grid; place-items: center;
|
|
color: var(--mz-ton, var(--mz-still)); font-size: 1rem;
|
|
}
|
|
.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; }
|
|
|
|
/* 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; }
|
|
.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%; }
|
|
.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 18px;
|
|
background: #0d1520; border: 1px solid var(--mz-gut);
|
|
color: #eaf1f9; font-size: .9rem;
|
|
box-shadow: 0 8px 26px -10px rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
/* =====================================================================
|
|
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; }
|
|
}
|