DogFatherGitandClaude Opus 5
f6d2437985
Filipe: „perfektioniere alles jetzt sofort, es muss ready sein."
Die Vorlage Punkt fuer Punkt gegen das Gebaute gehalten, nicht gegen
meine eigene Liste von heute Mittag. Vier Punkte standen noch offen,
und auf dem Weg dorthin sind zwei Fehler aufgefallen, nach denen
niemand gesucht hat.
DIE ZWEI FEHLER ZUERST -- beide gefunden durch Messen, nicht Denken
1. EINE GELOESCHTE PERSON HAETTE IHRE ZAHLEN MITGENOMMEN.
`mz_eintrag.person_id` stand auf ON DELETE CASCADE. Die Vorlage
sagt aber: „Wer die Rolle verliert, sieht die Kachel nicht mehr;
die Daten bleiben fuer den DogFather erhalten." Mit CASCADE waere
genau das nicht wahr gewesen -- `DELETE FROM personen` haette den
Monatsverlauf eines Menschen lautlos mitgenommen.
Jetzt SET NULL, und Name und Rolle stehen zusaetzlich als Text am
Eintrag (dieselbe Bauweise wie bei support_meldungen). Die Rolle
ist nicht Zierde: Ohne sie wuerde ein abgeschlossener Monat
rueckwirkend an den Zielzahlen einer anderen Rolle gemessen.
Der Umbau laeuft auf dem Bestand von heute Mittag -- Spaltenliste
AUS PRAGMA abgeleitet, nicht gepflegt, und geprueft werden Zeilen
UND Spalten. Am 11.09.2026 hat genau so ein Umbau drei Spalten mit
Inhalt verloren, ohne Fehlermeldung, bei unveraenderter Zeilenzahl.
2. MEIN EIGENER SPERR-TRIGGER HAETTE DAS LOESCHEN BLOCKIERT.
ON DELETE SET NULL ist kein Loeschen, sondern ein UPDATE auf
person_id. Der Trigger sah eine Aenderung an einem abgeschlossenen
Monat und brach ab -- `DELETE FROM personen` waere damit
gescheitert, an einer Stelle, die mit Monatszielen nichts zu tun
hat. Erlaubt ist jetzt genau eine Aenderung an einem alten Monat:
dem Eintrag seinen Besitzer zu nehmen. Als BEDINGUNG und nicht als
`UPDATE OF <spaltenliste>` -- eine Liste muesste jemand pflegen.
Weil `CREATE TRIGGER IF NOT EXISTS` eine geaenderte Fassung nicht
erneuert, wird die alte am INHALT erkannt und ersetzt. Eine
Fassungsnummer muesste jemand hochzaehlen, und das wird vergessen.
DIE VIER OFFENEN PUNKTE DER VORLAGE
04 Jede Aufgabenzeile hat ihr eigenes Zeichen -- aus dem Haus
(`window.Bereiche`), nicht neu gezeichnet: Trichter, Bildschirm,
Buch, Rahmen. Das Statuszeichen bleibt daneben; ein eingefaerbtes
Aufgabenzeichen allein traegt die Stufe nicht.
05 „Farbiger Rand + Badge": Eine Kachel, an der eine Warnung haengt,
traegt jetzt einen feinen Saum -- JEDE Kachel, nicht nur diese.
Eine Regel, die nur an einer Stelle gilt, wird beim naechsten Mal
vergessen.
08 Die Team-Tabelle ist sortierbar: jede Spalte ein Knopf (kein
anklickbares <th> -- das erreicht die Tastatur nicht), mit
aria-sort, und sortiert wird nach ANTEIL statt nach nackter Zahl.
Dazu eine Ampel-Spalte mit Wort. Auf dem Handy verschwindet die
Kopfzeile im Kartenmodus, deshalb steht das Sortieren zusaetzlich
in der Leiste -- sonst waere es auf einem Telefon nicht
vorhanden.
09 Wer die Rolle verliert, steht weiter in der Uebersicht, als
„nicht mehr dabei" und mit der Rolle von damals. Wer geloescht
wurde, erscheint als zusammengefasste Zeile unter dem
mitgeschriebenen Namen.
WAS DER SAUM MICH GELEHRT HAT
Er stand zuerst in start.css und war wirkungslos -- der Browser
lieferte weiter den Faseschatten. Der Grund steht seit dem 25.09.2026
in module.css: `:is()` uebernimmt die Spezifitaet seines staerksten
Arguments, und `.gruppe[data-gruppe]` macht die ganze Modulliste
(0,2,0) -- genau so stark wie `.kachel[data-warn="ja"]`, bei
Gleichstand gewinnt die zuletzt geladene Datei. Dieselbe Falle wie
damals bei den Fokusringen, dieselbe Antwort: Was gegen die Modulform
gewinnen muss, gehoert in die Datei mit der Modulform. Gemerkt habe
ich es nur, weil die Bildmessung den errechneten Schatten AUSGIBT
statt ein Bild zu machen.
Beim Herausschneiden blieb eine Klammer zu viel in start.css stehen --
gefunden von pruef-css-klassen („eine schliessende Klammer ohne
oeffnende"), bevor sie still CSS verschluckt hat.
AUSSERDEM BEHOBEN
* Spicy Media sah an einer FREMDEN Liste „Bearbeiten" und „Loeschen",
und der Server antwortete mit 403. Ein Knopf, der nichts tut, ist
schlimmer als kein Knopf.
* Klick auf eine Person klappt jetzt alle vier Zeilen auf. Die
Vorlage verspricht „zeigt deren Eintraege" -- zugeklappt zeigte
der Klick nur Zahlen.
* Der CSV-Export kennt drei Staende statt zwei: „pflichtig", „neu,
noch ohne Pflicht", „nicht mehr dabei". Vorher hiess beides „nein".
* Das Aufklappen baute die ganze Liste neu und riss den
angeklickten Knopf weg (Fokus sprang nach oben).
GEPRUEFT: 168 Pruefungen, 0 Fehler (vorher 141)
Neu darunter: der Umbau auf einem echten Alt-Bestand (Zeilen, Spalten,
Inhalt, Indizes, Trigger, und ein zweiter Lauf, der nichts mehr tut),
das Loeschen einer Person mit Eintraegen aus einem abgeschlossenen
Monat -- mit Gegenprobe, dass dieselbe Sperre den INHALT weiterhin
nicht aendern laesst.
Zwei meiner neuen Pruefungen haben zuerst sich selbst gemessen statt
den Code: Eine verglich gegen einen Eintrag, den sie vorher geloescht
hatte (404 sah aus wie ein haltender Riegel), die andere meldete eine
fehlende Spalte, die nur ihr eigener Handeinsatz verursacht hatte.
Beide berichtigt.
Am Bildschirm nachgemessen bei 412 px und 1280 px: kein waagerechtes
Schieben, kein eigenes Beruehrziel unter 40 px, genau EINE Kachel mit
Saum und zwanzig ohne.
Co-Authored-By: Claude Opus 5 <[email protected]>
388 lines
16 KiB
CSS
388 lines
16 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; }
|
|
|
|
/* 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 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; }
|
|
}
|