/* Ergänzungen zum übernommenen Grundstil und das dunkle Farbschema. Alles, was schon in style.css steht, wird dort genutzt und nicht hier nachgebaut. */ /* ===================================================================== Dunkles Farbschema Palette aus dem Bewerbermanagement (jobfeed/static/style.css). Dunkel ist die Voreinstellung und steht deshalb direkt im :root -- so gibt es beim Laden kein kurzes Aufblitzen einer hellen Seite. Wer lieber hell arbeitet, setzt ueber den Umschalter im Kopf data-thema="hell" auf ; ein winziges Skript im jeder Seite liest die Wahl aus dem Sitzungsspeicher, bevor der Stil greift. Uebersetzt werden die Variablen von style.css. Ein paar Regeln dort setzen Farben direkt statt ueber Variablen -- die sind weiter unten einzeln nachgezogen. ===================================================================== */ :root { --bg:#12171F; --surface:#1A212B; --ink:#E6EBF2; --ink-soft:#93A1B5; --line:#2C3644; /* Akzent hell auf dunklem Grund. --blue-deep ist hier NICHT dunkler, sondern kraeftiger: Auf dunklem Untergrund liest sich der Hover-Zustand als »mehr Farbe«, nicht als »weniger Licht«. */ --blue:#60A5FA; --blue-deep:#93C5FD; --blue-tint:#1B2A41; --yellow:#FCD34D; --yellow-ink:#FCD34D; --yellow-tint:#3A2F0B; --green:#86EFAC; --green-ink:#86EFAC; --green-tint:#14351F; --red:#FCA5A5; --red-tint:#3D1618; --lightblue:#7DD3FC; --purple:#C4A0C2; --gray-ink:#93A1B5; --gray-tint:#232B36; --gray-tint-0:rgba(35,43,54,0); /* Eigene Variablen fuer das, was style.css hart gesetzt hat. */ --eingabe-bg:#141A23; --auf-akzent:#0B1017; /* Text auf gefuellten Akzentflaechen */ --schatten:rgba(0,0,0,.45); /* Logo. Das Navy des Originals verschwindet auf dunklem Grund — hier hellt es auf. Die vier Akzentfarben des Rings bleiben unveraendert, sie tragen die Wiedererkennung. --logo-papier ist die Schrift auf dem Dokument. */ --logo-navy:#9CC5EC; --logo-papier:#12171F; } :root[data-thema="hell"] { --bg:#F4F7FA; --surface:#FFFFFF; --ink:#17262B; --ink-soft:#5A6B70; --line:#DFE6EC; --blue:#003E77; --blue-deep:#002C55; --blue-tint:#E4EDF6; --yellow:#FFD405; --yellow-ink:#8F7400; --yellow-tint:#FFF7D1; --green:#4DAF45; --green-ink:#2F7A29; --green-tint:#E7F5E5; --red:#B2452F; --red-tint:#F9E9E5; --lightblue:#70CAF3; --purple:#A862A4; --gray-ink:#5A6B70; --gray-tint:#ECEFF0; --gray-tint-0:rgba(236,239,240,0); --eingabe-bg:#FFFFFF; --auf-akzent:#FFFFFF; --schatten:rgba(23,38,43,.14); --logo-navy:#003E77; --logo-papier:#FFFFFF; } /* Dialoge über die Fenster legen. Im übernommenen Stil liegen Dialoge auf 200 und Flächenfenster auf 250 — dort gab es nur ein Fenster, aus dem heraus selten ein Dialog kam. Hier ist das der Regelfall: Haus anlegen, Konto anlegen, Passwort setzen, Sicherung bestätigen, alles öffnet Dialoge aus dem Einstellungsfenster heraus. Auf 200 erschienen sie dahinter und waren erst sichtbar, wenn man das Fenster schloss. */ .dialog-huelle { z-index: 400; } /* Der Diagramm-Hinweis lag auf 300 und würde sonst über dem Dialog schweben. */ .chart-tooltip { z-index: 380; } /* --- Logo --- */ .logo { display: flex; align-items: center; gap: 11px; } /* Kopfleiste: Bildmarke als SVG, Wortmarke als echter Text. Das Lockup einfach zu verkleinern ging nicht — dort bestimmt der Ring die Hoehe, und die Schrift fiel auf vierzehn Pixel zusammen. So laesst sich beides unabhaengig setzen. */ .logo .logo-zeichen { display: block; height: 36px; width: 36px; flex: 0 0 auto; } .logo .logo-wort { font-family: Arial, Helvetica, sans-serif; /* wie im Lockup */ font-size: 20px; font-weight: 700; letter-spacing: .035em; line-height: 1; color: var(--logo-navy); white-space: nowrap; /* nie umbrechen */ } @media (max-width: 900px) { .logo .logo-zeichen { height: 32px; width: 32px; } .logo .logo-wort { font-size: 17px; } } /* Ganz schmal: Nur noch die Bildmarke, die Wortmarke wuerde die Navigation verdraengen. */ @media (max-width: 560px) { .logo .logo-wort { display: none; } } /* Anmeldeseite: dort steht das vollstaendige Lockup gross und mittig. */ .login-innen .logo { justify-content: center; margin-bottom: 18px; } .login-innen .logo svg { display: block; height: 84px; width: auto; max-width: 100%; } /* Auf den Folgeseiten kleiner: Dort traegt die eigene Ueberschrift den Inhalt, das Logo ordnet nur ein. */ .login-innen .logo.klein { margin-bottom: 10px; } .login-innen .logo.klein svg { height: 54px; } /* --- Stellen, an denen style.css die Farbe direkt setzt --- */ input, select, textarea { background: var(--eingabe-bg); } /* Weisser Text auf hellblauem Grund waere im Dunkelmodus kaum lesbar. Auf gefuellten Akzentflaechen steht deshalb die dunkle Schriftfarbe -- im hellen Schema ist --auf-akzent wieder weiss, die Regeln bleiben gleich. */ button.primaer, button.primaer:hover, .btn-link.primaer-link, .btn-link.primaer-link:hover, .btn-weiter:hover, .pdf-tab.aktiv, .pdf-tab.aktiv:hover, .mnav button.active, #wahlmodus.aktiv, #schrittliste li.erledigt .haken { color: var(--auf-akzent); } .karte, .tile.gross, .tabellen-karte, .dialog-kasten, .editor-kasten { box-shadow: 0 1px 3px var(--schatten); } /* Der QR-Code bleibt auf weissem Grund -- ein dunkel hinterlegter Code laesst sich von vielen Authenticator-Apps nicht einlesen. */ .qr-feld { background: #fff; } /* PDF-Vorschau: Der eingebettete Betrachter bringt seinen eigenen weissen Seitenhintergrund mit, der Rahmen darf hier nicht dunkel sein. */ .vorschau-rahmen { background: #fff; } /* ===================================================================== Einstellungsfenster (verwaltung.js) Ein überlagerndes Fenster statt eigener Seiten: Konten, Protokoll und Anbindungen werden selten gebraucht und haben die Hauptnavigation nur vollgemacht. Breiter und höher als der Bausteineditor, weil die Benutzertabelle und das Protokoll Platz brauchen. ===================================================================== */ /* So breit wie der Seiteninhalt (main: 1300px mit 24px Rand) und so hoch wie das sichtbare Bild. Aus dem Betrieb, 21.09.2026: »zu klein und zu voll«. */ .verwaltung-kasten { width: min(1252px, 100%); height: 92vh; } .verwaltung-layout { flex: 1; min-height: 0; align-items: stretch; margin: 0; padding: 16px 20px 20px; gap: 20px; } .verwaltung-layout .mnav { position: static; overflow-y: auto; width: 220px; } .verwaltung-layout .mnav-body { overflow-y: auto; padding-right: 4px; } /* Überschrift über einer Gruppe von Unterpunkten. Sie muss sich deutlich von den Einträgen unterscheiden: Beide in derselben gedämpften Farbe zu setzen, ließ offen, was sich anklicken lässt. Die Überschrift bleibt zurückhaltend und bekommt eine Trennlinie, die Einträge stehen in der normalen Textfarbe. */ .mnav-gruppe { font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: color-mix(in srgb, var(--ink-soft) 70%, transparent); padding: 8px 12px 5px; margin-top: 12px; border-top: 1px solid var(--line); cursor: default; user-select: none; } .mnav-gruppe:first-child { margin-top: 0; border-top: none; padding-top: 2px; } /* Einträge lesen sich als anklickbar: normale Textfarbe statt gedämpft. */ .verwaltung-layout .mnav button { color: var(--ink); } .verwaltung-layout .mnav button:hover { background: var(--blue-tint); color: var(--blue); } .verwaltung-layout .mnav button.active { color: var(--auf-akzent); } /* Das Protokoll ist breiter als das Fenster — es scrollt in sich, statt das ganze Fenster in die Breite zu ziehen. */ .protokoll-rahmen { overflow-x: auto; margin-top: 10px; } .protokoll-rahmen .datentabelle { min-width: 900px; } .verwaltung-layout .karte { margin-bottom: 16px; } .verwaltung-layout .karte:last-child { margin-bottom: 0; } @media (max-width: 820px) { .verwaltung-kasten { height: 92vh; } .verwaltung-layout { flex-direction: column; gap: 10px; } .verwaltung-layout .mnav { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 8px; } .verwaltung-layout .mnav button { width: auto; white-space: nowrap; } .mnav-gruppe { display: none; } } /* Umschalter im Kopf */ .thema-knopf { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 8px; padding: 5px 9px; font-size: 14px; line-height: 1; } .thema-knopf:hover { border-color: var(--blue); color: var(--blue); } /* ===================================================================== Tagesliste — eigene Bildsprache Bewusst ohne Kacheln, Karten und Standardtabelle. Die übrigen Werkzeuge des Hauses haben alle dasselbe Stylesheet geerbt und sehen sich dadurch zum Verwechseln ähnlich; wer sie im Vorstand nebeneinander sieht, kann sie nicht auseinanderhalten. Stattdessen: Zeilen mit farbigem Risikobalken, Zahlen in Fließtext statt in Kacheln, Trennlinien statt Rahmen. Das ist nicht nur anders, es passt auch besser zur Aufgabe — die Tagesliste ist eine Arbeitsliste, kein Bericht. ===================================================================== */ /* --- Kopfzeile: die Lage in einem Satz, nicht in fünf Kacheln --- */ .tages-kopf { padding: 6px 0 22px; border-bottom: 2px solid var(--line); margin-bottom: 4px; } .tages-datum { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } .tages-satz { font-family: var(--font-display); font-size: clamp(21px, 2.4vw, 30px); font-weight: 700; line-height: 1.28; margin-top: 6px; max-width: 30em; } .tages-satz .zahl { color: var(--blue); font-variant-numeric: tabular-nums; } .tages-satz .zahl.dringend { color: var(--red); } .tages-satz .zahl.ruhig { color: var(--green-ink); } .tages-zusatz { margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); } .tages-zusatz a { color: var(--blue); } /* Wie alt der Auszug ist -- und in Rot, wenn ein neuer faellig ist. Steht fuer alle da, nicht nur fuer den, der einspielt. */ .stand-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; font-size: 13px; color: var(--ink-soft); } .stand-zeile.faellig #stand-alter { color: var(--red); font-weight: 600; } .stand-zeile .faellig { color: var(--red); font-weight: 600; } .liegend-bruecke { margin-top: 4px; font-size: 12.5px; color: var(--ink-soft); } /* »liegt gerade« -- die Spalte aus der Fallliste. Sie steht neben den Auszugszahlen und ist als andere Herkunft erkennbar: eigene Trennlinie, anklickbar nur dort, wo jemand liegt. */ .liegend-spalte { border-left: 1px solid var(--line); } th.liegend-spalte.ohne { color: var(--ink-soft); opacity: .55; } td.liegend-spalte.anklickbar { color: var(--blue); font-weight: 600; cursor: pointer; } td.liegend-spalte.anklickbar:hover { text-decoration: underline; } .stand-trenner { color: var(--ink-soft); } /* Die Station: wer gerade liegt. Jede Zeile ein Fall, ein Klick setzt den Fallbezug; rot, wo der Verlaufseintrag die Entscheidung traegt. */ .station-karte { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } /* Der Klappkopf: Pfeil, Überschrift, Zahl -- ein Knopf, der wie eine Überschrift aussieht. Zugeklappt bleibt er stehen und sagt, wie viel darunter liegt. */ .klapp-kopf { display: flex; align-items: baseline; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-align: left; } .klapp-kopf h3 { margin: 0; font-size: 15px; } .klapp-pfeil { font-size: 11px; color: var(--ink-soft); width: 10px; } .klapp-zahl { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .klapp-kopf:hover h3, .klapp-kopf:focus-visible h3 { color: var(--blue); } .klapp-kopf:focus { outline: none; } .klapp-kopf:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .station-stand { font-size: 12px; color: var(--ink-soft); margin: 2px 0 8px; } .station-liste { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; } .station-eintrag { text-align: left; width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; } .station-eintrag:hover { box-shadow: var(--hebung); border-color: var(--blue); } .station-eintrag.offen { border-color: var(--blue); } .station-eintrag.dringend { border-left: 3px solid var(--red); } .station-kopf { display: flex; justify-content: space-between; width: 100%; gap: 8px; } .station-station { font-size: 11.5px; color: var(--ink-soft); white-space: nowrap; } .station-zeile { width: 100%; font-size: 12px; color: var(--ink-soft); } /* Mehr zum Fall: ein Streifen über der Schreibfläche, zu, solange niemand fragt. Knapp gehalten -- wer schreibt, braucht die Zeile darunter. */ /* Ein Feld ueber die ganze Reihe -- die Klinik steht unter Haus und Station, nicht daneben: Sie beantwortet eine andere Frage. */ .feld-breit { flex: 1 1 100%; } /* Der QR-Code beim Einrichten des zweiten Faktors. Weiss auch im dunklen Thema: Ein Scanner braucht Kontrast, kein Farbschema. */ .qr-rahmen { display: flex; justify-content: center; margin: 8px 0 6px; } .qr-rahmen img { width: 180px; height: 180px; background: #fff; padding: 8px; border-radius: 8px; } .hinweis.geheim { word-break: break-all; font-size: 11px; } /* Ein Jahr, das noch laeuft: Die Quote steht auf wenigen Entscheidungen. */ .jahr-vorlaeufig { margin: 0 0 14px; padding: 8px 12px; border-radius: 8px; background: var(--red-tint); color: var(--ink); font-size: 12.5px; } .jahr-vorlaeufig b { font-weight: 600; } .unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Das Einstellungsmenü: Gruppen als Schalter, Einträge darunter. */ .mnav-gruppe { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 8px; border: 0; background: none; cursor: pointer; text-align: left; } .mnav-gruppe::before { content: "\25b8"; font-size: 9px; color: var(--ink-soft); transition: transform .15s; } .mnav-gruppe.offen::before { transform: rotate(90deg); } .mnav-gruppe > span:first-of-type { flex: 1; } .mnav-zahl { font-size: 11px; color: var(--ink-soft); font-weight: 400; } .mnav-eintraege { display: flex; flex-direction: column; } /* Der zweite Weg in die Wissensbasis: eine gegliederte Unterlage. */ .import-datei { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: flex-end; margin: 10px 0 4px; } .import-datei label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } /* Bausteine oder Beispiele -- zwei Sichten auf dasselbe Fenster. */ .baustein-wahl { display: flex; gap: 6px; margin: 8px 0 4px; } .wahlknopf { padding: 4px 10px; border-radius: 999px; font-size: 12px; border: 1px solid var(--line); background: none; color: var(--ink-soft); cursor: pointer; } .wahlknopf.aktiv { background: var(--blue); border-color: var(--blue); color: #fff; } /* Prognose: erst eingrenzen, dann rechnen. */ .prognose-filter { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin: 0 0 14px; } .prognose-filter label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); } .prognose-filter select { min-width: 190px; } .filter-zahl { font-size: 12px; color: var(--ink-soft); padding-bottom: 6px; } /* Dass gearbeitet wird, muss man sehen. Der Balken laeuft, ohne einen Fortschritt zu behaupten, den niemand kennt -- er zeigt, dass etwas passiert, und der Satz darunter sagt, was. */ .laedt { margin: 12px 0 16px; } .laedt-balken { height: 4px; border-radius: 2px; background: var(--gray-tint); overflow: hidden; } .laedt-balken span { display: block; width: 35%; height: 100%; border-radius: 2px; background: var(--blue); animation: laedt-lauf 1.1s ease-in-out infinite; } @keyframes laedt-lauf { 0% { margin-left: -35%; } 100% { margin-left: 100%; } } .laedt-text { margin: 6px 0 0; font-size: 12px; color: var(--ink-soft); } .blass { opacity: .45; transition: opacity .15s; } .feld-zusatz { font-weight: 400; color: var(--ink-soft); font-size: 11px; } /* Der Hinweis am festgelegten Haus steht in einer Zeile UNTER dem Feld, nicht daneben -- sonst drueckt er das Auswahlfeld zusammen. */ #haus-festgelegt { display: block; margin-top: 3px; text-transform: none; letter-spacing: 0; white-space: nowrap; } .details-knopf { margin-left: auto; padding: 0; border: 0; background: none; color: var(--blue); font: inherit; font-size: 12px; cursor: pointer; } .details-knopf:hover { text-decoration: underline; } .falldetails { margin: 6px 0 10px; padding: 8px 10px; border-radius: 8px; background: var(--gray-tint); font-size: 12.5px; color: var(--ink-soft); } .details-reihe { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-bottom: 6px; } .details-paar { display: flex; gap: 5px; align-items: baseline; } .details-paar b { color: var(--ink); } .details-zeile { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; } .details-titel { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); white-space: nowrap; } .details-wert { color: var(--ink); } /* Was ein Kürzel bedeutet -- leiser als es selbst, aber lesbar. */ .details-zusatz { color: var(--ink-soft); } /* Textmarken der Station -- NICHT `.marke`: das ist ein runder Zaehler mit fester Groesse, in dem jeder Text zu einem Punkt zusammenfaellt. */ .station-marke { display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 11px; font-weight: 600; line-height: 1.5; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; background: var(--gray-tint); color: var(--ink-soft); } .station-marke.warnung { background: var(--yellow-tint); color: var(--yellow-ink); } .station-marke.fehler { background: var(--red-tint); color: var(--red); } .station-marke.unklar { background: var(--gray-tint); color: var(--ink-soft); } /* --- Messlatte: Verteilung als ein durchgehender Balken --- */ .messlatte { display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin: 16px 0 8px; background: var(--gray-tint); } .messlatte span { display: block; } .messlatte .rot { background: var(--red); } .messlatte .gelb { background: var(--yellow); } .messlatte .gruen { background: var(--green); } .messlatte .grau { background: var(--ink-soft); opacity: .35; } .messlatte-legende { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--ink-soft); } .messlatte-legende b { font-variant-numeric: tabular-nums; color: var(--ink); } .messlatte-legende span::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: baseline; } .messlatte-legende .rot::before { background: var(--red); } .messlatte-legende .gelb::before { background: var(--yellow); } .messlatte-legende .gruen::before { background: var(--green); } .messlatte-legende .grau::before { background: var(--ink-soft); opacity: .35; } /* --- Abschnittsmarke: Linie mit Text, kein Kartenkopf --- */ .marke-zeile { display: flex; align-items: baseline; gap: 14px; margin: 30px 0 2px; } .marke-zeile h3 { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .marke-zeile .linie { flex: 1; height: 1px; background: var(--line); } .marke-zeile .anzahl { font-size: 12px; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* --- Streifen: eine Zeile der Arbeitsliste --- */ .streifen { display: grid; grid-template-columns: 4px minmax(160px, 1.3fr) 86px 108px minmax(150px, 1fr) auto; align-items: center; gap: 0 16px; padding: 13px 4px 13px 0; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .1s; } .streifen:hover { background: color-mix(in srgb, var(--blue) 7%, transparent); } .streifen .balken { align-self: stretch; border-radius: 2px; min-height: 34px; } .streifen .balken.rot { background: var(--red); } .streifen .balken.gelb { background: var(--yellow); } .streifen .balken.gruen { background: var(--green); } .streifen .balken.grau { background: var(--ink-soft); opacity: .3; } .streifen .wer b { display: block; font-size: 14px; font-weight: 650; } .streifen .wer span { font-size: 11.5px; color: var(--ink-soft); } .streifen .tag { font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 650; white-space: nowrap; } .streifen .tag small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-soft); letter-spacing: .02em; } .streifen .puffer { font-variant-numeric: tabular-nums; font-size: 13px; white-space: nowrap; } .streifen .puffer.rot { color: var(--red); font-weight: 700; } .streifen .puffer.gelb { color: var(--yellow-ink); font-weight: 700; } .streifen .puffer.gruen { color: var(--green-ink); } .streifen .puffer.grau { color: var(--ink-soft); } .streifen .lage { font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; } .streifen .lage.offen { color: var(--red); font-weight: 600; } .streifen .lage.erledigt { color: var(--green-ink); } .streifen .rechts { display: flex; align-items: center; gap: 8px; justify-self: end; } .streifen .rechts button { font-size: 12px; padding: 5px 10px; } .streifen .md-marke { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--blue); border: 1px solid var(--blue); border-radius: 999px; padding: 2px 9px; white-space: nowrap; } @media (max-width: 860px) { .streifen { grid-template-columns: 4px 1fr auto; grid-row-gap: 6px; } .streifen .tag, .streifen .puffer { grid-column: 2; } .streifen .lage { grid-column: 2 / -1; } .streifen .rechts { grid-column: 3; grid-row: 1; } } /* --- Fristenband: Fälligkeiten als Zeitstrahl statt als Tabelle --- */ .frist-zeile { display: grid; grid-template-columns: 96px 1fr auto; gap: 16px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .frist-rest { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; } .frist-rest.knapp { color: var(--yellow-ink); } .frist-rest.ueber { color: var(--red); } .frist-was a { font-weight: 600; } .frist-was span { color: var(--ink-soft); font-size: 12.5px; } .frist-stand { font-size: 12px; color: var(--ink-soft); white-space: nowrap; } .frist-stand.bereit { color: var(--green-ink); font-weight: 600; } /* --- Filterzeile ohne Kartenrahmen --- */ .leiste-schlicht { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 14px 0 4px; } .leiste-schlicht input[type=search] { max-width: 320px; } .leiste-schlicht select { width: auto; min-width: 150px; } /* --- Kennzeilen: Zahlen zu einem Fall, ohne Kasten --- */ .kennzahlen { display: flex; flex-wrap: wrap; gap: 0; border-top: 2px solid var(--line); border-bottom: 1px solid var(--line); margin: 18px 0 24px; } .kennzahl { flex: 1 1 170px; padding: 14px 20px 15px; border-left: 1px solid var(--line); } .kennzahl:first-child { border-left: none; padding-left: 0; } .kennzahl b { display: block; font-family: var(--font-display); font-size: 27px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--ink); } .kennzahl.warnung b { color: var(--red); } .kennzahl span { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); margin-top: 3px; } .kennzahl small { display: block; font-size: 11.5px; color: var(--ink-soft); margin-top: 5px; line-height: 1.45; opacity: .85; } .nichts-zu-tun { padding: 34px 0; font-size: 15px; color: var(--ink-soft); border-bottom: 1px solid var(--line); } /* ===================================================================== Bausteine dieser Anwendung ===================================================================== */ .zeile-klickbar { cursor: pointer; } .zeile-klickbar:hover { background: var(--blue-tint); } /* Kopfzeile eines Falls: Ampel, Kennzahl und Begründung in einer Zeile. */ .fall-kopfleiste { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; } .fall-kopfleiste .ampel { width: 12px; height: 12px; } .fall-begruendung { color: var(--ink-soft); font-size: 13px; line-height: 1.6; } /* Zwei Spalten: links Falldaten und Dokumente, rechts die MD-Vorgänge. */ .fall-spalten { display: grid; grid-template-columns: 380px 1fr; gap: 22px; align-items: start; } @media (max-width: 1100px) { .fall-spalten { grid-template-columns: 1fr; } } .dok-liste { display: flex; flex-direction: column; gap: 8px; } .dok-eintrag { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); } .dok-eintrag .dok-titel { flex: 1; min-width: 0; } .dok-eintrag .dok-titel b { display: block; font-size: 13px; } .dok-eintrag .dok-titel span { font-size: 11.5px; color: var(--ink-soft); } .dok-eintrag button { font-size: 12px; padding: 4px 8px; } .vorgang-karte { border-left: 3px solid var(--blue); } .vorgang-karte.entschieden { border-left-color: var(--green); } .vorgang-karte.erfolglos { border-left-color: var(--red); } .entwurf-text { width: 100%; min-height: 320px; font-family: var(--font-body); font-size: 13.5px; line-height: 1.65; resize: vertical; } .referenz { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); cursor: pointer; } .referenz-kopf { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .referenz-kopf b { font-size: 13px; } .referenz-wert { font-size: 12px; color: var(--blue); font-weight: 700; white-space: nowrap; } .referenz-grund { font-size: 11.5px; color: var(--ink-soft); margin-top: 3px; } .referenz-text { font-size: 12.5px; color: var(--ink-soft); margin-top: 7px; line-height: 1.55; max-height: 5.5em; overflow: hidden; } .referenz.offen .referenz-text { max-height: none; } .simulation { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .simulation input[type=number] { width: 80px; } .simulation-ergebnis { font-size: 13px; } .leer { color: var(--ink-soft); font-size: 13px; padding: 10px 0; } /* Wer bearbeitet gerade? Kollisionsschutz-Hinweis über der Detailansicht. */ .belegt-kasten { background: var(--yellow-tint); border: 1px solid var(--yellow); color: var(--ink); border-radius: 9px; padding: 11px 14px; margin-bottom: 16px; font-size: 13px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .belegt-kasten button { margin-left: auto; } /* Verlauf je Fall/Vorgang */ .verlauf-liste { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; } .verlauf-zeile { display: flex; gap: 10px; font-size: 12.5px; align-items: baseline; } .verlauf-zeit { color: var(--ink-soft); white-space: nowrap; font-variant-numeric: tabular-nums; } .verlauf-wer { font-weight: 700; white-space: nowrap; } .verlauf-was { color: var(--ink-soft); } /* Posteingang */ .eingang-zeile.ungelesen b { color: var(--blue); } .eingang-anhang { display: inline-block; font-size: 11.5px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; margin: 2px 4px 0 0; } /* Statistik: einfache Balken ohne Diagrammbibliothek */ .balken-zeile { display: grid; grid-template-columns: 190px 1fr 70px; gap: 10px; align-items: center; font-size: 13px; margin-bottom: 7px; } .balken-huelle { background: var(--gray-tint); border-radius: 5px; height: 16px; overflow: hidden; } .balken { height: 100%; background: var(--blue); border-radius: 5px; } .balken.gruen { background: var(--green); } .balken.gelb { background: var(--yellow); } .balken.rot { background: var(--red); } .balken-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .stat-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } @media (max-width: 900px) { .stat-spalten { grid-template-columns: 1fr; } } /* ============================================================ MD-Live Zwei Spalten: links geschrieben, rechts die eigene Ablage. Der Verlauf steht dauerhaft daneben und nicht in einem Fenster -- er ist Teil des Arbeitens und kein Nachschlagewerk. Kaesten tragen eine weiche Erhebung statt eines harten Rahmens. Der Schatten ist bewusst flach: Er soll Ebenen trennen, nicht auffallen. */ :root { --hebung: 0 1px 2px rgba(2, 8, 23, .04), 0 4px 12px rgba(2, 8, 23, .06); --hebung-stark: 0 2px 4px rgba(2, 8, 23, .05), 0 12px 28px rgba(2, 8, 23, .10); } /* Im dunklen Schema traegt ein Schatten kaum -- dort hebt eine hellere Flaeche plus feine Kante. Beides zusammen ergibt dieselbe Staffelung. */ :root:not([data-thema="hell"]) { --hebung: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28); --hebung-stark: 0 2px 6px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .38); } .kasten { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--hebung); padding: 18px 20px; } .live-seite { max-width: 1180px; margin: 0 auto; } .live-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; } .schreibflaeche { display: flex; flex-direction: column; gap: 12px; } .kontext { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--ink-soft); } .kontext #kontext-text { flex: 1; } button.leise { background: transparent; border: none; color: var(--blue); padding: 2px 6px; font-size: 13px; cursor: pointer; border-radius: 6px; } button.leise:hover { background: var(--blue-tint); } .live-seite textarea { width: 100%; font-size: 15px; line-height: 1.55; padding: 12px 14px; resize: vertical; border-radius: 10px; } /* Bewertung: Zahl, Balken, Marken -- in dieser Reihenfolge, weil die Zahl beim Tippen die Aufmerksamkeit haelt und der Rest die Begruendung liefert. */ .bewertung { display: flex; flex-direction: column; gap: 8px; } .bewertung-kopf { display: flex; align-items: baseline; gap: 8px; } .punkte { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .punkte small { font-size: 15px; font-weight: 600; margin-left: 1px; color: var(--ink-soft); } .punkte-titel { font-size: 13px; color: var(--ink-soft); cursor: help; } .punkte-hebel { margin-left: auto; font-size: 12.5px; color: var(--ink-soft); text-align: right; } .punktebalken { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; } .punktebalken span { display: block; height: 100%; width: 0; border-radius: 999px; transition: width .35s cubic-bezier(.22,.61,.36,1), background-color .35s ease; } .punktebalken span.schwach { background: var(--red); } .punktebalken span.mittel { background: var(--yellow); } .punktebalken span.gut { background: var(--green); } .pruefreihe { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; } .pruefmarke { font-size: 12px; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line); cursor: help; white-space: nowrap; } .pruefmarke.ja { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); } .pruefmarke.nein { color: var(--ink-soft); } /* Nur empfohlen: sichtbar, aber erkennbar kein Mangel. Gestrichelt statt durchgezogen -- eine offene Pflicht und eine offene Empfehlung duerfen sich nicht gleich anfuehlen. */ .pruefmarke.kann { color: var(--ink-soft); border-style: dashed; border-color: color-mix(in srgb, var(--line) 70%, transparent); opacity: .75; } .pruefmarke.falle { border-color: var(--red); color: var(--red); background: var(--red-tint); } .live-knoepfe { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .live-knoepfe .status { margin-left: auto; font-size: 12.5px; } .ergebnis { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--line); padding-top: 14px; } /* ---- Verlaufsspalte: die eigene Ablage ---- */ .verlauf-spalte { display: flex; flex-direction: column; gap: 10px; /* Waechst mit dem Inhalt, aber nur bis zum unteren Bildschirmrand -- dann scrollt die Liste in sich. max-height statt height: Bei drei Eintraegen soll kein leerer Kasten ueber die ganze Hoehe stehen. Die Kopfzeile ist selbst sticky und 65 Pixel hoch; bei top:16px waere die Spalte beim Scrollen dahinter verschwunden. Und die Hoehe rechnet mit dem ungescrollten Stand (109 Pixel Abstand nach oben), sonst ragt der Kasten genau um die Kopfzeile unter den Bildschirmrand. */ position: sticky; top: 81px; max-height: calc(100vh - 125px); } .spalten-kopf { display: flex; justify-content: space-between; align-items: center; } .spalten-kopf h3 { margin: 0; font-size: 15px; } .verlauf-spalte input[type="search"] { width: 100%; font-size: 13px; border-radius: 8px; } .verlauf-liste { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; flex: 1; margin: 0 -4px; padding: 2px 4px; /* Die 320-px-Kappe stammt von der Verlaufszeile der Response-Seite und schlug hier durch: Die Ablage hoerte nach drei Eintraegen auf zu wachsen, obwohl darunter der halbe Bildschirm frei war. */ max-height: none; } /* Karte und Loeschknopf liegen nebeneinander im selben Kasten. Der Knopf sitzt in der Ecke ueber der Karte -- er darf nicht IN ihr stehen, weil ein Knopf im Knopf ungueltiges HTML ist. */ .verlauf-zeile { position: relative; } .verlauf-weg { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; line-height: 1; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ink-soft); font-size: 17px; cursor: pointer; /* Dauerhaft sichtbar, aber leise: Ein Knopf, der erst beim Darueberfahren erscheint, ist auf einem Tablet am Bett gar nicht zu finden. */ opacity: .45; transition: opacity .15s ease, background .15s ease; } .verlauf-weg:hover, .verlauf-weg:focus-visible { opacity: 1; background: var(--red-tint); color: var(--red); } /* Platz fuer den Knopf, damit er nicht auf der Punktzahl liegt. */ .verlauf-zeile .verlauf-kopf { padding-right: 22px; } .verlauf-eintrag { display: block; width: 100%; text-align: left; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); color: inherit; font: inherit; transition: box-shadow .18s ease, border-color .18s ease; } .verlauf-eintrag:hover { box-shadow: var(--hebung); border-color: var(--blue); } .verlauf-eintrag.offen { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue), var(--hebung); } /* Ein Eintrag am Fall ist dauerhaft -- die Kante links zeigt das ohne Wort. */ .verlauf-eintrag.am-fall { border-left: 3px solid var(--green); } .verlauf-kopf { display: flex; gap: 8px; align-items: center; font-size: 11.5px; color: var(--ink-soft); } .verlauf-punkte { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; } .verlauf-punkte.gut { color: var(--green-ink); } .verlauf-punkte.mittel { color: var(--yellow-ink); } .verlauf-punkte.schwach { color: var(--red); } .verlauf-fall { font-size: 12.5px; font-weight: 600; margin-top: 3px; } .verlauf-text { font-size: 12.5px; line-height: 1.45; margin-top: 4px; color: var(--ink-soft); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .verlauf-marken { display: flex; gap: 5px; margin-top: 6px; } /* Einmalige Einrichtung */ .einrichten-kasten { border: 1px solid var(--blue); border-radius: 14px; padding: 18px 20px; background: var(--blue-tint); box-shadow: var(--hebung); margin-bottom: 18px; } .einrichten-kasten h3 { margin: 0 0 4px; font-size: 15px; } .einrichten-kasten p { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); } .einrichten-kasten .feld-reihe { margin-bottom: 16px; } .einrichten-kasten .feld-reihe label { margin-bottom: 0; } /* Maske und Fenster */ .editor-kasten.schmal { max-width: 560px; } .merkmal-block { margin-top: 14px; } .merkmal-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-soft); margin-bottom: 8px; } .merkmale { display: flex; flex-wrap: wrap; gap: 6px; } .merkmal { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: all .15s ease; } .merkmal:hover { border-color: var(--blue); box-shadow: var(--hebung); } .merkmal.aktiv { border-color: var(--blue); background: var(--blue-tint); color: var(--blue); } .baustein-liste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .baustein { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg); transition: box-shadow .18s ease; } .baustein:hover { box-shadow: var(--hebung); } .baustein-text { font-size: 13px; line-height: 1.5; } .baustein-fuss { display: flex; justify-content: space-between; align-items: center; margin-top: 7px; } .marke.leise { background: transparent; border: 1px solid var(--line); color: var(--ink-soft); } /* ---- Offene Stellen: anklicken statt tippen ---- */ .luecken { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 10px; background: var(--yellow-tint); border: 1px solid var(--yellow); } .luecken-titel { font-size: 12.5px; font-weight: 600; color: var(--yellow-ink); flex: none; } .luecken-reihe { display: flex; gap: 6px; flex-wrap: wrap; } .luecke { font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--yellow); background: var(--surface); color: var(--ink); cursor: pointer; transition: all .15s ease; } .luecke:hover { border-color: var(--blue); color: var(--blue); box-shadow: var(--hebung); } .zeitwahl { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 14px; } .zeitwahl label { margin: 0; } .vorschlagsliste { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .vorschlag { text-align: left; font-size: 13px; line-height: 1.45; padding: 9px 12px; border-radius: 9px; border: 1px solid var(--line); background: var(--bg); color: inherit; cursor: pointer; transition: all .15s ease; } .vorschlag:hover { border-color: var(--blue); background: var(--blue-tint); box-shadow: var(--hebung); } /* ---- Daumen: erst ab der Schwelle nutzbar ---- */ .daumen { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 9px; font-size: 13px; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: all .2s ease; } .daumen svg { transition: transform .2s ease; } .daumen:disabled { opacity: .55; cursor: not-allowed; } .daumen.reif { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); cursor: pointer; } .daumen.reif:hover { box-shadow: var(--hebung); } .daumen.reif:hover svg { transform: translateY(-2px); } .daumen.erledigt { border-color: var(--green); background: var(--green); color: var(--auf-akzent); opacity: 1; } /* ---- Kennung: Textschild in der Verlaufskarte ---- Nicht .marke verwenden: Das ist ein 20 px runder Statuspunkt, in dem ein Wort wie "befristet" ueberlaeuft -- genau der Darstellungsfehler, der in der Durchsicht auffiel. */ .kennung { display: inline-block; font-size: 10.5px; line-height: 1.6; padding: 1px 7px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); font-weight: 600; } .kennung.gut { border-color: var(--green); background: var(--green-tint); color: var(--green-ink); } @media (max-width: 1000px) { .live-raster { grid-template-columns: 1fr; } .verlauf-spalte { position: static; max-height: none; } } /* Dieselbe Erhebung fuer die vorhandenen Karten der uebrigen Seiten -- sonst wirkt Response neben Live wie eine aeltere Anwendung. */ .karte, .editor-kasten, .dialog-kasten { box-shadow: var(--hebung); } .karte { border-radius: 14px; } .editor-kasten, .dialog-kasten { box-shadow: var(--hebung-stark); } /* Streifen und Zeilen bekommen keine Erhebung: Sie sind Listeneintraege und keine Ebenen. Ein Schatten an jeder Zeile ergaebe ein unruhiges Bild. */ /* Ueberblenden beim Wechsel der Betriebsart. Die Animation liegt auf main, nicht auf body: So bleibt die Kopfzeile stehen und nur der Inhalt wechselt -- das wirkt wie ein Wechsel innerhalb einer Anwendung und nicht wie ein Seitenaufruf. */ main { animation: einblenden .22s ease-out both; } @keyframes einblenden { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } body.wechselt main { opacity: 0; transform: translateY(-4px); transition: opacity .15s ease-in, transform .15s ease-in; } /* Wer Bewegung im System abgestellt hat, bekommt keine. */ @media (prefers-reduced-motion: reduce) { main { animation: none; } body.wechselt main { transition: none; } .modus-schalter .schieber { transition: none; } } /* ============================================ Umschalter Live / Response Die Betriebsart ist die oberste Entscheidung der Anwendung -- sie gehoert neben die Marke und nicht in ein Menue. */ .modus-schalter { position: relative; display: inline-flex; margin-left: 18px; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 2px; } .modus-schalter .schieber { /* Die Breite kommt aus der Zahl der Betriebsarten, nicht aus einer festen 50 Prozent: Mit dem dritten Modus (Analytics) waere der Schieber sonst doppelt so breit wie sein Knopf. `--modi` setzt gemeinsam.js. */ position: absolute; top: 2px; left: 2px; bottom: 2px; width: calc((100% - 4px) / var(--modi, 2)); background: var(--blue); border-radius: 999px; transition: transform .18s ease; } .modus-knopf { position: relative; z-index: 1; border: none; background: transparent; padding: 5px 16px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ink-soft); border-radius: 999px; min-width: 84px; } .modus-knopf.aktiv { color: var(--auf-akzent); } @media (max-width: 700px) { .modus-schalter { margin-left: 10px; } .modus-knopf { padding: 5px 10px; min-width: 66px; } } /* ========================================================== Prognose Die Zielgroessenwahl steht oben als Knopfreihe, nicht als Auswahlliste: Sie ist die eigentliche Entscheidung der Seite und soll sichtbar sein. */ .zielwahl { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .zielknopf { flex: 1 1 220px; text-align: left; padding: 10px 13px; border: 1.5px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; } .zielknopf b { display: block; font-size: 13.5px; } .zielknopf small { display: block; color: var(--ink-soft); font-size: 12px; line-height: 1.4; margin-top: 2px; } .zielknopf.aktiv { border-color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue); } .grundlage-zeile { font-size: 12.5px; color: var(--ink-soft); margin-bottom: 14px; } .grundlage-warnung { color: var(--yellow-ink); } /* Eine Zeile je Fall -- Streifen wie auf der Tagesliste, kein Kastengitter */ .prognose-zeile { display: grid; grid-template-columns: 4px 1fr auto; gap: 12px; align-items: center; padding: 11px 0; border-bottom: 1px solid var(--line); } .prognose-zeile.anklickbar { cursor: pointer; } .prognose-zeile.anklickbar:hover .prognose-kopf { color: var(--blue); } .prognose-zeile .balken { height: 100%; min-height: 34px; border-radius: 2px; background: var(--line); } .prognose-zeile.stufe-hoch .balken { background: var(--red); } .prognose-zeile.stufe-mittel .balken { background: var(--yellow); } .prognose-zeile.stufe-gering .balken { background: var(--green); } /* Stationsansicht: kein Risikofarbton, nur der Hinweis zaehlt */ .prognose-zeile.ohne-stufe .balken { background: var(--line); } .prognose-kopf { font-size: 14px; font-weight: 600; } .prognose-zusatz { font-size: 12.5px; color: var(--ink-soft); margin-top: 1px; } .prognose-luecke { font-size: 12.5px; color: var(--yellow-ink); margin-top: 3px; } .prognose-wert { text-align: right; } .wert-gross { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; } .wert-stufe { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; } .begruendung-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .begruendung-zeile:last-of-type { border-bottom: none; } .begruendung-zeile.hinweis { color: var(--yellow-ink); } .begruendung-zeile .faktor { font-variant-numeric: tabular-nums; color: var(--ink-soft); flex: none; } .guete-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .guete-zeile:last-child { border-bottom: none; } .guete-auszug { color: var(--ink-soft); font-size: 12.5px; } /* Das juengste Quartal in der Tabelle »Wie der MD prueft«. */ .datentabelle tr.juengst td { font-weight: 600; } /* Die Haeuser der Karte »Aktuelle Patienten am Massstab des Auszugs«: anklickbar, und bedenkliche Zahlen in Rot. */ .datentabelle tr.anklickbar { cursor: pointer; } .datentabelle tr.anklickbar:hover td { background: var(--surface); } .datentabelle td.num.warnung { color: var(--red); font-weight: 600; } /* Spaltenzuordnung in der Verwaltung: Ueberschrift, Pfeil, Feld. */ .quellprofil-zeile { display: flex; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .quellprofil-zeile:last-child { border-bottom: 0; } .quellprofil-pfeil { color: var(--ink-soft); } @media (max-width: 720px) { .prognose-zeile { grid-template-columns: 4px 1fr; } .prognose-wert { grid-column: 2; text-align: left; } } /* ---- Fundus: die Quellen der Formulierungen ---- */ .quellenliste { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; } .quelle { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); } .quelle-kopf { display: flex; align-items: center; gap: 8px; } .quelle-zusatz { font-size: 12.5px; color: var(--ink-soft); margin-top: 3px; } .quelle-knoepfe { display: flex; gap: 6px; margin-top: 9px; } .quelle-knoepfe button { font-size: 12.5px; padding: 4px 10px; } /* ---- Quellenauswahl in MD-Live ---- */ .quellenwahl { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; } .quellenzeile { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); cursor: pointer; } .quellenzeile:hover { border-color: var(--blue); } /* Eine Ankreuzbox ist kein Eingabefeld. Die globale Regel »input, select, textarea { width: 100% }« ist fuer Textfelder richtig und fuer Ankreuzboxen falsch: Sie machte die Box 481 px breit, schob den Text auf 0 px Breite und liess ihn buchstabenweise umbrechen -- 492 px hoch, quer aus dem Dialog heraus. Der Fehler steckte auch in .quellenzeile und fiel dort nur nicht auf, weil noch keine Quelle eingespielt war. */ input[type="checkbox"], input[type="radio"] { width: auto; } /* Die globale label-Regel setzt Versalien, Sperrung und 11,5 px -- richtig fuer eine Feldbeschriftung, unbrauchbar fuer eine Zeile mit Fliesstext. Ohne diese Ruecknahme stand »LEP-KATALOG MITNUTZEN« in Grossbuchstaben und lief aus dem Dialog heraus. */ .quellenzeile { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 13px; color: var(--ink); } /* Im Flex-Kasten muss der Text schrumpfen duerfen, sonst erzwingt er die Breite seines laengsten Wortes und sprengt den Dialog. */ .quellenzeile > span { min-width: 0; flex: 1; } .quellenzeile.fest { cursor: default; opacity: .85; } .quellenzeile input { margin-top: 2px; flex: none; } .quellenzeile b { display: block; font-size: 13.5px; font-weight: 600; } .quellenzeile small { display: block; font-size: 12px; color: var(--ink-soft); } /* ---- Was laut LEP-Katalog nicht in den Pflegebericht gehoert ---- */ .lep-hinweis { display: flex; flex-direction: column; gap: 5px; } .lep-zeile { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 12.5px; } .lep-titel { color: var(--ink-soft); flex: none; } .lep-marke { padding: 2px 9px; border-radius: 999px; cursor: help; border: 1px solid var(--blue); color: var(--blue); background: var(--blue-tint); } /* Uebernommene Bezeichnung: erledigt, nicht offen. Gruen statt blau -- der Unterschied zwischen »das musst du noch beachten« und »ist schon passiert«. */ .lep-marke.uebernommen { border-color: var(--green); color: var(--green-ink); background: var(--green-tint); } /* Der Rest als Zahl -- acht Namen nebeneinander sind keine Zeile mehr. */ .lep-rest { font-size: 12px; padding: 2px 8px; border-radius: 999px; cursor: help; color: var(--ink-soft); border: 1px dashed var(--line); } /* Zustandszeile der LEP-Seite: eine Auskunft, keine Liste von Einstellungen. */ .lep-zustand { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--gray-tint); font-size: 13.5px; } .lep-zustand .marke { width: 10px; height: 10px; flex: none; } .lep-zustand.gut { background: var(--green-tint); border-color: var(--green); } .lep-zustand.gut .marke { background: var(--green); } .lep-zustand.schwach .marke { background: var(--gray-ink); } .lep-zustand.schwach { color: var(--ink-soft); } .lep-mehr { margin-top: 14px; } .lep-mehr > summary { cursor: pointer; font-size: 13px; color: var(--ink-soft); padding: 6px 2px; user-select: none; } .lep-mehr > summary:hover { color: var(--ink); } /* ------------------------------------------------ Eingabe tritt zurueck Sobald eine Formulierung dasteht, sind zwei gleich grosse, gleich helle Textfelder untereinander eine Zumutung: Nichts sagt, welches davon das Ergebnis ist. Die Eingabe schiebt sich deshalb zusammen und wird ruhiger -- sie ist dann Herkunft, nicht mehr Arbeitsflaeche. Weggenommen wird sie nicht: Wer weiterschreiben will, klappt sie mit einem Klick wieder auf. */ .eingabe-huelle { position: relative; display: block; } .eingabe-kopf { display: none; width: 100%; align-items: baseline; gap: 8px; padding: 5px 2px 6px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; } .eingabe-kopf-titel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .eingabe-kopf-hinweis { font-size: 12px; color: var(--blue); } .eingabe-kopf:hover .eingabe-kopf-hinweis { text-decoration: underline; } .schreibflaeche.hat-ergebnis .eingabe-kopf { display: flex; } /* Der eigentliche Uebergang. max-height statt height, weil die Hoehe des Textfelds vom Inhalt abhaengt und nicht bekannt ist. */ #eingabe { transition: max-height .34s cubic-bezier(.4, 0, .2, 1), font-size .34s cubic-bezier(.4, 0, .2, 1), color .34s ease, background-color .34s ease, border-color .34s ease, opacity .34s ease; max-height: 60vh; } .schreibflaeche.hat-ergebnis #eingabe { max-height: 4.4em; overflow: hidden; font-size: 13px; line-height: 1.5; color: var(--ink-soft); background: var(--gray-tint); border-color: var(--line); cursor: pointer; resize: none; } /* Aufgeklappt trotz vorhandener Formulierung: der Nutzer hat es angeklickt. */ .schreibflaeche.hat-ergebnis .eingabe-huelle.offen #eingabe { max-height: 60vh; overflow: auto; font-size: inherit; color: var(--ink); background: var(--eingabe-bg); cursor: auto; resize: vertical; } .schreibflaeche.hat-ergebnis .eingabe-huelle.offen .eingabe-kopf-hinweis::after { content: ""; } .schreibflaeche.hat-ergebnis .eingabe-huelle.offen .eingabe-kopf-hinweis { color: var(--ink-soft); } /* Abblendkante, damit abgeschnittener Text als abgeschnitten zu erkennen ist und nicht als zu Ende. */ .schreibflaeche.hat-ergebnis .eingabe-huelle::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 1.7em; pointer-events: none; border-radius: 0 0 7px 7px; /* Gegen dieselbe Farbe mit Alpha 0 verlaufen, nicht gegen »transparent«: Letzteres ist durchsichtiges Schwarz, und der Verlauf wird schmutzig. */ background: linear-gradient(to bottom, var(--gray-tint-0), var(--gray-tint)); transition: opacity .34s ease; } .schreibflaeche.hat-ergebnis .eingabe-huelle.offen::after { opacity: 0; } /* Und die Gegenbewegung: Das Ergebnis wird das Hauptelement. */ .ergebnis-kopf { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--green-ink); padding: 0 2px 6px; } .schreibflaeche.hat-ergebnis #ergebnis { border-color: var(--green); box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 6px 18px rgba(0, 0, 0, .07); transition: box-shadow .34s ease, border-color .34s ease; } /* Kurzzeitig gesetzt, um einen Zustand ohne Weg dorthin einzunehmen. */ .schreibflaeche.ohne-uebergang #eingabe, .schreibflaeche.ohne-uebergang #ergebnis, .schreibflaeche.ohne-uebergang .eingabe-huelle::after { transition: none; } /* Wer Bewegung abgeschaltet hat, bekommt denselben Zustand ohne Weg dorthin. */ @media (prefers-reduced-motion: reduce) { #eingabe, .schreibflaeche.hat-ergebnis #ergebnis, .schreibflaeche.hat-ergebnis .eingabe-huelle::after { transition: none; } } /* Eine Entscheidung im Einstellungsfenster, kein Formularfeld. Baut auf .quellenzeile auf -- dasselbe Muster im selben Dialog. */ .schalterzeile { margin-bottom: 14px; background: var(--gray-tint); } /* ------------------------------------------------- Prüfquote (Startseite) Ein Band, keine Kachelreihe. Die Startseite kommt sonst ohne Kacheln aus, und eine einzelne Kachel neben einer Liste sieht aus wie ein Rest. */ .quotenband { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 10px; background: var(--surface); box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .quoten-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; } .quoten-titel { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); cursor: help; } .quoten-zahl { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .quoten-anteil { font-family: var(--font-display, inherit); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -.01em; } .quoten-anteil.gut { color: var(--green-ink); } .quoten-anteil.mittel { color: var(--yellow-ink); } .quoten-anteil.schwach { color: var(--red); } .quoten-folge { font-size: 13.5px; color: var(--ink); } .quoten-alt { color: var(--ink-soft); } .quoten-hebel { margin-top: 8px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; } .quoten-hebel b { color: var(--ink); } .quoten-haeuser { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; } .quoten-zeile { display: grid; grid-template-columns: 5em 1fr auto; gap: 10px; align-items: baseline; font-size: 13px; } .quoten-zeile > span:first-child { font-weight: 600; } .quoten-wert.gut { color: var(--green-ink); } .quoten-wert.mittel { color: var(--yellow-ink); } .quoten-wert.schwach { color: var(--red); } .quoten-zeile small { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* ---------------------------------------- Verteilung (Prognose) Eine Zeile je Kategorie oder Lage: Name, Balken, Wert, Herleitung. Der Balken traegt den Vergleich, die Zahl daneben die Genauigkeit. */ .verteilzeile { display: grid; grid-template-columns: 12em 1fr 5.5em; gap: 10px; align-items: center; margin-bottom: 4px; } .verteil-name { font-size: 13px; font-weight: 600; } .verteil-balken { height: 14px; border-radius: 4px; overflow: hidden; background: var(--gray-tint); } .verteil-fuellung { display: block; height: 100%; background: var(--blue); } .verteil-fuellung.verlust { background: var(--red); } /* Zu wenige Faelle fuer eine eigene Aussage -- gestreift statt satt, damit der Balken nicht mehr behauptet, als die Zahl hergibt. */ .verteil-fuellung.duenn { background: repeating-linear-gradient(45deg, var(--gray-ink) 0 4px, transparent 4px 8px); opacity: .6; } .verteil-wert { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; } .verteil-zusatz { grid-column: 2 / -1; font-size: 12px; color: var(--ink-soft); margin: -2px 0 8px; } /* Die Lage des Falls in der Kontextzeile von MD-Live. Eine Angabe, kein Kasten -- und erst ueber der mittleren Verweildauer eine Ansage. */ .kontext-lage { font-size: 12.5px; color: var(--ink-soft); cursor: help; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); } .kontext-lage.eng { color: var(--yellow-ink); border-color: var(--yellow); background: var(--yellow-tint); } /* ------------------------------------ Nachverfahren und Abrechnungsaspekte */ .nachverfahren-block:empty { display: none; } .nv-zeile { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } .nv-zeile:last-of-type { border-bottom: 0; } .nv-zeile small { color: var(--ink-soft); } .aspekt-zeile { display: grid; grid-template-columns: 1fr 11em; gap: 8px; align-items: center; padding: 4px 0; font-size: 13px; } .aspekt-zeile b { cursor: help; } .aspekt-zeile select { font-size: 12.5px; padding: 3px 6px; } .aspekt-zeile small { grid-column: 1 / -1; color: var(--ink-soft); font-size: 12px; margin: -2px 0 4px; } /* Belegt tritt zurueck, offen bleibt sichtbar -- die Liste ist dazu da, das Offene zu zeigen, nicht das Erledigte zu feiern. */ .aspekt-zeile.belegt b { color: var(--green-ink); } .aspekt-zeile.entfaellt { opacity: .55; } /* --------------------------------------------- Die inhaltliche Frage Ungezaehlt und optisch anders als die Pruefreihe: Das sind keine Marken, die gruen werden koennen. Sie sind eine Erinnerung an das, was die Zahl nicht misst. */ /* Eine Schaetzung auf vorlaeufiger Grundlage sieht anders aus als eine auf fester. Die Zahl bleibt dieselbe, ihr Fundament nicht. */ .kennung.vorlaeufig { border-style: dashed; color: var(--yellow-ink); border-color: var(--yellow); background: var(--yellow-tint); } /* Ein Dialog, drei Abschnitte. Die Trennlinien tragen die Aussage: Eine Angabe gilt fuer diesen Eintrag, fuer mich, oder fuer die Quellen. */ .dialog-abschnitt + .dialog-abschnitt { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); } .dialog-abschnitt > h4 { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .editor-fuss .status { margin-right: auto; font-size: 12.5px; } /* Merkmale zugeklappt: Vierzehn Marken nebeneinander sind unruhig, und im Regelfall kommen sie ohnehin aus dem Fall. */ /* display:flex nimmt dem summary seinen Standardmarker -- ohne eigenen Pfeil war ueberhaupt nicht zu sehen, dass sich hier etwas aufklappt. */ .merkmal-block > summary { display: flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); padding: 4px 0; } .merkmal-block > summary::-webkit-details-marker { display: none; } .merkmal-block > summary::marker { content: ""; } .merkmal-block > summary::after { content: ""; margin-left: auto; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .merkmal-block[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .merkmal-block > summary:hover { color: var(--ink); } .merkmal-zahl { font-size: 11px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; background: var(--blue-tint); color: var(--blue); } .merkmal-block .merkmal-kopf { display: flex; justify-content: flex-end; margin: 2px 0 4px; } /* ------------------------------------------------------- KI-Verbrauch */ .kosten-titel { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } /* Die drei Zahlen, um die es geht -- gross und nicht in einer Tabelle. */ .kosten-kopf { display: flex; gap: 32px; flex-wrap: wrap; margin: 4px 0 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .kosten-wert { font-family: var(--font-display, inherit); font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; } .kosten-label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; } /* Zahlen gehoeren rechts und in gleicher Zeichenbreite -- sonst sind zwei Betraege untereinander nicht zu vergleichen. */ .kosten-tabelle th.zahl, .kosten-tabelle td.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Monatsdiagramm. Inline, ohne Bibliothek: Die Inhaltsrichtlinie laesst kein fremdes Skript zu, und fuer achtzehn Balken braucht es auch keine. */ .kosten-diagramm { display: flex; align-items: flex-end; gap: 6px; height: 150px; margin: 4px 0 14px; padding: 0 2px; overflow-x: auto; } .kd-spalte { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 42px; height: 100%; cursor: help; } .kd-wert { font-size: 10.5px; color: var(--ink-soft); margin-bottom: 3px; font-variant-numeric: tabular-nums; white-space: nowrap; } .kd-balken { flex: 1; width: 100%; display: flex; align-items: flex-end; background: var(--gray-tint); border-radius: 4px 4px 0 0; } .kd-fuellung { width: 100%; background: var(--blue); border-radius: 4px 4px 0 0; transition: height .3s ease; } /* Aufrufe ohne hinterlegten Preis: Der Balken waere sonst null hoch und der Monat saehe leer aus, obwohl gearbeitet wurde. */ .kd-fuellung.ohne-preis { background: repeating-linear-gradient(45deg, var(--line), var(--line) 3px, transparent 3px, transparent 6px); } .kd-monat { font-size: 11px; color: var(--ink-soft); margin-top: 4px; font-variant-numeric: tabular-nums; } .kosten-mehr { margin-top: 10px; } .kosten-mehr > summary { cursor: pointer; user-select: none; padding: 6px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .kosten-mehr > summary:hover { color: var(--ink); } /* Der Hinweis nach dem Kopieren. Ruhig, nicht rot: Es ist keine Fehlermeldung, sondern eine Einordnung. Rot verbraucht sich, wenn es jedes Mal erscheint. */ .uebernahme-hinweis { margin-top: 2px; padding: 9px 12px; border-left: 3px solid var(--yellow); border-radius: 0 7px 7px 0; background: var(--yellow-tint); color: var(--ink); font-size: 12.5px; line-height: 1.5; } /* Die Zusammenfassung, auf der die Stellungnahme aufsetzt. Zugeklappt: Wer den Entwurf beurteilen will, braucht sie -- wer ihn versendet, nicht. */ .zusammenfassung { margin: 6px 0 10px; } .zusammenfassung > summary { cursor: pointer; user-select: none; padding: 5px 2px; font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .zusammenfassung > summary:hover { color: var(--ink); } .zusammenfassung-text { white-space: pre-wrap; font-size: 13px; line-height: 1.55; padding: 10px 12px; margin-top: 4px; border-left: 3px solid var(--line); border-radius: 0 7px 7px 0; background: var(--gray-tint); max-height: 340px; overflow-y: auto; } @media (max-width: 900px) { } /* Gegensätzliche Angaben verschiedener Berufsgruppen. Zurückhaltend gehalten, und zwar aus einem inhaltlichen Grund: Das hier ist kein Fehler, den jemand gemacht hat. Es sind zwei Angaben, die nebeneinanderstehen, und in vielen Fällen erklären sie sich aus dem Tagesverlauf. Ein roter Kasten würde die Pflegekraft beschuldigen, die sorgfältig einen Behandlungserfolg dokumentiert hat. Rot bleibt deshalb dem einen Fall vorbehalten, in dem sich der Gegensatz NICHT mit dem Tagesverlauf erklären lässt: derselbe Tag, dieselbe Schicht. Und auch dort nur als schmaler Streifen am Rand. */ .widerspruch { margin: 0 0 10px; padding: 10px 12px; border-left: 3px solid var(--line); border-radius: 0 7px 7px 0; background: var(--gray-tint); } .widerspruch.stark { border-left-color: var(--red); background: var(--red-tint); } .widerspruch-kopf { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; } .widerspruch-tag { font-size: 12px; font-weight: 600; letter-spacing: .03em; color: var(--ink-soft); white-space: nowrap; } .widerspruch-merkmal { font-size: 13.5px; font-weight: 600; } /* Die beiden Angaben. Gestapelt als Grundfall, nebeneinander erst, wenn der Kasten breit genug ist. Entscheidend ist die Breite des KASTENS, nicht die des Fensters: Die Karte steht in der schmalen Spalte der Fallansicht, dort sind auf einem 1280er Bildschirm nur 338px. Eine Bildschirmabfrage haette dort zwei Spalten zu je 151px erzwungen, und »zeitweise desorientiert« braucht darin zwei Zeilen -- ausgerechnet an der Stelle, an der zwei Angaben auf einen Blick gegeneinanderstehen sollen. */ .widerspruch { container-type: inline-size; } .widerspruch-paar { display: grid; grid-template-columns: 1fr; gap: 8px; } @container (min-width: 420px) { .widerspruch-paar { grid-template-columns: 1fr 1fr; } } .widerspruch-seite { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 6px; background: var(--surface); } .widerspruch-wer { font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); } .widerspruch-aussage { font-size: 13.5px; } .widerspruch-frage { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); } /* Kurzlieger und Prüfmuster. Zeilen mit einer Quote — oder ohne. Die Zeile ohne Quote ist blass und trotzdem da. Das ist die eigentliche gestalterische Entscheidung dieser beiden Auswertungen: Eine Gruppe, für die es zu wenige Fälle gibt, wird nicht weggelassen, denn eine fehlende Zeile liest sich wie »gibt es nicht«. Sie steht da, mit ihren Fallzahlen, und ohne Prozentzeichen. */ .achse { margin-top: 18px; } .achse h5 { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); } .quotenzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 6px 14px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .quotenzeile:last-child { border-bottom: 0; } .quotenzeile.ungerechnet { opacity: .6; } .quotenzeile-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .quotenzeile-zahl { font-variant-numeric: tabular-nums; color: var(--ink-soft); } .quotenzeile-quote { font-variant-numeric: tabular-nums; white-space: nowrap; /* Kein Hilfe-Cursor: Der Text im Titel ist eine Ergänzung, keine Erklärung eines Rätsels. Die Zeile sagt schon ohne ihn, was Sache ist. */ } /* Die Kategorien laufen über die volle Breite unter der Zeile — nebeneinander drängten sie die Namen der Kostenträger auf zwei Zeichen zusammen. */ .quotenzeile-zusatz { grid-column: 1 / -1; font-size: 11.5px; color: var(--ink-soft); } .stat-satz-klein { margin: 0 0 4px; font-size: 14px; line-height: 1.55; } /* Der Info-Punkt hinter einer Überschrift. Klein und blass. Er soll auffindbar sein, wenn man etwas wissen will, und sonst nicht auffallen — genau das Gegenteil eines Erklärtextes, der immer dasteht und die Seite unruhig macht. */ .info-punkt { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; margin-left: 2px; vertical-align: 1px; border: 1px solid currentColor; border-radius: 50%; font-family: var(--font-body, inherit); font-size: 10px; font-weight: 700; font-style: normal; line-height: 1; letter-spacing: 0; text-transform: none; color: var(--ink-soft); opacity: .55; cursor: help; user-select: none; } .info-punkt:hover, .info-punkt:focus-visible { opacity: 1; color: var(--blue); } .info-punkt:focus { outline: none; } .info-punkt:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } /* Eine Auswahl als Tabelle. Jede Zeile eine Möglichkeit, ein Klick wählt. Der Titel links wie ein Kennwort, die Beschreibung daneben, eine Kennzahl rechts — was die Wahl unterscheidet, steht nebeneinander, statt in einer Klappliste zu verschwinden. Aus dem Betrieb, 02.09.2026: »nicht so textlastig«. */ .feld-wahl { display: block; margin-bottom: 11px; } .feld-wahl > .feld-titel, .feld-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); } .feld-wahl > .feld-titel { display: block; margin-bottom: 6px; } .wahl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.35; } .wahl th { text-align: left; padding: 3px 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .wahl td { padding: 7px 10px; vertical-align: top; color: var(--ink-soft); border-bottom: 1px solid var(--line); } .wahl tbody tr { cursor: pointer; } .wahl tbody tr:hover td { background: var(--gray-tint); } .wahl tbody tr:focus { outline: none; } .wahl tbody tr:focus-visible td { background: var(--gray-tint); } .wahl tbody tr:focus-visible td:first-child { box-shadow: inset 2px 0 0 var(--blue); } .wahl tr.gewaehlt td { background: var(--blue-tint); color: var(--ink); } .wahl td.wahl-titel { white-space: nowrap; font-weight: 700; color: var(--ink); } .wahl td.wahl-titel::before { content: "○"; display: inline-block; width: 14px; color: var(--ink-soft); opacity: .6; font-size: 11px; } .wahl tr.gewaehlt td.wahl-titel::before { content: "●"; color: var(--blue); opacity: 1; } .wahl td.wahl-zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; } /* Die Blase liegt fixed und wird beim Aufklappen ausgerechnet — absolut positioniert würde sie in jeder Karte abgeschnitten, die auf schmalen Bildschirmen overflow-x bekommt. */ .info-blase { display: none; position: fixed; z-index: 60; /* Ohne vw: In einem nicht dargestellten Bereich rechnet der Browser 100vw zu null, und die Blase bricht dann nach jedem Wort um. »ch« haengt an der Schriftgroesse und ist davon unberuehrt; den Rand zum Fenster haelt das Skript. */ max-width: 34ch; /* Die Breite haengt nur am Inhalt und an der Obergrenze darueber, nicht am Platz daneben. Ohne das rechnet der Browser die Restbreite bis zum Fensterrand aus -- und wo die null ist, bricht der Text nach jedem Wort um. */ width: max-content; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: 0 6px 20px var(--schatten, rgba(0, 0, 0, .18)); font-family: var(--font-body, inherit); font-size: 12.5px; font-weight: 400; font-style: normal; line-height: 1.5; letter-spacing: 0; text-transform: none; color: var(--ink); /* pre-line statt normal: Der Kodebefund kommt als Zeilen, und die sollen Zeilen bleiben. Umbrechen tut es weiterhin. */ text-align: left; white-space: pre-line; cursor: auto; } .info-blase.offen { display: block; } /* ======================================== Woher eine Zahl herkommt Aus dem Betrieb, 11.09.2026: »Dann schwebt das da drueber und zeigt mir eine schoene Aufstellung ueber die Datenquellen.« Eine Kette von oben nach unten: Quelle, Regel, Quelle, Regel, Ergebnis. Senkrecht und nicht waagerecht, weil ein schwebendes Fenster schmal ist und eine waagerechte Kette bei drei Gliedern umbraeche. */ .herkunft-karte { display: none; position: fixed; z-index: 70; width: min(26rem, calc(100% - 24px)); max-height: 72vh; overflow-y: auto; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(0,0,0,.22); padding: 14px 16px 16px; } .herkunft-karte.offen { display: block; } .herkunft-kopf { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 4px; } .herkunft-kopf b { flex: 1; font-family: var(--font-display); font-size: 1.02rem; line-height: 1.25; } .herkunft-zu { flex: none; border: none; background: none; cursor: pointer; color: var(--ink-soft); font-size: 1.3rem; line-height: 1; padding: 0 2px; border-radius: 6px; } .herkunft-zu:hover { color: var(--ink); background: var(--gray-tint); } .herkunft-abschnitt { margin: 14px 0 6px; font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); } .herkunft-abschnitt:first-of-type { margin-top: 10px; } .herkunft-text { margin: 0; font-size: .84rem; line-height: 1.5; } /* ---- Die Kette ---- */ .herkunft-kette { list-style: none; margin: 0; padding: 0; } .herkunft-kette .glied { position: relative; padding-left: 18px; } /* Der Faden, der die Glieder verbindet. Er laeuft durch, auch hinter den Kaesten -- so sieht man auf einen Blick, dass es EINE Kette ist. */ .herkunft-kette .glied::before { content: ""; position: absolute; left: 5px; top: 0; bottom: 0; width: 2px; background: var(--line); } .herkunft-kette .glied:first-child::before { top: 14px; } .herkunft-kette .glied:last-child::before { bottom: calc(100% - 14px); } .herkunft-kette .quelle, .herkunft-kette .ergebnis { margin: 0 0 8px; padding: 8px 10px 9px 18px; } .herkunft-kette .quelle > b, .herkunft-kette .ergebnis > b { display: block; font-size: .88rem; line-height: 1.3; } .herkunft-kette .quelle > p, .herkunft-kette .ergebnis > p { margin: 4px 0 0; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); } /* Der Knoten auf dem Faden. Gefuellt bei Quelle und Ergebnis, offen beim Zwischenschritt -- das Auge findet so die Bestaende wieder, ohne zu lesen. */ .herkunft-kette .quelle::after, .herkunft-kette .ergebnis::after { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 12px; border-radius: 50%; background: var(--knoten, var(--blue)); border: 2px solid var(--surface); } .herkunft-kette .herkunft-art { display: inline-block; margin-bottom: 3px; font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--knoten, var(--blue)); font-weight: 600; } /* Die Dokumente einer Quelle. Der Dateiname steht als Dateiname da -- nicht kursiv, nicht in Anfuehrungszeichen: Er ist die Antwort auf die Frage, nicht ein Zitat. */ .herkunft-dokumente { list-style: none; margin: 5px 0 0; padding: 0; } .herkunft-dokumente li { margin: 0 0 5px; } .herkunft-dokumente .dok-name { display: block; font-size: .78rem; line-height: 1.35; font-family: var(--font-body); word-break: break-word; } .herkunft-dokumente .dok-name::before { content: "\25A4"; margin-right: 5px; color: var(--knoten, var(--blue)); } .herkunft-dokumente small { display: block; font-size: .72rem; color: var(--ink-soft); padding-left: 16px; font-variant-numeric: tabular-nums; } .herkunft-kette .ohne-dokument { display: block; margin-top: 4px; font-size: .74rem; color: var(--ink-soft); font-style: italic; } /* Die vier Arten. Wer die Farbe einmal gesehen hat, erkennt beim naechsten Mal ohne Lesen, ob eine Zahl geliefert, erhoben, amtlich oder angenommen ist -- und »Annahme« soll dabei nicht wie eine Messung aussehen. */ .herkunft-kette .quelle.geliefert { --knoten: var(--lightblue); } .herkunft-kette .quelle.eigen { --knoten: var(--green); } .herkunft-kette .quelle.amtlich { --knoten: var(--purple); } .herkunft-kette .quelle.annahme { --knoten: var(--yellow-ink); } .herkunft-kette .ergebnis { --knoten: var(--blue); } .herkunft-kette .ergebnis { background: var(--blue-tint); border-radius: 10px; margin-top: 2px; } .herkunft-kette .schritt { margin: 0 0 8px; padding-left: 18px; } .herkunft-kette .schritt > p { margin: 0; padding: 2px 0 6px; font-size: .78rem; line-height: 1.45; color: var(--ink-soft); } @media (prefers-reduced-motion: reduce) { .herkunft-karte { box-shadow: 0 6px 18px rgba(0,0,0,.18); } } /* Vertraute Geräte auf der Kontoseite. Eine Zeile je Gerät: woran man es erkennt, wann es zuletzt benutzt wurde, und der Weg, es loszuwerden. */ .geraete-liste { margin-top: 4px; } .geraete-zeile { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; } .geraete-zeile:last-child { border-bottom: 0; } .geraete-name { font-weight: 600; } .geraete-wann { flex: 1; font-size: 12px; color: var(--ink-soft); } /* Der Haken auf der Seite des zweiten Faktors. Das Kästchen behält seine eigene Größe — die globale Regel input{width:100%} quetscht es sonst auf null und macht die Zeile hunderte Pixel hoch. */ .ankreuz-zeile { display: flex; align-items: center; gap: 9px; margin: 4px 0 14px; font-size: 13px; color: var(--ink-soft); cursor: pointer; } .ankreuz-zeile input[type="checkbox"] { width: 16px; height: 16px; min-width: 16px; margin: 0; flex: none; } /* Der Diktierknopf, unten rechts in der Eingabehülle. Klein und ohne Farbe im Ruhezustand: Diktieren ist ein Weg von zweien und soll das Tippen nicht verdrängen. Rot wird er erst, während aufgenommen wird — dann muss auf einen Blick klar sein, dass das Mikrofon offen ist. */ .eingabe-huelle { position: relative; } /* Ecke der Schreibflaeche: Knopf oben, Auskunft darunter. Beide rechts ausgerichtet, damit die Zeile unter dem Knopf haengt und nicht neben ihm. */ .diktat-ecke { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; pointer-events: none; /* nur der Knopf faengt Klicks */ } .diktat-ecke > * { pointer-events: auto; } /* Der Zustand faehrt aus, wenn es etwas zu sagen gibt, und wieder ein, wenn nicht. Ein Feld, das dauerhaft »Diktieren« sagt, sagt nichts -- daneben steht ein Mikrofon. */ .diktat-stand { max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; padding: 0; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); font-size: 11.5px; line-height: 1; font-variant-numeric: tabular-nums; transition: max-width .22s ease, opacity .18s ease, padding .22s ease; } .diktat-stand.sichtbar { max-width: 22em; opacity: 1; padding: 5px 10px; } .diktat-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: 12.5px; line-height: 1; cursor: pointer; } .diktat-knopf:hover { color: var(--ink); border-color: var(--ink-soft); } /* Der Pegel. Fuenf Balken, die am tatsaechlichen Mikrofonsignal haengen. Vorher stand hier ein pulsierender Punkt. Der sagte »laeuft« -- aber nicht »hoert mich«, und das ist die Frage, die man vor dem Sprechen hat. Ein stummgeschaltetes Mikrofon liefert eine Aufnahme, die man erst hinterher als leer erkennt, und dann ist der Gedanke weg. Im Ruhezustand stehen die Balken flach und blass -- ein Pegelsymbol, das auch dann als solches zu erkennen ist, wenn nichts aufgenommen wird. */ .diktat-pegel { display: inline-flex; align-items: center; gap: 2px; height: 13px; flex: none; } .diktat-balken { width: 2px; height: 100%; border-radius: 1px; background: currentColor; opacity: .45; transform: scaleY(.15); transform-origin: center; /* Kurz genug, dass es der Stimme folgt, lang genug, dass es nicht flackert. Bei 60 Bildern je Sekunde waeren die Spruenge sonst hart. */ transition: transform 60ms linear; } /* Das Mikrofon. Im Ruhezustand allein, waehrend der Aufnahme weicht es dem Pegel: Dann ist nicht mehr »kann diktieren« die Frage, sondern »hoert mich«. */ .diktat-mikro { width: 17px; height: 17px; fill: currentColor; flex: none; } .diktat-knopf.laeuft { border-color: var(--red); color: var(--red); background: var(--red-tint); width: auto; padding: 0 10px; } .diktat-knopf.laeuft .diktat-mikro { display: none; } .diktat-knopf:not(.laeuft) .diktat-pegel { display: none; } .diktat-knopf.laeuft .diktat-balken { opacity: 1; } /* Wer Bewegung im Bild nicht vertraegt, bekommt sie nicht -- der Pegel springt dann in Stufen statt zu gleiten. Die Aussage bleibt dieselbe. */ @media (prefers-reduced-motion: reduce) { .diktat-balken { transition: none; } } /* Auf schmalen Geräten sitzt der Knopf über dem Feld statt darin — im Textbereich eines Telefons ist unten rechts der Platz, an dem beim Schreiben der Daumen liegt. */ @media (max-width: 640px) { .diktat-knopf { position: static; margin-top: 8px; } } /* ---------------------------------------------------- Verbundsicht Die Haeusertabelle hat zehn Spalten und muss auf einen Bildschirm passen, ohne dass die Zahlen zusammenlaufen. */ #haus-tabelle th[data-sort] { cursor: pointer; user-select: none; } #haus-tabelle th[data-sort]:hover { color: var(--blue); } .datentabelle td.warnung { color: var(--red); font-weight: 600; } /* Die Einstufung eines aktuellen Patienten, leicht eingefaerbt (21.09.2026): bedenklich und wahrscheinlich rot, unbedenklich und unwahrscheinlich gruen, ohne Grundlage grau. */ .datentabelle td.einstufung { font-weight: 600; } .datentabelle td.einstufung.bedenklich, .datentabelle td.einstufung.wahrscheinlich { background: var(--red-tint); color: var(--red); } .datentabelle td.einstufung.unbedenklich, .datentabelle td.einstufung.unwahrscheinlich { background: var(--green-tint); color: var(--green-ink); } .datentabelle td.einstufung.ohne_grundlage { background: var(--gray-tint); color: var(--gray-ink); } /* Eine lange Falltabelle scrollt in sich, statt die Seite nach unten zu schieben; der Kopf bleibt stehen. */ .tabellen-rahmen { max-height: 60vh; overflow: auto; margin-top: 8px; } .tabellen-rahmen .datentabelle thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); } .sortier-kopf { cursor: pointer; user-select: none; } .sortier-kopf:hover { color: var(--blue); } .leise-schalter { font-size: 13px; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .knopf-leise { background: none; border: none; color: var(--ink-soft); font-size: 13px; cursor: pointer; padding: 2px 6px; } .knopf-leise:hover { color: var(--blue); } #befunde ul { margin: 0; padding-left: 20px; } #befunde li { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 6px; } /* -------------------------------------------------- Kennzahlen und Befehle Der Gegenentwurf zum Erklaerabsatz. Wo vorher ein Satz stand, der erklaert, was eine Funktion tut, steht jetzt eine Zeile, die sagt, was IST: wartend 3 fehlerhaft 1 letzter Lauf 01.09.2026, 05:12 Die Beschriftung klein und zurueckgenommen, der Wert kraeftig -- gelesen wird die Zahl, die Beschriftung nur beim ersten Mal. */ .kennzahlen { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 2px 0 14px; font-size: 13px; } .kennzahlen span { display: inline-flex; align-items: baseline; gap: 6px; } .kennzahlen i { font-style: normal; color: var(--ink-soft); font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; } .kennzahlen b { font-variant-numeric: tabular-nums; color: var(--ink); } .kennzahlen .warnung b { color: var(--red); } .kennzahlen:empty { display: none; } /* Ein Befehl zum Abtippen. Bleibt sichtbar -- er IST die Information. */ .befehl { margin: 10px 0 0; padding: 9px 12px; overflow-x: auto; background: var(--gray-tint); border-radius: 8px; font-size: 12.5px; line-height: 1.5; } .befehl code { color: var(--ink); white-space: pre; } /* ------------------------------------------------------- Tiefer bohren Der Pfad als Krumen. Jeder Krume traegt die Achse klein darueber -- ohne sie liest sich »SFB › SFM › I48« wie eine Kennung und nicht wie ein Weg. */ .krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; } .krume { border: 1px solid var(--line); background: var(--bg); border-radius: 8px; padding: 5px 11px; font-size: 13px; cursor: pointer; color: var(--ink); display: inline-flex; flex-direction: column; line-height: 1.25; text-align: left; } .krume i { font-style: normal; font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .krume:hover { border-color: var(--blue); color: var(--blue); } .krume-trenner { color: var(--ink-soft); } .achsenwahl { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .achsen-titel { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .achsenwahl > div { display: flex; flex-wrap: wrap; gap: 6px; } /* Die Achsen-Chips der Detailsicht, NUR in der Achsenwahl. Vorher galt die Regel fuer jedes Element der Klasse -- auch fuer die Abschnitte »achse« auf Statistik und Verbund, die dadurch beim Ueberfahren einen blauen, ovalen Rand bekamen (gemeldet am 21.09.2026). */ .achsenwahl .achse { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-soft); } .achsenwahl .achse:hover { border-color: var(--blue); color: var(--blue); } .achsenwahl .achse.aktiv { background: var(--blue); border-color: var(--blue); color: var(--auf-akzent); } .einzel-hinweis { margin-bottom: 12px; } /* Die Fragezeile. Ein Feld, ein Knopf -- keine Erklaerung daneben; die steht hinter dem i. */ .fragezeile { display: flex; gap: 8px; } /* Ein eigenes display schlaegt die Regel des Browsers fuer [hidden]. Ohne diese Zeile blieb das Eingabefeld stehen, obwohl es ausgeblendet war -- sichtbar geworden an der Fragenkarte ohne KI-Anbindung. */ .fragezeile[hidden] { display: none; } .fragezeile input { flex: 1; padding: 9px 13px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg); color: var(--ink); font-size: 14px; } .fragezeile input:focus { outline: none; border-color: var(--blue); } .frage-antwort { margin-top: 12px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; } .frage-antwort b { color: var(--ink); } .frage-antwort .warn { color: var(--red); } /* Die Antwort auf »wer liegt gerade«: Zahl vorn, Aufteilung als Chips. */ .aktuell-zahl { font-size: 14px; color: var(--ink); } .aktuell-zeilen { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 6px 0; } .aktuell-titel { color: var(--ink-soft); } .aktuell-zeile { background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 1px 9px; font-size: 12.5px; } .aktuell-link { display: inline-block; margin: 2px 0 4px; } /* ==================================================== Diagramme Das Diagramm fuehrt, die Tabelle belegt. Farben und Schwellen sind dieselben wie in den Tabellen -- wer beide Ansichten nebeneinander hat, soll nicht zwei Massstaebe lesen muessen. */ .diagramm { margin: 4px 0 2px; } .diagramm-svg { width: 100%; height: auto; display: block; } .diagramm-name { font-size: 12.5px; fill: var(--ink); } .diagramm-wert { font-size: 12.5px; fill: var(--ink-soft); font-variant-numeric: tabular-nums; } .diagramm-wert.unbekannt { fill: var(--ink-soft); opacity: .6; } .balken-flaeche { fill: transparent; } .balken-gruppe.klickbar { cursor: pointer; } .balken-gruppe.klickbar:hover .balken-flaeche, .balken-gruppe.klickbar:focus-visible .balken-flaeche { fill: var(--gray-tint); } .balken-gruppe:focus { outline: none; } .balken-gruppe:focus-visible .balken-flaeche { fill: var(--blue-tint); } .balken-stab { transition: opacity .12s ease; } .balken-gruppe.klickbar:hover .balken-stab { opacity: .82; } /* Kein Balken der Laenge null fuer einen unbekannten Wert -- das hiesse »null« und meint »unbekannt«. Stattdessen eine gestrichelte Andeutung. */ .balken-unbekannt { stroke: var(--ink-soft); stroke-width: 2; stroke-dasharray: 3 3; opacity: .5; } .stapel.gut { fill: var(--green); } .stapel.schlecht { fill: var(--red); } .stapel.offen { fill: var(--ink-soft); opacity: .3; } .diagramm-legende { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 8px; font-size: 12px; color: var(--ink-soft); } .diagramm-legende span::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; } .diagramm-legende .gut::before { background: var(--green); } .diagramm-legende .schlecht::before { background: var(--red); } .diagramm-legende .offen::before { background: var(--ink-soft); opacity: .3; } .diagramm-rest { margin-top: 8px; font-size: 12.5px; color: var(--ink-soft); } .gitter { stroke: var(--line); stroke-width: 1; } .achsentext { font-size: 11px; fill: var(--ink-soft); } .achsentitel { font-size: 11.5px; fill: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .punkt { fill-opacity: .72; stroke: var(--surface); stroke-width: 1.5; } .punkt-name { font-size: 11px; fill: var(--ink-soft); } .streupunkt.klickbar { cursor: pointer; } .streupunkt.klickbar:hover .punkt { fill-opacity: 1; } .streupunkt:focus { outline: none; } .streupunkt:focus-visible .punkt { stroke: var(--blue); stroke-width: 3; } .verlauf-linie { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } .verlauf-punkt.klickbar { cursor: pointer; } .verlauf-punkt.klickbar:hover .punkt { fill-opacity: 1; r: 7; } /* Die Tabelle als Beleg: da, aber nicht im Weg. */ /* Die schon zusammengestellten Themen unter dem Fragefeld. Ein Vorschlag sieht anders aus als eine freigegebene Zusammenstellung -- gestrichelt, und er nennt seinen Stand. */ .themen-liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .themen-liste .thema-knopf { font: inherit; font-size: 12.5px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: 999px; padding: 3px 11px; } .themen-liste .thema-knopf:hover { border-color: var(--blue); color: var(--blue); } .themen-liste .thema-knopf.offen { border-style: dashed; color: var(--ink-soft); } .themen-liste .vorspann { font-size: 12.5px; color: var(--ink-soft); align-self: center; margin-right: 2px; } /* Die Antwort auf eine inhaltliche Frage. Die Zahl gross, und direkt darunter, wofuer sie gilt -- die Fallzahlen tragen kein Datum, also muss der Zeitraum an der Zahl stehen und nicht in einer Fussnote. */ .thema-lage { margin: 4px 0 14px; } .thema-zahl { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; color: var(--blue); font-variant-numeric: tabular-nums; } .thema-wofuer { font-size: 15px; margin-top: 2px; } .thema-gilt { font-size: 13px; color: var(--ink-soft); margin-top: 8px; max-width: 44em; } /* Eine Zeile je Fallpauschale, und sie bleibt eine Zeile: Eine DRG-Bezeichnung hat schon mal dreihundert Zeichen. Der ganze Text steht im Titel. */ /* Was die Balken zaehlen -- sie zeigen die Fallpauschale, die Zahl darueber die geschaetzten Faelle mit der Diagnose. */ /* Die Gegenwart unter der Aufschluesselung: dieselben Zeilen, die Zahl von heute. Gruen, weil es nicht um Verluste geht, sondern um Menschen, die gerade da sind. */ .liegend-diagramm { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); } .liegend-diagramm-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 4px; font-size: 13px; } .liegend-diagramm-hinweis { color: var(--ink-soft); font-size: 12.5px; max-width: 52em; } .liegend-diagramm-leer { color: var(--ink-soft); font-size: 12.5px; padding: 8px 0 2px; } /* Wie gut Auszug und Fallliste zusammenfinden. Steht unter der Einzelfallliste, weil die Stationsspalte oft leer bleibt. */ .einzel-bezug { font-size: 12.5px; color: var(--ink-soft); margin-top: 10px; max-width: 52em; line-height: 1.5; } .thema-balkenhinweis { font-size: 12.5px; color: var(--ink-soft); margin-top: 6px; max-width: 46em; } .thema-codes { font-size: 13px; margin-top: 4px; } .thema-codes div { display: flex; gap: 12px; align-items: baseline; border-bottom: 1px solid var(--line); padding: 4px 0; } .thema-codes .kuerzel { font-weight: 600; min-width: 4.2em; font-variant-numeric: tabular-nums; } .thema-codes .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); } .thema-codes .num { font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; } /* »außer bei akutem Myokardinfarkt« -- die Zeile, die man beim Freigeben sehen muss. */ .thema-codes div.warnt { background: var(--yellow-tint); } .thema-codes div.warnt .name { color: var(--ink); } /* Was in der Codeliste fehlen koennte -- gemessen an den Diagnosen, die sich zwei Fallpauschalen teilen. */ .thema-luecken { margin-top: 14px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 13px; } .thema-luecken > b { font-size: 13px; } .thema-luecken .luecke { display: flex; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px solid var(--line); } .thema-luecken .luecke:last-of-type { border-bottom: 0; } .thema-luecken .kuerzel { font-weight: 600; min-width: 3.4em; } .thema-luecken .name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); } .thema-luecken .num { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink-soft); } .thema-luecken .luecke-rest { color: var(--ink-soft); font-size: 12.5px; margin-top: 8px; max-width: 46em; } /* Ein Vorschlag ist keine Auskunft. Er sieht deshalb anders aus als eine Antwort -- gelb, mit dem Satz davor, was noch fehlt. */ .thema-vorschlag { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .thema-vorschlag .text { flex: 1 1 22em; font-size: 13.5px; } /* Die Ersteinschaetzung. Steht nur in der Notaufnahme. Die Farben sind die des Verfahrens und muessen erkennbar bleiben -- aber sie tragen die Information NICHT allein: Auf jedem Knopf stehen Zahl und Wort. Fuer Farbenblinde waere eine reine Farbskala keine Angabe, und im Ausdruck ist sie grau. */ .triage-block { margin: 10px 0 14px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--gray-tint); } .triage-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; font-weight: 600; } .triage-frist { font-weight: 400; font-size: 12.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .triage-frist.ueberfaellig { color: var(--red); font-weight: 600; } .triage-stufen { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; } .triage-stufe { display: flex; align-items: center; gap: 6px; cursor: pointer; font: inherit; font-size: 12.5px; padding: 4px 10px 4px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .triage-stufe .nr { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; font-weight: 700; font-size: 12px; color: #fff; } .triage-stufe:hover { border-color: var(--blue); } .triage-stufe.aktiv { border-color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); } /* Die fuenf Farben des Verfahrens. Sie sitzen auf dem Zahlenkreis, nicht auf der ganzen Flaeche -- eine Reihe vollflaechiger Farbknoepfe sieht aus wie eine Warnung, und vier Fuenftel davon sind keine. */ .triage-stufe.t-rot .nr { background: #C62828; } .triage-stufe.t-orange .nr { background: #EF6C00; } .triage-stufe.t-gelb .nr { background: #F9A825; color: #33270A; } .triage-stufe.t-gruen .nr { background: #2E7D32; } .triage-stufe.t-blau .nr { background: #1565C0; } .triage-zeile { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px; } .triage-zeit { display: flex; align-items: center; gap: 5px; color: var(--ink-soft); } .triage-zeit input { font: inherit; padding: 2px 6px; border-radius: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .beleg > summary { cursor: pointer; font-size: 12.5px; color: var(--ink-soft); padding: 8px 0 4px; list-style: none; user-select: none; } .beleg > summary::-webkit-details-marker { display: none; } .beleg > summary::before { content: "▸ "; } .beleg[open] > summary::before { content: "▾ "; } .beleg > summary:hover { color: var(--blue); } /* Die Ansichtswahl: welche Frage das Diagramm beantwortet. */ .ansichtwahl { display: flex; gap: 6px; flex-wrap: wrap; } .ansicht { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; cursor: pointer; color: var(--ink-soft); } .ansicht:hover { border-color: var(--blue); color: var(--blue); } .ansicht.aktiv { background: var(--blue); border-color: var(--blue); color: var(--auf-akzent); } /* Die Auswahlleiste: eine Zeile, keine Karte. Sie stand vorher als eigener Kasten VOR dem, worum es geht. */ .auswahlleiste { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; padding: 0 2px; } .auswahlleiste label { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; } .auswahlleiste select { font-size: 13px; text-transform: none; letter-spacing: 0; padding: 5px 9px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); /* Die Hausnamen sind lang (»St. Elisabeth-Hospital / Rheinisches Rheuma-Zentrum«) und sprengten sonst die Zeile. Aufgeklappt zeigt der Browser den vollen Text. */ max-width: 230px; } .auswahl-stand { margin-left: auto; font-size: 12px; color: var(--ink-soft); } /* Das gewaehlte Element bleibt vorn -- ohne diese Rueckmeldung war nach einem Klick nicht zu sehen, worauf man geklickt hatte. */ .balken-gruppe.gewaehlt .balken-flaeche { fill: var(--blue-tint); } .balken-gruppe.gewaehlt .diagramm-name { font-weight: 700; fill: var(--blue); } .streupunkt.gewaehlt .punkt { stroke: var(--blue); stroke-width: 3; fill-opacity: 1; } .streupunkt.gewaehlt .punkt-name { font-weight: 700; fill: var(--blue); } .datentabelle tr.gewaehlt { background: var(--blue-tint); } .datentabelle tr.gewaehlt td:first-child { font-weight: 700; } /* Die Haussicht: alles ueber EIN Haus, direkt unter dem Diagramm. */ .haussicht .kennzahlen { margin-bottom: 18px; } .datentabelle.vergleich td.num b { font-variant-numeric: tabular-nums; } .datentabelle.vergleich td.num small { display: block; color: var(--ink-soft); font-size: 0.8em; } .datentabelle.vergleich td.num.warnung b { color: var(--red); } #haussicht-vergleich .unterkopf { margin-top: 18px; } /* Die Fokus-Listen gegen den Massstab des Auszugs: je Liste eine kleine Tabelle, nebeneinander, solange Platz ist. */ .ueberschneidung { margin-top: 14px; } .ueberschneidung-reihe { display: flex; flex-wrap: wrap; gap: 16px; } .ueberschneidung-reihe .datentabelle { width: auto; min-width: 320px; } #aktuell .ansichtwahl, #haussicht-aktuell .ansichtwahl { margin-bottom: 10px; } /* Der Zugangstext zum Weitergeben: gross genug, dass Anmeldename, Adresse und Link ohne Scrollen dastehen. */ textarea.zugangstext { width: 100%; min-height: 220px; font-family: inherit; font-size: 13px; line-height: 1.45; white-space: pre-wrap; resize: vertical; margin: 8px 0; } input.anmeldename { font-weight: 700; } .haussicht-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .unterkopf { font-size: 11.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; margin: 16px 0 8px; } .haussicht-spalten .unterkopf { margin-top: 0; } @media (max-width: 1100px) { .haussicht-spalten { grid-template-columns: 1fr; } } /* Der Stand, den dieser Server faehrt -- klein neben der Ueberschrift der Einstellungen. Kein Hinweistext, nur die Tatsache. */ .stand-stempel { margin-left: auto; margin-right: 14px; font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Woran ein Fall wie dieser verliert -- eine Zeile unter den Kriterien. Ruhig, solange es nichts zu tun gibt; hervorgehoben, wenn der Verlaufseintrag die Entscheidung traegt. */ .schwerpunkt { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; margin-top: 8px; padding: 7px 10px; border-radius: 8px; background: var(--gray-tint); font-size: 12px; color: var(--ink-soft); } .schwerpunkt b { color: var(--ink); font-variant-numeric: tabular-nums; } .schwerpunkt.dringend { background: var(--red-tint); } .schwerpunkt.dringend b { color: var(--red); } .sp-grund { color: var(--ink); } .sp-beleg { margin-left: auto; cursor: help; } .sp-fokus { flex-basis: 100%; font-weight: 600; color: var(--ink); cursor: help; } /* Achsenbeschriftung der Verlaufskurve. Eine Kurve ohne Einheit ist eine Linie, keine Auskunft. */ .achsen-name { font-size: 10px; fill: var(--ink-soft); text-transform: uppercase; letter-spacing: .06em; } /* Wo die Reihe unvollstaendig ist: gestrichelt und blass. Ein Rueckgang, der nur heisst »hier ist noch nicht alles geprueft«, sieht sonst aus wie ein Erfolg -- und genau so wurde er gelesen. */ .verlauf-linie.unvollstaendig { stroke-dasharray: 4 4; opacity: .45; } .punkt.offen { stroke-width: 1.5; } /* Woher die Umschrift kommt -- nur dort, wo es nicht der eigene Weg ist. Beim Diktat im Haus bleibt der Ton hier, bei Corti nicht; das ist kein Unterschied der Bequemlichkeit. */ .diktat-dienst { font-weight: 600; opacity: .85; } /* Die Kodes, die Corti vorgeschlagen hat. Der getroffene ist markiert, unsichere stehen in Klammern und blasser. */ .sp-kodes { display: block; margin-top: 4px; font-size: 11.5px; color: var(--ink-soft); } .sp-kode { display: inline-block; margin-right: 6px; padding: 1px 6px; border: 1px solid var(--line); border-radius: 6px; font-variant-numeric: tabular-nums; } .sp-kode.getroffen { border-color: var(--red); color: var(--red); font-weight: 600; } .sp-kode.unsicher { opacity: .6; } .kodes-zeile { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--gray-tint); font-size: 12px; color: var(--ink-soft); } .kodes-zeile .sp-kodes { margin-top: 0; } .kodes-warum { display: inline; } /* Was gerade passiert -- ein laufender Balken mit dem Schritt daneben. Aus dem Betrieb, 02.09.2026: »Ich drücke drauf und warte ein paar Sekunden, aber ich habe keine Rückmeldung, was jetzt vor sich geht.« Der Balken kennt kein Ende, weil das Modell keines verrät; der Text sagt dafür, welcher von zwei Schritten läuft. */ .fortschritt { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12px; color: var(--ink-soft); } .fortschritt-text { white-space: nowrap; } .fortschritt-balken { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--gray-tint); overflow: hidden; } .fortschritt-balken i { position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 2px; background: var(--blue); animation: fortschritt-laufen 1.2s ease-in-out infinite; } @keyframes fortschritt-laufen { from { left: -40%; } to { left: 100%; } } @media (prefers-reduced-motion: reduce) { .fortschritt-balken i { animation: none; left: 0; width: 100%; opacity: .5; } } /* ---------------------------------------------- Dateien ablegen Aus dem Betrieb, 15.09.2026: ein Fenster zum Hineinziehen, damit niemand die Datei jedes Mal im Auswahldialog suchen muss. Das Eingabefeld selbst bleibt vorhanden und bedienbar, es liegt nur ohne Ausdehnung darin -- weggeblendet mit display:none waere es für die Tastatur nicht mehr erreichbar. */ .ablage { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 10px; background: var(--eingabe-bg); cursor: pointer; transition: border-color .12s, background .12s; } .ablage-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .ablage-text { flex: 1; min-width: 0; color: var(--ink-soft); font-size: 13px; overflow-wrap: anywhere; } .ablage-knopf { flex: none; padding: 5px 12px; font-size: 12px; } .ablage.bereit { border-color: var(--blue); border-style: solid; background: var(--blue-tint); } .ablage.gefuellt { border-style: solid; border-color: var(--line); } .ablage.gefuellt .ablage-text { color: var(--ink); font-weight: 600; } .ablage.abgelehnt { border-color: var(--red); } .ablage.abgelehnt .ablage-text { color: var(--red); } .ablage:focus-within { border-color: var(--blue); } /* ------------------------------------- Eingespielte Dokumente Eine Tabelle für drei Arten. Die Marke vorn sagt, welche -- sie ist der einzige Unterschied, den man beim Überfliegen braucht. */ .lieferung-art { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; background: var(--gray-tint); color: var(--gray-ink); white-space: nowrap; } .lieferung-art.auszug { background: var(--blue-tint); color: var(--blue); } .lieferung-art.fallliste { background: var(--green-tint); color: var(--green-ink); } .lieferung-art.gkv { background: var(--yellow-tint); color: var(--yellow-ink); } /* Der Dateiname unter der Bezeichnung, in einer Zeile und abgeschnitten. Umgebrochen brach »2026-07-31 MDK Pruef- und Verlustquoten.xlsx« auf fuenf Zeilen um; der ganze Name steht im title. */ .datentabelle td.dokument { max-width: 260px; } .datentabelle .datei { color: var(--ink-soft); font-size: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .datentabelle td.umfang, .datentabelle td.wann { white-space: nowrap; } /* Eine Tabelle, die breiter ist als ihr Platz, rollt fuer sich. Sonst bekommt das ganze Fenster einen waagerechten Rollbalken, und die Abschnitte darueber und darunter wandern mit. */ .tabelle-rollt { overflow-x: auto; } /* Sechs Spalten in einem 839 Pixel breiten Fenster: Der Knopf am Ende und die Spalte davor bekommen so viel Platz, wie sie brauchen, und keinen mehr. Ohne das rollte die Tabelle um siebzehn Pixel. */ .datentabelle.lieferungen td:last-child { width: 1%; padding-left: 4px; } .datentabelle.lieferungen td:last-child button { padding: 4px 10px; font-size: 12px; } .datentabelle.lieferungen td.dokument { max-width: 220px; } /* Die Kuerzel der Haeuser einer verbundweiten Mappe: eine Zeile, notfalls abgeschnitten. Ohne Grenze schob die Aufzaehlung die Tabelle aus dem Fenster. */ .datentabelle.lieferungen td.umfang { max-width: 180px; } /* --------------------------------------------- Konten und Kontextmenü Aus dem Betrieb, 15.09.2026: »Die Zeilen müssen nicht so vollgeladen sein. Das Wichtigste ist der Name, gefolgt von der Mail-Adresse.« Vorher trug jede Zeile bis zu sechs Schaltflächen und umbrach auf vier Höhen. */ .konto-suche { width: 100%; max-width: 340px; margin-bottom: 12px; } .datentabelle.konten tr.konto-zeile { cursor: pointer; } .datentabelle.konten tr.konto-zeile:hover, .datentabelle.konten tr.konto-zeile:focus-visible { background: var(--blue-tint); outline: none; } .datentabelle.konten tr.still { opacity: .55; } .datentabelle.konten td { vertical-align: middle; } .konto-name { font-weight: 600; } .konto-login, .datentabelle.konten td.konto-mail { color: var(--ink-soft); font-size: 12px; } /* Die Marken im Stand tragen Text (»Wechsel offen«, »2FA fehlt«): eine Pille je Marke, nebeneinander und umbrechend. Der runde Zaehler der Bänder (20px) liess zwei Marken uebereinanderlaufen. */ .datentabelle.konten td.konto-stand { white-space: normal; } .datentabelle.konten .marke { width: auto; height: auto; padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin: 2px 4px 2px 0; } /* Die Handlungen zu einem Konto: untereinander, jede mit ihrem Satz. Was sie bewirkt, steht dabei -- es ist je Eintrag verschieden, und wer den zweiten Faktor zurücksetzt, soll es vorher wissen. */ .dialog-menue { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; } .dialog-menue-eintrag { display: block; width: 100%; text-align: left; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; } .dialog-menue-eintrag:hover { border-color: var(--blue); background: var(--blue-tint); } .dialog-menue-eintrag b { display: block; font-size: 14px; } .dialog-menue-eintrag i { display: block; margin-top: 2px; font-style: normal; font-size: 12px; color: var(--ink-soft); } .dialog-menue-eintrag.gefahr b { color: var(--red); } .dialog-menue-eintrag.gefahr:hover { border-color: var(--red); background: var(--red-tint); } /* --------------------------------------------------------- Fußzeile Aus dem Betrieb, 16.09.2026: »Eine Fußzeile mit Impressum, Datenschutz und Copyright vom IKiM 2026. In sehr klein in der untersten linken Ecke.« Sie fließt am Ende des Körpers mit und schwebt nicht: Eine feste Leiste läge auf Live über der Liste und auf Analytics über der Fußzeile der Tabellen. Auf kurzen Seiten steht sie unten, auf langen am Ende -- an beiden Orten links und klein genug, um nicht im Weg zu sein. */ .fusszeile { display: flex; align-items: center; gap: 8px; padding: 14px 20px 18px; font-size: 11px; color: var(--ink-soft); } .fusszeile a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; } .fusszeile a:hover, .fusszeile a:focus-visible { color: var(--ink); border-bottom-color: var(--line); } .fuss-zeichen { width: 14px; height: 14px; flex: none; display: block; } /* Auf der Anmeldeseite steht der Kasten mittig in der Fläche. Die Fußzeile gehört dort an den unteren Rand und nicht unter den Kasten. */ .login-seite .fusszeile { position: absolute; left: 0; bottom: 0; } /* ------------------------------------------- Impressum und Datenschutz */ .recht-kopf { padding: 18px 20px 0; } /* Die Kopfleistenfassung, wie ueberall sonst: Zeichen und Wortmarke setzt `.logo` selbst. Eine eigene Breite hier drueckte beides zusammen. */ .recht-kopf .logo { text-decoration: none; width: max-content; } .recht-blatt { max-width: 680px; margin: 0 auto; padding: 24px 20px 8px; } .recht-blatt h1 { font-size: 22px; margin: 0 0 16px; } .recht-blatt p { margin: 0 0 12px; line-height: 1.55; white-space: pre-line; } .recht-blatt .recht-leer { color: var(--ink-soft); } .recht-blatt h2 { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: 22px 0 8px; } .recht-blatt h2:first-child { margin-top: 0; }