/* ========================================================================= tafel.css — das Gerüst, das BEIDE Anwendungen tragen ========================================================================= Ausgezogen aus praxis-portal/static/style.css am 04.08.2026, damit tillY Termine dieselbe Hülle bekommt: Kopfleiste oben, Kachelleiste links, Inhalt über die volle Restbreite. WARUM EINE EIGENE DATEI UND KEINE KOPIE Der Kalender lädt seine Stile inline aus basis.html und kennt style.css nicht. Eine Kopie der Regeln dort wäre nach der ersten Änderung verschieden -- dieselbe Begründung, aus der globale-suche.js seit dem 29.07.2026 von beiden geladen wird. WER SIE LÄDT tillY base.html (relativ) tillY Termine basis.html mit absolutem Pfad /static/tafel.css -- beide liegen hinter nginx auf derselben Herkunft. DIE TOKENS Hier stehen die --farbe-*-Namen des Portals. Der Kalender benutzt kurze Namen (--akzent statt --farbe-akzent); die Zuordnung stand bis zum 06.08.2026 in tilly-termine/static/touren.css und läuft seitdem in die andere Richtung: basis.html setzt die kurzen Namen als Alias auf die langen. Warum sie dort und nicht mehr hier steht, erklärt der Block am Kopf von touren.css — kurz: beides zusammen wäre ein Zyklus, und CSS löst den nicht auf, sondern lässt beide Farben ganz fallen. ========================================================================= */ /* =========================================================================== Tafel-Gerüst: Kachelleiste links, Inhalt über die volle Restbreite =========================================================================== Til, 04.08.2026. Neu für das Dashboard; die übrigen Backend-Seiten ziehen in einem eigenen Schritt nach. WARUM DIE HÖHE ÜBER FLEXBOX UND NICHT ÜBER calc(100vh - Npx) Der erste Entwurf rechnete calc(100vh - 41px). Die Kopfzeile ist 45px hoch — und mit "Große Schrift" (--schrift-skalierung: 1.35) wieder anders. Jede feste Zahl wäre hier eine Wette gegen die eigene Schriftskalierung, und sie ging schon beim ersten Messen verloren: die Seite scrollte um vier Pixel. WARUM DIE LEISTE FÜR SICH SCROLLT Admins haben zwölf Bereiche. Mit großer Schrift endet die letzte Kachel bei 1055px — auf einem 900px-Schirm liegen zwei darunter, am iPad quer drei. Die waagerechte Pillenleiste konnte umbrechen; eine senkrechte kann das nicht. Also scrollt sie selbst, und der Inhalt rechts bleibt stehen. Gemessen, nicht geschätzt. ------------------------------------------------------------------------ */ .tafel { height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* EIN RASTER UND KEINE FLEXZEILE (10.08.2026) ------------------------------------------------------------------------ Vorher war die Leiste flex mit `gap: 16px` und 20 px Innenabstand links. Damit begann das Suchfeld dort, wo die Marke aufhoerte -- gemessen bei 82 px (Schirm) und 66 px (Handy), also an keiner Linie der Nav-Spalte. Ein Rand am Suchfeld haette daran nichts geaendert: er addiert sich zur Breite der Marke, und die haengt an der Schriftgroesse. Als Raster ist die erste Spur genau --nav-breite. Die Marke sitzt darin, das Suchfeld beginnt an der Spurgrenze -- also exakt an der Kante zwischen Kachelleiste und Inhalt, in jeder Breite und unabhaengig davon, wie lang die Marke ist. */ .tafel-leiste { flex: none; display: grid; /* VIER Spuren, weil die Leiste VIER Kinder hat: Marke, Mitte (Suche), .rechts (Datum) und .leisten-rechts (Glocke + Profilkachel). Til, 10.08.2026: "die benachrichtigungsglocke ist auf einmal wieder in der zweiten zeile ... ebenso die Kachel mit dem Nutzerprofil." Genau das war es: mit drei Spuren setzt das Raster das vierte Kind selbsttaetig in ZEILE 2, SPALTE 1 -- gemessen x=0, y=52, Breite 104, also die Breite der Nav-Spalte. Ein Raster verschluckt ein Kind nicht, es haengt es unten an, und das sieht aus wie ein Umbruch. Wer hier ein Kind ergaenzt, ergaenzt eine Spur -- sonst wandert es nach unten. `grid-auto-flow: column` waere die andere Loesung und ist ausdruecklich NICHT gewaehlt: dann bekaeme jedes kuenftige Kind still eine Spur, und eine Spur mehr verschiebt die Fluchtung des Suchfelds -- der Fehler waere derselbe, nur unsichtbarer. */ grid-template-columns: var(--nav-breite) minmax(0, 1fr) auto auto; align-items: center; /* KEIN gap: er sitzt zwischen den Spuren und haette das Suchfeld um genau diese 16 px hinter die Kante geschoben -- gemessen 120 statt 104. Der Abstand zur rechten Gruppe steht deshalb dort als eigenes Polster. */ gap: 0; padding: 10px var(--abstand-4) 10px 0; background: var(--farbe-karte); border-bottom: 1px solid var(--farbe-flaeche-rand); } /* Die Marke behaelt ihren Einzug -- er ist jetzt ihr eigener, nicht der der ganzen Leiste. */ .tafel-leiste .marke { margin-bottom: 0; padding-left: var(--abstand-4); } /* DIE MARKE VERLAESST IHRE SPUR NIE (Til, 14.08.2026: "in der mobilen Ansicht verdeckt das Suchsymbol das Logo"). ------------------------------------------------------------------------ GEMESSEN auf 412 px, vor dieser Regel: Kachelleiste (Spur 1) 0,0 – 44,0 Marke (Behaelter) 0,0 – 44,0 Wortmarke (Bild) 12,0 – 52,7 <- 8,7 px ausserhalb der Spur Lupe 44,0 – 88,0 <- steht auf diesem Ueberstand Nicht die Lupe stand zu weit links: sie beginnt korrekt an der Spurgrenze, genau wie es der Block weiter oben verlangt. Zu breit war die Marke. Der Einzug (--abstand-3, 12 px) plus das Bild (40,7 px) ergibt 52,7 -- und die Spur ist am Handy nur --nav-breite = 44 breit. Ein Bild kuerzt nicht wie Text, es laeuft heraus. Dasselbe galt zwischen 701 und 900 px, nur leiser: dort ist die Spur 58 und der Einzug --abstand-4 (20 px), macht 60,7 -- gemessen 2,7 px Ueberstand. Es war also nie ein reines Handy-Problem, es fiel dort nur auf. ZWEI URSACHEN, beide hier behoben: max-width ist die Wache, unabhaengig von jeder Spurbreite: was in der Spur steht, bleibt in der Spur. Wer spaeter --nav-breite aendert oder ein breiteres Logo einsetzt, bekommt ein kleineres Bild -- nicht eines, das auf dem Nachbarn liegt. margin-right stammt aus style.css und gilt dort zu Recht: auf den Anmeldeseiten steht hinter der Wortmarke noch ein Wort ("Praxisportal"), und das braucht Luft. In der Tafel-Leiste steht dort nichts -- die 5 px waren reiner Ueberhang und haben das Bild zusaetzlich aus der 44er-Spur gedrueckt. Ergebnis, gemessen auf 412 px: Wortmarke 1,6–42,3, erste Kachel darunter 2,0–41,0. Sie fluchten. */ .tafel-leiste .marke-bild { max-width: 100%; margin-right: 0; } /* Der Abstand, den vorher `gap` gemacht hat -- jetzt nur noch dort, wo er gebraucht wird: zwischen Suchfeld und rechter Gruppe. */ .tafel-leiste > .leisten-rechts, .tafel-leiste > .rechts { padding-left: 16px; } /* DATUM UND UHRZEIT: derselbe Block, andere Gewichtung (Briefing 9). ------------------------------------------------------------------------ Nicht ein anderes Format je Bildschirm -- dasselbe, nur unterschiedlich laut. Am Handy tritt die Zeitangabe hinter den Inhalt zurueck; auf einem 24- oder 27-Zoll-Schirm ist Platz da, und dort darf sie ihn nehmen. Die Groesse waechst in zwei Stufen (1400 / 1900), ab der zweiten kommt etwas Kontrast dazu. NUR Groesse und Gewicht -- der INHALT bleibt gleich: "Donnerstag, 07.08.2026" steht am Handy genauso da wie am 27-Zoeller, nur leiser. Das verlangt Briefing 9 ausdruecklich ("keine unterschiedlichen Formate oder Inhalte, nur unterschiedliche Groesse/Prominenz"), und es ist auch das Richtige: eine Angabe, die auf dem kleinen Schirm verschwindet, ist eine, die dort gefehlt hat. Die Stufen sind die Hausschwellen aus DESIGNSYSTEM.md, keine neuen. */ .tafel-leiste .rechts { margin-left: auto; font-size: var(--schrift-s); color: var(--farbe-text-gedaempft); /* Platz fuer den Hilfe-Knopf: der haengt fest oben rechts (position:fixed, right:14px, 34px breit) und lag im ersten Durchlauf ueber dem Datum -- "Dienstag, 04.08.2" stand da, der Rest darunter. Auf den uebrigen Seiten faellt es nicht auf, weil dort oben rechts nichts steht. */ padding-right: 44px; } .tafel-koerper { flex: 1; min-height: 0; display: flex; align-items: stretch; } .tafel-inhalt { flex: 1; min-width: 0; overflow: auto; padding: 20px 22px 32px; } /* --nav-breite: EIN Wert fuer zwei Regeln. Die Kopfzeile richtet ihr Suchfeld an dieser Kante aus (siehe .globale-suche-huelle weiter unten). Stuende die Zahl zweimal da, waere die Fluchtung nach der ersten Aenderung falsch -- und zwar unbemerkt, weil niemand die Kopfzeile prueft, wenn er die Leiste verschmaelert. */ :root { --nav-breite: 104px; } .kachelnav { width: var(--nav-breite); flex: none; background: var(--farbe-flaeche); border-right: 1px solid var(--farbe-flaeche-rand); padding: 10px var(--abstand-2); display: flex; flex-direction: column; gap: 6px; overflow-y: auto; scrollbar-width: thin; } /* Die Kachel übernimmt die Sprache der .bereich-zeile von der Startseite: Symbol, kurzer Name, Zähler in --status-erinnerung. Til hat sie am 03.08.2026 nach drei Entwürfen so entschieden. */ .kachelnav a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--abstand-1); /* UNVERAENDERT gegenueber Paket 4, und das ist Absicht. Der erste Entwurf gab dem Strich mit `padding-left: calc(var(--abstand-1) + var(--strich))` eigenen Platz, damit die Beschriftung nicht aus der Mitte steht. Er hat die Kachel damit um drei Pixel verschmaelert, und in einer 104-px-Leiste entscheiden drei Pixel: aus einer zweizeiligen Beschriftung werden zwei ("Kartenzahlung" kommt zu "Vereinbarungen" dazu). Zurueckgenommen. Der Strich liegt jetzt UEBER dem linken Innenabstand. Die Beschriftung sitzt damit rechnerisch 1,5 px aus der Mitte -- das sieht niemand, ein zusaetzlicher Zeilenumbruch schon. NACHGEMESSEN AM 06.08.2026 (Paket 8a): die erste Messung nannte "Dashboard" und "Zahlungen" und stimmte nicht. Sie entstand, waehrend --schrift-xs wegen eines nicht geschlossenen Kommentars gar nicht aufloeste -- die Beschriftung erbte 15 px statt 11, und fuenf Kacheln brachen um. Die Entscheidung bleibt dieselbe, die Zahlen sind neu. */ padding: 9px var(--abstand-1); /* 44 px ist die Tippgroesse, unter der ein Ziel am Touchgeraet unsicher wird -- und die Praxis arbeitet am iPad. Die Kachel kam mit 42 px knapp darunter, seit --schrift-xs am 06.08.2026 wieder aufloest und die Beschriftung von geerbten 15 px auf ihre 11 px zurueckging: die Kachel wurde durch die Reparatur vier Pixel FLACHER. min-height und nicht mehr Innenabstand: so steht die Zahl da, um die es geht, statt einer, aus der sie sich ergibt. */ min-height: 44px; text-decoration: none; /* KEINE Flaechenfarbe im Ruhezustand (06.08.2026, Paket 6). Die Leiste liegt selbst auf --farbe-flaeche; eine Kachel in derselben Farbe hat keinen eigenen Umriss mehr und zeigt nur noch Strich, Zeichen und Name. Vorher war jede Kachel eine Karte auf einer Flaeche -- vierzehn Rahmen uebereinander, wo einer gereicht haette. */ background: transparent; color: var(--farbe-text); /* transparent und nicht "kein Rand": sonst springt die Leiste beim Hover um zwei Pixel. */ border: 1px solid transparent; border-radius: var(--radius); transition: border-color 0.15s ease, background 0.15s ease; } /* ========================================================================= DER STRICH ========================================================================= Til, 06.08.2026 (Paket 6). Otl Aicher: jeder Funktionsbereich traegt eine feste eigene Farbe, und die zieht sich unveraendert durch die ganze Anwendung. Farbe ORIENTIERT -- sie fordert nicht auf und schmueckt nicht. DURCHGEHEND SICHTBAR, NICHT NUR AKTIV (ausdrueckliche Vorgabe) Ein Strich, den nur die aktive Kachel traegt, sagt "hier stehst du" -- das weiss man ohnehin. Erst wenn ihn ALLE tragen, wird die Leiste zur Karte: man lernt, dass Posteingang violett ist und Mahnwesen braun, und findet die Kachel danach ueber die Farbe statt ueber den Text. Genau deshalb aendert der Strich zwischen aktiv und inaktiv NICHTS -- nicht die Breite, nicht die Deckkraft. Die Deckkraft war der erste Entwurf und ist verworfen: vier der vierzehn Farben liegen unter 3:1 (Laborbelege 2,42:1). Sie halbiert haetten sie gar nicht mehr gezeigt -- ausgerechnet die vier, die es am noetigsten haben. WORAN MAN DANN DIE AKTIVE KACHEL ERKENNT An der FLAECHE, nicht am Strich: sie liegt auf --farbe-karte und hebt sich damit als einziges Feld aus der Leiste heraus, die Beschriftung traegt 600. Die uebrigen sind mit der Leiste eins. Ein Zustand, eine Auszeichnung. ::before UND NICHT border-left Ein linker Rand von 3 px neben 1 px an den anderen Seiten laesst die Ecken keilfoermig auslaufen, weil border-radius den Uebergang interpoliert. Das Pseudoelement liegt stattdessen ueber der Kontur bis an die Kante und bleibt oben wie unten gleich breit. --strich-farbe kommt aus [data-bereich="..."] in design-tokens.css, und das Attribut setzt globale-suche.js beim Bauen der Leiste (dataset.bereich, aus BACKEND_BEREICHE). WER KEINEN STRICH TRAEGT "Mehr" und die Hilfe. Beide sind