DogFatherGitandClaude Opus 5
b46f75484f
Filipe mit dem Bildschirmfoto der Zeilen: „ich will das viel perfekter
und geiler. will dass es viel einfacher ist. am besten so wenig wie
moeglich zu tippen. fertige sachen, bereit um ab zu gehen."
GEZAEHLT, WAS EIN EINTRAG VORHER KOSTETE -- das war der Punkt:
Manager Meeting Knopf, Dialog, Speichern 2 Klicks + Fenster
Schulung dazu die Art waehlen 3 Klicks + Fenster
Werbung dazu den Link tippen 2 Klicks + tippen
Creator dazu den Namen tippen 2 Klicks + tippen
Ein Fenster fuer die Aussage „ich war heute im Meeting" sind drei
Handgriffe fuer null Angaben. Vier Aufgaben im Monat, acht Klicks,
acht Fenster.
JETZT
Manager Meeting EIN Klick („Heute eingetragen")
Schulung EIN Klick (zwei fertige Knoepfe)
Werbung Einfuegen + Eintragen, kein Tippen
Creator ein Klick je Lead -- oder mehrere Namen auf
einmal einwerfen
Am echten Bildschirm nachgemessen: 0/2 vorher, EIN Klick, 1/2 nachher,
„Rueckgaengig" bringt 0/2 zurueck. Nicht „der Knopf ist da", sondern
„danach steht eine andere Zahl dort".
DREI ENTSCHEIDUNGEN DAHINTER
1. DER WEG NIMMT EINE LISTE. „Drei Creator auf einmal" ist EIN
Vorgang. Wer drei Namen aus Discord kopiert, hat das Monatsziel in
einem Zug erledigt -- das ist der eigentliche Gewinn, nicht der
gesparte Klick.
JEDER EINTRAG WIRD EINZELN GEPRUEFT UND EINZELN BEANTWORTET. Die
ganze Liste zurueckzuweisen, weil ein Name schon dasteht, waere
die bequeme und die falsche Loesung: Dann weiss niemand, welcher
der drei das Problem war, und tippt alles noch einmal. Geprueft
wird genau dieser Fall -- zwei gehen durch, einer wird im Klartext
abgelehnt, mit Namen.
2. KEINE SICHERHEITSABFRAGE VORHER, SONDERN „RUECKGAENGIG" DANACH.
Eine Nachfrage bei jedem Klick waere der Handgriff, den wir gerade
abgeschafft haben, in neuer Verkleidung. Sie kostet jeden; das
Zuruecknehmen kostet nur den, der sich vertippt hat. Acht Sekunden
statt drei -- lang genug, um es mit einem Daumen zu treffen.
3. DIE ZULETZT GEWAEHLTE ART IST VORGEWAEHLT -- abgeleitet aus dem
letzten Eintrag, nicht in einer Einstellung gespeichert. Eine
Spalte „Lieblingsart" waere ein zweiter Bestand, der veralten
kann; der letzte Eintrag veraltet nie.
WAS MIR DABEI AUFGEFALLEN IST
Ein Ein-Klick-Knopf macht den Doppeltipper zur wahrscheinlichsten
Fehleingabe -- bei „Heute eingetragen" merkt man nichts davon, es gibt
ja keine Angabe. Zwei Meetings an einem Tag zu VERBIETEN waere aber
falsch, sie sind moeglich. Also ein Hinweis statt einer Sperre:
„Fuer diesen Tag stehen jetzt 2. War das Absicht?" -- und das
Zuruecknehmen liegt ohnehin daneben. Mit Gegenprobe, dass beim ERSTEN
keine Warnung kommt; sonst waere sie keine Warnung, sondern ein
Begleittext.
AUSSERDEM
* Die Zeilen bauen sich beim Eintragen nicht mehr neu, sondern
ziehen nur die Zahlen nach. Sonst verschwaende das Feld, in dem
man gerade tippt, unter der Hand.
* „Einfuegen" holt den Link aus der Zwischenablage -- mit drittem
Ausgang: Firefox gibt sie ohne Erweiterung nicht her, und dann
wird das gesagt, statt dass ein Knopf stumm bleibt.
* Im Dialog drei fertige Tage (Heute / Gestern / Vorgestern) statt
eines Kalenders. Was nicht mehr in diesen Monat gehoert, wird gar
nicht erst angeboten -- am 1. und 2. fallen welche weg.
* Der Dialog heisst jetzt „Mehr Angaben" und ist die Ausnahme fuer
Notiz oder altes Datum. Dass er fuer etwas Normales gebraucht
wurde, war sein Fehler.
GEPRUEFT: 194 Pruefungen, 0 Fehler (vorher 168)
Co-Authored-By: Claude Opus 5 <[email protected]>
444 lines
18 KiB
CSS
444 lines
18 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; }
|
|
}
|