@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@400;600;700&display=swap'); :root { --jt-rot: #dd001a; --jt-rot-dunkel: #b40015; --jt-schwarz: #000000; --jt-text: #404040; --jt-rand: #e0e0e0; --jt-hintergrund: #f7f7f7; --jt-gruen: #1a7a1a; --jt-orange: #b56a00; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; } /* Beim Ziehen über den oberen Rand hinaus (iOS-/macOS-Safari-Überzieheffekt) wird kurz die Fläche HINTER der Seite sichtbar - ohne eigene Hintergrund- farbe auf ist das Weiß und "zerschneidet" den schwarzen Header optisch. Reicht als alleinige Lösung NICHT (in echten Tests am 25.08. auf macOS-Safari blieb es beim Hochziehen trotzdem weiß) - siehe unten, der eigentliche verlässliche Fix ist der `position: fixed`-Header. Das hier bleibt als harmlose zweite Absicherung. */ html { background: var(--jt-schwarz); } body { font-family: 'Titillium Web', 'Segoe UI', sans-serif; color: var(--jt-text); background: #fff; font-size: 15px; line-height: 1.5; min-height: 100vh; /* Reserviert Platz für den fest angehefteten Header (siehe unten) - Höhe wird von app.js gemessen und als CSS-Variable gesetzt, weil der Header je nach Zeilenumbruch/Bildschirmbreite unterschiedlich hoch ist. */ padding-top: var(--jt-header-hoehe, 70px); } a { color: var(--jt-rot); text-decoration: none; } a:hover { text-decoration: underline; } /* position: fixed statt nur sticky, ganz bewusst: ein wirklich fest angeheftetes Element bleibt beim iOS-/macOS-Safari-Überzieheffekt garantiert an der gleichen Bildschirmposition stehen (gut dokumentiertes, robustes Verhalten) - dadurch verdeckt der Header selbst zuverlässig die Fläche, die beim Überziehen sichtbar würde, ganz ohne Hintergrundfarben- Tricks mit negativem z-index (siehe Fallen-Kommentar oben im body-Block: ein z-index:-1-Deckelement hat beim Testen zu einem kompletten Schwarzbild beim Herunterscrollen geführt und wurde deshalb verworfen). */ header.jt-header { background: var(--jt-schwarz); display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; flex-wrap: wrap; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 50; } header.jt-header .jt-logo img { height: 32px; display: block; } /* Kundenname-Verbot 01.09.: Text-Ersatz für das frühere kundenspezifische Bild-Logo - selbe Farbgebung/Kanten-Sprache (scharf, kein border-radius) wie der Rest des Systems. */ header.jt-header .jt-logo-text { color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .02em; text-decoration: none; border-left: 4px solid var(--jt-rot); padding-left: 10px; line-height: 1.2; } header.jt-header .jt-logo-text:hover { color: var(--jt-rot); text-decoration: none; } header.jt-header nav { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } header.jt-header nav a, header.jt-header nav form button { color: #fff; font-size: 15px; font-weight: 600; padding: 12px 14px; border: none; background: none; cursor: pointer; font-family: inherit; min-height: 44px; display: inline-flex; align-items: center; } header.jt-header nav a:hover, header.jt-header nav form button:hover { color: var(--jt-rot); text-decoration: none; } header.jt-header nav a.aktiv { color: var(--jt-rot); } header.jt-header nav form.jt-nav-suche { display: flex; align-items: center; gap: 4px; /* Drückt das Suchfeld an den rechten Rand der Kopfzeile, unabhängig davon ob die übrige Navigation den Platz schon ausfüllt - reines "als letztes im DOM" reicht dafür nicht (könnte Lücke rechts lassen). */ margin-left: auto; } header.jt-header nav form.jt-nav-suche input { min-height: 38px; padding: 6px 10px; border: 1px solid #555; background: #222; color: #fff; font-family: inherit; font-size: 14px; width: 140px; } header.jt-header nav form.jt-nav-suche input::placeholder { color: #999; } header.jt-header nav form.jt-nav-suche input:focus { outline: 1px solid var(--jt-rot); border-color: var(--jt-rot); } /* Hamburger-Menü, nur auf schmalen Bildschirmen sichtbar (siehe Media Query unten). Auf Tablet/Desktop bleibt die normale Zeilen-Navigation. */ .jt-menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; } .jt-menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 0 auto; } main.jt-inhalt { max-width: 1100px; margin: 0 auto; padding: 24px 20px 60px; } h1, h2, h3 { font-weight: 700; color: #1a1a1a; margin-top: 0; } h1 { font-size: 24px; border-left: 5px solid var(--jt-rot); padding-left: 12px; } h2 { font-size: 18px; } .jt-untertitel { color: #777; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; } .jt-btn { display: inline-flex; align-items: center; justify-content: center; background: var(--jt-rot); color: #fff; font-weight: 700; padding: 12px 18px; min-height: 44px; border: none; border-radius: 0; cursor: pointer; font-family: inherit; font-size: 15px; } .jt-btn:hover { background: var(--jt-rot-dunkel); color: #fff; text-decoration: none; } .jt-btn.jt-btn-sekundaer { background: #333; } .jt-btn.jt-btn-sekundaer:hover { background: #000; } .jt-btn.jt-btn-klein { padding: 9px 14px; min-height: 38px; font-size: 13px; } .jt-btn:disabled { background: #ccc; color: #888; cursor: not-allowed; } .jt-btn:disabled:hover { background: #ccc; } /* Tablet-first für das Mitarbeiter-Dashboard (Anweisung Abschnitt 8) - möglichst wenige Klicks, große eindeutige Bedienflächen. */ .jt-btn.jt-btn-riesig { padding: 18px 24px; min-height: 60px; font-size: 18px; width: 100%; } .jt-mitarbeiter-karte { background: #fff; border: 1px solid #ddd; padding: 16px; margin-bottom: 16px; } .jt-mitarbeiter-karte.laeuft { border-left: 6px solid var(--jt-rot); } .jt-mitarbeiter-karte.blockiert { opacity: 0.7; } .jt-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 28px; } .jt-karte { border: 1px solid var(--jt-rand); padding: 16px; background: var(--jt-hintergrund); } .jt-karte .zahl { font-size: 30px; font-weight: 700; color: var(--jt-schwarz); } .jt-karte .label { font-size: 13px; color: #666; } table.jt-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .jt-tabelle-wrapper { overflow-x: auto; margin-bottom: 24px; } table.jt-tabelle th { text-align: left; background: var(--jt-schwarz); color: #fff; padding: 8px 10px; font-weight: 600; white-space: nowrap; } table.jt-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--jt-rand); vertical-align: top; } table.jt-tabelle tr:hover td { background: #fafafa; } .jt-status { display: inline-block; padding: 3px 8px; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; } .jt-status-verfuegbar { background: var(--jt-gruen); } .jt-status-im_einsatz { background: var(--jt-rot); } .jt-status-wartung { background: var(--jt-orange); } .jt-status-defekt { background: #555; } /* Projekt-/Fertigungsauftrags-/Fertigungsschritt-Status (eigene Bedeutung, deshalb eigene Farbgebung statt Wiederverwendung der Vorrichtungs-Status-Farben oben). */ .jt-status-offen { background: var(--jt-orange); } .jt-status-in_arbeit { background: var(--jt-rot); } .jt-status-erledigt { background: var(--jt-gruen); } .jt-status-abgeschlossen { background: var(--jt-gruen); } /* Terminrisiko-Stufen (Rückwärtsterminierung) - eigene Skala von "läuft entspannt" bis "rechnerisch nicht mehr zu schaffen". */ .jt-status-risiko-im_plan { background: var(--jt-gruen); } .jt-status-risiko-erledigt { background: var(--jt-gruen); } .jt-status-risiko-kein_termin { background: #888; } .jt-status-risiko-wird_knapp { background: var(--jt-orange); } .jt-status-risiko-kritisch { background: var(--jt-rot); } .jt-status-risiko-nicht_haltbar { background: #7a0010; } form.jt-formular { max-width: 640px; } form.jt-filter { max-width: none; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 16px; } .jt-feld { margin-bottom: 16px; } .jt-feld label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .jt-feld input[type=text], .jt-feld input[type=email], .jt-feld input[type=password], .jt-feld input[type=number], .jt-feld select, .jt-feld textarea { width: 100%; padding: 11px 10px; min-height: 44px; border: 1px solid var(--jt-rand); border-radius: 0; font-family: inherit; /* 16px verhindert, dass iOS beim Fokussieren automatisch hineinzoomt. */ font-size: 16px; } .jt-feld textarea { min-height: 70px; } .jt-feld input[type=file] { padding: 8px 0; } /* Sortier-Auswahl direkt an der Tabellen-Überschrift (Alex' Wunsch 02.09.: Pfeile statt Dropdown) -
/ statt eigenem JS, gleiches Muster wie .jt-feld-erkannt weiter unten. */ .jt-sort { display: inline-block; position: relative; margin-left: 4px; } .jt-sort summary { cursor: pointer; list-style: none; padding: 6px 8px; font-weight: 400; color: #ccc; } .jt-sort summary::-webkit-details-marker { display: none; } .jt-sort[open] summary { color: #fff; } .jt-sort-menu { position: absolute; top: 100%; left: 0; z-index: 20; background: #fff; border: 1px solid var(--jt-rand); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); white-space: nowrap; display: flex; flex-direction: column; } .jt-sort-menu a { padding: 10px 14px; color: var(--jt-text); font-weight: 400; font-size: 13px; } .jt-sort-menu a:hover { background: var(--jt-hintergrund); text-decoration: none; } .jt-sort-menu a + a { border-top: 1px solid var(--jt-rand); } .jt-feld-erkannt { margin-bottom: 16px; } .jt-feld-erkannt summary { cursor: pointer; font-size: 14px; padding: 10px 12px; background: #e6f4e6; border-left: 4px solid var(--jt-gruen); } .jt-feld-erkannt[open] summary { margin-bottom: 10px; } .jt-feld-erkannt .jt-feld { margin: 10px 0 0; } .jt-flash { padding: 10px 14px; margin-bottom: 16px; font-size: 14px; } .jt-flash-erfolg { background: #e6f4e6; border-left: 4px solid var(--jt-gruen); } .jt-flash-fehler { background: #fbe6e6; border-left: 4px solid var(--jt-rot); } .jt-login-box { max-width: 360px; margin: 60px auto; padding: 30px; border: 1px solid var(--jt-rand); } .jt-hinweisbox { background: var(--jt-hintergrund); border: 1px solid var(--jt-rand); padding: 16px; margin-bottom: 20px; font-size: 14px; } .jt-belegt-badge { display: inline-block; background: var(--jt-rot); color: #fff; padding: 6px 12px; font-size: 13px; font-weight: 700; margin-bottom: 12px; } .jt-foto { max-width: 100%; height: auto; display: block; margin-bottom: 12px; border: 1px solid var(--jt-rand); } footer.jt-footer { text-align: center; color: #999; font-size: 12px; padding: 20px; } /* Ab hier: Smartphone-Breite. Tablet (ab ca. 640px aufwärts) bekommt die normale Kopfzeilen-Navigation und die normale Tabelle - dort ist genug Platz, um beides komfortabel mit dem Finger zu bedienen. */ @media (max-width: 640px) { main.jt-inhalt { padding: 16px 12px 40px; } h1 { font-size: 20px; } .jt-menu-toggle { display: flex; } header.jt-header nav { display: none; flex-direction: column; align-items: stretch; width: 100%; gap: 0; border-top: 1px solid rgba(255, 255, 255, 0.15); margin-top: 8px; padding-top: 4px; } header.jt-header nav.offen { display: flex; } header.jt-header nav a, header.jt-header nav form button { width: 100%; padding: 14px 4px; justify-content: flex-start; } header.jt-header nav form.jt-nav-suche { width: 100%; margin-left: 0; padding: 10px 4px; } header.jt-header nav form.jt-nav-suche input { flex: 1; width: auto; } header.jt-header nav form.jt-nav-suche button { width: auto; padding: 6px 12px; min-height: 38px; } /* Tabellen, die für den Betrieb an der Maschine wichtig sind (Vorrichtungs- liste, aktuelle Belegungen, Werkzeug-Stückliste, Einsatzverlauf), werden auf dem Telefon zu einer Kartenliste statt einer schmal gequetschten, seitlich scrollenden Tabelle - jede Zeile wird ein eigener Block, jede Spalte bekommt ihre Beschriftung vorangestellt. */ table.jt-tabelle-karten, table.jt-tabelle-karten tbody, table.jt-tabelle-karten tr, table.jt-tabelle-karten td { display: block; width: 100%; } table.jt-tabelle-karten tr:has(th) { display: none; } table.jt-tabelle-karten tr { border: 1px solid var(--jt-rand); margin-bottom: 12px; padding: 4px 12px; } table.jt-tabelle-karten td { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; text-align: right; } table.jt-tabelle-karten td:last-child { border-bottom: none; } table.jt-tabelle-karten td[data-label]::before { content: attr(data-label); font-weight: 600; color: #666; text-align: left; flex-shrink: 0; } table.jt-tabelle-karten td:not([data-label]) { justify-content: flex-end; } } /* Zeitstrahl mit Kalenderraster (Belegungsplan-Übersicht + Maschinendetail). Fahrbahn (.jt-zeitstrahl-spur) ist immer 100% breit, alle Positionen der Kinder sind vom Server als Prozentwerte vorgegeben (siehe app.py _zeitstrahl_segment/_kalender_tage) - hier nur die Darstellung. */ .jt-zeitstrahl-wrapper { overflow-x: auto; margin-bottom: 24px; } .jt-zeitstrahl-inhalt { min-width: 700px; } .jt-zeitstrahl-zeile, .jt-zeitstrahl-kopf { display: flex; align-items: stretch; gap: 12px; margin-bottom: 6px; } .jt-zeitstrahl-label { width: 190px; flex-shrink: 0; padding: 4px 0; font-size: 13px; } .jt-zeitstrahl-label .jt-untertitel { margin-bottom: 0; } .jt-zeitstrahl-spur { position: relative; flex: 1; min-height: 46px; background: #fff; border: 1px solid var(--jt-rand); overflow: hidden; } .jt-zeitstrahl-kopf .jt-zeitstrahl-spur { min-height: 32px; border: none; background: transparent; } .jt-tag-zelle { position: absolute; top: 0; bottom: 0; border-right: 1px solid #ececec; /* verhindert, dass das Label eines schmalen ersten/letzten (Teil-)Tages über die Nachbarzelle hinausläuft und sich mit deren Label überlagert */ overflow: hidden; } .jt-tag-zelle.wochenende { background: #eee; } .jt-zeitstrahl-kopf .jt-tag-zelle.wochenende { background: transparent; } .jt-tag-label { position: absolute; top: 2px; left: 4px; font-size: 10px; color: #888; white-space: nowrap; } .jt-kw-label { position: absolute; bottom: 2px; left: 4px; font-size: 10px; font-weight: 700; color: #555; white-space: nowrap; border-left: 2px solid #999; padding-left: 3px; } .jt-jetzt-linie { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--jt-rot); z-index: 3; } .jt-belegt-balken { position: absolute; top: 6px; bottom: 6px; background: var(--jt-rot); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; padding: 0 8px; overflow: hidden; white-space: nowrap; z-index: 2; text-decoration: none; } .jt-belegt-balken:hover { color: #fff; text-decoration: none; opacity: 0.9; } .jt-belegt-balken.offen { background: linear-gradient(90deg, var(--jt-rot) 0%, var(--jt-rot) 75%, rgba(221,0,26,0.25) 100%); } .jt-belegt-balken.abgeschlossen { background: #888; } /* Team-Kalender (Zeiterfassung): Monatsraster mit kleinen Initialen-Badges für genehmigte Abwesenheiten - steckt wie der Zeitstrahl oben in .jt-zeitstrahl-wrapper, damit er auf schmalen Bildschirmen horizontal scrollt statt die 7 Spalten zu stauchen (siehe Alex' Auftrag "nicht überlaufen"). */ .jt-monatskalender { min-width: 640px; } .jt-monatskalender-kopf, .jt-monatskalender-woche { display: flex; gap: 4px; } .jt-monatskalender-kopf { margin-bottom: 4px; } .jt-monatskalender-woche { margin-bottom: 4px; } .jt-monatskalender-kopfzelle { flex: 1; text-align: center; font-size: 12px; font-weight: 700; color: #888; padding: 4px 0; } .jt-monatskalender-tag { flex: 1; min-height: 74px; background: #fff; border: 1px solid var(--jt-rand); padding: 4px; } .jt-monatskalender-tag.wochenende { background: #eee; } .jt-monatskalender-tag.ausserhalb { opacity: 0.4; } .jt-monatskalender-tag.heute { border: 2px solid var(--jt-rot); } .jt-monatskalender-tagnummer { font-size: 12px; color: #888; margin-bottom: 4px; } .jt-monatskalender-tag.heute .jt-monatskalender-tagnummer { color: var(--jt-rot); font-weight: 700; } .jt-monatskalender-badges { display: flex; flex-wrap: wrap; gap: 3px; } .jt-abwesend-badge { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; font-size: 9px; font-weight: 700; color: #fff; line-height: 1; } .jt-abwesend-urlaub { background: var(--jt-gruen); } .jt-abwesend-krankheit { background: var(--jt-orange); } @media (max-width: 640px) { .jt-monatskalender-tag { min-height: 60px; } } /* Rüstblatt: für Werkstatt/Tablet/Ausdruck - Header, Fußzeile und alles, was beim Drucken nicht gebraucht wird, blenden sich weg. */ @media print { header.jt-header, footer.jt-footer, .jt-keine-druckansicht { display: none !important; } body { padding-top: 0 !important; } main.jt-inhalt { max-width: none; padding: 0; } body::before { display: none; } }