/* RentalSystem — Grundgerüst. Klar, dicht, deutschsprachige Fach-UI. */ /* Farbwelten — umschaltbar in den Einstellungen (data-thema am ). Struktur und Dichte bleiben identisch, nur Farben/Rundungen ändern sich. */ :root, [data-thema="standard"] { /* Petrol, ruhig */ --akzent: #1a5276; --akzent-hell: #2980b9; --bg: #f4f6f8; --karte: #fff; --rand: #dde3e8; --text: #1e2a32; --muted: #6b7a86; --ok: #1e8449; --warn: #b9770e; --rot: #c0392b; --nav-bg: #14222d; --nav-text: #cfd8de; --radius: 8px; } [data-thema="werkstatt"] { /* Anthrazit/Orange, technisch */ --akzent: #d35400; --akzent-hell: #e67e22; --bg: #eceff1; --karte: #fff; --rand: #d3dade; --text: #212a2f; --muted: #6a767d; --ok: #1e8449; --warn: #b9770e; --rot: #c0392b; --nav-bg: #263238; --nav-text: #cfd8dc; --radius: 4px; } [data-thema="kontrast"] { /* Hell, hoher Kontrast, kantig (EJ-nah) */ --akzent: #0b5394; --akzent-hell: #1a73c7; --bg: #eef1f4; --karte: #fff; --rand: #b8c2cc; --text: #10161b; --muted: #5a666f; --ok: #146b32; --warn: #94620a; --rot: #a52a1f; --nav-bg: #0b3d63; --nav-text: #e2ecf5; --radius: 2px; } [data-thema="dunkel"] { /* Dunkel, augenschonend für lange Dispo-Sessions */ --akzent: #2e86c1; --akzent-hell: #5dade2; --bg: #1b2228; --karte: #232c34; --rand: #35424c; --text: #e5eaee; --muted: #93a2ad; --ok: #2ecc71; --warn: #e6a53d; --rot: #e74c3c; --nav-bg: #131a1f; --nav-text: #b9c6d0; --radius: 8px; } * { box-sizing: border-box; } [hidden] { display: none !important; } html, body { margin: 0; height: 100%; } body { font: 14px/1.45 -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--bg); } h1 { font-size: 17px; margin: 0 0 8px; } h2 { font-size: 14px; margin: 10px 0 6px; } a { color: var(--akzent-hell); text-decoration: none; } .muted { color: var(--muted); } .fehler { color: var(--rot); min-height: 1.2em; margin-top: 8px; } .rot { color: var(--rot); } .ok { color: var(--ok); } .warn { color: var(--warn); } /* Login */ .login-wrap { display: flex; align-items: center; justify-content: center; height: 100vh; } .login-box { background: var(--karte); padding: 32px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.12); width: 320px; } .login-box h1 { margin-bottom: 4px; } .login-box label { display: block; margin: 14px 0 0; font-size: 13px; color: var(--muted); } .login-box input { width: 100%; } .login-box button { width: 100%; margin-top: 18px; } /* Layout */ #app { display: flex; height: 100vh; } #hauptbereich { flex: 1; display: flex; flex-direction: column; min-width: 0; } #nav { width: 210px; background: var(--nav-bg); color: var(--nav-text); display: flex; flex-direction: column; flex-shrink: 0; } .nav-kopf { padding: 18px 16px 14px; font-size: 16px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); } #nav a { display: block; padding: 9px 16px; color: var(--nav-text); } #nav a:hover { background: rgba(255,255,255,.08); } #nav a.aktiv { background: var(--akzent); color: #fff; } .nav-fuss { margin-top: auto; padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.12); font-size: 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; } #inhalt { flex: 1; overflow: auto; padding: 12px 16px; font-size: 13px; } /* Bausteine */ .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 10px; } .zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .zeile.oben { align-items: flex-start; } .spalte { flex: 1; min-width: 0; } .rechts { margin-left: auto; } button, .btn { font: inherit; font-size: 12.5px; padding: 4px 10px; border: 1px solid var(--rand); background: var(--karte); border-radius: var(--radius); cursor: pointer; color: var(--text); } button:hover { border-color: var(--akzent-hell); } button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; } button.primaer:hover { background: var(--akzent-hell); } button.gefahr { color: var(--rot); } .klein-btn { padding: 3px 9px; font-size: 12px; } input, select, textarea { font: inherit; font-size: 12.5px; padding: 3px 7px; border: 1px solid var(--rand); border-radius: var(--radius); background: var(--karte); color: var(--text); } input:focus, select:focus, textarea:focus { outline: 2px solid rgba(41,128,185,.35); } textarea { resize: vertical; min-height: 60px; width: 100%; } label.feld { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 4px; } label.feld > input, label.feld > select { display: block; width: 100%; margin-top: 3px; } .formular-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px 14px; } table.liste { width: 100%; border-collapse: collapse; background: var(--karte); } table.liste th { text-align: left; font-size: 11px; color: var(--muted); border-bottom: 2px solid var(--rand); padding: 3px 6px; white-space: nowrap; position: sticky; top: -12px; background: var(--karte); } table.liste td { border-bottom: 1px solid #edf1f4; padding: 2px 6px; vertical-align: middle; font-size: 12.5px; } table.liste tr.klickbar { cursor: pointer; } table.liste tr.klickbar:hover td { background: #f0f6fa; } td.r, th.r { text-align: right; white-space: nowrap; } .tag { display: inline-block; padding: 1px 8px; border-radius: 20px; font-size: 11.5px; background: #e8edf1; white-space: nowrap; } .tag.gruen { background: #d5f0e0; color: var(--ok); } .tag.gelb { background: #fdeecd; color: var(--warn); } .tag.rot { background: #fadbd8; color: var(--rot); } .tag.blau { background: #d6e9f8; color: var(--akzent); } /* Dialoge (verschiebbar) */ dialog { border: none; border-radius: 12px; box-shadow: 0 12px 50px rgba(0,0,0,.25); padding: 0; min-width: 380px; max-width: 92vw; max-height: 90vh; } dialog::backdrop { background: rgba(10,20,30,.35); } .dlg-kopf { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--akzent); color: #fff; cursor: move; border-radius: 12px 12px 0 0; user-select: none; } .dlg-kopf button { background: transparent; border: none; color: #fff; font-size: 17px; padding: 0 4px; } .dlg-inhalt { padding: 16px; overflow: auto; max-height: calc(90vh - 110px); } .dlg-fuss { padding: 12px 16px; border-top: 1px solid var(--rand); display: flex; gap: 10px; justify-content: flex-end; } /* Tabs */ .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--rand); margin-bottom: 14px; } .tabs button { border: none; background: none; padding: 8px 14px; border-radius: 7px 7px 0 0; color: var(--muted); } .tabs button.aktiv { color: var(--akzent); font-weight: 600; box-shadow: inset 0 -2px 0 var(--akzent); } /* Dispoboard (easyjob-Vorbild: Filterspalte links, Zeitleiste rechts). Ohne Namensspalte — Jobs teilen sich Zeilen, solange sie sich nicht überlappen. Waagerecht wird gescrollt statt gestaucht. */ .board { overflow: auto; max-height: calc(100vh - 108px); background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); } .board-gitter { display: grid; } .board-monat { position: sticky; top: 0; z-index: 3; background: var(--karte); font-size: 11px; font-weight: 600; color: var(--akzent); padding: 2px 6px; border-left: 1px solid var(--rand); white-space: nowrap; overflow: hidden; } .board-kopfzelle { font-size: 11px; color: var(--muted); text-align: center; padding: 1px 0; border-left: 1px solid #edf1f4; position: sticky; top: 19px; z-index: 2; background: var(--karte); border-bottom: 2px solid var(--rand); line-height: 1.2; } .kopf-wt { font-size: 10px; } .kopf-tag { font-weight: 600; color: var(--text); font-size: 12px; } .board-kopfzelle.we { background: #f0f3f6; } .board-kopfzelle.frei { background: #fdeaea; color: #a04040; } .board-kopfzelle.heute { box-shadow: inset 0 -3px 0 var(--rot); } .board-kopfzelle.heute .kopf-tag { color: var(--rot); } /* Alle Zeilen gleich hoch — auch ohne zweite Textzeile (Nutzerwunsch) */ .board-zelle { border-left: 1px solid #f1f4f7; border-top: 1px solid #edf1f4; height: 34px; padding: 1px; overflow: hidden; } .board-zelle.we { background: #f7f9fa; } .board-zelle.frei { background: #fdf2f2; } /* Kantig statt abgerundet (Nutzerwunsch); Schriftfarbe kommt aus dem Kontrast */ .board-balken { border-radius: 0; padding: 2px 6px; font-size: 11.5px; overflow: hidden; cursor: pointer; line-height: 1.28; height: 32px; display: flex; flex-direction: column; justify-content: center; } .board-balken:hover { filter: brightness(1.12); } .balken-z1 { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .balken-z2 { opacity: .85; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-balken.schmal { padding: 1px 2px; font-size: 9.5px; } .board-balken.schmal .balken-z1 { white-space: normal; overflow-wrap: anywhere; line-height: 1.1; } .board-balken.schmal .balken-z2 { display: none; } /* Griff zum Ziehen der Spaltenbreite */ .board-kopfzelle { position: sticky; } .breiten-griff { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 4; } .breiten-griff:hover { background: var(--akzent-hell); opacity: .5; } /* Filterspalte des Dispoboards */ .dispo-filter { width: 176px; flex-shrink: 0; } .filter-block { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 6px 8px; margin-bottom: 6px; } .filter-titel { font-weight: 600; font-size: 11.5px; color: var(--akzent); border-bottom: 1px solid var(--rand); padding-bottom: 3px; margin-bottom: 4px; } .filter-zeile { display: flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 1px 0; cursor: pointer; } .farbtupfer { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } /* Verfügbarkeitsgrafik */ .verf-graf { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin: 8px 0; } .verf-saeule { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-width: 8px; } .verf-teil { border-radius: 2px 2px 0 0; } /* Job-Tabs (easyjob-Muster: alle Jobs eines Projekts) */ .job-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; } .job-tab { padding: 5px 12px; font-size: 12.5px; border-radius: 6px 6px 0 0; background: #e8edf1; border: 1px solid var(--rand); border-bottom: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .job-tab.aktiv { background: var(--karte); font-weight: 600; box-shadow: 0 2px 0 var(--karte); } .job-tab.verborgen { opacity: .55; font-style: italic; } .job-tab.zieht { opacity: .4; } .job-tab.dropziel { outline: 2px dashed var(--akzent); outline-offset: -2px; } .job-nr { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 11px; } .job-tab.aktiv .job-nr { color: var(--akzent); } /* Job-Untermenü (EJ-Leiste: Kopfdaten | Material | Ressourcen | Belege) */ .unter-tabs { display: flex; align-items: center; gap: 2px; background: #eaf1f7; border: 1px solid var(--rand); border-radius: 6px; padding: 3px 6px; margin-bottom: 8px; } .unter-tabs > button { border: none; background: none; padding: 3px 10px; border-radius: 5px; color: var(--akzent); font-size: 12.5px; } .unter-tabs > button:hover { background: #dce8f2; } .unter-tabs > button.aktiv { background: var(--akzent); color: #fff; font-weight: 600; } .tab-zaehler { margin-left: 5px; background: rgba(0,0,0,.12); border-radius: 9px; padding: 0 5px; font-size: 11px; } /* Materialliste (easyjob-Layout) */ .matlayout { display: flex; gap: 14px; align-items: flex-start; } .matbrowser { width: 300px; flex-shrink: 0; border: 1px solid var(--rand); border-radius: 8px; padding: 8px; background: #fafbfc; max-height: 80vh; overflow: auto; } .matliste { flex: 1; min-width: 0; } .wg-baum { max-height: 180px; overflow: auto; border-bottom: 1px solid var(--rand); margin-bottom: 6px; padding-bottom: 6px; font-size: 12.5px; } .wg-eintrag { padding: 2px 8px; cursor: pointer; border-radius: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wg-eintrag:hover { background: #eef3f7; } .wg-eintrag.aktiv { background: var(--akzent); color: #fff; } .artikel-treffer { max-height: 220px; overflow: auto; } .artikel-zeile { padding: 4px 8px; cursor: pointer; border-radius: 5px; font-size: 12.5px; } .artikel-zeile:hover { background: #eef3f7; } .artikel-zeile.aktiv { background: #d6e9f8; } .verf-tage { font-size: 11.5px; } .verf-tage th, .verf-tage td { padding: 2px 6px !important; } .gruppe-kopf { display: flex; align-items: center; background: #eef2f6; border-left: 3px solid var(--akzent); padding: 6px 10px; margin-top: 12px; border-radius: 5px; font-weight: 600; } .gruppe-name { cursor: pointer; } .gruppe-name:hover { color: var(--akzent-hell); } .pos-text { font-size: 11.5px; padding: 2px 6px; flex: 1; min-width: 90px; color: var(--muted); } /* Scanner */ .scan-feld { font-size: 22px; padding: 14px; width: 100%; text-align: center; letter-spacing: 1px; } .scan-ok { animation: blitzgruen .6s; } .scan-fehler { animation: blitzrot .6s; } @keyframes blitzgruen { 0% { background: #d5f0e0; } 100% { background: #fff; } } @keyframes blitzrot { 0% { background: #fadbd8; } 100% { background: #fff; } } /* Toasts */ #toasts { position: fixed; right: 18px; bottom: 18px; display: flex; flex-direction: column; gap: 8px; z-index: 999; } .toast { background: #1e2a32; color: #fff; padding: 10px 16px; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.3); animation: einblenden .25s; max-width: 380px; } .toast.rot { background: var(--rot); } .toast.gruen { background: var(--ok); } @keyframes einblenden { from { opacity: 0; transform: translateY(8px); } } @media (max-width: 760px) { #app { flex-direction: column; } #nav { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; } #nav a { padding: 8px 10px; font-size: 13px; } .nav-kopf, .nav-fuss { border: none; padding: 8px 10px; } #inhalt { padding: 14px; } table.liste th { position: static; } } /* Drag & Drop in der Materialliste */ .artikel-zeile[draggable] { cursor: grab; } .dropziel { outline: 2px dashed var(--akzent); outline-offset: -2px; background: #eaf3fb !important; } /* Dunkles Thema: Flächen, die im Hellen fast weiß sind */ [data-thema="dunkel"] .matbrowser { background: #1f272e; } [data-thema="dunkel"] .gruppe-kopf, [data-thema="dunkel"] .unter-tabs { background: #2b353d; } [data-thema="dunkel"] .job-tab { background: #2b353d; } [data-thema="dunkel"] .wg-eintrag:hover, [data-thema="dunkel"] .artikel-zeile:hover { background: #2f3a43; } [data-thema="dunkel"] .artikel-zeile.aktiv { background: #35505f; } [data-thema="dunkel"] table.liste tr.klickbar:hover td { background: #2b353d; } [data-thema="dunkel"] table.liste td { border-bottom-color: #303b44; } [data-thema="dunkel"] .board-zelle.we, [data-thema="dunkel"] .board-kopfzelle.we { background: #1f272e; } /* Ressourcen: Tagesgruppen im Job */ .tag-kopf { display: flex; align-items: center; background: #eef2f6; border-left: 3px solid var(--akzent); padding: 3px 8px; margin-top: 8px; border-radius: 4px; font-size: 12px; } [data-thema="dunkel"] .tag-kopf { background: #2b353d; } /* Job-Kopfdaten: Steuer-Häkchen */ .flaggen { gap: 16px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rand); } .status-wahl { border-radius: var(--radius); } .tag.grau { background: #d5dbe0; color: #4a5560; } /* Fensterverwaltung (easyjob-Vorbild): Projekte als überlagerte Fenster */ #fensterflaeche { flex: 1; position: relative; overflow: hidden; display: flex; min-height: 0; } #fensterflaeche > #inhalt { flex: 1; } .fenster { position: absolute; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); box-shadow: 0 6px 28px rgba(0,0,0,.22); display: flex; flex-direction: column; overflow: hidden; min-width: 420px; } .fenster.aktiv { box-shadow: 0 8px 34px rgba(0,0,0,.32); border-color: var(--akzent-hell); } .fenster-titel { display: flex; align-items: center; gap: 6px; padding: 5px 8px; background: var(--akzent); color: #fff; cursor: move; user-select: none; font-size: 12.5px; font-weight: 600; flex-shrink: 0; } .fenster-btn { background: transparent; border: none; color: #fff; font-size: 13px; padding: 0 6px; line-height: 1; cursor: pointer; border-radius: 3px; } .fenster-btn:hover { background: rgba(255,255,255,.22); border-color: transparent; } .fenster-koerper { flex: 1; overflow: auto; padding: 10px 12px; } /* Größe ziehen an allen vier Ecken UND Kanten (Nutzerwunsch 2026-09-03). Kanten unsichtbar und 6px schmal, Ecken 14px und darüberliegend. */ .fenster-griff { position: absolute; z-index: 2; } .griff-n { top: -3px; left: 12px; right: 12px; height: 7px; cursor: ns-resize; } .griff-s { bottom: -3px; left: 12px; right: 12px; height: 7px; cursor: ns-resize; } .griff-w { left: -3px; top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; } .griff-e { right: -3px; top: 12px; bottom: 12px; width: 7px; cursor: ew-resize; } .griff-nw, .griff-ne, .griff-sw, .griff-se { width: 15px; height: 15px; z-index: 3; } .griff-nw { top: -3px; left: -3px; cursor: nwse-resize; } .griff-se { bottom: -3px; right: -3px; cursor: nwse-resize; } .griff-ne { top: -3px; right: -3px; cursor: nesw-resize; } .griff-sw { bottom: -3px; left: -3px; cursor: nesw-resize; } /* Nur unten rechts sichtbar markiert — der vertraute Anfasser bleibt erkennbar */ .griff-se { background: linear-gradient(135deg, transparent 50%, var(--rand) 50%, var(--rand) 62%, transparent 62%, transparent 75%, var(--rand) 75%); } /* Kontextmenü an der Fenstertitelzeile (Rechtsklick) */ .fenster-menue { position: fixed; z-index: 9000; background: var(--karte); border: 1px solid var(--rand); border-radius: 4px; padding: 4px 0; box-shadow: 0 6px 20px rgba(0,0,0,.22); min-width: 250px; font-size: 12.5px; } .fm-eintrag { padding: 7px 14px; cursor: pointer; white-space: nowrap; } .fm-eintrag:hover { background: var(--akzent); color: #fff; } /* Herausgelöstes Fenster (?solo=1): nur der Arbeitsbereich, ohne Navigation — auf einem zweiten Monitor wirkt es dann wie eine eigene Anwendung. */ body.solo #nav, body.solo #fensterleiste { display: none !important; } body.solo .fenster { border-radius: 0; } /* Fensterleiste deutlich abgesetzt — sie wurde sonst übersehen */ #fensterleiste { display: flex; align-items: center; gap: 5px; padding: 6px 10px; background: var(--akzent); border-bottom: 3px solid var(--akzent-hell); box-shadow: 0 3px 12px rgba(0,0,0,.25); overflow-x: auto; flex-shrink: 0; min-height: 38px; z-index: 5; } #fensterleiste::before { content: '🗂 Offene Fenster'; color: rgba(255,255,255,.85); font-size: 11px; font-weight: 600; letter-spacing: .3px; margin-right: 4px; white-space: nowrap; } .fenster-knopf { display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.92); border: none; color: var(--akzent); font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 5px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.2); } .fenster-knopf:hover { background: #fff; } .fenster-knopf.minimiert { background: rgba(255,255,255,.35); color: #fff; font-weight: 400; font-style: italic; } .fenster-zu { opacity: .55; padding: 0 3px; border-radius: 3px; } .fenster-zu:hover { opacity: 1; background: var(--rot); color: #fff; } /* Navigator: Baum links, Liste rechts */ .nav-baum { width: 210px; flex-shrink: 0; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--radius); padding: 5px; align-self: flex-start; } .nav-gruppe { font-size: 10.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; padding: 7px 6px 3px; } .nav-punkt { display: flex; align-items: center; gap: 6px; padding: 3px 7px; border-radius: 4px; cursor: pointer; font-size: 12.5px; } .nav-punkt:hover { background: #eef4f9; } .nav-punkt.aktiv { background: var(--akzent); color: #fff; font-weight: 600; } .nav-punkt.leer { opacity: .55; } .nav-zahl { background: var(--akzent); color: #fff; border-radius: 9px; padding: 0 6px; font-size: 10.5px; font-weight: 700; min-width: 18px; text-align: center; } .nav-zahl.warn { background: var(--rot); } .nav-punkt.aktiv .nav-zahl { background: #fff; color: var(--akzent); } [data-thema="dunkel"] .nav-punkt:hover { background: #2b353d; } /* Rechte-Matrix */ .rechte-matrix tr.rechte-gruppe td { background: var(--akzent); color: #fff; font-weight: 600; font-size: 11.5px; padding: 3px 8px; } .rechte-matrix td { padding: 2px 8px; } /* Mehrfachauswahl in der Materialliste */ .auswahl-leiste { display: flex; align-items: center; gap: 10px; background: #fdf3d7; border: 1px solid #e8c96a; border-radius: var(--radius); padding: 5px 10px; margin-bottom: 8px; font-size: 12.5px; } [data-thema="dunkel"] .auswahl-leiste { background: #43391d; border-color: #7a6a35; } .pos-haken { cursor: pointer; } /* Hinweis auf aktive Filter im Dispoboard */ .filter-hinweis { display: flex; align-items: center; gap: 6px; background: #fdf3d7; border-bottom: 1px solid #e8c96a; padding: 4px 10px; font-size: 11.5px; position: sticky; left: 0; z-index: 4; } [data-thema="dunkel"] .filter-hinweis { background: #43391d; border-color: #7a6a35; } /* Beenden-Knopf (nur beim lokalen Start sichtbar) */ .nav-fuss { flex-wrap: wrap; } .beenden-btn { background: rgba(192,57,43,.85); border-color: transparent; color: #fff; width: 100%; margin-top: 6px; } .beenden-btn:hover { background: var(--rot); border-color: transparent; }