: Ihr Kopf klappt sie zu, wenn man den Schritt
gerade nicht braucht.
Überschrift
i
…
*/
.card {
background: var(--flaeche); border: 1px solid var(--border);
border-radius: var(--rund-karte);
padding: var(--polster); margin-bottom: var(--luft-weit);
}
.card h2 {
font-size: var(--gr-bedienung); margin: 0; color: var(--muted);
text-transform: uppercase; letter-spacing: .04em;
}
/* Die kleine Raute der Marke vor jedem Kartentitel – dasselbe Zeichen, mit
dem die Leseseiten ihre Stichpunkte setzen. */
.card h2::before {
content: ""; display: inline-block; width: 6px; height: 6px;
border-radius: 1px; background: var(--gruen-tief);
transform: rotate(45deg); margin-right: 8px; vertical-align: 1px;
}
/* Zwischenüberschrift innerhalb einer Karte. Ohne Versalien: Die sind das
Zeichen der Kartenüberschrift, zwei Ränge in derselben Schreibung wären auf
einen Blick nicht auseinanderzuhalten.
Die Trennlinie gehört zur Überschrift statt als eigenes nicht den Absatzabstand des Browsers mitbringt. */
.hint {
display: block; margin: 4px 0 0; line-height: 1.45;
font-weight: 400; color: var(--muted); font-size: var(--gr-neben);
}
/* Die meisten Hinweise werden erst je nach Lage gefüllt. Leer sollen sie auch
keinen Platz beanspruchen, sonst wandern die Elemente darunter, sobald ein
Text erscheint – und die Oberfläche wirkt schon vorher unruhig gesetzt. */
.hint:empty { display: none; }
/* Klammerzusätze in einer Beschriftung („Deckkraft (W/S)") bleiben in der
Zeile: Sie erläutern das Wort davor, eine eigene Zeile machte aus dem
Zusatz eine zweite Aussage. */
label .hint { display: inline; margin: 0; }
/* Steht der Hinweis unmittelbar in der Karte, schließt er den Takt nach unten
selbst ab – sonst klebt das nächste Bedienelement an ihm. */
.card > .hint, .card > .muted { margin-bottom: var(--luft); }
.muted { color: var(--muted); font-size: var(--gr-neben); }
.row { margin-bottom: var(--luft); }
.row.two { display: flex; gap: var(--luft); }
.row.two > div { flex: 1; }
/* Zwei zusammengehörige Einstellungen nebeneinander – vier einzelne Zeilen
machten die Karte unnötig lang. */
.row.paar { display: flex; align-items: center; gap: 8px; }
.row.paar label { margin: 0; flex: none; }
.row.paar label:nth-of-type(2) { margin-left: auto; }
.inline-row { display: flex; gap: 8px; align-items: center; }
/* Schalter links, sein Gegenmittel rechts am Rand. */
.inline-row > .check { flex: 1; }
.check { font-weight: 400; font-size: var(--gr-bedienung); display: flex; align-items: center; gap: var(--luft-eng); }
/* Eingerückt: gehört zum Schalter darüber und nicht zur Karte als Ganzes. */
.sub-row { margin: var(--luft-eng) 0 var(--luft) 22px; }
/* ==========================================================================
5. Formularelemente
========================================================================== */
select, input[type=number], input[type=text], input[type=search],
input[type=password], input[type=email], input[type=date], textarea {
width: 100%; padding: 6px 9px;
border: 1px solid var(--border); border-radius: var(--rund);
font-size: var(--gr-bedienung); font-family: inherit;
background: var(--flaeche); color: var(--text);
}
input[type=range] { width: 100%; accent-color: var(--blau); }
input[type=color] {
width: 44px; height: 30px; padding: 2px;
border: 1px solid var(--border); border-radius: var(--rund); background: var(--flaeche);
}
/* Checkboxen und Regler in einer Werkzeugspalte übernehmen das Markengrün –
accent-color am Behälter genügt. */
.werkzeugspalte { accent-color: var(--gruen-tief); }
/* Der Wert eines Reglers steht rechts in seiner Beschriftungszeile. */
output {
float: right; font-weight: 400; color: var(--muted);
font-variant-numeric: tabular-nums;
}
/* Tastenkappe. Der dickere untere Rand macht sie plastisch, ohne einen
Schatten zu brauchen. */
kbd {
display: inline-block; padding: 1px 5px;
border: 1px solid var(--border); border-bottom-width: 2px;
border-radius: var(--rund-klein); background: var(--flaeche-tief); color: var(--text);
font-family: var(--schrift-fest); font-size: var(--gr-klein); margin-right: 2px;
}
/* ==========================================================================
6. Knöpfe – die drei Bedeutungen
==========================================================================
Drei Farben, drei Bedeutungen – und jede genau eine:
grün „hier geht es weiter" – sichtbar an höchstens EINEM Knopf zugleich.
Welcher es ist, entscheidet EINE Stelle im Code nach dem Zustand.
gelb „dieser Modus läuft" – ein Zustand, kein nächster Schritt.
rot „hier geht Arbeit unwiderruflich verloren" – nur, wo gelöscht oder
verworfen wird und kein Rückgängig es zurückholt.
Alles andere bleibt grau, auch was viel bewegt: Eine Warnfarbe, die auch
für Umkehrbares steht, liest am dritten Tag niemand mehr – dann ist sie
beim wirklichen Löschen nichts mehr wert.
JEDE der drei Bedeutungen trägt ein zweites, farbunabhängiges Merkmal.
Der Grund ist keine Vorschrift, sondern eine Zahl: Rot-Grün-Schwäche
betrifft rund acht Prozent der Männer, und in dieser Gruppe liegen Grün und
Rot dicht beieinander. „Neu beginnen" und „Exportieren" sind dann dasselbe
Bild – der eine verwirft die Arbeit, der andere gibt sie aus.
Gewählt sind Zeichen und keine Formen: Ein Zeichen sagt zusätzlich, WAS
gemeint ist, eine gestrichelte Kante nur, dass etwas anders ist.
→ „hier geht es weiter" (grün)
● „dieser Modus läuft" (gelb)
× „hier geht Arbeit verloren" (rot)
aria-hidden ist nicht nötig – Inhalt aus ::before liest ein Bildschirmleser
ohnehin nicht als eigenes Element vor. */
.btn {
display: inline-block; padding: 6px 14px;
border: 1px solid var(--border); border-radius: var(--rund);
background: var(--flaeche-tief); color: var(--text);
font-size: var(--gr-bedienung); font-family: inherit;
cursor: pointer; text-decoration: none;
}
.btn:hover:not(:disabled) { background: var(--flaeche-hover); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--gruen-tief); border-color: var(--gruen-tief); color: var(--flaeche); }
.btn-primary:hover:not(:disabled) { background: var(--gruen-tiefer); }
.btn-primary:not(.btn-icon)::before { content: "→ "; font-weight: 600; }
/* Steht NACH .btn-primary und gewinnt damit bei gleichem Gewicht: Ein Knopf
ist grün, solange sein Schritt dran ist, und gelb, solange er läuft. */
.btn-mode { background: var(--gelb); border-color: var(--gelb); color: var(--flaeche); }
.btn-mode:hover:not(:disabled) { background: var(--gelb-tief); }
.btn-mode:not(.btn-icon)::before { content: "● "; font-size: .85em; }
.btn-danger { color: var(--rot-tief); }
/* Nicht am reinen Sinnbild-Knopf: Ein × vor einem Papierkorb wäre zwei
Zeichen für eine Aussage (Tagwerk, seitenblick, Patientensim – System
nachgezogen 19.08.2026). */
.btn-danger:not(.btn-icon)::before { content: "× "; font-weight: 600; }
/* Zerstörendes steht zuletzt in seiner Karte und leise: Es ist die seltenste
Handlung darin und die einzige, die kein Rückgängig zurückholt. Eine
Schaltfläche über die volle Breite lädt zum Klicken ein – genau das soll
sie hier nicht, und sie wöge dann so schwer wie die Handlung darüber, die
man täglich braucht. Die Warnung trägt die Farbe; die Größe muss sie nicht
wiederholen. */
.btn.btn-leise {
display: inline-block; width: auto; margin: 2px 0 0;
padding: 2px 0; border: 0; background: none;
font-size: var(--gr-neben); text-decoration: underline; text-underline-offset: 2px;
}
.btn.btn-leise:hover:not(:disabled) { background: none; text-decoration-thickness: 2px; }
/* Der Unterstrich bleibt auch gesperrt stehen. Er sagt „das ist eine
anklickbare Zeile und keine Beschriftung" – eine Aussage, die sich nicht
ändert, wenn gerade nichts zu löschen ist. Nähme man ihn weg, sähe von zwei
Löschzeilen untereinander eine aus wie Fließtext, und der Vergleich legte
die falsche Fährte. Gesperrt zeigen schon Deckkraft und Zeiger. */
/* Reine Sinnbild-Knöpfe: QUADRATISCH, und das Zeichen sitzt in der Mitte.
Steht bewusst NACH .btn: Beide Regeln wiegen gleich schwer, also gewinnt
die spätere – stünde das hier oben, setzte .btn seine Polsterung und sein
inline-block wieder durch und das Sinnbild säße aus der Mitte gerückt.
AUFGELÖST am 16.08.2026 (die OFFEN-Notiz vom 12.08.2026 stand hier, Wunsch
vom selben Tag: „Größe und Form gleich, mittig das Icon"). Hier standen
30×26 – ein liegendes Rechteck, übernommen aus mapfit. Tagwerk und mapfit
hatten sich davon längst gelöst und je eine eigene Regel gesetzt, und
derselbe Burger sah in den drei Werkzeugen verschieden aus: 26×26 dort,
30×26 hier. Ein Knopf, der nur ein Zeichen trägt, ist ein Quadrat – alles
andere gibt einer der beiden Achsen mehr Luft als der anderen, und das
Zeichen sitzt dann sichtbar in einem zu weiten Kasten.
Zwei Maße, ein Prinzip – **eine Höhe für die ganze Reihe**:
* 30×30 in der Fläche: so hoch wie ein beschrifteter .btn daneben
(6 px Polsterung oben und unten + Zeile + Rahmen),
* 26×26 im Kopf: dort trägt die ganze Reihe 26 px
(siehe `.header-group .btn:not(.btn-icon)` weiter oben).
Beide Maße müssen dastehen. Ohne die Höhe ergäbe sie sich aus dem
Zeilenabstand der Schrift, während die Breite fest ist – und der Knopf wäre
wieder ein liegendes Rechteck. `line-height: 1` aus demselben Grund: Der
Zeilenkasten hält sonst über und unter dem Zeichen Platz für Ober- und
Unterlängen frei, die ein „⋯" oder „☰" gar nicht hat, und das Zeichen hinge
in diesem Kasten so tief, wie es die Grundlinie vorgibt.
Offen bleibt allein die Telefon-Schicht: die Telefon-Schicht verlangt am Finger
36 px für die GANZE Reihe – Sinnbilder wie beschriftete Knöpfe. Das ist
kein Maß für .btn-icon allein, sondern eines für .btn, und es steht
deshalb dort an (bis dahin führt tagwerk es lokal). */
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; font-size: 14px; line-height: 1;
}
header .btn-icon { width: 26px; height: 26px; }
/* Ein GEZEICHNETES Sinnbild im Knopf - für alles, was kein Schriftzeichen
hergibt: der Burger, das Zahnrad, der Trichter, ein Personenumriss.
Die Maße müssen hier stehen und nicht am einzelnen : Ein ohne
width und height ist nach Norm 300×150 Pixel groß und sprengt jeden Knopf,
in den man es legt. Das ist keine Eigenheit einer Anwendung, sondern gilt
überall - also gehört die Vorgabe hierher. (Aufgefallen ist es beim Einbau
des Burgers in Tagwerk und mapfit am 12.08.2026: zweimal derselbe Fehler,
danach zweimal eine eigene Regel mit verschiedenen Werten - und die beiden
Knöpfe sahen verschieden aus.)
currentColor statt fester Werte: Damit trägt das Zeichen die Farbe der
Schrift daneben - in Hell wie in Dunkel, auf heller Fläche wie auf der
dunklen Tinte des Kopfes, und im eingeschalteten Zustand wechselt es mit.
16 px bei 1,6 Strichstärke: dieselbe optische Dichte wie die
Schriftzeichen daneben (↶ ⋯ ⎙) in einem Knopf von 26 px Höhe.
Flächige Zeichen (ein gefüllter Trichter, ein Dreieck) tragen ihre
Ausnahme am Ort: `fill: currentColor; stroke: none`. */
.btn > svg {
width: 16px; height: 16px; flex: none;
fill: none; stroke: currentColor; stroke-width: 1.6;
stroke-linecap: round; stroke-linejoin: round;
}
/* Der Burger, der eine Werkzeugspalte holt - überall dieselbe Zeichnung:
Drei Striche und kein Pfeil: Ein Pfeil zeigt eine Richtung an und muss
deshalb bei jeder Anordnung neu gedreht werden (mapfit drehte ihn
gestapelt um 90 Grad); ein Burger öffnet einfach. Sein Zustand steht im
aria-expanded - und damit ist er auch zu sehen (siehe unten). */
.btn[aria-expanded="true"] { border-color: var(--gruen-tief); }
/* Beschriftung plus Sinnbild. */
.btn-labeled { display: inline-flex; align-items: center; gap: 5px; }
/* Knopf, der zu einem Bedienelement daneben gehört und nicht für sich steht –
etwa die Nullstellung eines Reglers. */
.btn-tight { padding: 4px 10px; font-size: var(--gr-neben); flex: none; }
.btn.block { display: block; width: 100%; margin-bottom: var(--luft); }
/* Als letztes Element der Karte hätte der Abstand nichts mehr zu trennen – er
käme zur Kartenpolsterung hinzu und die Karte sähe unten aufgeblasen aus. */
.card > .btn.block:last-child { margin-bottom: 0; }
.btn-row { display: flex; gap: var(--luft-eng); flex-wrap: wrap; margin-top: var(--luft); }
/* Alle Knöpfe einer Reihe gleich hoch und gleich breit: Unterschiedliche
Größen lassen eine schmale Spalte unruhig wirken, ohne dass die Größe etwas
bedeutete. Wichtig ist eine Aktion, wenn sie grün ist, nicht wenn sie
größer ist. */
.btn-row .btn { flex: 1 1 auto; justify-content: center; text-align: center; }
.btn-row .btn.btn-leise { flex: 0 0 auto; }
/* Der Kartenkopf bringt seinen Abstand nach unten schon mit; steht eine
Knopfreihe als Erstes in der Karte, käme ihrer obendrauf. Und gehört sie zu
einer Beschriftung darüber, rückt sie so nah heran wie jedes Eingabefeld. */
.card > summary + .btn-row, label + .btn-row { margin-top: 0; }
/* Kleiner Entfernen-Knopf am Ende einer Zeile. */
.btn-remove {
flex: none; display: inline-flex; align-items: center; justify-content: center;
width: 22px; height: 22px; padding: 0;
border: 1px solid var(--border); border-radius: var(--rund);
background: var(--flaeche); color: var(--muted);
font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer;
}
.btn-remove:hover { border-color: var(--rot-tief); color: var(--rot-tief); background: var(--flaeche-hover); }
/* Segmentwahl: mehrere Knöpfe, die eine Frage beantworten. */
.seg { display: flex; margin-bottom: var(--luft); }
.seg-btn { flex: 1; border-radius: 0; }
.seg-btn:first-child { border-radius: var(--rund) 0 0 var(--rund); }
.seg-btn:last-child { border-radius: 0 var(--rund) var(--rund) 0; border-left: 0; }
.seg-btn.active { background: var(--text); border-color: var(--text); color: var(--flaeche); }
/* Das Tastenkürzel IM Knopf, neben dem Sinnbild – nicht nur im Tooltip. Ein
Sinnbild allein sagt seine Taste nicht, und wer sie erst im Tooltip suchen
muss, lernt sie nie. Feste Breite, sonst stünden die Sinnbilder je nach
Buchstabe unterschiedlich weit links und die Spalte wirkte krumm.
Nur bei EINZELNEN Tasten – Strg+S ließe sich so nicht anschreiben. */
.wz-taste {
width: 9px; flex: none; text-align: center;
font-size: var(--gr-winzig); font-weight: 600; line-height: 1;
color: var(--muted);
}
/* Auf gelbem und grünem Grund erbt sie deren helle Schriftfarbe. */
.btn-mode .wz-taste, .btn-primary .wz-taste { color: inherit; opacity: .85; }
/* Das zweite Merkmal der Sinnbild-Knöpfe: eine Marke an der Kante.
In 40px Breite ist neben Sinnbild und Buchstabe kein Platz für ein Zeichen
davor – hier trägt es deshalb der Knopf selbst. Der laufende Modus bekommt
einen kräftigen Balken an seiner inneren Kante, der vorgeschlagene nur
einen schmalen. Über ::after und nicht über border: Ein Rahmen verschöbe
den Inhalt um seine Breite, und die Sinnbilder stünden dann je nach Zustand
woanders. */
.btn-werkzeug { flex: none; width: 40px; gap: 3px; position: relative; }
.btn-werkzeug.btn-mode::after,
.btn-werkzeug.btn-primary::after {
content: ""; position: absolute; right: -1px; top: 4px; bottom: 4px;
border-radius: 2px; background: currentColor;
}
.btn-werkzeug.btn-mode::after { width: 4px; }
.btn-werkzeug.btn-primary::after { width: 2px; opacity: .75; }
/* Der Knopf hebt sich vom Grund der Leiste ab – aber nur, solange er keine
eigene Farbe trägt. Beide Ausnahmen müssen HIER stehen und nicht bloß
später im Blatt: Mit zwei Klassen wiegt diese Regel schwerer als das
einklassige .btn-mode und setzte ihr Weiß sonst gegen es durch. Beim Grün
fiel das übel auf – der Grund wurde weiß, die Schrift blieb weiß, und das
Werkzeug war unsichtbar, sobald es an der Reihe war. */
.btn-werkzeug:not(.btn-mode):not(.btn-primary) { background: var(--flaeche); }
.btn-werkzeug:hover:not(:disabled):not(.btn-mode):not(.btn-primary) { background: var(--flaeche-hover); }
/* ==========================================================================
7. Tabellen und Listen
========================================================================== */
table { width: 100%; border-collapse: collapse; font-size: var(--gr-neben); margin-top: var(--luft-eng); }
th, td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; }
/* Jede Zahl in Tabellenziffern – ohne das wandern Werte in der Spalte und
beim Ticken einer Anzeige. */
td.num, .zahl { font-variant-numeric: tabular-nums; }
/* REGEL: Breitentragende Tabellen bekommen table-layout: fixed und (siehe dialog.js). Sie sehen aus wie die
Karten der Oberfläche – derselbe Rahmen, dieselbe Fläche, dieselben
Knöpfe –, weil sie zur Anwendung gehören und nicht zum Browser. */
.mf-dialog {
border: 1px solid var(--border); border-radius: var(--rund-karte);
padding: 18px 20px; max-width: 32rem; width: calc(100vw - 40px);
background: var(--flaeche); color: var(--text);
font: var(--gr-bedienung)/1.5 var(--schrift-bedienung);
box-shadow: var(--schatten-hoch);
}
/* Der Hintergrund dämpft die Anwendung, statt sie zu verdecken: Worüber
gefragt wird, soll sichtbar bleiben – „Alle 12 Messungen löschen?" ist
leichter zu beantworten, wenn man die zwölf noch sieht. */
.mf-dialog::backdrop { background: var(--schleier); }
.mf-dialog h2 {
margin: 0 0 var(--luft); font-size: 15px; color: var(--text);
text-transform: none; letter-spacing: 0;
}
.mf-dialog h2::before { content: none; } /* keine Raute – das ist kein Kartentitel */
.mf-dialog p { margin: 0 0 8px; }
.mf-dialog .mf-dialog-feld { display: block; margin: var(--luft-weit) 0 4px; font-weight: 600; }
/* Die Beschriftung bekommt ihre eigene Zeile: Bei den Feldern, die kein
(menue-auf / konto-auf), gesetzt von main.js; den Zustand trägt außerdem
aria-expanded am Knopf – und das ist es, was man sieht (unten). */
.kopf-menue { position: relative; display: inline-flex; }
#kopf-werkzeuge, #konto-griffe {
display: none; position: absolute; top: calc(100% + 4px); right: 0; left: auto;
z-index: 25; flex-direction: column; align-items: stretch; gap: 4px;
min-width: 210px; max-width: calc(100vw - 16px); padding: 4px;
max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
border: 1px solid var(--tinte-linie); border-radius: 8px;
background: var(--tinte-hoch); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}
#konto-griffe { min-width: 170px; margin: 0; }
header.menue-auf #kopf-werkzeuge,
header.konto-auf #konto-griffe { display: flex; }
/* Im Menü ist jeder Griff eine Zeile: links bündig, hoch genug für einen
Finger, flächig durchsichtig. Beim Überfahren leuchtet der RAHMEN auf statt
der Füllung – sonst stünden hier fünf Kästen in einem Kasten. */
header #kopf-werkzeuge .btn, header #konto-griffe .btn {
width: auto; height: auto; justify-content: flex-start; text-align: left;
padding: 6px 9px; line-height: 1.3; border-radius: 6px;
border: 1px solid transparent; background: none; color: var(--tinte-text);
}
header #kopf-werkzeuge .btn:hover:not(:disabled),
header #konto-griffe .btn:hover:not(:disabled) { background: none; border-color: var(--gruen); }
/* Die rote Zeile behält ihr Rot: `header #kopf-werkzeuge .btn` wiegt mit
seiner Kennung schwerer als `header .btn.btn-danger` oben. */
header #kopf-werkzeuge .btn.btn-danger { color: var(--rot); }
/* Zwischenüberschriften im Menü – klein, leise, Strich darüber; über dem
ersten Absatz gibt es nichts zu trennen. Eine Überschrift steht nur, wenn
unter ihr etwas steht. */
.menue-be {
display: block; margin-top: 4px; padding: 6px 9px 2px; font-size: 11px; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase;
color: var(--tinte-leise); border-top: 1px solid var(--tinte-linie);
}
#kopf-werkzeuge > .menue-be:first-child { margin-top: 0; padding-top: 2px; border-top: 0; }
/* Was nur am Telefon dasteht (Griffe, die aus der Kopfzeile ins Menü
wandern). display und nicht hidden: Die Breite kennt nur das Stylesheet. */
#kopf-werkzeuge .nur-telefon { display: none; }
/* Ein offener Aufklapper zeigt es: hellerer Grund, grüner Rahmen, helle
Schrift. Ein Griff, der auf- und zuklappt, ist ein Schalter, und ein
Schalter, der seinen Zustand nicht zeigt, ist keiner. Über aria-expanded und
nicht über eine eigene Klasse: Das Attribut steht ohnehin an jedem dieser
Knöpfe. .ist-an für die Hilfe, die keinen Kasten aufklappt, sondern eine
Leiste. Der Burger gehört ausdrücklich dazu – auch die Spalte ist ein
Aufklapper. */
header .btn[aria-expanded="true"], header .btn.ist-an {
background: #2d4a36; border-color: var(--gruen); color: #fff;
}
header #kopf-werkzeuge .btn.ist-an { background: none; border-color: var(--gruen); color: var(--tinte-text); }
/* Griffe im Kopf mit gezeichnetem Zeichen UND Wort – der Konto-Griff mit der
Kennung. Gezeichnet, weil ⚙ und ☰ als Schriftzeichen auf manchen Systemen
farbige Emoji sind. Die Kennung kürzt sich, der Knopf bricht nie um. */
.kopf-griff { display: inline-flex; align-items: center; gap: 7px; }
#btn-nutzer { max-width: 200px; }
#btn-nutzer .kennung { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Kennung als bloße Auskunft (ohne Knopf, seitenblick): leise, kein Griff. */
header .kennung { color: var(--tinte-leise); font-size: 12px; }
#btn-nutzer .kennung { color: inherit; font-size: inherit; }
/* Zwei Griffe für die Hilfe, immer nur einer sichtbar: am breiten Schirm das ?
im Kopf, am Telefon eine Zeile im Menü (unten). */
#btn-hilfe-menue { display: none; }
/* --- Die Anmeldemaske (login.html) ---------------------------------------
Kopf mit der Marke, eine Karte in der Mitte, Fußzeile. An body.anmeldung
gebunden, weil main in der Anwendung ein Flex-Behälter ist und ein Feld
dort 100 % breit; ungebunden verstellte die Regel die Anwendung. Fünfmal
dieselbe Maske (380 px, Karte, Beschriftungen, Fehlerzeile) – hier einmal. */
/* Kopf, Karte, Fuss uebereinander - die Fusszeile steht unten, nicht unter
der Karte. (Die Anwendung setzt dasselbe in ihrem eigenen Blatt.) */
body.anmeldung { display: flex; flex-direction: column; min-height: 100%; }
body.anmeldung main { display: block; flex: 1; min-height: 0; overflow-y: auto; padding: 24px 24px 40px; }
body.anmeldung .card {
max-width: 380px; margin: 60px auto;
background: var(--flaeche); border: 1px solid var(--border);
border-radius: var(--rund-gross); padding: 20px;
accent-color: var(--gruen-tief);
}
body.anmeldung h1 { font-size: 22px; margin: 0 0 16px; }
body.anmeldung label { display: block; font-weight: 600; margin: 14px 0 4px; font-size: 14px; }
/* 16 px Schrift in den Feldern: Safari am iPhone zoomt beim Hineintippen in
jedes kleinere Feld die ganze Seite heran. */
body.anmeldung input[type="text"],
body.anmeldung input[type="password"] {
width: 100%; padding: 7px 10px; border: 1px solid var(--border);
border-radius: var(--rund-klein); font-size: 16px; font-family: inherit;
background: var(--flaeche); color: var(--text);
}
body.anmeldung .btn-primary { padding: 8px 16px; font-size: 14px; }
body.anmeldung .muted { color: var(--muted); font-size: 13px; }
/* Dieselbe Sprache wie die Meldungen der Anwendung: roter Rahmen, roter
Grund. Die Fehlerzeile bleibt stehen, bis der nächste Versuch läuft – eine,
die nach Sekunden verschwindet, liest niemand zu Ende. */
body.anmeldung .flash { padding: 10px 14px; border-radius: var(--rund-klein); margin-bottom: 14px; font-size: 14px; }
body.anmeldung .flash-error { background: var(--rot-hauch); border: 1px solid var(--rot-tief); color: var(--rot-tief); }
body.anmeldung .flash[hidden] { display: none; }
body.anmeldung footer #rechtliches[hidden] { display: none; }
/* --- Der Code als sechs Kästchen (codefeld.js) ------------------------------
Je Ziffer eines, in der Maske wie im Kasten des Anmelde-Schutzes; der
Reservecode (Buchstaben) als leiser Wechsel zum gewohnten Textfeld darunter.
Wortgleich Tagwerk/mapfit. */
.code-ziffern { display: flex; gap: 6px; margin-top: 6px; }
.code-ziffern input.code-ziffer,
.mf-dialog .mf-dialog-feld .code-ziffern input.code-ziffer {
display: block; flex: 0 1 40px; min-width: 0; width: 40px; height: 48px;
margin: 0; padding: 0; text-align: center;
font-family: var(--schrift-fest); font-size: 22px;
}
.code-ziffern input.code-ziffer:nth-of-type(4) { margin-left: 10px; }
.codefeld input.code-eingabe,
.mf-dialog .mf-dialog-feld input.code-eingabe {
margin-top: 6px; font-family: var(--schrift-fest);
font-size: 17px; letter-spacing: .18em; text-align: center;
}
.code-wechsel {
display: block; margin-top: 8px; padding: 0; border: 0; background: none;
color: var(--muted); font: inherit; font-size: 12px; font-weight: 400;
text-decoration: underline; cursor: pointer;
}
.code-wechsel:hover { color: var(--text); }
/* Feste Werte im Kasten (Geheimnis, Reservecodes): zum Abschreiben, nicht zum
Bearbeiten – Schrift mit fester Breite, die man mit dem Blick halten kann. */
.mf-dialog .mf-dialog-fest {
display: block; margin-top: 5px; padding: 6px 8px; white-space: pre-wrap;
border: 1px solid var(--border); border-radius: var(--rund-klein); background: var(--flaeche-tief);
font-family: var(--schrift-fest); font-size: 13px; user-select: all;
}
.mf-dialog .mf-dialog-link { display: inline-block; margin-top: 5px; font-weight: 400; }
/* Der Pflicht-Stern (aus Tagwerk, 19.08.2026): GRÜN wie der Akzent der
Familie und nicht rot - Rot ist die Warnfarbe, und ein roter Stern sähe
aus, als wäre schon etwas schiefgegangen. Er steht nur an Feldern, ohne die
das Abschicken wirklich scheitert (siehe frage() in dialog.js: `pflicht`
prüft auch). */
.pflicht { color: var(--gruen-tief); font-weight: 700; flex: none; cursor: help; }
/* Und wenn es doch leer bleibt: Der Kasten geht nicht zu, das Feld bekommt
eine Marke. Ein Kasten, der nur nicht zugeht, lässt einen raten, woran es
liegt. */
.mf-dialog .mf-dialog-feld.fehlt input,
.mf-dialog .mf-dialog-feld.fehlt select,
.mf-dialog .mf-dialog-feld.fehlt textarea { border-color: var(--rot-tief); }
.mf-dialog .mf-dialog-feld.fehlt > span:first-child { color: var(--rot-tief); }
/* Die Kästchenreihe im Kasten (`typ: 'haken'`): eine Zeile je Wahl,
fingergroß, mit eigener Trefferfläche; nicht wählbare Zeilen bleiben grau
stehen und erklären sich im Titel. */
.mf-dialog .mf-dialog-feld .check { margin-top: 6px; font-weight: 400; }
.mf-dialog .mf-dialog-feld .check input:disabled + span { color: var(--muted); }
/* --- Die Telefon-Schicht ---------------------------------------------------
Bis 19.08.2026 stand sie nur in der Doku und in den Werkzeugen (Tagwerk,
seitenblick, Patientensim, Wachplan – viermal, also verbindlich). Zwei
Bedingungen, zwei Fragen: die BREITE (Platz in der Zeile) und die ZEIGERART
(Finger, die zielen). Ein Tablet in Querlage ist breit und hat trotzdem
keinen Zeiger.
Unter 600 px bleibt der Kopf EINE Zeile: Burger, Markenzeichen links, die
Griffe rechts. Was nicht mehr hineinpasst, wandert hinter den Öffner
(.nur-telefon-Zeilen im Menü); das Wort der Marke weicht, das Zeichen
bleibt; die Hilfe wird eine Menüzeile; die Fußzeile fällt weg – Marke,
Fassung und Verweis sind Auskünfte, die man einmal sucht, gegen eine Zeile
Bildschirmhöhe bei jedem Blick. Nichts schrumpft und nichts bricht um. */
@media (max-width: 600px) {
header { padding: 8px 10px; gap: 0 8px; }
header .kopf-links { flex-wrap: nowrap; gap: 6px; }
header .kopf-rechts { flex-wrap: nowrap; gap: 6px; min-width: max-content; }
#kopf-werkzeuge .nur-telefon { display: block; }
#kopf-werkzeuge, #konto-griffe { max-width: calc(100vw - 12px); }
.brand > span { display: none; }
.kopf-griff .knopf-breit { display: none; }
header .kopf-menue > #btn-nutzer {
max-width: none; width: 26px; height: 26px; padding: 0; justify-content: center;
}
#btn-hilfe { display: none; }
#btn-hilfe-menue { display: block; }
footer { display: none; }
}
/* Am Finger eine Höhe für die ganze Reihe: Zeichenknöpfe wie beschriftete auf
36 px, das Zeichen darin wächst mit. Nicht das Fingermaß ist der Grund,
sondern der VERSATZ – eine Reihe, in der ein Knopf zehn Pixel kleiner ist
als sein Nachbar, sieht kaputt aus und lässt einen danebenzielen. */
@media (hover: none) {
header .btn-icon { width: 36px; height: 36px; }
header .btn > svg { width: 18px; height: 18px; }
.header-group .btn:not(.btn-icon),
header .kopf-links > .btn:not(.btn-icon),
header .kopf-menue > .btn:not(.btn-icon) { height: 36px; padding: 0 12px; line-height: 34px; }
header #kopf-werkzeuge .btn, header #konto-griffe .btn,
.mf-dialog .btn { padding: 9px 12px; font-size: 13px; }
.mf-dialog-knoepfe { margin-top: 24px; }
}
@media (max-width: 600px) and (hover: none) {
header .kopf-menue > #btn-nutzer { width: 36px; height: 36px; }
}
/* ===========================================================================
13. TEILEN – der Einladungs- und Mitglieder-Kasten
===========================================================================
Gebaut von dist/teilen.js, gleich in allen Werkzeugen, die etwas teilen.
Er ist ein .mf-dialog wie jede andere Rückfrage und erbt von dort Rahmen,
Rundung, Schrift und Knopfreihe – hier steht nur, was ein Kasten mit einem
LINK darin zusätzlich braucht.
Der Kasten ist breiter als eine Rückfrage (520 statt 420 px): Ein
Einladungslink ist lang, und ein Feld, das ihn auf drei Zeichen zeigt, hilft
niemandem beim Prüfen, ob er den richtigen erwischt hat. */
.mf-dialog.mf-teilen { max-width: 520px; }
/* Feld und Knopf nebeneinander, das Feld nimmt den Rest. So steht der Knopf
immer an derselben Stelle, egal wie lang die Adresse ist. */
.mf-teilen-zeile {
display: flex; align-items: flex-end; gap: 8px; margin-bottom: 4px;
}
.mf-teilen-zeile > .mf-dialog-feld { flex: 1; min-width: 0; margin: 0; }
.mf-teilen-zeile > .btn { flex: none; }
/* Der Link in Festbreitenschrift: Man liest ihn nicht, man vergleicht ihn –
und dafür müssen die Zeichen untereinander stehen. Nicht umbrechen, sondern
scrollen: Ein Link über drei Zeilen sieht aus wie drei Links. */
.mf-teilen-link {
flex: 1; min-width: 0;
padding: 7px 9px;
border: 1px solid var(--border); border-radius: var(--rund);
background: var(--flaeche-tief); color: var(--text);
font-family: var(--schrift-fest); font-size: 12px;
text-overflow: ellipsis;
}
.mf-teilen-rolle { width: 100%; margin-bottom: 8px; }
/* Die Rückmeldung unter dem Feld – „kopiert", „unterwegs", „ging nicht".
Sie steht dort, wo eben gedrückt wurde, und nicht oben am Kastenrand. */
.mf-teilen-meldung { margin: 4px 0 12px; font-size: var(--gr-neben); }
.mf-teilen-meldung.gut { color: var(--gruen-tief); }
.mf-teilen-meldung.schlecht { color: var(--rot-tief); }
/* Wer dabei ist: eine Zeile je Mensch, Name links, Rolle daneben, die Griffe
rechts. Getrennt vom Link durch eine Linie – es ist die zweite Frage des
Kastens ("wer ist schon da"), nicht die erste ("wie lade ich ein"). */
.mf-teilen-mitglieder {
margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border);
}
.mf-teilen-mitglied {
display: flex; align-items: center; gap: 8px;
padding: 5px 0;
}
.mf-teilen-mitglied + .mf-teilen-mitglied { border-top: 1px solid var(--border); }
.mf-teilen-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die Rolle ist eine Auskunft, kein Griff: leise, klein, nicht anklickbar. */
.mf-teilen-rolle-text { flex: none; color: var(--muted); font-size: var(--gr-klein); }
/* Das Erneuern steht links in der Knopfreihe, weg von „Fertig": Es entwertet
Links, die schon unterwegs sind. */
.mf-teilen-erneuern { font-size: var(--gr-klein); }
/* --- Die Ablage auf dem Server (dist/ablage.js) ---------------------------
Eine Zeile je Projekt: Name und Datum links, die Griffe rechts. Dieselbe
Machart wie die Mitgliederliste darüber – es ist dieselbe Art Frage
(„was liegt da, und was mache ich damit"). */
.mf-dialog.mf-ablage { max-width: 560px; }
/* Wer lange arbeitet, hat viele Projekte – die Liste rollt in sich, damit die
Fußreihe („Neu beginnen", „Datei öffnen …", „Schließen") sichtbar bleibt.
Ein Kasten, der über den Schirm hinauswächst, versteckt seine Antworten. */
.mf-ablage-liste { margin-top: 12px; max-height: min(50vh, 420px); overflow-y: auto; }
.mf-ablage-zeile {
display: flex; align-items: center; gap: 8px;
padding: 8px 0;
}
.mf-ablage-zeile + .mf-ablage-zeile { border-top: 1px solid var(--border); }
.mf-ablage-text { flex: 1; min-width: 0; }
.mf-ablage-name { font-size: var(--gr-bedienung); line-height: 1.25; }
/* Datum, Größe, „geteilt von …" – die Nebenangaben einer Zeile. Sie brechen
nicht um: Zwei Zeilen Beiwerk unter einem Namen verschöben die ganze Liste. */
.mf-ablage-info {
font-size: var(--gr-klein); color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mf-ablage-zeile > .btn { flex: none; }
.mf-ablage-ziel { width: 100%; }
/* ===========================================================================
14. ZUGÄNGE – die Liste des Betreibers
===========================================================================
Gebaut von dist/zugaenge.js. Wieder ein .mf-dialog, wieder eine Liste von
Zeilen – dieselbe Machart wie die Mitglieder oben und die Ablage darüber.
Der Unterschied ist nur, was in der Zeile steht: nicht ein Stand mit seinen
Griffen, sondern ein Mensch mit seinem Zustand.
Breit wie die Ablage (560 px): In eine Zeile gehören Name, Kennung,
Herkunft und zwei Griffe. */
.mf-dialog.mf-zugaenge { max-width: 560px; }
.mf-zugaenge-liste { margin-top: 12px; max-height: min(50vh, 420px); overflow-y: auto; }
.mf-zugang {
display: flex; align-items: center; gap: 12px;
padding: 8px 0;
}
.mf-zugang + .mf-zugang { border-top: 1px solid var(--border); }
.mf-zugang-wer { flex: 1; min-width: 0; }
.mf-zugang-name { display: block; font-size: var(--gr-bedienung); line-height: 1.25; }
/* Kennung, Herkunft, Datum – Beiwerk in einer Zeile, die nicht umbricht:
Zwei Zeilen darunter verschöben die ganze Liste (wie .mf-ablage-info). */
.mf-zugang-quelle {
display: block;
font-size: var(--gr-klein); color: var(--muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Ein gesperrter Zugang ist nicht weg, nur still – gedämpft und nicht
durchgestrichen: Durchgestrichen hieße gelöscht, und das ist das andere. */
.mf-zugang.ist-gesperrt .mf-zugang-name { color: var(--muted); }
.mf-zugang-aktiv {
flex: none; display: flex; align-items: center; gap: 6px;
font-size: var(--gr-klein); color: var(--muted);
cursor: pointer;
}
.mf-zugang-aktiv:has(input:disabled) { cursor: default; opacity: .55; }
.mf-zugang > .btn { flex: none; }
.mf-zugaenge-meldung { margin: 8px 0 0; font-size: var(--gr-neben); }
.mf-zugaenge-meldung.gut { color: var(--gruen-tief); }
.mf-zugaenge-meldung.schlecht { color: var(--rot-tief); }