/* tagwerk – Knoepfe, Felder, Marken, Rueckfragen und die schmalen Schirme * * Teil der Gestaltung; eingebunden in index.html in fester Reihenfolge * (grund, listen, bedienung, drucken). */ /* --- Knoepfe ------------------------------------------------------------- */ /* Dieselben Knoepfe wie bei mapfit: heller Grund, duenner Rahmen, 6px Radius. Farbe traegt nur, was sie braucht - das Gruen fuehrt weiter, das Rot warnt. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--border-feld); border-radius: 6px; background: var(--flaeche); color: var(--text); font: inherit; font-size: 13px; cursor: pointer; white-space: nowrap; } .btn-sm { padding: 3px 10px; font-size: 13px; } .btn:hover:not(:disabled) { background: var(--grau-hauch); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn:focus-visible { outline: 2px solid var(--blau-tief); outline-offset: 1px; } .btn-primary { background: var(--gruen-tief); border-color: var(--gruen-tief); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--gruen-tiefer); } /* Zerstoerendes traegt die Warnfarbe und ein ×, genau wie bei mapfit: Die Farbe allein sieht man im Augenwinkel nicht zuverlaessig, das Zeichen davor kuendigt an, was der Knopf tut, bevor man ihn liest. Nicht bei den Sinnbild-Knoepfen - die tragen ihr Zeichen schon selbst. */ .btn-danger { color: var(--rot-tief); } .btn-danger:not(.btn-icon)::before { content: "× "; font-weight: 600; } .btn-danger:hover:not(:disabled) { background: var(--rot-hauch); border-color: var(--rot-tief); } .btn-tight { padding: 3px 9px; font-size: 12px; } /* Ein Knopf, der nur ein Zeichen traegt, ist ein Quadrat, und das Zeichen sitzt in seiner Mitte. * * Beides muss dastehen. Die Hoehe: Ohne sie ergibt sie sich aus dem * Zeilenabstand der Schrift, waehrend die Breite fest ist - der Knopf wurde ein * liegendes Rechteck und stand neben seinen Nachbarn zu niedrig. Und * line-height: 1, weil der Zeilenkasten sonst hoeher ist als das Zeichen darin: * Die Schrift haelt darueber und darunter Platz frei fuer Ober- und * Unterlaengen, die ein „⋯" oder ein „☰" gar nicht hat, und das Zeichen haengt * in diesem Kasten so tief, wie es die Grundlinie vorgibt. * * Und die drei flex-Zeilen stehen HIER, nicht bei .btn (berichtigt am * 12.08.2026): Der Verlass darauf, dass .btn sie ohnehin traegt, stimmte * nicht - .btn ist inline-block. Das Zeichen sass damit links oben statt in * der Mitte, und bei jedem gezeichneten Sinnbild fiel es auf. */ .btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; line-height: 1; } /* Ein Zeichenknopf zwischen schmalen Knoepfen (btn-tight) wird kleiner, bleibt aber quadratisch - sonst fiele er aus der Flucht der Reihe. */ .btn-icon.btn-tight { width: 24px; height: 24px; font-size: 14px; } /* 26x26 im Kopf: Dort traegt die ganze Reihe 26 px, und ein Knopf, der nur ein Zeichen traegt, ist ein Quadrat. Seit dem 16.08.2026 steht genau das auch im Gestaltungssystem (design-system/dist/basis.css, .btn-icon und header .btn-icon): 30x30 in der Flaeche, 26x26 im Kopf. Bis dahin sagte basis.css dort 30x26 - ein liegendes Rechteck -, und tagwerk, mapfit und patientensim hielten je eigene Werte; derselbe Burger sah in den drei Werkzeugen verschieden aus. Die beiden Regeln hier sind damit wertgleich mit dem System und bleiben nur stehen, weil tagwerk basis.css nicht einbindet. */ header .btn-icon { width: 26px; height: 26px; } /* Leise: sieht aus wie ein Verweis, nicht wie ein Knopf - fuer das, was selten und nie versehentlich getan wird. */ .btn-leise { border-color: transparent; background: none; color: var(--muted); text-decoration: underline; padding-left: 4px; padding-right: 4px; } .btn-leise:hover:not(:disabled) { background: none; color: var(--text); } .btn.block { display: flex; width: 100%; margin-top: 6px; } /* Die Knoepfe der Spalte („＋ Neue Liste", „Ansicht merken", „Papierkorb") sprechen dieselbe Sprache wie die Zeilen darueber (Wunsch vom 12.08.2026, siehe .wahl in listen.css): durchsichtig, links buendig, und beim Ueberfahren faerben sich Rahmen und Schrift gruen. Ein gefuellter Kasten zwischen lauter durchsichtigen Zeilen las sich als etwas anderes, dabei ist es dieselbe Spalte. */ #spalte .btn.block { justify-content: flex-start; background: none; border-color: transparent; color: var(--text); } #spalte .btn.block:hover:not(:disabled) { background: none; border-color: var(--gruen-tief); color: var(--gruen-tief); } /* Auch der LEISE Knopf steht in der Flucht (12.08.2026): „＋ Ansicht erstellen …" trug als btn-leise nur 4 px Polsterung links und begann damit sichtbar weiter aussen als „＋ Diese Ansicht merken" direkt darueber - zwei Zeilen desselben Blocks, zwei Anfaenge. Leise heisst hier: kein Rahmen, gedaempfte Schrift. Es heisst nicht: an einer anderen Stelle. */ #spalte .btn.block.btn-leise { padding-left: 12px; padding-right: 12px; } .btn-row { display: flex; gap: 6px; flex-wrap: wrap; } /* Der Kasten hinter dem ⋯ einer Blockueberschrift in der Spalte (13.08.2026, siehe .block-kopf in listen.css): dasselbe Bauteil wie die Menues im Kopf, nur kleiner. Er steht HIER und nicht bei seinen Geschwistern in listen.css, weil er .btn-row traegt: Deren `display: flex` steht eine Zeile darueber, und bei gleicher Spezifitaet gewinnt die spaeter geladene Datei. Ein `display: none` in listen.css verlor damit gegen dieses hier - das Menue stand dauerhaft offen, und seine Zeilen sahen als volle Knoepfe riesig aus. position: absolute, damit das Aufklappen die Aufzaehlung darunter nicht wegschiebt - sonst huepfte die halbe Spalte. */ .block-menue { display: none; position: absolute; right: 0; top: 22px; z-index: 6; flex-direction: column; gap: 2px; min-width: 170px; padding: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--flaeche); box-shadow: 0 6px 20px rgba(0, 0, 0, .18); } .spalte-block.mehr-auf .block-menue { display: flex; } /* Menuezeilen und keine Knoepfe: linksbuendig, ohne Rahmen und ohne Fuellung - dieselbe Machart wie #kopf-werkzeuge weiter unten. Die Regel muss die Blockgriffe von #spalte .btn ueberstimmen, deshalb die Kennung davor. */ #spalte .block-menue .btn { justify-content: flex-start; width: auto; margin: 0; padding: 6px 9px; font-size: 13px; line-height: 1.3; border: 1px solid transparent; border-radius: 6px; background: none; } #spalte .block-menue .btn:hover:not(:disabled) { background: none; border-color: var(--gruen); } /* --- Felder -------------------------------------------------------------- */ input[type="text"], input[type="search"], input[type="date"], input[type="datetime-local"], input[type="number"], input[type="time"], select, textarea { font-family: inherit; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--gruen-tief); outline-offset: -1px; } /* Ueber einem Schreibfeld steht die Schreibmarke - ausdruecklich und nicht dem Zufall ueberlassen (Wunsch vom 27.08.2026: „Cursor ueber Textfeld sichtbar machen"). Der Browser macht das von sich aus, solange ihm niemand dazwischenkommt. In Tagwerk kommt ihm jemand dazwischen: `cursor` VERERBT sich, und ueber der Liste liegen lauter Kaesten, die einen eigenen Zeiger setzen - die Eintragszeile die Greifhand (.eintrag-zeile), die Klapp-Ueberschrift und die Spaltenzeilen die Hand (summary, .wahl). Jedes Feld, das darin steht oder kuenftig darin landet, erbt deren Zeiger und sieht damit aus wie etwas zum Anfassen statt wie etwas zum Hineinschreiben. Genau umgekehrt ist es aber: Die Felder in den Unterpunkten tragen keinen Rahmen, solange man sie nicht ueberfaehrt - der Zeiger ist dort das ERSTE, was sagt, dass sich hier tippen laesst. Nur echte Schreibfelder. Ein Datum, eine Uhrzeit und eine Auswahlliste bedient man ueber ihre Griffe, nicht durch Schreiben - dort bleibt der Pfeil bzw. die Hand richtig. */ input[type="text"], input[type="search"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], textarea { cursor: text; } select { cursor: pointer; } /* Gesperrt ist gesperrt - dieselbe Auskunft wie an einem gesperrten Knopf (.btn:disabled oben). Ohne diese Zeile behielte ein ausgegrautes Feld die Schreibmarke und luede zum Tippen ein, das nicht ankommt. */ input:disabled, textarea:disabled, select:disabled { cursor: not-allowed; } /* Die Suche im Kopf: dieselbe Tinte wie der Kopf, nur eine Spur heller, damit das Feld als Eingabe zu erkennen bleibt. Die Lupe steckt als Zeichnung im Feld und nicht als Knopf daneben - sie sagt, wozu das Feld da ist, ohne ein zweites Bedienelement zu sein. */ #suche { width: 100%; padding: 5px 10px 5px 30px; font-size: 13px; border: 1px solid var(--tinte-linie); border-radius: 6px; background: var(--tinte-hoch) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='7' cy='7' r='4.2' fill='none' stroke='%236f8069' stroke-width='1.6'/%3E%3Cpath d='M10.2 10.2 14 14' stroke='%236f8069' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 8px 50%; background-size: 14px 14px; color: var(--tinte-text); } #suche::placeholder { color: light-dark(#6f8069, #8fa091); } #suche:hover { border-color: light-dark(#33493a, #4e6355); } #suche:focus { outline: 2px solid var(--gruen); outline-offset: -1px; border-color: transparent; } /* --- Der Schnelleinwurf -------------------------------------------------- Ein eigener Kasten mit Rahmen: Was hier steht, legt etwas an. Der Filterstreifen darunter veraendert nur die Sicht. Ohne diese Trennung standen zwei Reihen gleich aussehender Marken uebereinander, und man klickte im Filter, was man eintragen wollte. */ /* Der Abstand steht OBEN: Der Einwurf ist seit dem 12.08.2026 der Fuss der Spalte (siehe #inhalt in grund.css) - er braucht Luft zur Liste ueber ihm und keinen Rand nach unten, wo die Kante des Fensters kommt. */ #schnell { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--flaeche); } /* Eckige Marken im Einwurf, runde im Filter - der Unterschied ist im Augenwinkel zu sehen, ohne ihn zu lesen. */ #schnell .chip { border-radius: 6px; } .schnell-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .schnell-zeile + .schnell-zeile { margin-top: 7px; } /* Das ＋ steht neben dem Titelfeld, in JEDER Listenart (Wunsch vom 12.08.2026) - und zwar per order und nicht per Stellung im Dokument: Dort steht es weiterhin HINTER den Kernfeldern der Art (Betrag, Bestand, Einheit, Jahrgang, Takt), damit Tab vom Text erst dorthin springt und dann aufs Absenden. Was man sagen MUSS, kommt vor dem Knopf; wo er GEZEICHNET wird, ist eine andere Frage. Alles Uebrige bekommt order 2 und faellt damit dahinter - auch das, was im Dokument davor steht. */ #einwurf-eingabe > * { order: 2; } #einwurf-eingabe > .einwurf-text { order: 0; } /* Die KERNFELDER der Art stehen vor dem ＋ (Wunsch vom 12.08.2026): Betrag und Zahler in der Kasse, Bestand und Einheit im Vorrat, Menge auf dem Zettel, Datum und Jahrgang beim Geburtstag, Takt beim Vertrag. Sie sind Teil dessen, was man TIPPT - und was man tippt, steht vor dem Knopf, der es abschickt. Ohne diese Zeile sass das ＋ mitten darin, weil es per order gleich hinter das Titelfeld gezogen wird. Die Listenwahl und der Scanner bleiben dahinter: Die eine sagt, WOHIN es faellt (und steht meistens schon richtig), der andere ist ein Nebenweg. */ #einwurf-eingabe > #f-termin, #einwurf-eingabe > #f-jahrgang, #einwurf-eingabe > #f-betrag, #einwurf-eingabe > #f-wer, #einwurf-eingabe > #f-bestand, #einwurf-eingabe > #f-menge, #einwurf-eingabe > #f-zeitraum { order: 0; } #einwurf-eingabe > #btn-einwerfen { order: 1; flex: none; font-size: 17px; } /* Feld und Pflicht-Stern als eine Gruppe (10.08.2026): Sie bricht als Ganzes um, ihr Inneres nie - ein Stern allein in der naechsten Zeile markiert nichts. */ .einwurf-text { display: flex; align-items: center; gap: 6px; flex: 1 1 240px; min-width: 0; } #neu-text { flex: 1 1 auto; min-width: 0; padding: 7px 10px; font-size: 14px; border: 1px solid var(--border-feld); border-radius: 6px; background: var(--flaeche); } /* Die Waehrungswahl stand als einzige nicht in dieser Liste (gemeldet am 23.08.2026 fuer die Vertraege) und nahm damit die Zeichnung des Browsers: ohne Rahmen, mit anderer Fuellung und anderer Schriftgroesse - direkt neben dem Betragsfeld, mit dem sie EIN Feld bildet. Dasselbe war schon der Menge passiert; ein Feld, das man beim Eintragen vergisst, faellt genau dort auf, wo es neben seinem Nachbarn steht. */ #neu-liste, #neu-termin, #neu-betrag, #neu-waehrung, #neu-wer, #neu-bestand, #neu-menge, #neu-einheit, #neu-zeitraum, #neu-jahrgang { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border-feld); border-radius: 6px; background: var(--flaeche); } #neu-liste { max-width: 190px; } /* Ein artabhaengiges Kernfeld samt seiner Beschriftung: Betrag, Bestand, der Anbieter. Sie stehen in der ERSTEN Zeile, zwischen Text und Knopf - was man sagen muss, gehoert vor das Absenden. Zusammengehalten, damit Beschriftung und Feld beim Umbruch nicht auf zwei Zeilen fallen; die Gruppe selbst darf umbrechen, ihr Inneres nicht. */ .einwurf-feld { display: inline-flex; align-items: center; gap: 6px; flex: none; } /* Der gemerkte Strichcode im Einwurf: Monospace wie jeder feste Wert. */ .barcode-wert { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; } /* Die Zahlenfelder bleiben schmal: Ein Bestand hat zwei Stellen, kein Feld von 200 Pixeln - und drei davon nebeneinander muessen in eine Handybreite. */ #neu-bestand { width: 4.5em; } /* Die Menge auf dem Zettel ebenso (berichtigt am 13.08.2026, gemeldet am selben Tag: "Einkaufliste Eingabe gesprengt, Menge zu breit, Buttons brechen um"). Sie stand als einziges Zahlenfeld nicht in dieser Liste und nahm die Vorgabebreite eines Eingabefelds - rund zwanzig Zeichen fuer eine Zahl mit ein bis zwei Stellen. Solange sie ein Textfeld war, fiel das nicht auf; mit den Pfeilen kam die Breite des Drehknopfs dazu, und die Reihe brach um. Etwas breiter als der Bestand, weil die Pfeile Platz brauchen. */ #neu-menge { width: 5em; } #neu-jahrgang { width: 6em; } #neu-betrag { width: 6.5em; } /* Die Beschriftung vor den Marken sagt, was sie setzen: die eigene Einteilung oder - in einer Geburtstagsliste - ein festes Datum. Ohne sie waere "morgen" zweideutig. */ .marken-be { font-size: 11px; color: var(--muted); flex: none; } /* Zwischenueberschriften in den aufklappenden Menues (Wunsch vom 10.08.2026): klein, leise, mit Strich darueber - dieselbe Machart wie die abgesetzte Kennung im Kopfmenue. Sie teilen das Menue in Absaetze (Eintraege - Liste - Teilen - Daten - Endgueltig), damit vierzehn Zeilen nicht als ein Brei dastehen. Eine Ueberschrift steht nur, wenn unter ihr auch etwas steht (menueUeberschriften in ansicht.js). */ .menue-be { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gliederung); padding: 8px 12px 2px; margin-top: 4px; border-top: 1px solid var(--border); } #listen-griffe > .menue-be:first-child { border-top: 0; margin-top: 0; padding-top: 2px; } /* Der Pflicht-Stern: das eine Zeichen, das jeder als "muss" liest. GRUEN wie im Portal (assets/portal.css dort) und nicht rot: Gruen ist der Akzent der Familie - rot ist die Warnfarbe, und ein roter Stern saehe aus, als waere schon etwas schiefgegangen (berichtigt am 10.08.2026). */ .pflicht { color: var(--gruen-tief); font-weight: 700; flex: none; cursor: help; } /* Ein Pflichtfeld, das beim Bestaetigen leer war (12.08.2026): Der Kasten bleibt offen, der Zeiger springt hinein - und das Feld sagt, dass es gemeint ist. Ohne diese Marke bliebe nur ein Kasten, der nicht zugeht, und man raet, woran es liegt. Rot und nicht gruen: Hier ist etwas ausstehend, und der Stern daneben ist die Ankuendigung, nicht die Meldung. */ .mf-dialog-feld.fehlt input, .mf-dialog-feld.fehlt select, .mf-dialog-feld.fehlt textarea { border-color: var(--rot-tief); } .mf-dialog-feld.fehlt > span:first-child { color: var(--rot-tief); } /* Das leere Pflichtfeld sagt es in einem SATZ, nicht nur in Rot (dialog.js). */ .mf-dialog-fehler { display: block; margin-top: 3px; font-size: 12px; font-weight: 400; color: var(--rot-tief); } /* Ein Betrag, der keiner ist (03.10.2026, betragMarkieren in ansicht.js): dasselbe Rot wie das leere Pflichtfeld - und auch hier mit Satz. Die Regel haengt an aria-invalid und nicht an einer Klasse, damit Ansage und Anblick nicht auseinanderlaufen koennen. */ input[aria-invalid="true"] { border-color: var(--rot-tief); } /* Marken statt Auswahllisten: "morgen" ist ein Klick, im Auswahlfeld waeren es drei. Sie sind Schalter, keine Knoepfe - deshalb flach und ohne Fuellung, bis einer an ist. */ .chip-gruppe { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; } .chip { padding: 3px 9px; border: 1px solid var(--border-feld); border-radius: 999px; background: var(--flaeche); font: inherit; font-size: 12px; color: var(--muted); cursor: pointer; /* Nicht schrumpfen und nicht umbrechen: In der seitlich wandernden Zeile am Handy wuerde aus "ohne Termin" sonst ein zweizeiliges Etwas. */ flex: none; white-space: nowrap; } .chip:hover { border-color: light-dark(#8c959f, #6f7d73); color: var(--text); } .chip.ist-an { background: var(--gruen-hauch); border-color: var(--gruen-tief); color: var(--gruen-tief); font-weight: 600; } /* Die Zahl in der Marke sagt, was der Filter einbraechte - eine Null waere eine Auskunft, die niemand braucht, und stuende in jeder Marke. */ .chip .zahl { margin-left: 5px; font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.75; } .chip .zahl:empty { display: none; } /* --- Die Einteilung nach dem Anlegen ------------------------------------- Eine Leiste, die von unten hereinfaehrt und sich ueber den Einwurf legt (Wunsch vom 12.08.2026). Sie steht genau dort, wo eben noch getippt wurde - der Blick muss nicht wandern, und der Daumen liegt schon da. Absolut im Inhalt und nicht fest im Fenster: Der Inhalt hat seine Lesebreite, und eine Leiste ueber die ganze Fensterbreite haenge neben der Spalte in der Luft. Die beiden automatischen Seitenraender halten sie in derselben Flucht wie Kopfzeile, Liste und Einwurf. */ #einteilung { /* Genau ueber dem Einwurf und genauso breit (Wunsch vom 12.08.2026): Die Einrueckung entspricht der Polsterung von #inhalt - ohne sie stand der Layer links und rechts um zwanzig Pixel ueber, und seine Felder sahen groesser aus als dieselben Felder darunter. Er ERSETZT die Anlage, solange er steht; dann muss er auch ihre Masse haben. */ position: absolute; left: 20px; right: 20px; bottom: 12px; z-index: 30; /* width: auto gegen die Grundregel #inhalt > * (dort steht 100%): Mit gesetzter Breite UND beiden Kanten waere der Kasten ueberbestimmt, die automatischen Raender fielen auf null, und er klebte links statt in der Lesebreite mittig zu stehen. */ width: auto; display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border: 1px solid var(--gruen-tief); border-radius: 8px; background: var(--flaeche); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18); animation: einteilung-herein 0.14s ease-out; } /* Herein von unten - dieselbe Bewegung, die sie beschreibt: Sie kommt von dort, wo der Einwurf steht, und legt sich darueber. */ @keyframes einteilung-herein { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Wer Bewegung abbestellt hat, bekommt sie ohne - die Leiste steht dann einfach da. Das Betriebssystem stellt diesen Wunsch, und er gilt fuer Menschen, denen Bewegung auf dem Schirm Uebelkeit macht. */ @media (prefers-reduced-motion: reduce) { #einteilung { animation: none; } } .einteilung-kopf, .einteilung-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Den Platz bekommt der NAME, nicht die Luft daneben (berichtigt am 13.08.2026: „bei Neue Aufgabe wird darum abgeschnitten, riesiger Platz bis zum Pfeil"). Der Name stand auf flex: 0 1 auto - er durfte also schrumpfen, aber nicht wachsen -, und der Abstandhalter daneben nahm mit flex: 1 1 auto alles, was uebrig war. Ergebnis: Der getippte Text wurde nach ein paar Woertern ausgepunktet, waehrend rechts daneben eine Handbreit Leere bis zum Abbrechen-Kreuz stand. Ein Abstandhalter ist dazu da, einen Griff an den Rand zu schieben - er darf sich nicht am Platz bedienen, den der Inhalt braucht. */ .einteilung-kopf .luft { flex: 0 1 auto; min-width: 8px; } /* Der Haken ganz rechts in der Einteilungszeile, ohne eine eigene Zeile dafür (Wunsch vom 12.08.2026). order haelt ihn am Ende, obwohl er im Dokument vorn steht - dort muss er stehen, weil zeichneSchnell die Marken und das Datumsfeld hierher ANHAENGT. */ #btn-einteilung-anlegen { order: 9; margin-left: auto; } /* Platz zwischen der Beschriftung und den Marken (Wunsch vom 12.08.2026): „Priorität:" und „Angehen:" sind die FRAGE, die Marken dahinter die Antworten - eng aneinander las sich beides als eine Reihe. Eine feste Breite fuer die Beschriftung stellt beide Zeilen ausserdem in eine Flucht: Die Marken beginnen untereinander, statt um die Laenge des Wortes versetzt. */ .einteilung-zeile > .marken-be { flex: 0 0 68px; margin-right: 4px; } /* Der Name der angelegten Aufgabe: Er sagt, WOVON hier die Rede ist - beim dritten Einwurf in Folge ist das keine Nebensache. Er gibt nach und kuerzt sich, denn er ist die Auskunft und nicht die Bedienung. */ .einteilung-name { min-width: 0; flex: 1 1 auto; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Eckige Marken wie im Einwurf: Was hier gedrueckt wird, AENDERT etwas - dieselbe Unterscheidung wie dort (eckig legt an und stellt, rund filtert). */ #einteilung .chip { border-radius: 6px; } #einteilung .chip:disabled { opacity: 0.5; cursor: default; } #einteilung input[type="date"], #einteilung input[type="time"] { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border-feld); border-radius: 6px; background: var(--flaeche); } /* --- Der Filter hinter dem Trichter -------------------------------------- Die Schnellfilter standen als Streifen ueber den Eintraegen und stehen seit dem 12.08.2026 in einem Menue neben dem ⋯ (Wunsch vom selben Tag): Sie sollen nicht dauerhaft dastehen. Der Kasten ist derselbe wie beim ⋯ und beim Teilen - nur sein Inhalt sind Marken und keine Zeilen, denn Filtern ist ein Auswaehlen aus einer Handvoll, kein Durchgehen einer Liste. */ #filter-griffe { display: none; position: absolute; top: calc(100% + 4px); right: 0; z-index: 25; flex-direction: column; align-items: stretch; gap: 4px; width: max-content; min-width: 210px; max-width: min(320px, 90vw); padding: 6px 8px 8px; max-height: calc(100vh - 160px); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 8px; background: var(--flaeche); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22); } #kopfzeile.filter-auf #filter-griffe { display: flex; } #filter-griffe .chip-gruppe { gap: 4px; } /* Der Zeitplan im Trichter (12.08.2026): Marken wie die Zustandsfilter darunter, nur ohne Zeichen - „Heute" braucht keines, und ein erfundenes Sinnbild fuer „Uebermorgen" waere ein Raetsel. Sie duerfen umbrechen: In einer Geburtstagsliste sind es zwoelf Monate. „Alle Zeiten" ist keine Zeitangabe, sondern ihr Fehlen - derselbe leise Ton wie in der Spalte, und ein Strich dahinter setzt es ab. */ #zeitplan .chip-alle { color: var(--muted); margin-right: 6px; } #zeitplan .chip-alle.ist-an { color: var(--gruen-tief); } #zeitplan .chip-alle::after { content: ""; display: inline-block; width: 1px; height: 12px; margin-left: 8px; margin-right: -4px; vertical-align: -2px; background: var(--border); } /* Die Zahl am Trichter sagt, wieviele Filter GESETZT sind - ein zugeklapptes Menue darf nicht verschweigen, dass es etwas wegnimmt. Ohne gesetzten Filter steht dort nichts - und zwar mit display: none, nicht nur leer: Ein leerer Span bleibt sonst ein Flex-Kind, und der gap des Knopfes traegt eine Geisterluecke ein - der Knopf wechselte seine Breite, je nachdem, ob ein Filter stand (behoben am 12.08.2026). Klein und mit Tabellenziffern wie die Zahlen in den Marken, damit 1 und 4 gleich breit sind. */ #btn-filter .zahl { font-size: 10px; font-variant-numeric: tabular-nums; opacity: 0.75; } #btn-filter .zahl:empty { display: none; } #btn-filter.ist-an { border-color: var(--gruen-tief); color: var(--gruen-tief); } /* Der Trichter ist so hoch wie das ⋯ daneben (berichtigt am 13.08.2026: „Filter immer noch groesser als andere Buttons"). Die Ursache ist dieselbe wie beim Profil-Griff im Kopf und beim Rueckweg im Eintrag - dreimal derselbe Fehler an drei Stellen: #btn-listenmehr traegt `btn-icon` und bekommt damit sein Quadrat (26 px, am Finger 36), #btn-filter traegt `btn btn-tight kopf-griff` und behielt die Polsterung eines beschrifteten Knopfes. Zwei Griffe nebeneinander in einer Reihe, und der eine ist hoeher als der andere. Die HOEHE wird angeglichen und nicht die Breite: Der Trichter traegt ausser dem Zeichen noch seine Zahl („3 Filter gesetzt"), und die braucht Platz. Ein Quadrat schnitte sie ab. */ #btn-filter { height: 26px; padding: 0 7px; } /* Die Marken tragen Zeichen UND Wort: Im Menue ist Platz, und ein Zeichen allein waere ein Raetsel. Das Zeichen traegt die Aussage im Augenwinkel, das Wort macht sie eindeutig. */ .chip-zeichen { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; } .filter-zeichen { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } /* Das Dreieck fuer "in Bearbeitung" ist eine Flaeche und keine Linie - als Umriss saehe es aus wie ein leeres Warndreieck. */ .filter-zeichen.ist-gefuellt { fill: currentColor; stroke: none; } /* Was nichts einbraechte, verblasst - statt zu verschwinden (siehe zeichneSchnellfilter). Eine Reihe, deren Marken kommen und gehen, greift man daneben; eine, in der eine blass ist, liest man im Vorbeigehen. */ #statusfilter .chip.ist-leer { opacity: 0.45; } #filter-griffe .chip[data-schnell="ueberfaellig"].ist-an { background: var(--rot-hauch); border-color: var(--rot-tief); color: var(--rot-tief); } #filter-griffe .chip[data-schnell="wichtig"].ist-an { background: var(--gelb-hauch); border-color: var(--gelb-tief); color: var(--gelb-tief); } #filter-griffe .chip[data-schnell="laeuft"].ist-an { background: var(--blau-hauch); border-color: var(--blau-tief); color: var(--blau-tief); } #filter-griffe .chip[data-schnell="zugewiesen"].ist-an, #filter-griffe .chip[data-schnell="wartet"].ist-an { background: var(--gelb-hauch); border-color: var(--gelb-tief); color: var(--gelb-tief); } .chip.chip-p1.ist-an { background: var(--gelb-hauch); border-color: var(--gelb-tief); color: var(--gelb-tief); } .chip.chip-p2.ist-an { background: var(--rot-hauch); border-color: var(--rot-tief); color: var(--rot-tief); } /* Die Seitenwahl traegt ihre Bedeutung als Farbe: Dafuer bleibt das Gruen des eingeschalteten Chips, Dagegen wird rot, Neutral grau - dieselben Toene wie die beiden Spalten und das Fazit, zu denen die Wahl fuehrt. */ #neu-seite .chip[data-seite="contra"].ist-an { background: var(--rot-hauch); border-color: var(--rot-tief); color: var(--rot-tief); } #neu-seite .chip[data-seite="neutral"].ist-an { background: var(--grau-hauch); border-color: var(--muted); color: var(--muted); } /* Alle Schalter (Kaestchen) einheitlich: dieselbe Groesse, dieselbe Markenfarbe, mittig zur Zeile - ob "Fuer wen", ein Unterpunkt-Haken oder "Takt ab Erledigung". Vorher hatte jede Stelle ihr eigenes Mass. */ #eintragsansicht input[type="checkbox"], .panel input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: var(--gruen-tief); vertical-align: -2px; cursor: pointer; } .hint { display: block; margin: 6px 0 0; font-size: 11px; line-height: 1.45; color: var(--muted); } /* --- Die Auswahlleiste --------------------------------------------------- Sie steht dort, wo sonst die Schnellfilter stehen: unmittelbar ueber den Eintraegen, auf die sie sich bezieht. Im Ton der Auswahl (gruen) und nicht in dem eines Filters - sie veraendert nicht die Sicht, sondern was der naechste Klick anfasst. */ #auswahlleiste { margin-bottom: 10px; padding: 7px 10px; border: 1px solid var(--gruen-tief); border-radius: 8px; background: light-dark(#eef5ef, #1a2c1f); } /* Zwei Zeilen (Wunsch vom 10.08.2026): oben die Auswahl, darunter die Aktionen darauf - in einer Zeile las sich beides als ein Brei. */ .sammel-zeile { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sammel-zeile + .sammel-zeile { margin-top: 6px; } #auswahlleiste .luft { flex: 1 1 auto; } #auswahl-zahl { font-weight: 600; color: var(--gruen-tief); } #auswahlleiste .chip { background: var(--flaeche); } /* Das Datum neben den Einteilungs-Marken (13.08.2026). Es steht in derselben Reihe und soll so hoch sein wie sie - sonst schoebe ein Feld in Feldhoehe die ganze Zeile auseinander. Nicht schrumpfen: Ein Datumsfeld, das Platz abgibt, verliert seinen Inhalt (dieselbe Lehre wie beim Einheitenfeld). */ #sammel-datum { flex: none; padding: 2px 6px; font-size: 12px; border: 1px solid var(--border-feld); border-radius: 999px; background: var(--flaeche); color: var(--text); } /* Ein Takt im Panel: eine Beschriftung, ein schmales Feld, eine Einheit - "alle [2] Wochen". Zusammengehalten, damit die drei Teile nicht an drei Stellen der Zeile umbrechen. */ .panel .takt { display: inline-flex; align-items: center; gap: 5px; flex: none; } .panel .takt input[type="number"] { width: 4.5em; } .panel .takt input[type="time"], .panel .takt input[type="date"], .panel .takt input[type="datetime-local"] { width: auto; } .panel .plan-zeile input[type="time"] { width: auto; flex: none; } /* Die Wochentagsmarken sind schmal und gleich breit - sieben Marken in einer Reihe liest man als Woche, wenn sie eine Flucht bilden. */ .chip.chip-tag { min-width: 2.6em; justify-content: center; padding: 3px 6px; text-align: center; } /* --- Die Ablegeleiste ---------------------------------------------------- Sie erscheint nur waehrend eines Zuges, und zwar fest ueber der Fusszeile: immer an derselben Stelle, immer gleich gross, unabhaengig davon, was in der Liste steht. Damit laesst sich auch auf einen Zeitraum einteilen, in dem noch nichts liegt - ohne dass dafuer die halbe Seite verrutscht. */ #ablegeleiste { /* bottom lag bei 46px, um ueber der Fusszeile zu schweben - die ist seit dem 31.08.2026 ein Ueber-Kasten im Zahnrad, die Leiste rueckt nach. */ position: fixed; z-index: 40; left: 50%; bottom: 14px; transform: translateX(-50%); display: none; align-items: center; gap: 6px; flex-wrap: wrap; max-width: min(96vw, 900px); padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--flaeche); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22); } body.zieht #ablegeleiste { display: flex; } /* In der Jahresansicht nicht: Ein Geburtstag ist ein Datum und keine Absicht, es gibt dort nichts einzuteilen (siehe zielplan in zeit.js). Eine Leiste, die erscheint und deren Knoepfe nichts tun, ist schlimmer als keine. */ /* Ohne Ziele keine Leiste - im Jahreskalender (ein Geburtstag hat sein Datum) und in den handsortierten Listen. LETZTERE aber nur, solange sie keine Kategorien fuehren (10.08.2026): Einkauf, Wuensche und Sammlung legen nach Kategorie ab, und dort ist die Leiste am Telefon das einzige erreichbare Ziel. Ein Zug auf eine ZEILE ordnet dort weiterhin um - die beiden stehen nebeneinander, nicht gegeneinander. */ /* Berichtigt am 12.08.2026: In den handsortierten Listen bleibt die Leiste STEHEN. Sie traegt dort seit dem 10.08.2026 die beiden Raender („Ganz nach oben", „Ganz nach unten") - und die waren damit in genau den Listen unsichtbar, fuer die es sie gibt. Wer einen Fund an den Anfang seiner Sammlung ziehen wollte, fand kein Ziel: Ueber der ersten Zeile liegt keines, und die beiden Knoepfe standen in einer ausgeblendeten Leiste. Weg bleibt sie nur in der Jahresansicht: Ein Geburtstag wird nicht eingeteilt und nicht umsortiert, dort gaebe es nichts abzulegen. */ body.jahresansicht #ablegeleiste { display: none; } /* Eine Leiste, zwei Besetzungen: Zeitraeume ueberall, die beiden Seiten in einer Pro-und-Contra-Liste. Zwei Leisten waeren zweimal dieselbe Leiste - mit zwei Stellen, an denen man beim naechsten Umbau etwas vergisst. */ .ablege-seite { display: none; } body.seitenansicht .ablege-seite { display: inline-block; } body.seitenansicht .ablege-zeit { display: none; } /* Wo nach Kategorien abgelegt wird (Vertraege, 10.08.2026), treten sie an die Stelle der Zeitraeume: Ein Vertrag wird nicht eingeteilt. Ist keine Kategorie vergeben, bleibt die Leiste ganz weg - eine leere Leiste ist ein Angebot ohne Inhalt (siehe body.ohne-ablege). */ /* In EINER Zeile, die seitlich rollt - nicht umbrechend: Zwanzig Kategorien machten die Leiste sonst vier Zeilen hoch, und die steht am Telefon fest ueber der Fusszeile, waehrend man mit dem Finger ein Ziel sucht. */ .ablege-kategorien { display: none; gap: 6px; } body.kategorieansicht .ablege-kategorien { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; } body.kategorieansicht .ablege-zeit { display: none; } /* In den handsortierten Listen gibt es keine Zeitraeume - dort ordnet die Handreihenfolge, nicht der Tag. Die Zeitziele fallen deshalb weg; was bleibt, sind die beiden Raender und (wo die Liste welche fuehrt) die Kategorien. Ein „Heute" in einer Sammlung setzte ein Datum, das die Zeile nirgends zeigt. */ body.listenansicht .ablege-zeit { display: none; } body.ohne-ablege #ablegeleiste { display: none; } .ablege-be { font-size: 11px; color: var(--muted); flex: none; } .ablege { padding: 7px 14px; border: 1px dashed var(--border); border-radius: 8px; background: var(--flaeche-tief); font: inherit; font-size: 13px; color: var(--text); cursor: copy; white-space: nowrap; } /* Unter dem Zeiger derselbe gruene Ton wie ueberall, wo etwas landet. */ .ablege.ablegen { background: var(--gruen-feld); border-color: var(--gruen-tief); border-style: solid; color: var(--gruen-tief); font-weight: 600; } /* Die Warnzeile ueber der Arbeitsflaeche. Sie geht nicht von selbst wieder weg - anders als die Meldezeile unten, die nach ein paar Sekunden verschwindet. Was hier steht, muss man beheben, nicht zur Kenntnis nehmen. */ #warnung { margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--rot-tief); border-left-width: 4px; border-radius: 6px; background: var(--rot-hauch); color: light-dark(#86121b, #ffb3ab); font-size: 13px; line-height: 1.45; } #warnung strong { color: var(--rot-tief); } /* Der Ueber-Kasten - Ersatz der Fusszeile (Familienregel 31.08.2026): Marke, Fassung und Urheber hinter „Ueber Tagwerk …" im Zahnrad-Menue. Die Marken-Teile sind hier neu gesetzt, weil ihre Regeln in grund.css an