/* ═══════════════════════════════════════════════════════════════ GEHABility — Design-System Grundlage für alle Seiten. Farben aus dem GEHA-Auftritt, Abstände und Größen bewusst auf einer festen Skala, damit die Oberfläche zusammenhängend wirkt und nicht wie zusammengesetzte Formulare. ═══════════════════════════════════════════════════════════════ */ /* * ════════════════════════════════════════════════════════════════ * hidden gilt. Immer. * ════════════════════════════════════════════════════════════════ * * Das HTML-Attribut hidden bedeutet nur display:none aus dem Standard- * stylesheet des Browsers. Jede eigene Regel mit einem display schlaegt es -- * ohne Warnung, ohne dass es im Quelltext auffaellt. * * Am 11.10.2026 hat das zweimal zugeschlagen: * * - Im Postfach standen leerer Zustand und Nachricht gleichzeitig da. * - Auf dem iPad war die GANZE Seite nicht mehr anklickbar: Der Schleier * hinter der Navigation lag mit display:block, position:fixed und * inset:0 ueber allem. Unsichtbar wegen opacity:0, aber jeder Fingertipp * landete darauf. Von Muhammed gemeldet, und es haette jeden Patienten * am Tablet genauso getroffen. * * Eine Pruefung des Stylesheets fand danach sieben weitere Stellen, an denen * dieselbe Kollision moeglich war. Sie einzeln zu entschaerfen hiesse, beim * naechsten neuen Element wieder daran denken zu muessen. * * Deshalb hier einmal grundsaetzlich. Das !important ist an dieser einen * Stelle richtig: Es gibt keinen Fall, in dem etwas Verstecktes sichtbar sein * soll. */ [hidden] { display: none !important; } :root{ /* Marke */ --green:#103D00; --green-dark:#0A2A00; --green-mid:#245916; --green-light:#E9F0E5; /* * Neutrale Töne. * * --muted ist auf 7:1 gegen beide Untergründe gerechnet (8,2 auf Weiss, * 7,6 auf --bg) und erfüllt damit WCAG AAA, nicht nur AA. Der Preis dafür * ist ehrlich zu benennen: Der Ton liegt jetzt dicht an --ink-2, die * Abstufung zwischen „zweitrangig" und „beiläufig" trägt also nicht mehr * über die Helligkeit allein. * * Das ist Absicht und kein Versehen: Hierarchie über Grösse und Gewicht ist * ohnehin die robustere — --muted steht durchweg bei 11 bis 13 Pixel und * normalem Gewicht, --ink-2 bei 14 Pixel und 500. Wer schlecht sieht, * gewinnt dabei mehr, als die Gestaltung verliert. */ --ink:#14201A; --ink-2:#3D4A44; --muted:#45524B; --line:#E2E8DF; --line-strong:#CBD5C6; --bg:#F5F7F3; --card:#FFFFFF; /* Signale */ --red:#8E2A1E; --red-light:#FBECEA; --amber:#66490D; --amber-light:#FDF4E3; /* * Blau ist die Farbe fuer „liegt vor dir" — Termine, die noch kommen, * Hinweise ohne Handlungsdruck. Bewusst als eigene Familie aufgenommen und * nicht aus Rot geliehen: Rot und Gruen sind laut Design-DNA fuer den * Behandlungsstatus reserviert (erschienen / nicht erschienen). Wer den * Normalzustand rot faerbt, verbraucht die Warnfarbe fuer den Alltag, und * dann faellt die echte Warnung nicht mehr auf. */ --blau:#1A4E6E; --blau-mid:#2B6B92; --blau-light:#EAF2F7; /* Abstandsskala */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; /* * Schriftskala. Vorher standen 17 verschiedene Größen im Projekt, sieben * davon mit halben Pixeln (14.5, 13.5, 12.5 …). Halbe Pixel sind kein * Feinschliff, sondern ein Fehler: sie werden auf Displays ohne doppelte * Pixeldichte gerundet und wirken dort unscharf, und zwar je Browser * unterschiedlich. Acht ganzzahlige Stufen genügen für die gesamte * Anwendung — jede weitere Größe wäre Drift, keine Gestaltung. */ --t-2xs:11px; /* Versalien-Etiketten, Abzeichen */ --t-xs:12px; /* Nebentext, Meta */ --t-sm:13px; /* dichte Bedienelemente */ --t-base:14px; /* Fließtext, Eingaben, Navigation */ --t-md:15px; /* Kartentitel, h2 */ --t-lg:17px; /* Marke, Abschnittstitel */ --t-xl:22px; /* Seitentitel */ --t-2xl:26px; /* Kennzahlen */ /* * Zeilenhöhen. Vorher standen neun verschiedene Werte im Projekt * (1.15 bis 1.65) — dieselbe Drift wie zuvor bei den Schriftgrößen, nur * unauffälliger, weil man sie nicht sieht, sondern nur spürt. */ --lh-zahl:1.15; /* grosse Kennzahlen — eng, damit sie als Block wirken */ --lh-eng:1.3; /* dichte Bedienelemente, Kalendereinträge */ --lh-normal:1.5; /* Fließtext */ --lh-weit:1.65; /* längere Lesetexte: Nachrichten, Vertragstext */ /* * Bewegung. Eine Dauer für alles, was auf eine Eingabe antwortet, eine * längere für Ein- und Ausblenden. Das Easing ist bewusst kein „ease" — * beschleunigt anfangs kaum und bremst weich ab, wie bei iOS. */ --motion-schnell:120ms; --motion-ruhig:180ms; --motion-kurve:cubic-bezier(.32,.72,0,1); /* * Radienskala. Vorher gab es nur die beiden grossen Stufen — kleinere * Bauteile erfanden sich daraufhin eigene Werte: 4, 5, 6, 7, 8 und 9 Pixel * nebeneinander. Hauptnavigation (8), Unternavigation (8) und Ansichtswahl * (9) sind optisch dasselbe Bauteil und rundeten trotzdem unterschiedlich. * Einzeln sieht das niemand; zusammen ist es der Unterschied zwischen einem * System und gesammelten Einzelentscheidungen. */ --radius-xs:4px; /* Kalenderzellen, Balken, Fokusring */ --radius-sm:8px; /* Navigationspunkte, Menüeinträge, Termine, Kästchen */ --radius:10px; /* Eingabefelder, Schaltflächen */ --radius-lg:14px; /* Karten, Dialoge */ --radius-pille:100px; /* Abzeichen und Balken, vollständig gerundet */ --shadow-sm:0 1px 2px rgba(16,61,0,.06); --shadow:0 1px 3px rgba(16,61,0,.08), 0 8px 24px rgba(16,61,0,.06); --shadow-lg:0 12px 48px rgba(10,42,0,.18); /* Fokusring: eine Definition für die ganze Anwendung, siehe :focus-visible. */ --fokus:0 0 0 3px rgba(36,89,22,.32); --sidebar:236px; --sidebar-schmal:60px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif; font-size:var(--t-base); line-height:var(--lh-normal); color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; } a{color:var(--green);text-decoration:none} a:hover{text-decoration:underline} h1,h2,h3{margin:0;color:var(--green-dark);letter-spacing:-.011em;font-weight:650} h1{font-size:var(--t-xl)} h2{font-size:var(--t-md)} h3{font-size:var(--t-sm)} p{margin:0} /* * Tastaturbedienung. * * Vorher gab es im ganzen System genau eine Fokusregel, und Eingabefelder * setzten zusätzlich outline:none. Wer die Anwendung ohne Maus bedient — aus * Gewohnheit, wegen einer Sehbehinderung oder weil beim Aufnehmen eines * Termins eine Hand am Telefon ist — sah schlicht nicht, wo er gerade steht. * * :focus-visible statt :focus ist dabei wesentlich: der Ring erscheint nur bei * Tastaturbedienung, nicht nach einem Mausklick. Deshalb darf er kräftig sein, * ohne im Alltag zu stören. */ :focus-visible{ outline:2px solid var(--green-mid); outline-offset:2px; border-radius:var(--radius-xs); } /* Elemente mit eigenem Radius bekommen den Ring als Schatten, damit er der Form folgt statt sie zu überdecken. */ .btn:focus-visible,.btn-zweit:focus-visible,.btn-still:focus-visible,.btn-gefahr:focus-visible, button:focus-visible,.nav a:focus-visible,.konto-menu a:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, tr[tabindex]:focus-visible,.karte summary:focus-visible{ outline:none; box-shadow:var(--fokus); } /* * Bewegung respektiert die Systemeinstellung. Wer „Bewegung reduzieren" * aktiviert hat, tut das oft wegen Schwindel oder Migräne — Animationen sind * dann kein Detail, sondern ein körperliches Problem. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* ─── Anwendungsrahmen ─────────────────────────────────────── */ .app{display:flex;min-height:100vh} .sidebar{ width:var(--sidebar);flex-shrink:0; background:var(--card);border-right:1px solid var(--line); display:flex;flex-direction:column; position:sticky;top:0;height:100vh; } .sidebar-brand{ padding:var(--s5) var(--s5) var(--s4); font-size:var(--t-lg);font-weight:700;color:var(--green-dark);letter-spacing:-.02em; } .sidebar-brand small{display:block;font-size:var(--t-2xs);font-weight:500;color:var(--muted);letter-spacing:0;margin-top:2px} .nav{flex:1;overflow-y:auto;padding:0 var(--s3)} .nav-gruppe{margin-bottom:var(--s5)} .nav-gruppe > span{ display:block;padding:0 var(--s3) var(--s2); font-size:var(--t-2xs);font-weight:650;text-transform:uppercase;letter-spacing:.06em;color:var(--muted); } .nav a{ display:flex;align-items:center;gap:var(--s3); padding:8px var(--s3);margin-bottom:1px;border-radius:var(--radius-sm); color:var(--ink-2);font-size:var(--t-base);font-weight:500; transition:background var(--motion-schnell) var(--motion-kurve),color var(--motion-schnell) var(--motion-kurve); } .nav a:hover{background:var(--bg);color:var(--ink);text-decoration:none} .nav a.aktiv{background:var(--green-light);color:var(--green-dark);font-weight:600} .nav a svg{width:17px;height:17px;flex-shrink:0;opacity:.75} .nav a.aktiv svg{opacity:1} .sidebar-fuss-wrap{position:relative} .sidebar-fuss{ width:100%;padding:var(--s3) var(--s4);border-top:1px solid var(--line);border-left:none;border-right:none;border-bottom:none; display:flex;align-items:center;gap:var(--s3); background:none;font:inherit;text-align:left;cursor:pointer;color:inherit; transition:background var(--motion-schnell) var(--motion-kurve); } .sidebar-fuss:hover{background:var(--bg)} /* Konto-Menü: ruhig statt hektisch — leichtes Einblenden, keine harte Kante. */ .konto-menu{ display:none;position:absolute;left:var(--s3);right:var(--s3);bottom:calc(100% + 6px); background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);padding:6px;z-index:20; opacity:0;transform:translateY(4px);transition:opacity var(--motion-schnell) var(--motion-kurve),transform var(--motion-schnell) var(--motion-kurve); } .konto-menu.offen{display:block;opacity:1;transform:translateY(0)} .konto-menu a{ display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--radius-sm); font-size:var(--t-sm);font-weight:500;color:var(--ink-2); } .konto-menu a:hover{background:var(--bg);color:var(--ink);text-decoration:none} .konto-menu a svg{width:16px;height:16px;flex-shrink:0;opacity:.75} .konto-menu a.gefahr{color:var(--red)} .konto-menu a.gefahr:hover{background:var(--red-light)} .konto-menu-trenner{height:1px;background:var(--line);margin:5px 4px} .avatar{ width:30px;height:30px;border-radius:50%;flex-shrink:0; background:var(--green);color:#fff; display:flex;align-items:center;justify-content:center; font-size:var(--t-xs);font-weight:650; } .sidebar-fuss .wer{flex:1;min-width:0} .sidebar-fuss .wer b{display:block;font-size:var(--t-sm);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .sidebar-fuss .wer span{font-size:var(--t-2xs);color:var(--muted)} .inhalt{flex:1;min-width:0;display:flex;flex-direction:column} /* * Hauptnavigation auf Symbolbreite (.nav-schmal). * * Auf Seiten mit eigener Unternavigation standen zwei Menüs nebeneinander: * 236 Pixel Hauptnavigation plus 232 Pixel Unternavigation, also über 400 * Pixel, bevor überhaupt Inhalt beginnt. Neben dem Platz war das vor allem * eine Frage der Orientierung — bei zwei gleich aussehenden Listen ist nicht * mehr erkennbar, welche gerade die gültige Ebene ist. * * Zusammengefahren bleibt die Ortsangabe erhalten (das aktive Symbol ist * weiterhin hervorgehoben), die Aufmerksamkeit liegt aber auf der * Unternavigation. Bei Mauskontakt fährt sie wieder aus — und zwar ÜBER den * Inhalt, nicht neben ihn: Würde sie schieben, spränge die halbe Seite bei * jedem versehentlichen Überstreichen. * * Nur ab 861 Pixel: Darunter ist die Navigation ohnehin eine Schublade. */ @media (min-width:861px){ .app.nav-schmal .sidebar{ position:fixed;top:0;left:0;height:100vh;z-index:30; width:var(--sidebar-schmal); transition:width var(--motion-ruhig) var(--motion-kurve); overflow:hidden; } /* Platzhalter, damit der Inhalt nicht unter die Leiste rutscht */ .app.nav-schmal .inhalt{margin-left:var(--sidebar-schmal)} .app.nav-schmal .sidebar:hover, .app.nav-schmal .sidebar:focus-within{ width:var(--sidebar); box-shadow:var(--shadow); } /* * Was im schmalen Zustand verschwindet. * * display:none statt opacity:0 — mit blosser Transparenz belegt der Text * weiterhin Platz, die Verweise werden breiter als die 60 Pixel der Leiste, * und die Symbole werden am linken Rand abgeschnitten. Auf das Überblenden * wird deshalb bewusst verzichtet; die Breitenänderung trägt die Bewegung. */ .app.nav-schmal .nav-text, .app.nav-schmal .nav-gruppe > span, .app.nav-schmal .sidebar-brand small, .app.nav-schmal .sidebar-fuss .wer, .app.nav-schmal .sidebar-fuss > svg{ display:none; } .app.nav-schmal .sidebar:hover .nav-text, .app.nav-schmal .sidebar:focus-within .nav-text{display:inline} .app.nav-schmal .sidebar:hover .nav-gruppe > span, .app.nav-schmal .sidebar:focus-within .nav-gruppe > span, .app.nav-schmal .sidebar:hover .sidebar-brand small{display:block} .app.nav-schmal .sidebar:hover .sidebar-fuss .wer, .app.nav-schmal .sidebar:focus-within .sidebar-fuss .wer{display:block} .app.nav-schmal .sidebar:hover .sidebar-fuss > svg{display:inline} /* * Zusammengefahren bleibt nur die Bildmarke. * * Hier stand ::before{content:"G"} -- ein Kuerzel aus der Zeit, als es noch * kein Logo gab. Seit die Bildmarke daneben steht, erscheinen beide: ein * einzelner Buchstabe neben dem Zeichen, das ihn ersetzen sollte. Von * Muhammed am 11.10.2026 gemeldet: "Das G von GEHABility ist auch noch mit * drauf. Das sieht sehr unsauber aus." * * text-align zentriert hier ausserdem nichts: .sidebar-brand ist ein * Flex-Element, und dort entscheidet justify-content ueber die waagerechte * Lage. Das war der zweite Teil desselben Fehlers. */ .app.nav-schmal .sidebar-brand{ padding-left:0;padding-right:0; justify-content:center; } .app.nav-schmal .marke-lang{display:none} .app.nav-schmal .sidebar:hover .sidebar-brand, .app.nav-schmal .sidebar:focus-within .sidebar-brand{ justify-content:flex-start;padding-left:var(--s5);padding-right:var(--s5); } .app.nav-schmal .sidebar:hover .marke-lang, .app.nav-schmal .sidebar:focus-within .marke-lang{display:inline} /* Symbole mittig, solange keine Beschriftung daneben steht */ .app.nav-schmal .nav{padding:0 var(--s2)} .app.nav-schmal .nav a{gap:0;padding:9px 0;justify-content:center;white-space:nowrap} .app.nav-schmal .sidebar:hover .nav{padding:0 var(--s3)} .app.nav-schmal .sidebar:hover .nav a{gap:var(--s3);padding:8px var(--s3);justify-content:flex-start} .app.nav-schmal .sidebar-fuss{justify-content:center;padding-left:0;padding-right:0} .app.nav-schmal .sidebar:hover .sidebar-fuss{justify-content:flex-start;padding-left:var(--s4);padding-right:var(--s4)} /* Der gewonnene Platz kommt dem Inhalt zugute */ .app.nav-schmal .unterseite{grid-template-columns:210px 1fr} } .kopf{ background:var(--card);border-bottom:1px solid var(--line); padding:var(--s4) var(--s6); display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap; } .kopf .titel{flex:1;min-width:200px} .kopf .titel p{color:var(--muted);font-size:var(--t-sm);margin-top:2px} /* * Rücksprung über der Überschrift. Bewusst klein und ruhig: Er soll gefunden * werden, wenn man ihn sucht, und sonst nicht mit dem Titel um Aufmerksamkeit * ringen. Der Pfeil rückt beim Überfahren ein Stück nach links — dieselbe * Richtung, in die der Klick führt. */ .kopf .titel .zurueck{ display:inline-flex;align-items:center;gap:4px; margin-bottom:2px; color:var(--muted);font-size:var(--t-sm);font-weight:550; text-decoration:none; } .kopf .titel .zurueck svg{width:14px;height:14px;transition:transform var(--motion-schnell) var(--motion-kurve)} .kopf .titel .zurueck:hover{color:var(--ink)} .kopf .titel .zurueck:hover svg{transform:translateX(-2px)} .kopf .titel .zurueck:focus-visible{outline:var(--fokus);outline-offset:3px;border-radius:4px} .seite{padding:var(--s5) var(--s6);max-width:1180px;width:100%} /* * Navigation auf schmalen Geräten. * * Vorher wurde die Seitenleiste zu einer waagerechten Leiste, die seitlich * scrollte. Auf einem Tablet an der Rezeption waren damit drei von vierzehn * Punkten sichtbar, die Gruppentitel („Praxis", „Analyse", „Betrieb") wurden * zusätzlich ausgeblendet — wer Rechnungen oder Verträge suchte, musste erst * erraten, dass sich die Leiste überhaupt schieben lässt. * * Jetzt eine Schublade: ein Knopf im Seitenkopf fährt die vollständige, * gruppierte Navigation aus. Nichts ist mehr versteckt, und die Gliederung * bleibt dieselbe wie am grossen Bildschirm. */ .menue-knopf{display:none} .nav-schleier{display:none} @media (max-width:860px){ .menue-knopf{ display:flex;align-items:center;justify-content:center; width:38px;height:38px;flex-shrink:0;padding:0; border:1px solid var(--line-strong);border-radius:var(--radius); background:var(--card);color:var(--ink-2);cursor:pointer; } .menue-knopf svg{width:19px;height:19px} .menue-knopf:hover{background:var(--bg)} /* * Der Schleier hinter der ausgefahrenen Navigation. * * Am 11.10.2026 von Muhammed gemeldet: Auf dem iPad liess sich die ganze * Seite nicht mehr anklicken. Die Ursache stand hier: * * Das Element traegt im HTML das Attribut hidden. Das bedeutet aber nur * display:none aus dem Standardstylesheet des Browsers -- und jede eigene * Regel mit display:block schlaegt es. Unterhalb von 860 Pixeln lag also * eine bildschirmfuellende Flaeche ueber der gesamten Seite. Unsichtbar, * weil opacity:0, aber jeder Fingertipp landete darauf statt auf dem, was * darunter lag. * * Zwei Riegel dagegen, weil einer schon einmal nicht gereicht hat: * 1. hidden gilt wieder, ausdruecklich. * 2. Solange der Schleier nicht offen ist, nimmt er keine Eingaben an. * Selbst wenn ihn jemand kuenftig sichtbar schaltet, blockiert er * nichts mehr. */ .nav-schleier[hidden]{display:none} .nav-schleier{ display:block;position:fixed;inset:0;z-index:40; background:rgba(10,42,0,.32); opacity:0;pointer-events:none; transition:opacity var(--motion-ruhig) var(--motion-kurve); } .nav-schleier.offen{opacity:1;pointer-events:auto} .sidebar{ position:fixed;top:0;left:0;bottom:0;height:100dvh; width:min(280px,84vw);z-index:50; border-right:1px solid var(--line); transform:translateX(-100%); transition:transform var(--motion-ruhig) var(--motion-kurve); box-shadow:var(--shadow-lg); } .sidebar.offen{transform:translateX(0)} .app{flex-direction:row} .sidebar-brand{padding:var(--s4) var(--s4) var(--s3)} .kopf,.seite{padding-left:var(--s4);padding-right:var(--s4)} } /* ─── Karten ───────────────────────────────────────────────── */ .karte{ background:var(--card);border:1px solid var(--line); border-radius:var(--radius-lg);box-shadow:var(--shadow-sm); margin-bottom:var(--s5);overflow:hidden; } .karte-kopf{ padding:var(--s4) var(--s5);border-bottom:1px solid var(--line); display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap; } .karte-kopf h2{flex:1;min-width:120px} .karte-kopf .hinweis{font-size:var(--t-xs);color:var(--muted);width:100%} /* Ein
-Element als aufklappbare Karte: die Kopfzeile bleibt sichtbar und ist der Klickbereich, der Körper klappt ein/aus. Für sekundäre Bereiche gedacht (Haussätze, offene Abrechnungen) — sie sollen zur Verfügung stehen, ohne die Übersicht dauerhaft zu füllen. */ .karte > summary.karte-kopf{cursor:pointer} .karte > summary.karte-kopf::-webkit-details-marker{display:none} .karte > summary.karte-kopf::before{ content:'';width:7px;height:7px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted); transform:rotate(-45deg);transition:transform var(--motion-ruhig) var(--motion-kurve);margin-right:2px;flex-shrink:0; } .karte[open] > summary.karte-kopf::before{transform:rotate(45deg)} /* Schlichte Aufklapp-Zeile in Formularen — z. B. "Anschrift, weitere Kontakte" beim Patienten anlegen. Bewusst zurückhaltender als .karte > summary: das hier ist ein Feld unter mehreren, keine eigene Sektion. */ details:not(.karte) > summary{ cursor:pointer;font-size:var(--t-sm);font-weight:560;color:var(--green-mid); padding:4px 0;list-style:none;display:flex;align-items:center;gap:6px; } details:not(.karte) > summary::-webkit-details-marker{display:none} details:not(.karte) > summary::before{ content:'';width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor; transform:rotate(-45deg);transition:transform var(--motion-ruhig) var(--motion-kurve);flex-shrink:0; } details:not(.karte)[open] > summary::before{transform:rotate(45deg)} details:not(.karte) > summary:hover{color:var(--green-dark)} /* Gruppenüberschrift innerhalb einer Liste, z. B. Partner nach Art gebündelt */ .gruppen-kopf{ padding:var(--s3) var(--s5) var(--s2);font-size:var(--t-xs);font-weight:650; text-transform:uppercase;letter-spacing:.04em;color:var(--muted); } .gruppen-kopf:not(:first-child){border-top:1px solid var(--line);margin-top:var(--s2)} .karte-koerper{padding:var(--s5)} .karte-koerper > p:first-child{margin-top:0} /* Kennzahlen */ .kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s4);margin-bottom:var(--s5)} /* * Ausführliche Kacheln (Wert, Bezeichnung UND Erklärzeile) brauchen mehr Platz * als die einfachen. Mit derselben Mindestbreite von 150px standen im Dashboard * sechs Kacheln nebeneinander, jede rund 150px schmal — die Bezeichnung brach * über zwei, die Erklärung über vier Zeilen. Lieber eine Kachel umbrechen * lassen als jede einzelne unlesbar quetschen. */ .kennzahlen.ausfuehrlich{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))} .kennzahl{ background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:var(--s4) var(--s5);box-shadow:var(--shadow-sm); } .kennzahl b{display:block;font-size:var(--t-2xl);font-weight:680;color:var(--green-dark);letter-spacing:-.02em;line-height:var(--lh-zahl)} .kennzahl span{display:block;font-size:var(--t-xs);color:var(--muted);margin-top:2px} /* * Zahlen, aus denen unmittelbar Arbeit folgt, heben sich ab — aber nur, wenn * tatsächlich etwas offen ist. Bei null bleibt die Kachel unauffällig: Eine * dauerhaft farbige Warnung wird nach zwei Tagen nicht mehr gesehen. */ .kennzahl.warnend{border-color:var(--amber);background:var(--amber-light)} .kennzahl.warnend b{color:var(--amber)} /* * „Liegt noch vor dir" — kein Problem, nur der Tag, der kommt. Deshalb Blau * und kein Rot: Diese Kachel steht jeden Morgen auf einer hohen Zahl. */ .kennzahl.vorschau{border-color:var(--blau-mid);background:var(--blau-light)} .kennzahl.vorschau b{color:var(--blau)} /* * Nichts mehr offen. Die einzige Kachel, die sich freuen darf — und sie tut es * nur, wenn wirklich nichts aussteht, sonst waere Gruen wertlos. */ .kennzahl.erledigt{border-color:var(--green-mid);background:var(--green-light)} .kennzahl.erledigt b{color:var(--green-mid)} /* * Ein 3px-Streifen oben traegt die Farbe, ohne die Kachel einzufaerben: Die * Zahl bleibt das Lauteste, die Farbe ordnet nur ein. Das ist der Unterschied * zwischen „edel" und „bunt". */ .kennzahl{position:relative;overflow:hidden} .kennzahl::before{ content:"";position:absolute;inset:0 0 auto 0;height:3px; background:var(--line-strong); } .kennzahl.vorschau::before{background:var(--blau-mid)} .kennzahl.warnend::before{background:var(--amber)} .kennzahl.erledigt::before{background:var(--green-mid)} /* Dashboard-Variante: Wert, Bezeichnung und eine erklärende Zeile darunter. Die dritte Zeile ist Absicht — „62 %" allein sagt nicht, wovon. */ .kennzahl .wert{font-size:var(--t-2xl);font-weight:680;color:var(--green-dark);letter-spacing:-.02em;line-height:var(--lh-zahl);margin-top:0} .kennzahl .bez{font-size:var(--t-sm);font-weight:560;color:var(--ink-2);margin-top:2px} .kennzahl .detail{font-size:var(--t-2xs);color:var(--muted);margin-top:4px;line-height:var(--lh-eng)} /* Waagerechter Anteilsbalken, z. B. Auslastung je Behandler */ .balken{flex:1;height:8px;border-radius:var(--radius-pille);background:var(--bg);overflow:hidden;min-width:60px} .balken > div{height:100%;background:var(--green-mid);border-radius:var(--radius-pille)} /* Verlauf: ein Balken je Tag bzw. Monat. Der dunkle Sockel ist der online gebuchte Anteil — so ist beides in einem Balken lesbar, ohne Legende. */ .verlauf{display:flex;align-items:flex-end;gap:3px;height:150px;overflow-x:auto;padding-bottom:2px} .verlauf-spalte{flex:1;min-width:14px;display:flex;flex-direction:column;justify-content:flex-end;height:100%;gap:5px} .verlauf-balken{ width:100%;background:var(--green-light);border-radius:var(--radius-xs) 4px 0 0; min-height:0;display:flex;flex-direction:column;justify-content:flex-end; } .verlauf-online{width:100%;background:var(--green-mid);border-radius:0 0 4px 4px} .verlauf-spalte > span{font-size:var(--t-2xs);color:var(--muted);text-align:center;white-space:nowrap} /* * Einfarbige Balken für Verteilungen ohne Aufteilung — etwa die Ausfälle nach * Wochentag. Der helle Grundton des Buchungsverlaufs ist dort nur der * Hintergrund für den dunklen Onlineanteil; ohne diesen Anteil bleibt ein * Balken übrig, den man kaum sieht. */ .verlauf.einfarbig .verlauf-balken{background:var(--green-mid)} /* ─── Tabellen ─────────────────────────────────────────────── */ .tabelle-huelle{overflow-x:auto} table{width:100%;border-collapse:collapse;font-size:var(--t-base)} th{ text-align:left;padding:10px var(--s5); font-size:var(--t-2xs);font-weight:650;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); background:var(--bg);border-bottom:1px solid var(--line);white-space:nowrap; } td{padding:12px var(--s5);border-bottom:1px solid var(--line);vertical-align:middle} tbody tr:last-child td{border-bottom:none} tbody tr{transition:background var(--motion-schnell) var(--motion-kurve)} tbody tr:hover{background:var(--bg)} td.rechts,th.rechts{text-align:right} /* * Tabellen auf schmalen Geräten. * * Eine Tabelle mit fünf Spalten passt nicht in 375 Pixel — sie scrollt dann * seitwärts, und was rechts steht, existiert für den Benutzer praktisch nicht. * Genau dort stehen aber oft Betrag, Status oder die Aktion. Am Empfangstresen * mit einem Tablet ist das der Normalfall, nicht die Ausnahme. * * Statt 48 Tabellen einzeln umzubauen: Jede Zeile wird zur Karte, jede Zelle * zu einer Zeile „Spaltenname — Wert". Den Spaltennamen holt sich die Zelle * aus dem zugehörigen (siehe _layout_ende.php); ohne ihn bliebe eine * nackte Zahl übrig, die niemand einordnen kann. * * Eine künftige Tabelle bekommt das Verhalten automatisch — es hängt am * Baustein, nicht an der einzelnen Seite. */ @media (max-width:640px){ .tabelle-huelle{overflow-x:visible} .tabelle-huelle table, .tabelle-huelle tbody, .tabelle-huelle tr, .tabelle-huelle td{display:block;width:100%} .tabelle-huelle thead{display:none} .tabelle-huelle tr{ border:1px solid var(--line);border-radius:var(--radius); margin-bottom:var(--s3);padding:var(--s3) var(--s4);background:var(--card); } .tabelle-huelle tbody tr:last-child{margin-bottom:0} .tabelle-huelle td{ border:none;padding:5px 0; display:flex;align-items:baseline;gap:var(--s3);justify-content:space-between; text-align:right; } .tabelle-huelle td::before{ content:attr(data-spalte); color:var(--muted);font-size:var(--t-xs);font-weight:560; text-align:left;flex:0 0 auto; } .tabelle-huelle td:empty{display:none} /* Die erste Zelle trägt meist den Namen — volle Breite, keine Beschriftung. */ .tabelle-huelle td:first-child{ justify-content:flex-start;text-align:left; font-size:var(--t-base);padding-top:0;padding-bottom:var(--s2); } .tabelle-huelle td:first-child::before{display:none} /* Der Hauptlink der Karte soll die volle Breite treffbar machen — ein 21 Pixel hoher Textlink ist mit dem Finger kaum zu erwischen. */ .tabelle-huelle td:first-child > a{display:block;padding:3px 0} /* Auch Verweise in den übrigen Zellen bekommen Fingerhöhe. */ .tabelle-huelle td > a{min-height:24px;display:inline-flex;align-items:center} .tabelle-huelle tr.klickbar{cursor:pointer} } /* * Klickbare Tabellenzeilen. * * Vorher lag auf der Zeile ein onclick="location.href=…". Das sieht mit der * Maus richtig aus und ist sonst in jeder Hinsicht falsch: die Zeile ist mit * der Tastatur nicht erreichbar, ein Screenreader kündigt keinen Link an, * Cmd-Klick öffnet keinen neuen Tab, Rechtsklick bietet nichts an — und wer * einen Namen zum Kopieren markieren will, landet stattdessen auf der * Unterseite. * * Stattdessen trägt die erste Zelle einen echten , dessen Klickfläche sich * per Pseudoelement über die ganze Zeile legt. Damit stimmt die Semantik, und * alles, was ein Link kann, funktioniert wieder. */ tr.klickbar{position:relative} tr.klickbar .zeile-link::after{content:"";position:absolute;inset:0;z-index:1} tr.klickbar .zeile-link{color:inherit;text-decoration:none} tr.klickbar:hover .zeile-link{text-decoration:none} /* Weitere Bedienelemente in der Zeile müssen über der Klickfläche liegen. */ tr.klickbar a:not(.zeile-link),tr.klickbar button,tr.klickbar input,tr.klickbar label{position:relative;z-index:2} /* Der Fokusring gehört um die ganze Zeile, nicht nur um den Text. */ tr.klickbar:has(.zeile-link:focus-visible){box-shadow:inset var(--fokus);border-radius:var(--radius)} tr.klickbar .zeile-link:focus-visible{outline:none} /* Aktuell geöffnete Zeile, z. B. die gerade gelesene Nachricht im Postfach. */ tr.klickbar.offen,tr.klickbar.offen:hover{background:var(--green-light)} .punkt-ungelesen{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green)} /* ─── Öffentliche Seiten (Buchung, Portal, Fehlerseiten) ───── */ .oeffentlich-huelle{max-width:640px;margin:0 auto;padding:var(--s6) var(--s4)} .oeffentlich-marke{ text-align:center;margin-bottom:var(--s5); font-size:var(--t-sm);font-weight:650;color:var(--muted); letter-spacing:.03em;text-transform:uppercase; } /* ─── Checkliste abarbeiten ────────────────────────────────── */ .sop-zeile-form{margin:0} .sop-zeile{ /* justify-content ausdrücklich: