/* Maschinen-Dashboard - Styling fuer den Wandmonitor in der Fertigungshalle. LESEABSTAND (Grundlage des ganzen Aufbaus): 40 Zoll 16:9 = 885 mm Bildbreite, bei 1920 px also 0,461 mm je Bildpunkt. Faustregel Beschriftung: rund 2,5-4 mm Versalhoehe je Meter Leseabstand, die Versalhoehe betraegt rund 0,72 der Schriftgroesse. Fuer 8-10 m quer durch die Halle braucht das Statuswort also 20-32 mm Versalhoehe - das sind rund 90 px Schriftgroesse (41 mm Schrift, 30 mm Versal). KEINE OBERGRENZEN: Frueher stand hier ueberall clamp(min, wert, MAX) mit festem Maximum (z. B. 2rem = 32 px). Auf einem 4K-Panel derselben Baugroesse haette das Maximum gegriffen und alles waere physisch halb so gross erschienen. Deshalb haengt jetzt jede Groesse in einer Kachel allein an --kh (1 % der Kachelhoehe) und jede Groesse in der Kopfzeile allein an vh. Beides verdoppelt sich auf 4K mit - Full HD und 4K sind physisch gleich gross. Untergrenzen gibt es nur dort, wo eine Linie sonst verschwaende (Balkenhoehen), nicht bei Schriftgroessen. DREI ANSICHTEN: Der Monitor wechselt selbsttaetig zwischen 'ampel', 'tag' und 'woche' (Klassen auf ). Jede Ansicht bekommt die volle Kachelflaeche und wird dadurch gross. Welche Auswertung wo steht: ampel - Name, Statuswort, "seit", Teile heute tag - Name, Statusband, Zeitleiste, Programm/Teilezaehler UND die Tageszahlen Teile/Laufzeit/Auslastung (Zeile .kz-tag) woche - Name, Zustandspunkt bzw. Statusband bei Stoerung, Wochenbalken, Wochenwert, Wochenzahlen (Zeile .kz-woche) 'alles' zeigt wie frueher alle Bausteine gleichzeitig. Keine Auswertung faellt weg - jede steht in genau einer der Ansichten. SEITEN: Mehr als CONFIG.maschinenJeSeite Kacheln gleichzeitig wuerden die Kachelhoehe und damit jede Schriftgroesse druecken. Deshalb verteilt app.js die Maschinen auf Seiten (--spalten, .kachel.nicht-auf-seite), die im gleichen Takt wie die Ansichten weiterschalten. Statusfarben sind auf der dunklen Flaeche #1a1a19 geprueft (>= 3:1). Der Status wird nie nur ueber Farbe vermittelt - das deutsche Wort steht immer in der Flaeche. */ :root { color-scheme: dark; --seite: #0d0d0d; /* Seitenhintergrund */ --kachel: #1a1a19; /* Kachel-Flaeche */ --text: #ffffff; /* Primaertext */ --text-sekundaer: #c3c2b7; --text-gedaempft: #898781; --linie: #2c2c2a; /* Haarlinien - sparsam einsetzen */ --rand: rgba(255, 255, 255, 0.10); /* --kh = 1 % der KACHELHOEHE. Den echten Wert setzt app.js nach dem Aufbau, bei jedem Ansichtswechsel und bei jeder Fenstergroessenaenderung; der Startwert hier ist nur die erste Naeherung. */ --kh: 0.5vh; /* Statusfarben (fest, nie fuer anderes wiederverwenden) */ --gruen: #0ca30c; /* laeuft - Kontrast 5,2:1 auf #1a1a19 */ --bernstein: #fab219; /* steht - Kontrast 9,5:1 */ --rot: #d03b3b; /* ALARM - Kontrast 3,6:1 */ --grau: #898781; /* offline / keine Antwort / unbekannt */ --dunkel-auf-farbe: #0b0b0b; /* Schrift auf gruen/bernstein/grau */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; /* nie horizontal scrollen */ } /* Seite fuellt exakt die Fensterhoehe - am Wandmonitor scrollt niemand. */ body { background: var(--seite); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", sans-serif; height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; } /* ================================================================== */ /* Groessen-Bausteine je Ansicht */ /* ------------------------------------------------------------------ */ /* Alle Kachel-Groessen stehen EINMAL hier als Vielfaches von --kh und */ /* werden je Ansicht ueberschrieben. Die Bausteine weiter unten kennen */ /* nur noch die Variablen - so kann keine Ansicht vergessen werden. */ /* Umrechnung bei 1920x1080 und 8 Maschinen: --kh ~ 4,71 px. */ /* ================================================================== */ .wandmonitor { /* Standard = Ansicht 'alles' (frueherer Zustand, alle Bausteine zugleich) */ --fs-name: calc(5.7 * var(--kh)); --fs-status: calc(6.1 * var(--kh)); --fs-seit: calc(3.3 * var(--kh)); --fs-detail-label: calc(2.6 * var(--kh)); --fs-detail-wert: calc(3.7 * var(--kh)); --fs-detail-stand: calc(2.4 * var(--kh)); --h-zl: calc(6.5 * var(--kh)); --h-zl-zeile: calc(3.6 * var(--kh)); --fs-zl-marke: calc(3.1 * var(--kh)); --h-wb: calc(12.7 * var(--kh)); --fs-wb-titel: calc(2.8 * var(--kh)); --fs-wb-schnitt: calc(4.6 * var(--kh)); --fs-wb-wert: calc(2.9 * var(--kh)); --fs-wb-tag: calc(3.1 * var(--kh)); --fs-kz-wert: calc(4.8 * var(--kh)); --fs-kz-label: calc(2.6 * var(--kh)); --fs-kzw-wert: calc(3.7 * var(--kh)); --fs-ampel-zahl: calc(9.35 * var(--kh)); --fs-ampel-label: calc(4.25 * var(--kh)); --p-kachel: calc(2.0 * var(--kh)); --gap-kachel: calc(1.5 * var(--kh)); } /* Ansicht 1 "Ampel" - die Fernwirkung. Statuswort rund 90 px = 30 mm Versalhoehe, traegt bis rund 12 m. Alles andere ist hier ausgeblendet, damit die Statusflaeche den Grossteil der Kachel bekommt. */ body.ansicht-ampel { --fs-name: calc(13.6 * var(--kh)); --fs-status: calc(19.1 * var(--kh)); --fs-seit: calc(7.2 * var(--kh)); --p-kachel: calc(1.4 * var(--kh)); --gap-kachel: calc(1.2 * var(--kh)); } /* Ansicht 2 "Tagesverlauf" - die Zeitleiste bekommt die Flaeche. Das Statuswort steht hier bei 16 x --kh = rund 75 px: Die Zeitleiste selbst enthaelt keinen Text, das Statusband ist also die einzige Aussage dieser Ansicht, die quer durch die Halle ankommt. 75 px ist genau die Untergrenze fuer 8-10 m - kurze Woerter (laeuft, steht, ALARM) erreichen sie, lange verkleinert statusSchriftAnpassen() so weit, dass sie vollstaendig hineinpassen (breitester Fall "ohne Daten": 56 px, rund 6 m). Mehr gibt die Kachelbreite neben dem "seit HH:MM" nicht her. */ body.ansicht-tag { --fs-name: calc(10.2 * var(--kh)); --fs-status: calc(16 * var(--kh)); --fs-seit: calc(5.1 * var(--kh)); --h-zl: calc(12.75 * var(--kh)); --h-zl-zeile: calc(5.6 * var(--kh)); --fs-zl-marke: calc(4.67 * var(--kh)); --fs-detail-label: calc(4.25 * var(--kh)); --fs-detail-wert: calc(5.95 * var(--kh)); --fs-detail-stand: calc(3.8 * var(--kh)); } /* Ansicht 3 "Woche" - der Wochenwert bekommt die Groesse, die 7 Saeulen die Flaeche. Der Wochenwert (z. B. "58 %") ist die einzige Zahl, wegen der diese Ansicht ueberhaupt eingeblendet wird; er steht deshalb bei 19 x --kh = rund 90 px wie das Statuswort der Ampel-Ansicht. Die Wochen-Kennzahlen darunter sind bewusst kleiner - sie sind eine Nahansicht. */ body.ansicht-woche { --fs-name: calc(10.2 * var(--kh)); --fs-status: calc(8.5 * var(--kh)); /* nur bei Stoerung sichtbar */ --fs-seit: calc(5.1 * var(--kh)); --h-wb: calc(25.5 * var(--kh)); --fs-wb-titel: calc(4.67 * var(--kh)); --fs-wb-schnitt: calc(19 * var(--kh)); --fs-wb-wert: calc(5.1 * var(--kh)); --fs-wb-tag: calc(4.67 * var(--kh)); --fs-kzw-wert: calc(5.4 * var(--kh)); --fs-kz-label: calc(3.4 * var(--kh)); } /* Zeigt eine Kachel wegen ALARM oder fehlender Daten zusaetzlich ihr Statusband (siehe unten), braucht das Band Platz - dann werden die Saeulen flacher statt aus der Kachel zu laufen. */ body.ansicht-woche .kachel.alarm, body.ansicht-woche .kachel.veraltet { --h-wb: calc(15 * var(--kh)); } /* ------------------------------------------------------------------ */ /* Kopfzeile */ /* ------------------------------------------------------------------ */ .kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 2rem; flex-wrap: wrap; padding: clamp(0.3rem, 0.8vh, 0.7rem) 1rem; border-bottom: 1px solid var(--linie); } /* Wandmonitor: feste Hoehe. Sie darf sich beim Ansichtswechsel NICHT aendern - sonst aendert sich die Kachelhoehe und damit --kh, und die ganze Anzeige wuerde bei jedem Wechsel springen. Drei Spalten, damit die wichtigste Zahl der Seite wirklich mittig steht. */ .wandmonitor .kopfzeile { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0 2vh; flex: none; height: 9.8vh; padding: 0.6vh 1.4vh; } /* Absender-Block: Wortmarke links, daneben der Systemname - eine Sperrlinie aus zwei Teilen, getrennt von einer Haarlinie. ⚠️ Die Kopfzeile behaelt ihre feste Hoehe von 9.8vh, und das ist keine Schoenheitsfrage: waechst der Kopf, schrumpft die Kachel, und weil --kh 1 % der KACHELHOEHE ist, schrumpft damit JEDE Schrift in JEDER Kachel mit - auch das Statuswort, an dem die Fernwirkung haengt. Deshalb bleibt die Wortmarke mit 4.2vh deutlich unter dem Innenraum (9.8vh - 2 x 0.6vh = 8.6vh) und traegt keine eigene Hoehe bei. Gemessen bei 1920x1080 vor und nach dem Einbau: Kachel 471,1 px, Statuswort 90,0 px - unveraendert. */ .wandmonitor .kopf-links { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 2.2vh; } /* Die Wortmarke ist WEISS auf durchsichtig - sie traegt nur auf dunklem Grund. Auf einer hellen Flaeche waere sie unsichtbar; wer diese Seite je aufhellt, braucht eine zweite Bilddatei. */ .kopf-marke { flex: none; display: flex; align-items: center; } .kopf-marke img { height: 4.2vh; width: auto; display: block; } /* Haarlinie zwischen Marke und Systemname. Bewusst neutral und NICHT im Markengruen: Gruen heisst auf diesem Monitor "laeuft" (--gruen). Eine gruene Linie in der Kopfzeile waere eine Statusaussage, die keine ist. */ .kopf-text { min-width: 0; overflow: hidden; padding-left: 2.2vh; border-left: 1px solid rgba(255, 255, 255, 0.18); } .kopfzeile h1 { margin: 0; font-size: clamp(1rem, 2.2vh, 1.7rem); font-weight: 700; letter-spacing: 0.02em; } /* "LEITSTAND" weit gesperrt und in mittlerer Staerke: neben der fetten Wortmarke wirkt ein zweiter fetter Schriftzug gedraengt, gesperrte Versalien in Strichstaerke 500 lesen sich als zweiter Teil derselben Zeile. Die Versalien stehen per CSS da, im Quelltext bleibt "Leitstand" - Vorlesewerkzeuge buchstabieren Grossbuchstaben sonst einzeln. */ .wandmonitor .kopfzeile h1 { font-size: 2.9vh; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; white-space: nowrap; } .legende { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2vh 1.6vh; margin: 0.35vh 0 0; padding: 0; font-size: 1.4vh; color: var(--text-sekundaer); } .legende li { display: flex; align-items: center; gap: 0.6vh; } .chip { width: 0.9em; height: 0.9em; border-radius: 3px; display: inline-block; flex: none; } .chip-keine-daten { background: repeating-linear-gradient(45deg, #4a4943 0 3px, var(--kachel) 3px 6px); } /* Der Seitenname, mittig zwischen Marke und Uhr. Hier stand bis 15.09.2026 die Zusammenfassung "x von 8 Maschinen laufen" mit 5.2vh und Strichstaerke 800 - eine ZAHL, die aus 10 m lesbar sein musste. Ein Titel muss das nicht: er wird einmal gelesen und dann nicht mehr. Darum kleiner und leichter, damit er den Statuswoertern in den Kacheln nicht die Aufmerksamkeit nimmt. */ .kopf-titel { margin: 0; font-size: 3.6vh; font-weight: 600; line-height: 1.05; letter-spacing: 0.01em; text-align: center; white-space: nowrap; } .kopf-rechts { text-align: right; } .uhr { margin: 0; font-size: 4.4vh; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; } /* Datum und Verbindung stehen in EINER Zeile - zwei ruhige Graustufen weniger und die Kopfzeile bleibt flach. */ .kopf-fuss { display: flex; justify-content: flex-end; align-items: baseline; gap: 1.2vh; margin: 0.3vh 0 0; } .datum { margin: 0; color: var(--text-sekundaer); font-size: 1.6vh; } /* Grundform gilt auch fuer stillstand.html (Leseansicht) - dort darf die Schrift NICHT an der Fensterhoehe haengen. */ .verbindung { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; } .wandmonitor .verbindung { margin: 0; font-size: 1.6vh; } /* Alter der juengsten MESSUNG, direkt neben "Stand" (= letzter Abruf). Bewusst zurueckhaltend: Die Zeile steht rund um die Uhr da und soll nur dann auffallen, wenn sie veraltet ist. Siehe config.js, "Alter der Messdaten", und app.js -> verbindungAnzeigen. */ .datenalter { margin: 0.15rem 0 0; font-size: 0.9rem; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; white-space: nowrap; } .wandmonitor .datenalter { margin: 0; font-size: 1.6vh; } .datenalter.veraltet { color: var(--bernstein, #f59e0b); font-weight: 700; } /* display ausdruecklich, damit ein spaeteres display:flex am Elternteil das hidden-Attribut nicht uebersteuert (dieselbe Falle wie beim Leitstand). */ .datenalter[hidden] { display: none; } .verbindung.ok::before { content: ""; display: inline-block; width: 0.55em; height: 0.55em; border-radius: 50%; background: var(--gruen); margin-right: 0.4em; } .verbindung.gestoert { color: #ffffff; background: var(--rot); padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 700; } /* --- Anzeige der laufenden Ansicht (Punkte + Fortschritt) ------------ */ /* Bewusst leise: Sie beantwortet nur "welche Ansicht laeuft und wie lange noch". Sie ist zugleich der Schalter fuer die Bedienung von Hand. */ .ansicht-leiste { display: flex; align-items: center; justify-content: center; gap: 1vh; width: fit-content; margin: 0.45vh auto 0; padding: 0.25vh 1vh; border-radius: 1vh; font-size: 1.5vh; color: var(--text-gedaempft); cursor: pointer; user-select: none; } .ansicht-leiste:hover { background: rgba(255, 255, 255, 0.06); } .ansicht-leiste:focus-visible { outline: 2px solid var(--text-sekundaer); outline-offset: 2px; } .al-punkte { display: flex; align-items: center; gap: 0.7vh; } .al-punkt { width: 0.95vh; height: 0.95vh; border-radius: 50%; background: #4a4943; } .al-punkt.aktiv { background: var(--text); } .al-name { font-weight: 700; color: var(--text-sekundaer); min-width: 11ch; text-align: left; } .al-balken { width: 14vh; height: 0.55vh; border-radius: 0.3vh; background: #34332f; overflow: hidden; } .al-fortschritt { display: block; height: 100%; width: 0; background: var(--text-sekundaer); } /* Pause nach Bedienung von Hand - muss sichtbar sein, sonst haelt man den stehenden Wechsel fuer einen Fehler. */ .ansicht-leiste.pausiert .al-fortschritt { background: var(--bernstein); } .ansicht-leiste.pausiert .al-hinweis { color: var(--bernstein); font-weight: 700; } .ansicht-leiste.gehalten .al-fortschritt { background: var(--rot); } .ansicht-leiste.gehalten .al-hinweis { color: #ff8c8c; font-weight: 700; } .al-hinweis:empty { display: none; } /* Ein einziger Eintrag in config.ansichten = fester Zustand: dann sagt die Leiste nur noch, was zu sehen ist. */ .ansicht-leiste.fest .al-balken, .ansicht-leiste.fest .al-punkte { display: none; } /* Vollbreites Banner bei Verbindungsstoerung */ .stoerungsbanner { background: var(--rot); color: #ffffff; font-size: 3.4vh; font-weight: 800; text-align: center; letter-spacing: 0.02em; padding: 0.5vh 1rem; flex: none; animation: pulsieren 1.6s ease-in-out infinite; } .stoerungsbanner[hidden] { display: none; } /* ------------------------------------------------------------------ */ /* Kachel-Raster */ /* ------------------------------------------------------------------ */ /* 4 Spalten x 2 Zeilen bei 8 Maschinen. Kommen Leo 1600 und Tsugami dazu, bleibt die Kachelgroesse gleich: app.js verteilt die Maschinen dann auf zwei Seiten zu je 5 Kacheln und setzt --spalten (hier 3, also 3+2). Ohne das waeren es 4x3, die Kachel wuerde flacher und alle Schriften kleiner. */ .raster { display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 0.6rem; padding: 0.6rem 1rem 0.8rem; flex: 1; min-height: 0; overflow: hidden; transition: opacity 200ms ease; } /* Kurze Ueberblendung beim Ansichtswechsel */ .raster.wechselt { opacity: 0.12; } /* Schmalere Fenster (Buero-PC): 2 bzw. 1 Spalte, dann darf gescrollt werden */ @media (max-width: 1400px) { body { height: auto; overflow: visible; display: block; } .wandmonitor .kopfzeile { height: auto; padding: 0.7rem 1rem; } .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; overflow: visible; } } @media (max-width: 900px) { .raster { grid-template-columns: minmax(0, 1fr); } } .kachel { background: var(--kachel); border-radius: 10px; padding: var(--p-kachel) calc(var(--p-kachel) * 1.1); display: flex; flex-direction: column; gap: var(--gap-kachel); min-width: 0; min-height: 0; overflow: hidden; } .kachel.veraltet { opacity: 0.72; } /* Maschinen einer anderen Seite (siehe app.js, seiteAnwenden) */ .kachel.nicht-auf-seite { display: none; } /* line-height 1.36 statt 1.05: zusammen mit overflow:hidden wurde der Abstieg unter der Grundlinie abgeschnitten. Nachgemessen (Nullhoehen-Sonde auf der Grundlinie): der Platz unter der Grundlinie ist Zeilenhoehe/2 minus 0,414 em, gebraucht werden 0,25 em - noetig sind also mindestens 1,33. 1,36 laesst etwas Luft fuer andere Schriftschnitte. Heute hat keine Maschine eine Unterlaenge im Namen - der Wert soll aber nicht davon abhaengen, wie die naechste Maschine heisst. */ .kachel-name { margin: 0; font-size: var(--fs-name); line-height: 1.36; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: clip; } /* Zustandspunkt vor dem Maschinennamen. Nur die Wochenansicht zeigt ihn: dort ist das Statusband im Normalfall ausgeblendet, ganz ohne Zustandsaussage duerfte diese Ansicht aber nicht laufen. */ .zustand-punkt { display: none; } body.ansicht-woche .zustand-punkt { display: inline-block; width: 0.75em; height: 0.75em; border-radius: 50%; margin-right: 0.4em; vertical-align: baseline; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35); } /* --- Statusflaeche ---------------------------------------------------- */ .status-band { display: flex; align-items: center; border-radius: calc(1.4 * var(--kh)); padding: calc(1.0 * var(--kh)) calc(1.4 * var(--kh)); min-width: 0; } /* Ampel-Ansicht: die Flaeche nimmt den Grossteil der Kachel ein und traegt Wort und Uhrzeit uebereinander in der Mitte. */ body.ansicht-ampel .status-band { flex: 1 1 auto; min-height: 0; padding: calc(0.6 * var(--kh)) calc(0.5 * var(--kh)); border-radius: calc(2.0 * var(--kh)); } .status-mitte { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; width: 100%; min-width: 0; } body.ansicht-ampel .status-mitte { flex-direction: column; align-items: center; justify-content: center; gap: calc(0.3 * var(--kh)); } /* line-height: overflow:hidden schneidet an der Polsterkante ab. Bei 1.05 blieben unter der Grundlinie nur 0,125 em, der Abstieg braucht 0,25 em - das "g" in "angehalten" und "kein Signal" wurde also angeschnitten. Nachgemessen (Nullhoehen-Sonde auf der Grundlinie): der Platz unter der Grundlinie ist Zeilenhoehe/2 minus 0,414 em; fuer 0,25 em Abstieg braucht es also mindestens 1,33. 1,36 laesst etwas Luft. Gerechnet wird bewusst aus --fs-status und NICHT aus der laufenden Schriftgroesse: verkleinert statusSchriftAnpassen() ein langes Wort, soll die Zeile trotzdem gleich hoch bleiben - sonst stuenden die Zeitleisten benachbarter Kacheln je nach Laenge des Statusworts auf anderer Hoehe. text-overflow: Die Breite haelt statusSchriftAnpassen(); die Ellipse ist nur das Netz darunter - ein Rest-Ueberlauf soll sichtbar sein statt stumm zu verschwinden. */ .status-text { font-size: var(--fs-status); line-height: calc(1.36 * var(--fs-status)); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* darf NIE umbrechen */ max-width: 100%; } .status-seit { font-size: var(--fs-seit); line-height: 1.15; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } /* Statusfarben - fuer Band, Zeitleisten-Segmente und Legenden-Chips */ .st-laeuft { background: var(--gruen); color: var(--dunkel-auf-farbe); } .st-steht { background: var(--bernstein); color: var(--dunkel-auf-farbe); } .st-alarm { background: var(--rot); color: #ffffff; } .st-grau { background: var(--grau); color: var(--dunkel-auf-farbe); } /* Dezentes Pulsieren nur bei ALARM */ .kachel.alarm .status-band { animation: pulsieren 1.6s ease-in-out infinite; } @keyframes pulsieren { 0%, 100% { filter: none; } 50% { filter: brightness(1.3); } } @media (prefers-reduced-motion: reduce) { .kachel.alarm .status-band { animation: none; } .stoerungsbanner { animation: none; } .raster { transition: none; } .raster.wechselt { opacity: 1; } } /* --- Die eine Zahl der Ampel-Ansicht ---------------------------------- */ .ampel-zahl { display: none; align-items: baseline; justify-content: center; gap: calc(1.4 * var(--kh)); min-width: 0; } .az-wert { font-size: var(--fs-ampel-zahl); line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; } .az-label { font-size: var(--fs-ampel-label); color: var(--text-gedaempft); white-space: nowrap; } /* ------------------------------------------------------------------ */ /* Programm / Teilezaehler */ /* ------------------------------------------------------------------ */ .details { display: flex; flex-direction: row; justify-content: space-between; gap: 0.3rem 1rem; flex-wrap: wrap; } .detail { display: flex; align-items: baseline; gap: 0.45rem; min-width: 0; } .detail-label { color: var(--text-gedaempft); font-size: var(--fs-detail-label); flex: none; } .detail-wert { font-size: var(--fs-detail-wert); font-weight: 700; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .detail-stand { color: var(--text-gedaempft); font-size: var(--fs-detail-stand); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ */ /* Tages-Zeitleiste */ /* ------------------------------------------------------------------ */ .zeitleiste { min-width: 0; } /* In der Tagesansicht liegt die Zeitleiste mittig zwischen Statusband und Programmzeile, statt oben zu kleben. */ body.ansicht-tag .zeitleiste { margin: auto 0; } .zl-balken { position: relative; height: var(--h-zl); min-height: 10px; border-radius: 5px; overflow: hidden; /* Schraffierter Grund = keine Daten */ background: repeating-linear-gradient(45deg, #26261f 0 5px, #131311 5px 10px); } .zl-segmente { position: absolute; inset: 0; } .zl-segment { position: absolute; top: 0; bottom: 0; min-width: 2px; /* kurze Ereignisse nie unter 2 px */ } /* Kurze Alarme muessen sichtbar bleiben: Mindestbreite + oben liegen */ .zl-segment.st-alarm { min-width: 4px; z-index: 2; } /* Jetzt-Linie: aktuelle Uhrzeit auf der Zeitleiste */ .zl-jetzt { position: absolute; top: 0; bottom: 0; width: 2px; background: #ffffff; z-index: 3; pointer-events: none; } body.ansicht-tag .zl-jetzt { width: 3px; } .zl-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.22); pointer-events: none; } .zl-beschriftung { position: relative; height: var(--h-zl-zeile); margin-top: 2px; } /* Im 4-Spalten-Raster ist die Kachel schmal - dort wird nur alle 6 Stunden beschriftet (0, 6, 12, 18, 24), sonst ueberlappen die Texte. ⚠️ Der Riegel dafuer haengt an der Kachel-BREITE (< 520 px), die Schriftgroesse der Marken ueber --fs-zl-marke aber an der HOEHE. Auf grossen Panels greift er deshalb nicht mehr, obwohl die Schrift mitwaechst. Seit 15.09.2026 tragen die Marken nur noch die Zahl ohne " Uhr" - das entschaerft es mit Luft, behebt die Schieflage aber nicht. Zahlen stehen am Einbauort in maschinen-dashboard.js. */ .kachel.schmal .zl-marke-fein { display: none; } .zl-marke { position: absolute; transform: translateX(-50%); font-size: var(--fs-zl-marke); color: var(--text-sekundaer); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ */ /* Wochenbalken (Auslastung der letzten 7 Tage) */ /* ------------------------------------------------------------------ */ .wochenbalken { display: flex; flex-direction: column; gap: calc(0.4 * var(--kh)); min-width: 0; } body.ansicht-woche .wochenbalken { margin: auto 0; } .wb-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .wb-kopf-titel { font-size: var(--fs-wb-titel); color: var(--text-gedaempft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Statistikabruf faellt aus: die Saeulen zeigen den letzten Stand weiter, der Titel sagt seit wann. Bernstein = hinsehen. */ .wb-kopf-titel.wb-titel-alt { color: var(--bernstein); font-weight: 700; } .wb-schnitt { font-size: var(--fs-wb-schnitt); line-height: 1.05; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } /* Ampelfarben - gelten fuer Saeulen (Flaeche) und Wochenwert (Text) */ .wb-gut { background: var(--gruen); } .wb-schwach { background: var(--bernstein); } .wb-kritisch { background: var(--rot); } .wb-unbekannt { background: var(--grau); } .wb-schnitt.wb-gut { background: none; color: var(--gruen); } .wb-schnitt.wb-schwach { background: none; color: var(--bernstein); } .wb-schnitt.wb-kritisch { background: none; color: #ff6b6b; } /* heller: als Text lesbar */ .wb-schnitt.wb-unbekannt { background: none; color: var(--text-gedaempft); } .wb-diagramm { position: relative; height: var(--h-wb); min-height: 16px; } /* Zahlenreihe, Saeulen und Wochentage teilen sich EIN 7-Spalten-Raster, sonst steht keine Zahl genau ueber ihrem Tag. */ .wb-werte, .wb-spuren, .wb-achse { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); /* Obergrenze an --kh, nicht an einen festen px-Wert: sonst stuenden die Saeulen auf 4K enger beieinander als auf Full HD. */ gap: clamp(2px, 0.9%, calc(1.8 * var(--kh))); } .wb-werte span, .wb-achse span { text-align: center; min-width: 0; overflow: hidden; white-space: nowrap; line-height: 1.15; } /* Genauer Prozentwert je Tag ueber der Saeule */ .wb-werte span { font-size: var(--fs-wb-wert); font-weight: 700; color: var(--text-sekundaer); font-variant-numeric: tabular-nums; } .wb-werte span.wb-heute-text { color: var(--text); } .wb-spuren { position: absolute; inset: 0; align-items: end; } /* Eine Spur je Tag - die leere Spur zeigt den 100-%-Bezug */ .wb-spur { position: relative; height: 100%; min-width: 0; display: flex; align-items: flex-end; justify-content: center; background: rgba(255, 255, 255, 0.09); border-radius: 3px; overflow: hidden; } .wb-saeule { width: 100%; border-radius: 2px 2px 0 0; } /* Echte 0 % - schmaler Sockel mit heller Oberkante, damit er nicht mit "keine Daten" verwechselt wird */ .wb-saeule.wb-null { box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.85); } /* Keine Daten: kraeftige Schraffur plus Strich - nie eine 0-Saeule. "keine Daten" und "0 %" sind zwei verschiedene Aussagen. */ .wb-spur.wb-ohne { background: repeating-linear-gradient(45deg, var(--grau) 0 6px, var(--linie) 6px 8px); align-items: center; } .wb-ohne-zeichen { font-size: var(--fs-wb-tag); font-weight: 800; color: var(--text); line-height: 1; } /* Heutiger Tag: weisser Rahmen - gleiche Sprache wie die Jetzt-Linie */ .wb-spur.wb-heute { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); } /* Waagerechte Linie fuer den Wochenwert */ .wb-mittel { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(255, 255, 255, 0.65); z-index: 2; pointer-events: none; } body.ansicht-woche .wb-mittel { border-top-width: 2px; } .wb-achse span { font-size: var(--fs-wb-tag); color: var(--text-gedaempft); } .wb-achse span.wb-heute-text { color: var(--text); font-weight: 800; } /* Ansicht noch nicht eingerichtet (SQL-Datei nicht ausgefuehrt) */ .wb-hinweis { font-size: var(--fs-wb-titel); color: var(--text-gedaempft); align-self: center; margin: auto; } .wb-nicht-eingerichtet .wb-spuren { justify-content: center; } /* ------------------------------------------------------------------ */ /* Tages-Kennzahlen (+ Wochenzeile) */ /* ------------------------------------------------------------------ */ .kennzahlen { border-top: 1px solid var(--linie); padding-top: calc(1.2 * var(--kh)); margin-top: auto; /* Kennzahlen buendig am Kachel-Fuss */ } /* In der Wochenansicht steht dort nur noch die Wochenzeile - ohne Trennlinie, die Ansicht soll ruhig sein. */ body.ansicht-woche .kennzahlen { border-top: none; } body.ansicht-woche .kz-reihe.kz-tag { display: none; } .kz-reihe { display: flex; gap: 0.5rem; } .kz { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 0.05rem; min-width: 0; } .kz-wert { font-size: var(--fs-kz-wert); font-weight: 700; font-variant-numeric: tabular-nums; } .kz-label { font-size: var(--fs-kz-label); color: var(--text-gedaempft); white-space: nowrap; } /* Zweite Zeile: dieselben Spalten, klar untergeordnet */ .kz-woche { position: relative; margin-top: 2px; padding-top: 2px; } .kzw { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; min-width: 0; } .kzw-wert { font-size: var(--fs-kzw-wert); font-weight: 700; color: var(--text-sekundaer); font-variant-numeric: tabular-nums; } /* Die Beschriftung der Wochenzeile braucht nur die Wochenansicht - sonst steht sie doppelt unter der Tageszeile. */ .kzw .kz-label { display: none; } body.ansicht-woche .kzw .kz-label { display: block; } body.ansicht-woche .kzw-wert { color: var(--text); } /* "Woche" steht einmal links und darf die Spaltenflucht nicht stoeren */ .kz-woche-marke { position: absolute; left: 0; top: 50%; transform: translateY(-40%); font-size: var(--fs-detail-stand); color: var(--text-gedaempft); pointer-events: none; } body.ansicht-woche .kz-woche-marke { display: none; } /* ================================================================== */ /* Sichtbarkeit je Ansicht */ /* ------------------------------------------------------------------ */ /* Jede Kachel enthaelt IMMER alle Bausteine - der Wechsel blendet nur um. */ /* Dadurch bleibt die Zeichenlogik in app.js fuer alle Ansichten dieselbe. */ /* ================================================================== */ /* Ansicht 1 "Ampel": nur Name, Statusflaeche und eine Zahl. */ body.ansicht-ampel .details, body.ansicht-ampel .zeitleiste, body.ansicht-ampel .wochenbalken, body.ansicht-ampel .kennzahlen { display: none; } body.ansicht-ampel .ampel-zahl { display: flex; } /* Die Legende erklaert Farben, die hier ohnehin beschriftet sind. */ body.ansicht-ampel .legende { display: none; } /* Ansicht 2 "Tagesverlauf": Zeitleiste statt Wochenblock. Die Tageszahlen (Teile heute, Laufzeit heute, Auslastung) stehen HIER - sie kaemen sonst in keiner einzigen Ansicht mehr vor. Platz ist da: der Kachelinhalt dieser Ansicht braucht ohne sie nur rund 270 von 471 px. */ body.ansicht-tag .wochenbalken { display: none; } body.ansicht-tag .kz-reihe.kz-woche { display: none; } body.ansicht-tag .legende-woche { display: none; } /* Zeitleiste ueber die Programmzeile ziehen (DOM-Reihenfolge bleibt) */ body.ansicht-tag .zeitleiste { order: 4; } body.ansicht-tag .details { order: 5; } body.ansicht-tag .kennzahlen { order: 6; } /* Ansicht 3 "Woche": Name mit Zustandspunkt, Saeulen und Wochenzeile. */ body.ansicht-woche .status-band, body.ansicht-woche .details, body.ansicht-woche .zeitleiste { display: none; } body.ansicht-woche .legende-status { display: none; } /* Ausnahme: Bei ALARM/NOT-AUS und bei fehlenden Daten ist der Zustand die wichtigere Aussage als der Wochenwert - dann bleibt das Statusband auch hier stehen. Ohne diese Regel meldete die Woche-Ansicht 15 s lang "Auslastung 7 Tage 56 %", waehrend die Maschine im ALARM stand. */ body.ansicht-woche .kachel.alarm .status-band, body.ansicht-woche .kachel.veraltet .status-band { display: flex; } /* ================================================================== */ /* Seitenwechsel */ /* ================================================================== */ /* Titel und Verweis auf die andere Seite stehen in EINER Zeile. */ .kopf-titelzeile { display: flex; align-items: baseline; gap: 0.9rem; flex-wrap: wrap; } /* Bewusst leise: grau, klein. Am Wandmonitor klickt niemand - dort darf der Verweis nicht mit dem Status konkurrieren. */ .kopf-link { font-size: 0.85rem; font-weight: 400; color: var(--text-gedaempft); text-decoration: none; border-bottom: 1px solid var(--linie); white-space: nowrap; } .wandmonitor .kopf-link { font-size: 1.5vh; } .kopf-link:hover, .kopf-link:focus-visible { color: var(--text); border-bottom-color: var(--text-sekundaer); } /* ================================================================== */ /* Leseansicht (stillstand.html) */ /* ------------------------------------------------------------------ */ /* KEIN Wandmonitor, sondern eine Seite fuer den Schreibtisch: normale */ /* Schriftgroessen, die Seite darf scrollen. Farben, Schrift und */ /* Kopfzeile kommen unveraendert vom Dashboard. */ /* ================================================================== */ body.leseansicht { height: auto; min-height: 100vh; display: block; overflow: visible; line-height: 1.4; } .leseansicht .kopfzeile { align-items: flex-start; padding: 0.9rem 1.25rem; gap: 0.8rem 2rem; } /* Ueberschrift fest statt an die Fensterhoehe gekoppelt - eine Leseseite soll beim Verkleinern des Fensters nicht schrumpfen. */ .leseansicht .kopfzeile h1 { font-size: 1.5rem; } .sl-zweck { margin: 0.4rem 0 0; max-width: 64ch; font-size: 0.9rem; color: var(--text-sekundaer); } /* --- Steuerung (Zeitraum, Maschine, Stand) --------------------------- */ .sl-steuerung { display: flex; align-items: flex-end; gap: 0.6rem 1.2rem; flex-wrap: wrap; } .sl-feld { display: flex; flex-direction: column; gap: 0.2rem; } .sl-feld > span { font-size: 0.75rem; color: var(--text-gedaempft); } .sl-steuerung select { background: var(--kachel); color: var(--text); border: 1px solid var(--rand); border-radius: 6px; padding: 0.35rem 0.5rem; font-family: inherit; font-size: 0.95rem; min-width: 10rem; } .sl-steuerung select:focus-visible { outline: 2px solid var(--text-sekundaer); outline-offset: 1px; } /* Abruf von Hand. Sichtbar, weil die Seite sich nur noch selten selbst nachlaedt - die Datenbank-Ansicht ist teuer. Waehrend des Abrufs gesperrt, sonst startet ein ungeduldiger Klick den naechsten Abruf. */ .sl-knopf { background: var(--kachel); color: var(--text); border: 1px solid var(--rand); border-radius: 6px; padding: 0.35rem 0.9rem; font-family: inherit; font-size: 0.95rem; cursor: pointer; } .sl-knopf:hover:not(:disabled) { border-color: var(--text-sekundaer); } .sl-knopf:focus-visible { outline: 2px solid var(--text-sekundaer); outline-offset: 1px; } .sl-knopf:disabled { color: var(--text-gedaempft); cursor: progress; } .leseansicht .verbindung { padding-bottom: 0.35rem; } /* --- Stoerungsmeldung ------------------------------------------------ */ /* Sichtbar, aber ohne das pulsierende Vollbild-Banner des Wandmonitors - am Schreibtisch reicht ein roter Kasten. */ .sl-stoerung { margin: 0.9rem 1.25rem 0; padding: 0.65rem 0.9rem; border: 1px solid var(--rot); border-left: 4px solid var(--rot); border-radius: 8px; background: rgba(208, 59, 59, 0.14); font-size: 0.95rem; } .sl-stoerung[hidden] { display: none; } /* --- Inhalt ---------------------------------------------------------- */ .sl-inhalt { padding: 1.1rem 1.25rem 3rem; max-width: 76rem; } .sl-summe { display: block; background: var(--kachel); border: 1px solid var(--rand); border-radius: 10px; padding: 0.85rem 1rem; margin-bottom: 1.6rem; } /* Solange nichts drinsteht (z. B. config.js fehlt), keinen leeren Kasten zeigen. */ .sl-summe:empty { display: none; } .sl-summe-zeile { margin: 0; font-size: 1.1rem; font-weight: 700; } /* Zwei getrennte Hauptzahlen: belegte Zeit und Zeit ohne Beleg. Bewusst NICHT addiert - eine Summe, in der zwei Drittel nie gemessen wurden, waere die unehrlichste Zahl der Seite. */ .sl-kennzahlen { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 0.7rem 0 0; } .sl-kennzahl { flex: 1 1 16rem; border: 1px solid var(--rand); border-radius: 8px; padding: 0.55rem 0.75rem; } .sl-kennzahl-wert { margin: 0; font-size: 1.7rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; } .sl-kennzahl-name { margin: 0.1rem 0 0; font-size: 0.95rem; font-weight: 600; } .sl-kennzahl-erklaerung { margin: 0.25rem 0 0; font-size: 0.8rem; color: var(--text-gedaempft); } .sl-kennzahl-belegt { border-left: 4px solid var(--text-sekundaer); } /* Ohne Beleg: dieselbe Schraffur wie ueberall im Dashboard fuer "keine Daten", dazu Bernstein = hinsehen. */ .sl-kennzahl-unbelegt { border-left: 4px solid var(--bernstein); background: repeating-linear-gradient(45deg, rgba(250, 178, 25, 0.11) 0 6px, rgba(0, 0, 0, 0) 6px 12px), rgba(0, 0, 0, 0); } .sl-kennzahl-unbelegt .sl-kennzahl-wert { color: var(--bernstein); } .sl-summe-teilung { display: flex; flex-wrap: wrap; gap: 0.4rem 1.6rem; list-style: none; margin: 0.6rem 0 0; padding: 0; font-size: 0.95rem; color: var(--text-sekundaer); } .sl-summe-teilung li { display: flex; align-items: baseline; gap: 0.5rem; } .sl-summe-fuss { margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--linie); font-size: 0.85rem; color: var(--text-gedaempft); max-width: 82ch; } .sl-block { margin-bottom: 2rem; } .sl-block > h2 { margin: 0 0 0.15rem; font-size: 1.15rem; } .sl-block-hinweis { margin: 0 0 0.7rem; font-size: 0.85rem; color: var(--text-gedaempft); } .sl-liste { display: flex; flex-direction: column; gap: 0.5rem; } /* --- Rangtabelle je Maschine ---------------------------------------- */ /* Beantwortet "welche Maschine stand wie lange" ohne Scrollen durch Dutzende Karten. Reine div/CSS-Balken - kein Diagramm-Baukasten. */ .sl-rang { display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--rand); border-radius: 8px; overflow: hidden; background: var(--kachel); } .sl-rang-kopf, .sl-rang-zeile { display: grid; grid-template-columns: 7rem minmax(6rem, 1fr) 15rem 6rem 7rem; align-items: center; gap: 0.5rem 0.8rem; padding: 0.45rem 0.8rem; text-align: left; } .sl-rang-kopf { font-size: 0.75rem; color: var(--text-gedaempft); border-bottom: 1px solid var(--linie); } .sl-rang-zeile { background: rgba(0, 0, 0, 0); border: 0; border-top: 1px solid var(--linie); color: var(--text); font-family: inherit; font-size: 0.9rem; cursor: pointer; } .sl-rang-zeile:hover { background: rgba(255, 255, 255, 0.05); } .sl-rang-zeile:focus-visible { outline: 2px solid var(--text-sekundaer); outline-offset: -2px; } /* Gewaehlte Maschine: der Filter muss ohne Farbe erkennbar sein, deshalb zusaetzlich fett und mit Kante links. */ .sl-rang-zeile.sl-rang-aktiv { background: rgba(255, 255, 255, 0.07); box-shadow: inset 3px 0 0 var(--text); font-weight: 700; } .sl-rang-name { font-weight: 600; } .sl-rang-zahl { font-size: 0.85rem; color: var(--text-sekundaer); font-variant-numeric: tabular-nums; } .sl-balken { display: flex; height: 0.7rem; border-radius: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.05); } .sl-balken-belegt { background: var(--text-sekundaer); } /* Schraffur = keine Daten, gleiche Sprache wie Zeitleiste und Karten. */ .sl-balken-unbelegt { background: repeating-linear-gradient(45deg, var(--bernstein) 0 3px, rgba(250, 178, 25, 0.25) 3px 6px); } /* --- Ein Stillstand -------------------------------------------------- */ .sl-eintrag { background: var(--kachel); border: 1px solid var(--rand); border-left: 4px solid var(--linie); border-radius: 8px; padding: 0.6rem 0.9rem; } /* Laeuft noch: weisse Kante - dieselbe Sprache wie die Jetzt-Linie und der Heute-Rahmen auf dem Wandmonitor. */ .sl-eintrag.sl-laufend { border-left-color: rgba(255, 255, 255, 0.8); } /* Teilweise gemessen: ein Teil der Zeit ist belegt, der Rest fehlt. Bernsteinkante ohne Schraffur - die Karte ist nicht wertlos, aber die Zahl darf nicht ungeprueft weiterverwendet werden. Steht bewusst NACH .sl-laufend - die Guete gewinnt. */ .sl-eintrag.sl-teilweise { border-left-color: var(--bernstein); } /* Gar nichts belegt (Steuerung nie erreichbar oder Datenqualitaet unbekannt): Schraffur bedeutet in diesem Dashboard ueberall "keine Daten" (Zeitleiste, Wochenbalken). */ .sl-eintrag.sl-unbelegt { border-left-color: var(--bernstein); background: repeating-linear-gradient(45deg, rgba(250, 178, 25, 0.11) 0 6px, rgba(0, 0, 0, 0) 6px 12px), var(--kachel); } .sl-meldung { margin: 0; font-size: 1rem; font-weight: 600; } .sl-guete { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.55rem; margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--text-sekundaer); } /* Angeschnittener Zeitraum: der Stillstand begann vor dem Fenster. */ .sl-fenster { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-sekundaer); } /* Laufender Stillstand: bis wann ist die Dauer bestaetigt? */ .sl-nachtrag { margin: 0.25rem 0 0; font-size: 0.85rem; color: var(--text-gedaempft); } .sl-technik { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--text-gedaempft); font-variant-numeric: tabular-nums; } /* Marke - Aussage steht immer auch als Text daneben, nie nur als Farbe */ .sl-marke { display: inline-block; border-radius: 4px; padding: 0.08rem 0.42rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } /* Belegt: unauffaellig - der Normalfall braucht keine Farbe. */ .sl-marke-gemessen { background: rgba(0, 0, 0, 0); color: var(--text-sekundaer); border: 1px solid var(--linie); } /* Teilweise gemessen: Bernstein, aber nur als Kontur - schwaecher als "nicht erreichbar", weil ein Teil der Zeit belegt ist. */ .sl-marke-teilweise { background: rgba(0, 0, 0, 0); color: var(--bernstein); border: 1px solid var(--bernstein); } /* Nicht erreichbar: nichts belegt - staerkste Marke. */ .sl-marke-unerreichbar { background: var(--bernstein); color: var(--dunkel-auf-farbe); } /* Datenqualitaet unbekannt: grau wie "offline/unbekannt" im Dashboard. */ .sl-marke-unbekannt { background: var(--grau); color: var(--dunkel-auf-farbe); } /* --- Hinweise (leere Liste, Ansicht fehlt) --------------------------- */ .sl-hinweis { margin: 0; padding: 0.75rem 0.95rem; border: 1px dashed var(--rand); border-radius: 8px; background: var(--kachel); color: var(--text-sekundaer); font-size: 0.92rem; } /* Ansicht in der Datenbank nicht angelegt: tritt an die Stelle der Zusammenfassung. Bernstein = hinsehen, hier ist etwas zu tun. */ .sl-summe-warnung { border-color: var(--bernstein); border-left: 4px solid var(--bernstein); } .sl-summe-warnung .sl-summe-fuss { font-size: 0.95rem; color: var(--text-sekundaer); } @media (max-width: 900px) { /* Rangtabelle bricht auf zwei Zeilen um: oben Name und Balken, darunter die Zahlen. Der Kopf passt dann nicht mehr - er wird ausgeblendet, die Zahlen tragen ihre Bedeutung im Text. */ .sl-rang-kopf { display: none; } .sl-rang-zeile { grid-template-columns: 7rem minmax(4rem, 1fr); row-gap: 0.25rem; } .sl-rang-zeile .sl-rang-zahl { grid-column: 1 / -1; } } @media (max-width: 700px) { .leseansicht .kopfzeile { padding: 0.8rem 0.9rem; } .sl-inhalt { padding: 1rem 0.9rem 2.5rem; } .sl-stoerung { margin-left: 0.9rem; margin-right: 0.9rem; } .sl-steuerung select { min-width: 0; width: 100%; } .sl-feld { flex: 1 1 9rem; } .sl-knopf { width: 100%; } }