@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; } 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); } /* 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-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; } 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; } .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; } /* 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; } }