/* Kalenderelemente - eine Quelle für alle Ansichten ================================================== Dienstplan, Dienstwünsche und alles, was noch kommt (Urlaubsplan, Portal, Arbeitszeiterfassung), zeichnen dieselben Dinge: Wochenenden, Feiertage, den heutigen Tag, Dienste, Urlaub. Die Farben dafür standen bis 05.09.2026 in jeder Seite noch einmal - hier stehen sie einmal (Michaels Vorgabe: ein Dienst soll überall gleich aussehen). Reihenfolge in dieser Datei ist Absicht und darf nicht vertauscht werden: zuerst die Art des Tages (Wochenende, Feiertag), danach der Eintrag darauf (Dienst, Urlaub, Wunsch). Der Eintrag gewinnt, weil er später steht - ohne ein einziges !important. Genau daran hakte es vorher: Die Wochenendfläche war mit !important gesetzt und übermalte den Dienst an Samstag und Sonntag, also dort, wo der Dienst am wichtigsten ist. */ :root { /* Tagesarten */ /* Die Grautöne sind bewusst kräftig (Michael, 05.09.2026: "zu blass, man kann Tage und Wochenende nicht gut abgrenzen"). In einer Matrix aus hunderten kleiner Felder muss der Unterschied auf einen Blick da sein - was einzeln betrachtet schon deutlich wirkt, verschwindet in der Fläche. */ /* Wochenende und Feiertag tragen dieselbe Farbe (Michael, 05.09.2026): In beiden Fällen ruht der Regelbetrieb, und welcher Feiertag es ist, steht im Tooltip - eine zweite Abstufung machte das Bild nur unruhiger. */ --kal-we: #b4c6d6; /* Wochenende und Feiertag: kein Regelbetrieb */ --kal-we-schrift: #2c3d4d; --kal-we-linie: #61798f; /* fasst das Wochenende als Block ein */ --kal-heute: #f59e0b; /* Schulferien: dasselbe Blau wie das Wochenende, nur viel blasser (Michael, 05.09.2026). Damit stehen die drei arbeitsfreien Zustände in einer Familie - Ferien als schwacher Hauch, Wochenende und Feiertag deutlich -, und der gelbe Urlaub bleibt das Einzige in seiner Farbe. */ /* Die Ferien sind seit dem 09.09.2026 keine Flaeche mehr, sondern ein Streifen am oberen Zellrand - und dafuer eine Farbe, die es sonst nirgends gibt (Michael: "optisch leuchtend und nicht verwechselbar"). Der Weg dorthin: erst blasses Blau (ging neben den Dienstfarben unter), dann das Urlaubsgelb (sah im Urlaubsplan aus wie Urlaub). Das Problem ist nicht der Ton, sondern der Kanal: Die Flaeche ist in beiden Plaenen laengst vergeben - Dienst, Wunsch, Urlaub, Krank, Fortbildung, Regeltag, Wochenende. Ein Streifen nimmt keiner Farbe ihren Platz weg und liegt trotzdem sichtbar oben auf. Genommen wird dafuer das Orange des heutigen Tages (Michael, 09.09.2026: "statt des Pink"). Doppelt belegt ist es damit nicht: Heute ist ein Rahmen um EIN Feld, die Ferien sind ein Streifen ueber vielen - dieselbe Farbe, zwei verschiedene Formen, und beide zeigen dasselbe an: hier ist etwas Besonderes. */ --kal-ferien: var(--kal-heute); /* Der regulaere Arbeitstag nach dem Arbeitsmodell (Michael, 07.09.2026): blasses Gruen, in der Familie des Logo-Gruens. Sehr blass mit Absicht - es liegt unter jedem Eintrag und darf ihn nicht stoeren; auf den meisten Feldern der meisten Zeilen steht es. */ --kal-regeltag: #EAF5EE; /* Die Kopfzeile der Kalender ist dunkel wie die der Listen (Michael, 07.09.2026) - Dienstplan, Dienstwuensche und Urlaubsplan schliessen damit oben genauso ab wie jede Tabelle. Das Wochenende bleibt auch dort zu erkennen: dieselbe Farbe eine Stufe heller, damit der senkrechte Streifen bis in den Kopf durchlaeuft. */ --kal-kopf: #1c4e75; --kal-kopf-we: #2f6d9c; --kal-kopf-schrift: var(--weiss); --kal-linie: var(--grau-2); /* Gitter zwischen den einzelnen Tagen */ --kal-linie-stark: #b9cbdb; /* → #b9cbdb → --grau-3 oder --grau-4 */ /* Trennung von Blöcken */ --kal-rand: var(--grau-3); /* Dienste und Anwesenheit - die Farben der Bildmarke: Blau der Bereitschaftsdienst, Grün der Rufdienst. */ --kal-dienst: #0F70B7; --kal-dienst-hell: #7FB3DC; /* die freie Hälfte beim halben Dienst */ --kal-rufdienst: #12A19A; --kal-anwesend: #e8f5e9; --kal-buero: #eceff1; --kal-buero-schrift:#607d8b; /* Etwas blasser als zuvor (Michael, 05.09.2026): Im Urlaubsplan liegen die Belegungsbalken im Feld, und der gelbe unter ihnen verschwand auf einem kräftig gelben Grund. Blasser bleibt der Urlaub gut erkennbar, und die Balken heben sich wieder ab. Gilt überall gleich - auch im Dienstplan. */ --kal-urlaub: #FFEDB8; --kal-urlaub-schrift:#6b4e00; /* Der Buchstabe ist ueberall derselbe (Michael, 07.09.2026): auf der gelben Flaeche des zaehlenden Urlaubstages und ebenso auf dem Wochenende oder einem nach dem Arbeitsmodell freien Tag, wo keine Flaeche darunterliegt. Zwei verschiedene Gelbtoene fuer dasselbe U liessen einen Unterschied vermuten, den es nicht gibt - der Unterschied ist die Flaeche, nicht die Schrift. */ --kal-urlaub-frei: var(--kal-urlaub-schrift); --kal-krank: #E57373; --kal-fortbildung: #CE93D8; /* Der Buchstabe war bis zum 09.09.2026 #4a1d52 und las sich auf einem freien Tag, wo keine Flaeche darunterliegt, schlicht als Schwarz (Michael: "sieht fast aus wie schwarz"). Jetzt ein Ton, der auf der violetten Flaeche noch dunkel genug ist und auf Weiss als Violett erkennbar bleibt - dasselbe Verhaeltnis, das das Braun-Gelb des Urlaubs zu seinem Gelb hat. */ --kal-fortbildung-schrift: #7B1FA2; /* Wie beim Urlaub: derselbe Buchstabe auf der Flaeche und ohne sie. */ --kal-fortbildung-frei: var(--kal-fortbildung-schrift); /* Arbeitsfrei aus dem Arbeitszeitkonto (Michael, 11.09.2026). Ein eigener Ton war noetig, und viel war nicht mehr frei: Gelb ist der Urlaub, Rot krank, Violett die Fortbildung, Blau der Dienst, Tuerkis der Rufdienst, Orange gehoert heute und den Ferien, das blasse Gruen dem Regeltag. Ein gedecktes Salbeigruen steht daneben fuer sich - satt genug, um auf dem blassen Gruen des Regeltages als Flaeche zu wirken. Verstellen laesst es sich wie alle anderen unter Einstellungen -> Farben. */ --kal-arbeitsfrei: #CFE0C3; --kal-arbeitsfrei-schrift: #3D5A2E; --kal-arbeitsfrei-frei: var(--kal-arbeitsfrei-schrift); /* Dienstwünsche - bewusst NICHT die Dienstfarben: Ein Wunsch ist keine Einteilung. Rot und Grün sagen, wohin er geht; kräftig heißt verbindlich, schraffiert heißt "eher". Die Töne sind von Krank (helles Rot) und Rufdienst (Türkis) klar unterschieden, damit nichts doppelt belegt ist. */ /* Beide Farben aus dem Dienstplan (Michael, 06.09.2026): das Grün des Rufdienstes, das Rot der Krankmeldung. Am Grün lag es nie allein - es stand nur neben dem gedeckten Rot #D9706C nicht gut. Mit dem helleren #E57373 daneben stimmt das Paar. Beide Töne sind im Dienstplan schon belegt; das geht, weil Dienste und Wünsche nie in derselben Ansicht stehen. Die hellen Töne tragen die Schraffur der Stufen "eher". */ --kal-nein: #E57373; --kal-nein-hell: var(--rot-hell); --kal-nein-linie: #f6cccc; /* → #f6cccc → --rot-linie */ --kal-ja: #12A19A; --kal-ja-hell: #e6f5f4; --kal-ja-linie: #b8e3e0; /* Ampel für Bedarfsrechnungen (Dienstplan heute, Urlaubsplan später) */ --kal-gut: #d6f0d9; --kal-gut-schrift: #14532d; /* Zwei dunklere Grüntöne für die Personalplanung (Michael, 07.09.2026): Dort zählt nicht nur, OB es reicht, sondern um wie viel - einer über Bedarf ist etwas anderes als drei. Dieselbe Farbe, mehr Sättigung; die Schrift bleibt auf allen dreien dieselbe und liest sich auch auf dem dunkelsten. */ --kal-gut2: #b0e2bb; --kal-gut3: #86ce97; /* Die vierte Stufe für +4 und mehr (Michael, 23.09.2026). Auf dieser Fläche trüge das übliche Dunkelgrün nicht mehr genug - daher eine eigene, noch dunklere Schrift. */ --kal-gut4: #5cb872; --kal-gut4-schrift: #0b3a1e; --kal-knapp: #fff3cd; --kal-knapp-schrift:#7a5b00; --kal-schlecht: #f8cfd3; --kal-schlecht-schrift: #7a1720; } /* ── 0b. Die Woche als Tabelle ────────────────────────────── EINE Form für alles, was Tage in sieben Spalten zeigt: die beiden Wochen des Portals, der Dienstplan auf dem Telefon (Woche für Woche, mit Namensspalte) und die Jahresansichten auf dem Telefon (Monat für Monat, ohne Namensspalte). Michael, 12.09.2026: "Tabellen-Layout-Größe wirklich genau wie im Portal inkl. Abstandszeile unter Tagfeldern ... Abrundungen genau wie im Portal" - und für Dienstwünsche, Urlaubsplan, Abwesenheit "genauso wie im Portal (nur ohne Spalte Namen)". Bis dahin standen die Maße dreimal: im Portal (home.html), im Wochengitter und im Monatsgitter, jedes ein wenig anders. Aufbau: […[[]…
]7
Mo
]…
Dr. EliD
Die Zwischenzeile hat EINE Zelle je Spalte, nicht einen colspan: Sie trägt den Ferienstreifen (Michael, 12.09.2026: "am oberen Rand der Abstandszeile unter den Tagfeldern soll ÜBERALL im PM die Ferienlinie untergebracht werden"). Die Tageszellen darunter tragen die Klasse "ferien" deshalb NICHT (die Vorlagen streichen sie mit `replace('ferien', '')`), der Kopf behält sie und gibt ihr nur seine untere Kante. Umgeschaltet wird im Browser: static/fassung.js entscheidet, welche Fassung gilt; hier steht nur, was in der schmalen anders ist. Das Wochengitter (die Hülle "mit-liste" daneben) und das Monatsgitter ("mit-gitter") sind im Normalfall aus - ohne "display: none" zeigte eine Seite beide Fassungen (11.09.2026, zwölf Monatskästchen mitten auf dem großen Bildschirm). */ .wochengitter, .monatsgitter { display: none; } [data-fassung="schmal"] .plan-huelle.mit-liste, [data-fassung="schmal"] .plan-huelle.mit-gitter { display: none; } [data-fassung="schmal"] .wochengitter, [data-fassung="schmal"] .monatsgitter { display: block; } .wochengitter .wochenbox { margin-bottom: var(--abstand-7); } .wochengitter .wochenname { font-size: .72rem; /* → .72rem → --schrift-2 */ font-weight: 700; color: var(--grau-6); letter-spacing: .04em; margin: 0 0 .15rem var(--abstand-1); /* → .15rem → --abstand-1 oder --abstand-2 */ } .monatsgitter .monatsbox { margin-bottom: var(--abstand-9); } .monatsgitter .monatsname { font-size: .8rem; /* → .8rem → --schrift-3 */ font-weight: 700; color: var(--blau-dunkel); margin: 0 0 var(--abstand-2) var(--abstand-1); } .monatsgitter .monatsname.laufend { color: var(--gelb-dunkel); } /* Die MONATSTABELLE (table.woche.monat, _monatsgitter.html): ein Kopf Mo-So, 22 Punkte hoch (er nennt nur den Wochentag), danach je Woche eine durchsichtige Zwischenzeile und eine Inhaltszeile mit 22-Punkt-Feldern wie im Portal (Michael, 12.09.2026). Die Ecken: Der Kopf rundet oben links und oben rechts, sonst nichts; die Tagesfelder sind eckig bis auf die beiden unteren Ecken am Monatsende (die allgemeine Regel der letzten Zeile). Der Ferienstreifen liegt in JEDER Zwischenzeile am unteren Rand, drei Punkte hoch - am oberen Rand der Felder, die er meint. Jede Woche beginnt mit einer Kante in Randfarbe und endet mit einer. */ table.plan.woche.monat tr.kopf th { height: 22px; line-height: 22px; padding: 0; } /* Die Tagesfelder so hoch wie die Tag/Wochentag-Zeile des Portals - 32 Punkte (Michael, 12.09.2026; erst 22 wie die Zeilen, dann anderthalbfach, dann diese Kante): Hier wird mit dem Daumen getroffen, und im Urlaubsplan liegen die Striche unter dem Buchstaben. Dieselbe Zahl wie beim Kopf oben - wer sie dort ändert, ändert sie hier mit. */ table.plan.woche.monat tbody tr:not(.trennzeile) > td { height: 32px; line-height: 32px; } table.plan.woche.monat tr.kopf > th:first-child { border-top-left-radius: var(--radius-2); } table.plan.woche.monat tr.kopf > th:last-child { border-top-right-radius: var(--radius-2); } table.plan.woche.monat tbody tr.trennzeile td.ferien { box-shadow: inset 0 -3px 0 var(--kal-ferien); } table.plan.woche.monat tbody tr.trennzeile + tr > * { border-top: 1px solid var(--kal-rand); } table.plan.woche.monat tbody tr.trennzeile + tr > *:first-child, table.plan.woche.monat tbody tr.trennzeile + tr > *:last-child { border-top-left-radius: 0; border-top-right-radius: 0; } table.plan.woche.monat tbody tr:has(+ tr.trennzeile) > * { border-bottom-color: var(--kal-rand); } /* Die Maße - die des Portals (Michael, 07.09.2026 dort, 12.09.2026 für alle): 22 Punkte je Zeile, 32 für den Kopf, 8 für die Zwischenzeile. */ table.plan.woche { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .78rem; /* → .78rem → --schrift-3 oder --schrift-2 */ margin: 0; } table.plan.woche th, table.plan.woche td { border-right: 1px solid var(--kal-linie); border-bottom: 1px solid var(--kal-linie); padding: 0 var(--abstand-1); height: 22px; text-align: center; white-space: nowrap; overflow: hidden; line-height: 22px; vertical-align: middle; } table.plan.woche tr.kopf th { height: 32px; line-height: 1.05; padding-top: 2px; } table.plan.woche tr.kopf .wochentag { font-size: .68rem; /* → .68rem → --schrift-1 */ opacity: .72; } /* Die Zwischenzeile ist ein Spalt und keine Zeile: acht Punkte, durchsichtig (Michael, 12.09.2026: "überall transparent" - sie liegt zwischen zwei Blöcken, dort gehört die Farbe des Grundes hin, nicht Weiß), ohne Linien. Ohne diese Regel bekäme sie die 22 Punkte der gewöhnlichen Zeile. */ table.plan.woche tr.leerzeile td { height: 8px; background: transparent; border: 0; padding: 0; } /* Der Ferienstreifen liegt am oberen Rand der Zwischenzeile (Michael, 12.09.2026) - vier Punkte, in der Farbe der Ferien; der Kopf darüber gibt dem Streifen seine untere Kante, damit dazwischen keine helle Linie steht (der Grund, warum er am 09.09.2026 einmal in die Kopfzelle gewandert war). Kein Streifen oben in der Kopfzelle - der wäre die allgemeine Regel aus Abschnitt 1, hier ausdrücklich aufgehoben. */ table.plan.woche tr.leerzeile td.ferien { box-shadow: inset 0 4px 0 var(--kal-ferien); } table.plan.woche tr.kopf th.ferien { box-shadow: none; border-bottom-color: var(--kal-ferien); } /* Die Ecke oben links trägt keine Fläche und keine Linie (Michael, 07.09.2026 und 09.09.2026): Der Kopfblock ist dunkel gefüllt und zieht seine Kante samt Rundung selbst; ein Strich daneben endete sichtbar an der Rundung. */ table.plan.woche tr.kopf th.ecke { background: transparent; border: 0; } /* Ein Tag, der nicht zur Woche beziehungsweise zum Monat gehört, hat weder Kopf noch Fläche: Die Randwochen trugen sechs dunkle leere Kopfzellen neben einem einzigen Datum (12.09.2026). */ table.plan.woche tr.kopf th.leer { background: transparent; border-color: transparent; } table.plan.woche td.leer { background: #fafbfc; /* → #fafbfc → --flaeche-hell */ } /* Rechtsbündig wie im Dienstplan (Michael, 07.09.2026): So stehen die Namen unmittelbar an der Matrix. */ table.plan.woche th.name, table.plan.woche td.name { background: var(--weiss); text-align: right; width: 104px; padding-right: .45rem; /* → .45rem → --abstand-4 oder --abstand-5 */ border-right: 2px solid var(--kal-linie-stark); text-overflow: ellipsis; } table.plan.woche tr.leerzeile td.name { border-right: 0; background: transparent; } /* Die eigene Zeile: fett und im Orange der Markierung (Michael, 12.09.2026: "Eigenen Namen wie bisher fett, aber auch im Markierungsorange") - der dunkle Ton, den auch der laufende Monat trägt; das helle Orange der Heute-Spalte ist als Schrift auf Weiß nicht zu lesen. */ table.plan.woche tr.ich td.name { font-weight: 700; color: var(--gelb-dunkel); } /* Wer an diesem Tag (noch) nicht oder nicht mehr zum Team gehört, bekommt ein leeres Feld ohne jede Fläche (Michael, 07.09.2026). */ table.plan.woche td.ausserhalb { background: #fafbfc; /* → #fafbfc → --flaeche-hell */ } /* Die Belegungsstriche des Urlaubsplans und der Personalstand der Abwesenheit liegen wie in der Jahresansicht unten im Feld, mit Luft zwischen den Strichen (Michael, 12.09.2026: "die Linien voneinander trennen, auch die grünen") - seit die Felder 32 Punkte hoch sind, ist dafür Platz; in der 22-Punkt-Fassung lagen sie ohne Luft und liefen durch das U. Der Buchstabe steht darüber, eine Spur über der Mitte, damit er den Strichen nicht auf die Pelle rückt. */ table.plan.woche td.zelle .nr { display: block; line-height: 18px; margin-top: -6px; } /* Die AUSSENKANTE - alle vier Seiten im Ton des Kachelrahmens (Michael, 07.09.2026: "unter Teimouri fehlt die Linie" - sie war da, nur nicht zu sehen). Oben zieht die Matrix ihre Kante überhaupt erst hier: Der Kopfblock steht durch die Zwischenzeile abgesetzt darüber. Unten und rechts steht nur die FARBE; dass dort eine Linie ist, sagt die Grundregel des Rasters. Die Regeln stehen VOR denen des heutigen Tages (Abschnitt 4): gleich genau, und die orange Spalte soll gewinnen. */ table.plan.woche tbody tr.trennzeile:first-child + tr > * { border-top: 1px solid var(--kal-rand); } table.plan.woche tbody tr:last-child > * { border-bottom-color: var(--kal-rand); } table.plan.woche tbody tr:not(.trennzeile) > *:first-child { border-left-color: var(--kal-rand); } table.plan.woche tr > *:last-child { border-right-color: var(--kal-rand); } /* Die Ecken - das REFERENZDESIGN (Michael, 12.09.2026, am iPhone abgenommen): Der Kopfblock rundet nur oben links (die allgemeine Regel "th.ecke + th" aus dem Rasterabschnitt; ohne Namensspalte ist die erste Tageszelle die Ecke), unten links und rechts sowie oben rechts bleibt er eckig - drei Rundungen, die am 12.09.2026 kurz dort standen, hat Michael wieder gestrichen. Der Rumpf rundet seine vier Ecken. Wer an einer Wochentabelle etwas ändert, vergleicht mit dem Portal: Es IST die Vorlage. */ table.plan.woche tr.kopf > th:first-child:not(.ecke) { border-top-left-radius: var(--radius-2); } table.plan.woche tbody tr.trennzeile:first-child + tr > *:first-child { border-top-left-radius: var(--radius-2); } /* Oben rechts NICHT (Michael, 14.09.2026): Der Kopf darüber rundet seine beiden oberen Ecken schon; eine zweite Rundung direkt darunter, an der rechten Zelle der Arbeitsplätze-Zeile, sah aus wie ein Absatz im Absatz. Oben links bleibt sie - über der Namensspalte steht kein Kopf. */ table.plan.woche tbody tr.trennzeile:first-child + tr > *:last-child { border-top-right-radius: 0; } table.plan.woche tbody tr:last-child > *:first-child { border-bottom-left-radius: var(--radius-2); } table.plan.woche tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--radius-2); } /* Die MATRIX (der Dienstplan: table.plan ohne .woche). Kopf und Rumpf sind durch die Zwischenzeile zwei Blöcke, und jeder rundet nur die Ecken, die wirklich außen liegen (Michael, 14.09.2026: "die linke und rechte Ecke am Rand jeweils oben abgerundet, unten in der Titelzeile nicht" - am 09.09. hatte jeder Block alle vier Ecken, und unter der Rundung des Kopfes lag gleich noch eine). Der Kopf: oben links am Übertragsfeld, oben rechts am letzten Feld, unten nichts. Der Rumpf: oben nur die Namenszelle, über der kein Kopf steht - das Übertragsfeld und das letzte Feld liegen direkt unter der Rundung des Kopfes und bleiben eckig, wie im Portal -, unten links und rechts nach der allgemeinen Regel des Rasters. Die leere Ecke davor trägt keine Linie: Seit der Kopf an "◂U" gerundet beginnt, endete ihre 2px-Kante sichtbar an der Rundung ("sieht doof aus"). Bis zum 14.09.2026 standen diese Regeln in dienstplan.html. */ /* Die Grundform: aus dienstplan.html hierher gezogen (14.09.2026), damit der Stilkatalog die Matrix zeigen kann - eine Form, die nur auf ihrer Seite existiert, lässt sich nirgends abnehmen. Wortgleich übernommen; die Maße, die nur der Dienstplan braucht (Namensspalte 118 px, Kontospalten), stehen weiter dort. table.plan.woche unten überschreibt, was die Wochen anders machen. */ table.plan { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: .78rem; /* → .78rem → --schrift-3 oder --schrift-2 */ margin: 0; } table.plan th, table.plan td { border-right: 1px solid var(--kal-linie); border-bottom: 1px solid var(--kal-linie); padding: 0 var(--abstand-1); height: 22px; text-align: center; white-space: nowrap; overflow: hidden; line-height: 22px; vertical-align: middle; } table.plan:not(.woche) tr.kopf th.ecke { border-right: 0; } table.plan:not(.woche) tr.kopf th.ecke + th { border-top-left-radius: var(--radius-2); } table.plan:not(.woche) tr.kopf > *:last-child { border-top-right-radius: var(--radius-2); } table.plan:not(.woche) tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--radius-2); } /* ── 0. Die Hülle um einen Kalender ─────────────────────────── */ /* Ein Kalender scrollt in seiner eigenen Fläche, nicht mit der Seite (Michael, 07.09.2026: "Bei Dienstplan das Scrollen oben wie im Urlaubsplan. Dieses Element als grundlegendes Designelement merken."). Der Gewinn ist die Kopfzeile: Sie klebt mit `position: sticky` am oberen Rand DIESER Fläche und bleibt damit stehen, während die Zeilen darunter laufen. Scrollte statt dessen die Seite, wäre die Kopfzeile nach zehn Zeilen weg - und in einer Matrix ohne Kopfzeile weiß niemand mehr, welche Spalte welcher Tag ist. Die Höhe: alles, was das Fenster hergibt, abzüglich dessen, was über und unter dem Kalender steht (Menüleiste, Seitenkopf, Legende). Der Abzug ist von Seite zu Seite verschieden und steht deshalb dort als --kal-huelle-abzug. ACHTUNG: Dieser Abschnitt fiel am 11.09.2026 beim Umbau der Telefon-Fassung (0b) mit heraus - ohne ihn scrollten die Jahresansichten mit der Seite, und im Dienstplan blieben die Zeilen flach über einer leeren Fläche (Michael: "Hier stimmen die Zeilenhöhen doch wieder nicht"). pruefung/schmal.py hält ihn seitdem fest. */ .plan-huelle { overflow: auto; border: 1px solid var(--kal-rand); border-radius: .375rem; /* → .375rem → --radius-2 */ background: var(--weiss); max-height: calc(100vh - var(--kal-huelle-abzug, 195px)); } /* "fuellend": Der Kalender nimmt die Höhe, statt sie nur zu begrenzen, und die Tabelle darin verteilt sie auf ihre Zeilen (Michael, 07.09.2026: "die Zeilenhoehe so erhoehen, dass die Seite gefuellt ist"). Die genaue Höhe misst static/hoehe.js; der Wert hier ist der Anfang, bevor gemessen ist. Fuellend ist nur der Dienstplan. Die Jahresansichten begrenzen ihre Höhe (max-height oben), statt sie zu nehmen - siehe den Hinweis unter 0c. */ .plan-huelle.fuellend { height: calc(100vh - var(--kal-huelle-abzug, 195px)); } .plan-huelle.fuellend > table { height: 100%; } /* Eine JAHRESANSICHT ohne schmale Fassung (die Personalplanung) wird auf dem Telefon nicht zusammengedrückt, sondern behält eine lesbare Breite und scrollt in ihrer Hülle - dieselbe Regel wie bei den Listen (12.09.2026). Ein Jahr mit siebenunddreißig Spalten auf 360 Punkten war keine Ansicht, sondern ein Muster. Nur table.jahr: Die Wochen des Portals (table.plan) passen mit sieben Spalten von selbst, und die Jahresansichten MIT schmaler Fassung sind dort ohnehin ausgeblendet. */ [data-fassung="schmal"] .plan-huelle > table.jahr { min-width: 56rem; } /* ── 0c. Das Tagesraster der Jahresansichten ──────────────── Dienstwünsche, Urlaubsplan und Abwesenheit sind dasselbe Raster: zwölf Monatszeilen, jede um den Wochentag ihres Ersten eingerückt, in jedem Feld ein Tag. Ihre Maße standen bis zum 11.09.2026 in jedem der drei Stilblöcke - und liefen auseinander (Michael: "Tageszellen in Dienstwünsche, Urlaubsplan genauso hoch wie in Abwesenheit"). Jetzt stehen sie hier, einmal. Die Klasse "tagesraster" trennt sie von der Personalplanung: Die benutzt dieselbe Jahresform, aber ihre Felder tragen Zahlen statt Tagen und ihre Zeilen sind flacher. Die Höhe IST die gemessene Spaltenbreite (static/quadrat.js): Die Felder sind quadratisch, und `box-sizing: border-box` (aus Bootstrap) zählt Polster und Ränder schon mit - nichts abziehen. Das Polster setzt die Zahl eine Spur ÜBER die Mitte: unten zwei Punkte mehr als oben. Erst stand sie mittig, dann eine Spur tiefer ("minimal runter"), dann wieder herauf (Michael, 11.09.2026: "Die Tages-Ziffern und -Buchstaben in Urlaubsplan und Abwesenheit wieder minimal nach oben"). Der Grund liegt am unteren Rand: Dort liegen die Belegungsstriche beziehungsweise der Personalstandsbalken, und je näher die Zahl an ihnen klebt, desto unruhiger wird das Feld. In den Dienstwünschen liegt dort nichts - dieselben zwei Punkte kosten sie nichts, und eine Zahl steht im ganzen Programm an derselben Stelle. Der Block steht VOR den Regeln zur Art des Tages: Der Ferienstreifen nimmt der Zelle ihre rechte Randlinie und zeichnet sie als Schatten - stünde diese Regel danach, gäbe sie ihm den Rand zurück und zerschnitte den Streifen. */ /* Die Grundform der Jahresansicht: aus urlaubsplan.html hierher gezogen (14.09.2026), aus demselben Grund wie die der Matrix - der Stilkatalog zeigt sie. Wortgleich übernommen. */ table.jahr { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; font-size: .8rem; /* → .8rem → --schrift-3 */ user-select: none; } .kal.tagesraster th, .kal.tagesraster td { border-right: 1px solid var(--kal-linie); border-bottom: 1px solid var(--kal-linie); vertical-align: middle; padding: 4px 0 6px; /* → 6px → --abstand-4; 4px → --abstand-2 oder --abstand-3 */ height: var(--tagbreite, 45px); text-align: center; white-space: nowrap; overflow: hidden; line-height: 1.2; } /* Das Tagesraster füllt die Seite, streckt seine Zeilen dabei aber NICHT (Michael, 11.09.2026). Ein Monatsplan endet nach der letzten Person und darf den Rest unter sich aufteilen; ein Jahr hat zwölf Zeilen, deren Höhe schon feststeht - gestreckt wären die Felder je nach Seite verschieden hoch, und die schmalen Trennstreifen zwischen den Monaten wüchsen mit. Genau das war die "Mini-Zeile" unter den Wochentagen. */ /* Die Kopfzeile mit den Wochentagen: überall gleich hoch und ohne Polster (Michael, 11.09.2026: "bei den dienstwünschen sind die wochentage zu hoch"). Sie stand in zwei der drei Vorlagen, in der dritten nicht - und als die Maße der Tagesfelder hierher wanderten, bekam genau die dritte deren Polster. Sie klebt am oberen Rand der Hülle: In einer Matrix ohne Kopfzeile weiß niemand mehr, welche Spalte welcher Tag ist. */ .kal.tagesraster tr.kopf th { position: sticky; top: 0; z-index: 3; height: 22px; line-height: 22px; padding: 0; font-size: .68rem; /* → .68rem → --schrift-1 */ font-weight: 600; } /* Die Jahresansichten tragen KEIN "fuellend" (Michael, 11.09.2026): Sie begrenzen ihre Höhe (max-height aus .plan-huelle), statt sie zu nehmen. Unter der Tabelle stehen Legende und Anträge, und die sollen unmittelbar an ihr anschließen - füllend stand dort eine handbreit weißer Fläche zwischen dem Dezember und der Legende. Passen die zwölf Monate nicht in den Rest des Fensters, scrollt die Hülle in ihrer eigenen Fläche weiter. */ /* Ein Raster traegt keinen Rahmen um das Ganze, es zeichnet seine eigene Kante (Michael, 07.09.2026). Der Grund ist der Trennstreifen zwischen den Bloecken: Ein Rahmen liefe an ihm vorbei und verbaende, was der Streifen gerade getrennt hat - und an der leeren Ecke oben links hinge er in der Luft. Also: Jede Zelle zeichnet rechts und unten, die erste einer Zeile zusaetzlich links, die letzte Zeile unten. Der Trennstreifen zeichnet gar nichts, auch nicht an den Seiten. Die vier Ecken des Rasters sind gerundet. Die Ecke oben links traegt weder Flaeche noch Linien - sie beschriftet nichts. Sie bekommt die Farbe der Seite und nicht "transparent": Sie klebt beim Scrollen fest, und durch eine durchsichtige Zelle schoeben sich die Tage. */ .plan-huelle.raster-huelle { border: 0; background: transparent; } .kal tr:not(.trennzeile) > *:first-child:not(.ecke) { border-left: 1px solid var(--kal-linie); } .kal tr > *:last-child { border-right: 1px solid var(--kal-linie); } .kal tbody tr:last-child > * { border-bottom: 1px solid var(--kal-linie); } .kal tr.trennzeile > td { border: 0; } /* Jeder Block, der auf einen Trennstreifen folgt, hat oben eine Kante (Michael, 11.09.2026: "Linie über der Zeile Dr. Eli fehlt"). Bis dahin bekam sie nur der ERSTE Block unter dem Kopf; der Personenblock darunter begann ohne Linie, und auf der weissen Kachel des Portals schwebte er. Die Farbe ist die des Randes, nicht die der Linie im Inneren: Es ist eine Aussenkante. */ .kal tbody tr.trennzeile + tr > * { border-top: 1px solid var(--kal-rand); } .kal tr.kopf th.ecke { background: var(--grund); border: 0; border-right: 1px solid var(--kal-linie-stark); } .kal tr.kopf th.ecke + th { border-top-left-radius: var(--radius-2); } .kal tbody tr.trennzeile:first-child + tr > *:first-child { border-top-left-radius: var(--radius-2); } .kal tbody tr:last-child > *:first-child { border-bottom-left-radius: var(--radius-2); } .kal tbody tr:last-child > *:last-child { border-bottom-right-radius: var(--radius-2); } /* ── 1. Art des Tages ───────────────────────────────────────── */ /* Bis zum 12.09.2026 stand dieser Abschnitt zweimal in der Datei, Zeile für Zeile gleich, und nur der zweite zaehlte (im Stylesheet gewinnt der spaetere). Jetzt steht er einmal - HINTER den Rasterregeln, denn seine Randregeln (Wochenendkante, Ferienstreifen ohne rechte Linie) muessen die allgemeinen Kanten des Rasters schlagen. Seit die Ferien ein Streifen sind, stehen sie nicht mehr in Konkurrenz zu den Flaechenfarben: Wochenende, Feiertag und Regeltag behalten ihren Grund, der Streifen legt sich darueber (09.09.2026). */ .kal td.regeltag { background: var(--kal-regeltag); } /* Als inset-Schatten und nicht als eigenes Element: Er liegt ueber der Flaechenfarbe und unter der Schrift, gilt in jeder Ansicht gleich und braucht kein zusaetzliches Markup in fuenf Vorlagen. Ueber eine Ferienwoche hinweg ergibt er eine durchgehende Linie. In den WOCHENTABELLEN (Abschnitt 0b) liegt er nicht in der Zelle, sondern in der Zwischenzeile unter dem Kopf. */ .kal td.ferien, .kal th.ferien { box-shadow: inset 0 4px 0 var(--kal-ferien); } .kal td.we, .kal th.we, .kal tr.we td, .kal tr.we th { background: var(--kal-we); } .kal th.we, .kal tr.we th { color: var(--kal-we-schrift); } .kal td.feiertag, .kal th.feiertag { background: var(--kal-we); } /* Das Wochenende als Block eingefasst - so trennt der Blick die Woche vom Wochenende, ohne die Datumszeile zu lesen. */ .kal td.we-start, .kal th.we-start { border-left: 2px solid var(--kal-we-linie); } .kal td.we-ende, .kal th.we-ende { border-right: 2px solid var(--kal-we-linie); } /* Eine Grundregel gegen doppelte Linien (Michael, 07.09.2026: "sieht so aus, als ob sie unterschiedlich dick oder doppelt angelegt sind"): Die Tabellen zeichnen ihre Linien einzeln (border-collapse: separate) - nötig, weil sonst die Linien der klebenden Kopfzeile und der Namensspalte beim Scrollen stehen blieben. Einzeln gezeichnet stehen aber zwei Linien nebeneinander, sobald eine Zelle links etwas zieht und ihre Nachbarin rechts: 1px + 2px = 3px, und die Trennung wirkt dicker als gewollt, während dieselbe Trennung auf der anderen Seite 2px misst. Deshalb gilt: Wer links eine eigene Linie zieht, bekommt von der Zelle davor ihre rechte abgetreten. Dasselbe waagerecht fuer Zeilen. */ .kal td:has(+ td.we-start), .kal th:has(+ th.we-start), .kal th:has(+ td.we-start), .kal td:has(+ th.we-start) { border-right: 0; } /* Der Ferienstreifen liegt VOR den senkrechten Linien (Michael, 09.09.2026). Er markiert einen Zeitraum, keine einzelne Zelle - von jeder Spaltenlinie durchschnitten liest er sich als vierzehn Striche statt als zwei Wochen. Ein eingesetzter Schatten wird ueber der Flaeche, aber UNTER dem Rand gezeichnet. Deshalb wird die senkrechte Linie hier selbst zum Schatten und HINTER dem Streifen aufgefuehrt: Bei Schatten entscheidet die Reihenfolge, was oben liegt. Breite geht dabei nicht verloren - die Spaltenbreite steht fest (table-layout: fixed), und der Schatten sitzt genau dort, wo der Rand sass. Nur fuer Tageszellen: Im Kopf des Dienstplans sitzt der Streifen unten und braucht seine Randlinien weiterhin. */ .kal td.ferien { border-right: 0; box-shadow: inset 0 4px 0 var(--kal-ferien), inset -1px 0 0 var(--kal-linie); } .kal td.ferien.we-ende { box-shadow: inset 0 4px 0 var(--kal-ferien), inset -2px 0 0 var(--kal-we-linie); } .kal td.ferien.we-start { border-left: 0; box-shadow: inset 0 4px 0 var(--kal-ferien), inset 2px 0 0 var(--kal-we-linie), inset -1px 0 0 var(--kal-linie); } /* Vor dem Wochenende tritt die Zelle ihre rechte Linie ab (die Grundregel darueber) - dann darf auch der Schatten keine zeichnen. */ .kal td.ferien:has(+ td.we-start) { box-shadow: inset 0 4px 0 var(--kal-ferien); } /* Der heutige Tag zieht nur im Dienstplan eine eigene Linie links; in den Jahresansichten ist er ein Rahmen (outline), der nichts verdraengt. Die Regel dafuer steht deshalb dort und nicht hier - hier haette sie der Zelle davor ihre Linie genommen, ohne dass eine andere an ihre Stelle traete. */ /* HIER STANDEN ZWEI ZEILEN, DIE DER REGEL WEITER OBEN WIDERSPRACHEN (entfernt 07.09.2026, Michael: "unten scheint sie immer noch zu fehlen"): .kal tr > *:last-child { border-right: 0; } .kal tbody tr:last-child > * { border-bottom: 0; } Sie stammten aus der Zeit, als der Kalender noch in einer Huelle MIT Rahmen stand - dann waere die Kante dort doppelt gewesen. Seit die Huelle als "raster-huelle" keinen Rahmen mehr traegt (und das tun inzwischen alle fuenf Ansichten), nahmen diese beiden Zeilen dem Raster seine rechte und untere Kante ersatzlos weg: Die Tabelle hoerte unten und rechts einfach auf, und die runden Ecken, die zwanzig Zeilen weiter oben gesetzt werden, hingen in der Luft. Es gilt wieder, was dort steht: Das Raster zeichnet seine eigene Kante. */ /* Siehe oben: leere Felder sind weiß und ohne jede Linie (Michael, 05.09.2026). Wo kein Tag ist, trennt ein Strich auch nichts - er hing bloß in der Luft. Vor dem Monatsanfang bleibt die Kante trotzdem sichtbar: Sie wandert an den ersten Tag, der auf ein leeres Feld folgt. */ .kal td.leer, .kal td.leer.we, .kal tr.we td.leer { background: var(--weiss); /* Nur die senkrechten Striche fallen weg - sie trennten Tage, die es nicht gibt. Die waagerechten laufen durch (Michael, 05.09.2026): Sie begrenzen die Zeile, und eine Zeilenlinie, die auf halber Strecke aufhört, sieht aus wie ein Fehler. */ border-left-color: transparent; border-right-color: transparent; } .kal td.leer + td.zelle { border-left: 1px solid var(--kal-linie); } /* Felder, die gar kein Tag sind (Monatsanfang und -ende in Jahresansichten), bleiben weiß - auch dann, wenn sie auf einen Samstag oder Sonntag fallen (Michael, 05.09.2026). Ein grau hinterlegtes Wochenende, an dem es den Monat noch gar nicht gibt, sähe aus wie ein Tag; entfallen ist entfallen. Die Regel steht deshalb NACH der Wochenendfarbe - sonst übermalte diese sie wieder. */ /* ── 2. Einträge des Dienstplans ────────────────────────────── */ /* Zweimal geschrieben: einmal frei stehend für die Knöpfe der Kürzelpalette und die Legenden, einmal als Zelle - Letzteres, damit der Eintrag die Fläche des Wochenendes überschreibt. */ .k-1, .kal td.k-1 { background: var(--kal-anwesend); } .k-D, .kal td.k-D { background: var(--kal-dienst); color: var(--weiss); font-weight: 700; } .k-R, .kal td.k-R { background: var(--kal-rufdienst); color: var(--weiss); font-weight: 700; } /* Halber Dienst: dasselbe D, das Feld von Ecke zu Ecke geteilt (die Eckensyntax trifft die Ecken exakt, auch wenn die Zelle nicht quadratisch ist - ein 45-Grad-Verlauf täte das nur bei quadratischen Feldern). Welche Hälfte voll blau ist, zeigt die gearbeitete Tageshälfte: unten = zweite Hälfte (unter der Woche der Normalfall, die Person kommt zum Beginn des Bereitschaftsdienstes), oben = erste Hälfte (an Wochenenden und Feiertagen). */ .k-zD, .kal td.k-zD { background: linear-gradient(to bottom right, var(--kal-dienst-hell) 0 50%, var(--kal-dienst) 50% 100%); color: var(--weiss); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .k-Dv, .kal td.k-Dv { background: linear-gradient(to bottom right, var(--kal-dienst) 0 50%, var(--kal-dienst-hell) 50% 100%); color: var(--weiss); font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.35); } .k-B, .kal td.k-B { background: var(--kal-buero); color: var(--kal-buero-schrift); } .k-A, .kal td.k-A { background: var(--weiss); color: var(--kal-dienst); font-weight: 700; } .k-U, .kal td.k-U { background: var(--kal-urlaub); color: var(--kal-urlaub-schrift); font-weight: 600; } .k-Ub, .kal td.k-Ub { background: repeating-linear-gradient(45deg, #fff8e1, #fff8e1 3px, var(--kal-urlaub) 3px, var(--kal-urlaub) 6px); color: var(--kal-urlaub-schrift); font-weight: 600; } .k-K, .kal td.k-K { background: var(--kal-krank); color: var(--weiss); font-weight: 700; } .k-F, .kal td.k-F { background: var(--kal-fortbildung); color: var(--kal-fortbildung-schrift); font-weight: 600; } /* Beantragt sieht ueberall gleich aus: dieselbe Farbe, aber schraffiert statt voll - so wie "Ub" zum "U" steht (Michael, 05.09.2026). Wer die Schraffur einmal als "noch nicht entschieden" gelesen hat, liest sie ueberall so. */ .k-Fb, .kal td.k-Fb { background: repeating-linear-gradient(45deg, #f7effa, #f7effa 3px, var(--kal-fortbildung) 3px, var(--kal-fortbildung) 6px); color: var(--kal-fortbildung-schrift); font-weight: 600; } .k-AF, .kal td.k-AF { background: var(--kal-arbeitsfrei); color: var(--kal-arbeitsfrei-schrift); font-weight: 600; } .k-AFb, .kal td.k-AFb { background: repeating-linear-gradient(45deg, #f1f6ed, #f1f6ed 3px, var(--kal-arbeitsfrei) 3px, var(--kal-arbeitsfrei) 6px); color: var(--kal-arbeitsfrei-schrift); font-weight: 600; } .k--, .kal td.k-- { background: repeating-linear-gradient(45deg,#eceff1,#eceff1 3px,#cfd8dc 3px,#cfd8dc 6px); } /* Die Regel für Urlaub, überall im Personalmanager dieselbe (Michael, 07.09.2026): Ein Urlaubstag, der ZÄHLT, ist gelb - mit dunkelgelbem U darauf. Ein Tag, der NICHT zählt, behält seine eigene Fläche und trägt nur das U: das Wochenende sein Grau, ein Feiertag seins, ein nach dem Arbeitsmodell freier Tag das seine. So sieht man den durchlaufenden Urlaub, ohne dass die Fläche vortäuscht, hier werde ein Urlaubstag verbraucht. Der Buchstabe ist in beiden Fällen derselbe - der Unterschied liegt in der Fläche, nicht in der Schrift. Beantragte Tage folgen derselben Regel, nur mit der Schraffur statt der vollen Fläche. */ .kal td.k-U-frei { color: var(--kal-urlaub-frei); font-weight: 700; } .kal td.k-Ub-frei { color: var(--kal-urlaub-frei); font-weight: 600; } /* Die Fortbildung folgt derselben Regel (Michael, 08.09.2026): Sie kostet keinen Urlaubstag, aber sie fällt auch nicht an einem Tag an, an dem die Person ohnehin nicht arbeitet - eine violette Fläche über dem Wochenende behauptete das Gegenteil. */ .kal td.k-F-frei { color: var(--kal-fortbildung-frei); font-weight: 700; } .kal td.k-Fb-frei { color: var(--kal-fortbildung-frei); font-weight: 600; } /* Arbeitsfrei folgt derselben Regel (Michael, 11.09.2026) - an einem Tag, an dem ohnehin nicht gearbeitet wird, gibt es nichts freizunehmen; die Flaeche behauptete das Gegenteil. */ .kal td.k-AF-frei { color: var(--kal-arbeitsfrei-frei); font-weight: 700; } .kal td.k-AFb-frei { color: var(--kal-arbeitsfrei-frei); font-weight: 600; } /* ── 3. Dienstwünsche ───────────────────────────────────────── */ .w-kann_nicht, .kal td.w-kann_nicht { background: var(--kal-nein); color: var(--weiss); font-weight: 700; } .w-lieber_nicht, .kal td.w-lieber_nicht { background: repeating-linear-gradient(45deg, var(--kal-nein-hell), var(--kal-nein-hell) 3px, var(--kal-nein-linie) 3px, var(--kal-nein-linie) 6px); color: var(--kal-nein); font-weight: 600; } .w-gern, .kal td.w-gern { background: repeating-linear-gradient(45deg, var(--kal-ja-hell), var(--kal-ja-hell) 3px, var(--kal-ja-linie) 3px, var(--kal-ja-linie) 6px); color: var(--kal-ja); font-weight: 600; } .w-wunsch, .kal td.w-wunsch { background: var(--kal-ja); color: var(--weiss); font-weight: 700; } /* Im Dienstplan steht der Wunsch nicht als Fläche, sondern klein in der linken oberen Ecke (Michael, 25.09.2026) - über jedem Eintrag, auch über dem T. Die Fläche hätte das T verdeckt oder wäre von ihm verdeckt worden; so sieht man beides. Harte Stufen (Nein, dringend) als gefülltes Kästchen mit weißem Zeichen, weiche nur als farbiges Zeichen - dieselbe Logik wie voll/schraffiert auf der Dienstwünsche-Seite. Gerundet wird nur die Ecke, die innen liegt. */ .wunschecke { position: relative; } .wunschecke::before { position: absolute; top: 0; left: 0; padding: 0 var(--abstand-1); font-size: var(--schrift-1); font-weight: 700; line-height: 1.25; border-bottom-right-radius: var(--radius-1); pointer-events: none; } .wunschecke[data-wunsch="kann_nicht"]::before { content: "✗"; background: var(--kal-nein); color: var(--weiss); } .wunschecke[data-wunsch="lieber_nicht"]::before { content: "✗"; color: var(--kal-nein); } .wunschecke[data-wunsch="gern"]::before { content: "★"; color: var(--kal-ja); } .wunschecke[data-wunsch="wunsch"]::before { content: "★"; background: var(--kal-ja); color: var(--weiss); } /* ── 4. Markierungen, die auf allem liegen können ───────────── */ /* Der heutige Tag: in Zeilenansichten als durchgehende Spalte, in Jahres- und Monatsansichten als Rahmen um das eine Feld. ZWEI ZELLEN TEILEN SICH EINEN STRICH (Michael, 11.09.2026: "im kompletten PM soll das stets so sein, dass die Zellen einen gemeinsamen Trennstrich haben, d.h. keine Dopplung"). Wer eine eigene Kante zieht, bekommt von der Nachbarin ihre abgetreten - sonst stehen zwei Linien nebeneinander und die Spalte sieht doppelt so breit eingefasst aus wie jede andere. Abgetreten wird nach BEIDEN Seiten, und zwar in jeder Form, in der eine Linie gezeichnet sein kann: - als Rand (die gewöhnliche Gitterlinie, die kräftige Wochenendkante, die Namensspalte im Dienstplan), - als SCHATTEN. Der Ferienstreifen zeichnet seine rechte Linie als `inset -1px 0 0` - und ein Schatten verschwindet nicht, wenn man `border-right: 0` setzt. Genau daran lag die Dopplung neben dem heutigen Tag (11.09.2026); gesucht wurde sie zuerst beim Rand. In der Jahresansicht bleibt heute ein Rahmen INNEN im Feld (outline mit negativem Offset): Er nimmt keinen Platz und verdrängt darum auch nichts. */ .kal td.heute, .kal th.heute { outline: 2px solid var(--kal-heute); outline-offset: -2px; } /* Die Spaltenform - Dienstplan und Portal (beide Tabellen tragen "plan"). Hier ist heute keine Zelle, sondern eine Spalte über alle Zeilen: elf einzelne Rahmen wären eine Leiter statt einer Spalte. Gezeichnet als echter Rand, denn nur ein Rand ersetzt die Linie der Nachbarin - ein innerer Schatten legte sich daneben, und genau das sah man (Michael, 07.09.2026). */ .kal.plan td.heute, .kal.plan th.heute { outline: 0; border-left: 2px solid var(--kal-heute); border-right: 2px solid var(--kal-heute); } .kal.plan tr.kopf th.heute { border-color: var(--kal-heute); } .kal.plan tbody tr:last-child td.heute { border-bottom: 2px solid var(--kal-heute); } /* Die Zelle DAVOR tritt ihre rechte Linie ab - als Rand ... Alle vier Paarungen (Michael, 14.09.2026: "Rahmenlinien teilweise immer noch doppelt"): Bis dahin standen hier nur td neben td und th neben th. Die Namenszelle ist aber ein th und die Heute-Zelle daneben ein td - und genau dort lagen 2 Pixel Grau neben 2 Pixel Orange, im Portal wie in der Matrix. */ .kal td:has(+ td.heute), .kal th:has(+ th.heute), .kal th:has(+ td.heute), .kal td:has(+ th.heute) { border-right: 0; } /* ... auch die kräftigen (Namensspalte, Wochenendkante): dieselbe Regel, nur spezifisch genug, um sie zu schlagen. */ .kal.plan td:has(+ td.heute), .kal.plan th:has(+ th.heute), .kal.plan th:has(+ td.heute), .kal.plan td:has(+ th.heute) { border-right: 0; } /* ... und als Schatten: Der Ferienstreifen behält seinen Streifen oben und lässt die rechte Linie weg. */ .kal td.ferien:has(+ td.heute) { box-shadow: inset 0 4px 0 var(--kal-ferien); } /* Die Zelle DAHINTER tritt ihre linke ab - das ist der Beginn des Wochenendes, die einzige, die von sich aus links zeichnet. */ .kal td.heute + td.we-start, .kal th.heute + th.we-start, .kal th.heute + td.we-start, .kal td.heute + th.we-start { border-left: 0; } /* Die Kopfzeile: dunkel, mit dem Wochenende eine Stufe heller. Steht hier und nicht bei den einzelnen Seiten, damit alle drei Kalender denselben Kopf haben - dieselbe Regel wie bei den Listen (static/tabelle.css). */ .kal tr.kopf th { background: var(--kal-kopf); color: var(--kal-kopf-schrift); } .kal tr.kopf th.we { background: var(--kal-kopf-we); color: var(--kal-kopf-schrift); } .kal tr.kopf th.heute { background: var(--kal-heute); color: var(--weiss); } /* Schon zum Dienst eingeteilt - der blaue Rahmen rundum, innen gezeichnet, damit er die Fläche nicht verschiebt. */ .kal td.hat-dienst { box-shadow: inset 0 0 0 2px var(--kal-dienst); } /* Eingeteilt, obwohl gesperrt, braucht keine eigene Markierung mehr (Michael, 05.09.2026): Die rote Fläche sagt "gesperrt", der blaue Rahmen "eingeteilt" - zusammen ist der Fall eindeutig. Ein zusätzlicher oranger Rahmen war obendrein die Farbe des heutigen Tages und dadurch missverständlich. */ /* ── 5. Ampel für Bedarfsrechnungen ─────────────────────────── */ .kal td.diff-gut { background: var(--kal-gut); color: var(--kal-gut-schrift); font-weight: 700; } .kal td.diff-gut2 { background: var(--kal-gut2); color: var(--kal-gut-schrift); font-weight: 700; } .kal td.diff-gut3 { background: var(--kal-gut3); color: var(--kal-gut-schrift); font-weight: 700; } .kal td.diff-gut4 { background: var(--kal-gut4); color: var(--kal-gut4-schrift); font-weight: 700; } .kal td.diff-knapp { background: var(--kal-knapp); color: var(--kal-knapp-schrift); font-weight: 700; } .kal td.diff-schlecht { background: var(--kal-schlecht); color: var(--kal-schlecht-schrift); font-weight: 700; } /* ── 6. Das Menü am einzelnen Tag ───────────────────────────── */ /* Wird von allen Kalenderansichten benutzt (Dienstplan wie Dienstwünsche); die Bedienung dazu steht in static/tagmenue.js. */ /* Das Schloss über der Bedarfszeile (Michael, 11.09.2026) ------------------------------------------------------- Rot und geschlossen ist der Normalfall: Im Portal steht die Zeile mitten auf der Seite, die morgens jeder aufschlägt, und ein Tipp daneben soll die Zahl der Arbeitsplätze nicht verstellen. Grün und offen heißt: Jetzt darf man. Klein und ohne Fläche - es ist eine Sperre, kein Werkzeug; es soll zu sehen sein, wenn man es sucht, und sonst nicht auffallen. */ .bedarf-schloss { border: 0; background: none; padding: 0 .15rem; /* → .15rem → --abstand-1 oder --abstand-2 */ line-height: 1; color: var(--kal-krank); cursor: pointer; font-size: var(--schrift-3); } .bedarf-schloss:hover { color: var(--rot); } .bedarf-schloss.offen { color: var(--kal-rufdienst); } /* Gesperrt sieht die Zeile aus wie immer, verhält sich aber wie eine Anzeige: kein Zeiger, kein Rahmen beim Anklicken. */ .kal.gesperrt td.bedarfszelle { cursor: default; } .kal.gesperrt td.bedarfszelle:focus { outline: 0; } /* Der Regler für die Arbeitsplätze (Michael, 11.09.2026) ------------------------------------------------------ Beim Antippen einer Bedarfszelle erscheint sie noch einmal - zentriert über sich selbst, in doppelter Größe, mit der Zahl groß und zwei Pfeilen daneben. Der Grund ist das Telefon: Eine Tastatur gibt es dort nicht, und ein Feld von vierzig Punkten trifft man mit dem Finger nur mit Glück. Auf dem Mac bleibt die Tastatur der schnellere Weg - der Regler zeigt dort dieselbe Zahl und ändert sich mit. Er hängt am Seitenkörper und nicht in der Tabelle: Tabellen scrollen waagerecht, und ein Kasten darin wäre am Rand abgeschnitten. */ .bedarfregler { position: absolute; z-index: 1080; display: flex; align-items: stretch; gap: .35rem; /* → .35rem → --abstand-3 oder --abstand-4 */ background: var(--weiss); border: 2px solid var(--kal-dienst); border-radius: .4rem; /* → .4rem → --radius-2 */ padding: .25rem var(--abstand-3); /* → .25rem → --abstand-2 oder --abstand-3 */ box-shadow: 0 .4rem 1rem rgba(15,40,70,.22); } .bedarfregler .zahl { min-width: 2.6rem; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; /* → 1.5rem → --schrift-6 */ font-weight: 700; color: var(--blau-dunkel); font-variant-numeric: tabular-nums; } .bedarfregler .pfeile { display: flex; flex-direction: column; gap: .15rem; /* → .15rem → --abstand-1 oder --abstand-2 */ } .bedarfregler button { border: 1px solid var(--kal-rand); background: var(--grund); border-radius: var(--radius-1); width: 2rem; height: 1.5rem; display: flex; align-items: center; justify-content: center; color: var(--blau-dunkel); font-size: .9rem; /* → .9rem → --schrift-4 */ line-height: 1; cursor: pointer; padding: 0; } .bedarfregler button:hover { background: var(--blau-hell); } .bedarfregler button:active { background: var(--blau); color: var(--weiss); } /* ── Arbeitsmodelle anpassen ──────────────────────────────── Michael, 11.09.2026: "Im aktivierten Zustand sollen alle Dienste in der Tabelle ausgeblendet werden, stattdessen soll man lediglich die grün hinterlegten Arbeitsmuster punktuell anpassen können - 'Arbeit' = hellgrün oder 'frei' = weiß." Die Klasse "modellmodus" steht am Seitenkörper und gilt damit für beide Fassungen des Plans (Monatsgitter und Wochengitter). Ausgeblendet wird nicht durch Löschen, sondern durch Übermalen: Die Schrift wird durchsichtig, die Fläche des Eintrags weicht der des Tages - Wochenende, Feiertag, Arbeitstag nach Muster oder weiß. Diese Regeln sind absichtlich genauer als jede Eintragsfarbe (.kal td.k-D), sonst schiene der Dienst durch. */ .modellmodus .kal td.zelle { color: transparent; background: var(--weiss); background-image: none; text-shadow: none; } .modellmodus .kal td.zelle.we, .modellmodus .kal td.zelle.feiertag { background: var(--kal-we); } .modellmodus .kal td.zelle.regeltag { background: var(--kal-regeltag); } .modellmodus .kal td.zelle.ausserhalb { background: var(--weiss); } /* Wo vom Rhythmus abgewichen wurde, sitzt eine kleine grüne Ecke - nur in diesem Modus, denn nur hier ist die Frage "Muster oder Ausnahme?" gestellt. */ .modellmodus .kal td.zelle.muster-ausnahme::after { content: ""; position: absolute; top: 0; right: 0; border: 5px solid transparent; border-top-color: var(--gruen); border-right-color: var(--gruen); } /* Die zwei Belegknöpfe und die zwei Menüeinträge tragen die Farbe, die sie setzen: hellgrün für Arbeit, weiß für frei. */ .btn.muster-arbeit, .tagmenue .zeichen.muster-arbeit { background: var(--kal-regeltag); } .btn.muster-frei, .tagmenue .zeichen.muster-frei { background: var(--weiss); } .btn.muster-arbeit:hover, .btn.muster-frei:hover { color: var(--blau-dunkel); border-color: var(--blau); } /* ── Hinweise zum Tag ─────────────────────────────────────── Michael, 11.09.2026: "Der Text wird als Liste mit Punkt-Listen-Zeichen erfasst und verwaltet, bei 'Enter' nächster Listenpunkt." Derselbe Kasten wie der Bedarfsregler, nur groß: zwei Ränder in der Farbe des Dienstes, weißer Grund, ein Schatten darunter. Wer den einen kennt, erkennt den anderen wieder - beide gehören zu genau dem Tag, auf dem sie liegen. Ein Listenpunkt ist eine Zeile mit eigenem Eingabefeld, das Zeichen steht daneben: So ist das, was man tippt, schon die Liste, die später dasteht. */ .hinweiskasten { position: absolute; z-index: 1080; width: 19rem; max-width: 92vw; background: var(--weiss); border: 2px solid var(--kal-dienst); border-radius: .4rem; /* → .4rem → --radius-2 */ padding: var(--abstand-4) var(--abstand-5) .35rem; /* → .35rem → --abstand-3 oder --abstand-4 */ box-shadow: 0 .4rem 1rem rgba(15,40,70,.22); } .hinweiskasten .kopf { display: flex; align-items: center; gap: var(--abstand-4); font-size: var(--schrift-3); font-weight: 700; color: var(--blau-dunkel); border-bottom: 1px solid var(--kal-linie); padding-bottom: .25rem; /* → .25rem → --abstand-2 oder --abstand-3 */ margin-bottom: var(--abstand-3); } .hinweiskasten .kopf .tag { flex: 1 1 auto; } .hinweiskasten .kopf button.zu { border: 0; background: none; padding: 0 var(--abstand-1); color: var(--grau-6); font-size: .8rem; /* → .8rem → --schrift-3 */ line-height: 1; cursor: pointer; } .hinweiskasten ul.punkte { list-style: none; margin: 0; padding: 0; } .hinweiskasten ul.punkte li { display: flex; align-items: center; gap: .35rem; /* → .35rem → --abstand-3 oder --abstand-4 */ } /* Quadrate statt Punkte (Michael, 11.09.2026) - klein gesetzt, sonst steht das Zeichen so schwer da wie ein Kürzel; seit dem 14.09.2026 halb so groß wie die Schrift und mittig zur Zeile, wie im Portal (home.html). */ .hinweiskasten ul.punkte .zeichen { color: var(--kal-dienst); font-size: .5em; line-height: 1; } /* Die Schrift im Feld ist EIN REM = 16 Punkte, und das ist keine Geschmacks- frage: Safari auf dem iPhone zoomt in jedes Feld hinein, dessen Schrift kleiner ist - dann liegt die Seite verschoben und vergrößert da (Michael, 11.09.2026: "durch das PopUp wird hineingezoomt"). */ .hinweiskasten ul.punkte input { flex: 1 1 auto; min-width: 0; border: 0; border-bottom: 1px solid transparent; background: none; font-size: 1rem; /* → 1rem → --schrift-5 */ padding: .15rem 0; /* → .15rem → --abstand-1 oder --abstand-2 */ color: inherit; } .hinweiskasten ul.punkte input:focus { outline: 0; border-bottom-color: var(--kal-linie); } /* Das Löschzeichen je Zeile: leise, bis man es braucht. */ .hinweiskasten ul.punkte button.weg { border: 0; background: none; padding: 0 .15rem; /* → .15rem → --abstand-1 oder --abstand-2 */ color: var(--grau-4); font-size: 1rem; /* → 1rem → --schrift-5 */ line-height: 1; cursor: pointer; flex: none; } .hinweiskasten ul.punkte button.weg:hover { color: var(--rot); } /* Unten links der Tipp, rechts die beiden Knöpfe: ohne Änderung zu, oder übernehmen. Gespeichert wird NUR über den Haken. */ .hinweiskasten .fuss { display: flex; align-items: center; gap: var(--abstand-4); margin-top: .45rem; /* → .45rem → --abstand-4 oder --abstand-5 */ } .hinweiskasten .fuss .tipp { flex: 1 1 auto; font-size: .64rem; /* → .64rem → --schrift-1 */ color: var(--grau-5); } /* Die beiden Zeichenknöpfe (Michael, 14.09.2026): kein Rahmen, nur das Symbol - rot für Abbrechen, grün für Übernehmen; eine Stufe größer als die Schrift, damit der Finger sie trifft. */ .hinweiskasten .fuss .zeichenknopf { border: 0; background: none; padding: 0 var(--abstand-2); font-size: var(--schrift-6); line-height: 1; cursor: pointer; } .hinweiskasten .fuss .zeichenknopf.abbrechen { color: var(--rot); } .hinweiskasten .fuss .zeichenknopf.uebernehmen { color: var(--gruen-dunkel); /* das Erfolgsgrün, nicht das Türkis der Marke */ } .hinweiskasten .fuss .zeichenknopf:hover { filter: brightness(.85); } /* Ein Tipp zur Eingabetaste hilft nur, wo es eine gibt - der Span trägt "nur-breit" (hinweis.js), die Regel dazu steht in base.html. */ /* Der Tag in der Kopfzeile ist anfassbar, wo jemand schreiben darf - und trägt einen Punkt, wo etwas steht. Der Punkt sitzt in der Ecke: Die Zelle ist keine zwei Zeichen breit, und ein Symbol daneben verschöbe die Zahl. */ .kal th.tageszelle { cursor: pointer; } .kal th.hat-hinweis { position: relative; } .kal th.hat-hinweis::after { content: ""; position: absolute; top: 2px; right: 2px; width: 5px; height: 5px; border-radius: var(--radius-kreis); background: var(--gelb); } .tagmenue { position: absolute; z-index: 1080; min-width: 230px; background: var(--weiss); border: 1px solid var(--kal-linie-stark); border-radius: .375rem; /* → .375rem → --radius-2 */ box-shadow: 0 .5rem 1.5rem rgba(15,50,80,.18); padding: .35rem; /* → .35rem → --abstand-3 oder --abstand-4 */ } .tagmenue .kopf { font-size: .78rem; /* → .78rem → --schrift-3 oder --schrift-2 */ font-weight: 700; color: var(--blau-dunkel); padding: .15rem var(--abstand-4) var(--abstand-3); /* → .15rem → --abstand-1 oder --abstand-2 */ border-bottom: 1px solid var(--kal-linie); margin-bottom: .25rem; /* → .25rem → --abstand-2 oder --abstand-3 */ } .tagmenue button.wahl { display: flex; align-items: center; gap: var(--abstand-5); width: 100%; border: 0; background: none; text-align: left; padding: var(--abstand-3) var(--abstand-4); border-radius: var(--radius-1); font-size: .85rem; /* → .85rem → --schrift-3 */ color: inherit; } .tagmenue button.wahl:hover { background: var(--flaeche-hover); } .tagmenue button.wahl .zeichen { width: 30px; height: 22px; border-radius: .2rem; /* → .2rem → --radius-1 */ display: inline-flex; align-items: center; justify-content: center; font-size: .85rem; /* → .85rem → --schrift-3 */ flex: none; border: 1px solid var(--kal-linie); } .tagmenue button.wahl.gewaehlt { outline: 2px solid var(--blau); outline-offset: -2px; } .tagmenue .weg { color: var(--rot); } /* ── 7. Urlaubsbelegung als Balken ──────────────────────────── */ /* Wie viele aus demselben Kreis an diesem Tag schon genehmigten Urlaub haben (Michael, 05.09.2026): vier waagerechte Striche, von unten gefüllt - zwei grüne, ein gelber, ein roter. Der rote sagt: Hier wird es eng. */ .kal td.zelle { position: relative; /* Beim Halten mit dem Finger kein Kopiermenü und keine Lupe (11.09.2026): Das Halten beginnt hier eine Auswahl, siehe static/fingerauswahl.js. */ -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* Die Balken sitzen in ihrem eigenen Streifen unter der Tagesnummer, nicht hinter ihr - vier Striche zu zwei Punkten plus Abständen brauchen elf Punkte Höhe, und die muss das Feld ihnen lassen. */ /* Unten quer im Feld, seit dem 05.09.2026: Die Tageszahl steht mittig darüber, die Striche sind ihr Sockel. Im Urlaubsplan wie in der Abwesenheit - beide Seiten sind gleich gebaut (Michael, 11.09.2026). */ .balken { position: absolute; left: 2px; right: 2px; bottom: 1px; display: flex; flex-direction: column-reverse; gap: 1px; pointer-events: none; } .balken i { display: block; height: 2px; border-radius: 1px; } .balken i:nth-child(1), .balken i:nth-child(2) { background: #3fa45b; /* → #3fa45b → --gruen-dunkel */ } .balken i:nth-child(3) { background: #e8b923; /* → #e8b923 → --gelb-linie */ } .balken i:nth-child(4) { background: #d64545; /* → #d64545 → --rot */ } /* Der Personalstand am linken Rand eines Tages (Michael, 11.09.2026: "Wir brauchen neben dem Urlaubsindikator noch einen Indikator für den Personalstand zum Beantragen von Arbeitsfrei"). Bewusst eine andere Richtung als die Balken: Die liegen waagerecht unten und zählen, WIE VIELE fehlen; der Streifen steht senkrecht am Rand und sagt, ob die übrigen noch reichen. Zwei Aussagen, zwei Formen - untereinander gelegt wären sie eine Leiter, in der man beides für dasselbe hält. Die Farben sind die der Bedarfsampel, dieselben wie in der +/--Zeile des Dienstplans: ab null grün, einer zu wenig gelb, mehr rot. Wo an einem Tag noch gar nichts im Plan steht, gibt es keinen Streifen - siehe personalstand() in app.py. */ /* Er liegt unten quer im Feld - an der Stelle, an der im Urlaubsplan die Belegungsstriche liegen (Michael, 11.09.2026). Dieselbe Stelle für dieselbe Art von Aussage: Wie steht es an diesem Tag um die Besetzung? Nebeneinander gab es beides nur in der Abwesenheit, und dort ist es jetzt eines. */ .kal td .stand { position: absolute; left: 2px; right: 2px; bottom: 1px; height: 3px; border-radius: 1px; pointer-events: none; } .kal td .stand.diff-gut { background: #3fa45b; /* → #3fa45b → --gruen-dunkel */ } .kal td .stand.diff-knapp { background: #e8b923; /* → #e8b923 → --gelb-linie */ } .kal td .stand.diff-schlecht { background: #d64545; /* → #d64545 → --rot */ } /* Mit der Maus markierte Tage - die Auswahl, auf die sich der nächste Knopf bezieht. Kräftiger Rahmen, damit sie auch auf farbigen Feldern zu sehen ist. */ .kal td.gewaehlt { outline: 2px solid var(--blau); outline-offset: -2px; box-shadow: inset 0 0 0 4px rgba(15,112,183,.18); } /* ── 6. Die Bedarfszeilen ──────────────────────────────────── Arbeitsplaetze, Personal und die Differenz. Standen bis zum 09.09.2026 im Stilblock des Dienstplans; seit das Portal dieselben drei Zeilen zeigt, stehen sie hier - zwei Kopien waeren nach der ersten Aenderung zwei verschiedene Zeilen. Die Auswahl ist unveraendert uebernommen, damit sich am Dienstplan nichts verschiebt. */ .zeile-bedarf td, .zeile-bedarf th { background: var(--flaeche-hell); font-size: var(--schrift-2); color: var(--grau-7); } /* Die Arbeitsplaetze im selben Blau wie die Dienstzeilen: Sie sind die Vorgabe, an der die beiden Zeilen darunter gemessen werden - aber nicht am Wochenende und an Feiertagen, dort behaelt der Tag seine gewohnte Flaeche. */ /* Eine Zelle, die sich ändern lässt, und ein von Hand gesetzter Wert. Stand bis zum 10.09.2026 im Kopf von dienstplan.html - seit die Bedarfszeile auch im Portal steht, gehört sie hierher: Zwei Ansichten, ein Aussehen. */ td.bedarfszelle { cursor: pointer; } td.bedarfszelle:focus { outline: 2px solid var(--blau); outline-offset: -2px; background: #fff8dc !important; /* → #fff8dc → --gelb-hell */ } td.abweichung { font-weight: 700; text-decoration: underline dotted; } .zeile-bedarf.plaetze td:not(.we):not(.feiertag), .zeile-bedarf.plaetze th { background: var(--flaeche-hover); }