/* ================================================================ Wocheneinsatzplan · Otto Wagner Sanitärtechnik Palette: Tiefes Petrol (Wasser) + Kupfer (Rohr) + neutrales Grau Hell/Dunkel über [data-theme] auf ================================================================ */ :root { --petrol-900: #0d2b33; --petrol-800: #123a45; --petrol-700: #1a4f5e; --petrol-100: #e3eef1; --copper: #b96a3b; --copper-dark: #9a5027; --ink: #22303a; --ink-soft: #5a6b76; --paper: #f5f7f8; --card: #ffffff; --card-alt: #fafcfc; --line: #d7e0e4; --namecol: #e3eef1; --namecol-alt: #d8e7ec; --namecol-fg: #0d2b33; --head-bg: #123a45; --head-fg: #ffffff; --today: #fdf6e9; --today-line: #e8c97a; --input-bg: #ffffff; --shadow: rgba(13,43,51,.25); --st-urlaub-bg: #ddf0dd; --st-urlaub-fg: #1e6b2e; --st-krank-bg: #fbdfdf; --st-krank-fg: #a02020; --st-schule-bg: #dfe8fb; --st-schule-fg: #234b9a; --st-frei-bg: #ececec; --st-frei-fg: #6a6a6a; --st-airbus-bg: #ecdff5; --st-airbus-fg: #6b3a94; --st-still-bg: #dcf0f2; --st-still-fg: #0f6d78; --st-feiertag-bg:#fdeedd; --st-feiertag-fg:#a3611b; --st-gruen-bg: #d9f2c9; --st-gruen-fg: #2e7d1f; --st-rot-bg: #fbd3e4; --st-rot-fg: #b91d6b; --st-blau-bg: #d3e3f8; --st-blau-fg: #1d4e9a; --st-gelb-bg: #fdf6b2; --st-gelb-fg: #8a6d00; } html[data-theme="dark"] { --petrol-100: #17333c; --ink: #e4ecef; --ink-soft: #93a7b0; --paper: #0e181d; --card: #15232a; --card-alt: #182831; --line: #28414c; --namecol: #10262e; --namecol-alt: #0d2129; --namecol-fg: #cfe4ea; --head-bg: #0a1d24; --head-fg: #dfeef2; --today: #2c2a18; --today-line: #8a7332; --input-bg: #0f1c22; --shadow: rgba(0,0,0,.6); --st-urlaub-bg: #14351c; --st-urlaub-fg: #7fd693; --st-krank-bg: #3d1717; --st-krank-fg: #ee9090; --st-schule-bg: #16233f; --st-schule-fg: #93b2ee; --st-frei-bg: #24292c; --st-frei-fg: #9aa4a9; --st-airbus-bg: #2c1c3a; --st-airbus-fg: #c9a3ea; --st-still-bg: #0f2e33; --st-still-fg: #7fd0d9; --st-feiertag-bg:#37270f; --st-feiertag-fg:#e8b169; --st-gruen-bg: #1d3a12; --st-gruen-fg: #97e07c; --st-rot-bg: #43142b; --st-rot-fg: #f394c4; --st-blau-bg: #14294a; --st-blau-fg: #94b9f0; --st-gelb-bg: #3a3208; --st-gelb-fg: #ecd868; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; background: var(--paper); color: var(--ink); font-size: 14px; transition: background .2s, color .2s; } /* ---------------- Topbar ---------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 18px; background: linear-gradient(90deg, var(--petrol-900), var(--petrol-700)); color: #fff; position: sticky; top: 0; z-index: 50; } html[data-theme="dark"] .topbar { background: linear-gradient(90deg, #081418, #0e2830); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 6px; background: var(--copper); color: #fff; font-weight: 800; letter-spacing: .5px; font-size: 14px; } .brand-mark.big { width: 54px; height: 54px; font-size: 22px; border-radius: 10px; } .brand-text { font-weight: 600; letter-spacing: .3px; } .topnav { display: flex; align-items: center; gap: 14px; } .navlink { color: #dcebef; text-decoration: none; font-weight: 500; padding: 6px 4px; } .navlink:hover { color: #fff; } .navlink-muted { opacity: .7; } .theme-toggle { background: rgba(255,255,255,.14); border: none; border-radius: 6px; padding: 6px 10px; cursor: pointer; font-size: 15px; line-height: 1; } .theme-toggle:hover { background: rgba(255,255,255,.26); } html[data-theme="light"] .theme-icon-light { display: none; } html[data-theme="dark"] .theme-icon-dark { display: none; } .search-wrap { position: relative; } #globalSearch { width: 220px; padding: 7px 12px; border-radius: 6px; border: none; background: rgba(255,255,255,.14); color: #fff; outline: none; } #globalSearch::placeholder { color: rgba(255,255,255,.6); } #globalSearch:focus { background: rgba(255,255,255,.24); } .search-results { position: absolute; top: 40px; right: 0; width: 420px; max-height: 60vh; overflow: auto; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 10px 30px var(--shadow); } .search-results a { display: block; padding: 9px 12px; text-decoration: none; color: var(--ink); border-bottom: 1px solid var(--line); font-size: 13px; } .search-results a:last-child { border-bottom: none; } .search-results a:hover { background: var(--petrol-100); } .search-results .sr-meta { color: var(--ink-soft); font-size: 12px; } .search-results .sr-empty { padding: 12px; color: var(--ink-soft); } /* ---------------- Layout ---------------- */ .page { padding: 16px 18px 40px; max-width: 1700px; margin: 0 auto; } /* ---------------- Week header ---------------- */ .week-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .week-nav { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .week-title { display: flex; flex-direction: column; min-width: 150px; text-align: center; } .kw-big { font-size: 24px; font-weight: 800; color: var(--namecol-fg); line-height: 1.05; } html[data-theme="light"] .kw-big { color: var(--petrol-800); } .kw-range { color: var(--ink-soft); font-size: 13px; } .kw-select { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); font-size: 14px; } .week-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .ruf-label { color: var(--ink-soft); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .ruf-input { width: 110px; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-weight: 700; color: var(--copper); text-align: center; background: var(--input-bg); } html[data-theme="light"] .ruf-input { color: var(--copper-dark); } .ruf-input:focus { outline: 2px solid var(--copper); border-color: var(--copper); } /* ---------------- Buttons ---------------- */ .btn { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 6px; padding: 7px 12px; font-size: 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .btn:hover { border-color: var(--copper); } .btn-primary { background: var(--petrol-800); border-color: var(--petrol-800); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--petrol-700); } .btn-nav { font-size: 20px; width: 38px; height: 38px; padding: 0; font-weight: 700; } .btn-ghost { background: transparent; } .btn-block { width: 100%; } .btn-mini { padding: 3px 8px; font-size: 12px; } .btn-danger { color: #d05050; border-color: #a05050; } .btn-danger:hover { border-color: #d05050; } .btn-today { background: var(--copper); border-color: var(--copper); color: #fff; font-weight: 700; } .btn-today:hover { background: var(--copper-dark); border-color: var(--copper-dark); } .btn-today.is-current { opacity: .45; pointer-events: none; } /* ---------------- Grid ---------------- */ .grid-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); max-height: calc(100vh - 190px); } .plan-grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1050px; } .plan-grid th, .plan-grid td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); vertical-align: top; } .plan-grid thead th { position: sticky; top: 0; z-index: 20; background: var(--head-bg); color: var(--head-fg); padding: 8px 10px; text-align: left; font-size: 13px; } .plan-grid thead th.col-name { z-index: 30; } .day-name { display: block; font-weight: 700; } .day-date { display: block; font-weight: 400; opacity: .85; font-size: 12px; } .day-holiday { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px; background: var(--copper); color: #fff; font-size: 11px; font-weight: 600; } th.is-today { box-shadow: inset 0 -3px 0 var(--today-line); } .col-name { position: sticky; left: 0; z-index: 10; background: var(--namecol); color: var(--namecol-fg); font-weight: 600; padding: 8px 10px; white-space: nowrap; min-width: 150px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; } tbody tr:nth-child(even) .col-name { background: var(--namecol-alt); } .cell { min-width: 145px; max-width: 260px; padding: 6px 8px; cursor: pointer; font-size: 13px; white-space: pre-wrap; word-break: break-word; line-height: 1.35; background: var(--card); } tbody tr:nth-child(even) .cell { background: var(--card-alt); } .cell:hover { outline: 2px solid var(--petrol-700); outline-offset: -2px; } html[data-theme="dark"] .cell:hover { outline-color: #3d7d90; } .cell:focus { outline: 2px solid var(--copper); outline-offset: -2px; } .cell.is-today { background: var(--today); } .cell.saving { opacity: .5; } .cell textarea { width: 100%; min-height: 64px; border: none; outline: 2px solid var(--copper); font: inherit; padding: 4px 6px; resize: vertical; background: var(--input-bg); color: var(--ink); border-radius: 3px; } /* Statusfarben (per JS gesetzt) */ .cell.st-urlaub { background: var(--st-urlaub-bg); color: var(--st-urlaub-fg); font-weight: 600; } .cell.st-krank { background: var(--st-krank-bg); color: var(--st-krank-fg); font-weight: 600; } .cell.st-schule { background: var(--st-schule-bg); color: var(--st-schule-fg); font-weight: 600; } .cell.st-frei { background: var(--st-frei-bg); color: var(--st-frei-fg); } .cell.st-airbus { background: var(--st-airbus-bg); color: var(--st-airbus-fg); font-weight: 600; } .cell.st-still { background: var(--st-still-bg); color: var(--st-still-fg); } .cell.st-feiertag { background: var(--st-feiertag-bg);color: var(--st-feiertag-fg);font-weight: 600; } /* Schnell-Hinzufügen-Zeile */ .add-emp-row td { background: var(--card-alt) !important; } .add-emp-cell input { width: 100%; padding: 6px 8px; border: 1px dashed var(--line); border-radius: 5px; background: var(--input-bg); color: var(--ink); font: inherit; } .add-emp-cell input:focus { outline: 2px solid var(--copper); border-color: transparent; } .add-emp-help { padding: 6px 10px; color: var(--ink-soft); font-size: 12.5px; } .add-emp-help .btn { margin-right: 8px; } .hint { color: var(--ink-soft); font-size: 12.5px; margin-top: 10px; } /* ---------------- Login ---------------- */ .login-box { max-width: 360px; margin: 10vh auto 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 32px 30px; text-align: center; box-shadow: 0 16px 40px var(--shadow); } .login-box h1 { margin: 14px 0 2px; font-size: 22px; color: var(--ink); } .login-sub { color: var(--ink-soft); margin: 0 0 22px; } .login-box input[type="password"] { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; margin-bottom: 12px; background: var(--input-bg); color: var(--ink); } .login-error { color: #d05050; font-size: 13px; margin: 0 0 10px; } /* ---------------- Mitarbeiter ---------------- */ .emp-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .emp-header h1 { color: var(--ink); font-size: 22px; margin: 6px 0; } .emp-add { display: flex; gap: 8px; } .emp-add input { padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; width: 240px; background: var(--input-bg); color: var(--ink); } .emp-table { width: 100%; max-width: 860px; border-collapse: collapse; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; } .emp-table th, .emp-table td { border-bottom: 1px solid var(--line); padding: 8px 10px; text-align: left; } .emp-table thead th { background: var(--petrol-100); color: var(--namecol-fg); font-size: 13px; } .emp-table tr.inactive td { color: var(--ink-soft); background: var(--card-alt); } .emp-actions { white-space: nowrap; } .emp-order { white-space: nowrap; width: 90px; } .tag { padding: 2px 8px; border-radius: 10px; font-size: 12px; font-weight: 600; } .tag-active { background: var(--st-urlaub-bg); color: var(--st-urlaub-fg); } .tag-inactive { background: var(--st-frei-bg); color: var(--st-frei-fg); } /* ---------------- Mobil ---------------- */ @media (max-width: 700px) { .topbar { flex-wrap: wrap; } #globalSearch { width: 140px; } .search-results { width: min(420px, 92vw); } .page { padding: 10px 8px 30px; } .col-name { min-width: 110px; font-size: 12px; } .cell { min-width: 125px; font-size: 12px; } .grid-wrap { max-height: none; } } /* ---------------- Druck ---------------- */ @media print { .topbar, .week-tools, .hint, .kw-select, .btn, .add-emp-row { display: none !important; } .page { padding: 0; max-width: none; } .grid-wrap { max-height: none; overflow: visible; border: none; } .plan-grid { font-size: 10px; min-width: 0; } .plan-grid thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; position: static; } .col-name { position: static; background: #fff !important; color: #000 !important; } .cell { background: #fff !important; color: #000 !important; } .cell, .col-name { border: 1px solid #999 !important; } body { background: #fff; color: #000; } @page { size: A4 landscape; margin: 8mm; } } /* ---------------- Feiertage & Schulferien ---------------- */ th.is-holiday { background: var(--st-feiertag-bg); color: var(--st-feiertag-fg); } th.is-holiday .day-date { opacity: 1; } .day-holiday { background: var(--copper) !important; } .cell.is-holidaycol { background: var(--st-feiertag-bg); } .cell.is-holidaycol:empty::after { content: "Feiertag"; color: var(--st-feiertag-fg); opacity: .55; font-size: 12px; } .day-ferien { display: inline-block; margin-top: 3px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,.18); color: #ffd9a8; font-size: 10.5px; font-weight: 600; } html[data-theme="light"] .day-ferien { background: rgba(255,255,255,.22); color: #ffe3bd; } .ferien-banner { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; order: 3; } .ferien-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--st-feiertag-bg); color: var(--st-feiertag-fg); border: 1px solid var(--today-line); padding: 4px 10px; border-radius: 14px; font-size: 12.5px; font-weight: 600; } .ferien-chip.small { padding: 1px 8px; font-size: 11px; margin-left: 6px; } .ferien-details { margin-top: 14px; max-width: 560px; } .ferien-details summary { cursor: pointer; color: var(--ink-soft); font-size: 13px; font-weight: 600; padding: 6px 0; user-select: none; } .ferien-details summary:hover { color: var(--ink); } .ferien-table { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; } .ferien-table th, .ferien-table td { border-bottom: 1px solid var(--line); padding: 7px 10px; text-align: left; font-size: 13px; } .ferien-table thead th { background: var(--petrol-100); color: var(--namecol-fg); } .ferien-table tr.ferien-active td { background: var(--st-feiertag-bg); color: var(--st-feiertag-fg); font-weight: 600; } @media print { .ferien-details { display: none !important; } .ferien-banner { display: flex !important; } .ferien-chip { border: 1px solid #999; background: #fff !important; color: #000 !important; } } /* ---------------- Auswahl, Farb-Buttons, Ausfüll-Griff, Gruppen ---------------- */ .color-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; } .ct-label { color: var(--ink-soft); font-size: 13px; font-weight: 600; } .ct-btn { font-weight: 700; padding: 6px 14px; border-width: 2px; } .ct-gruen { background: var(--st-gruen-bg); color: var(--st-gruen-fg); border-color: var(--st-gruen-fg); } .ct-rot { background: var(--st-rot-bg); color: var(--st-rot-fg); border-color: var(--st-rot-fg); } .ct-blau { background: var(--st-blau-bg); color: var(--st-blau-fg); border-color: var(--st-blau-fg); } .ct-gelb { background: var(--st-gelb-bg); color: var(--st-gelb-fg); border-color: var(--st-gelb-fg); } .ct-none, .ct-clear { background: transparent; } .ct-hint { color: var(--ink-soft); font-size: 12px; margin-left: auto; } .ct-hint.flash { color: var(--copper); font-weight: 700; } /* Zellfarben – explizit gesetzt oder per Schlagwort */ .cell.co-gruen { background: var(--st-gruen-bg); color: var(--st-gruen-fg); font-weight: 600; } .cell.co-rot { background: var(--st-rot-bg); color: var(--st-rot-fg); font-weight: 600; } .cell.co-blau { background: var(--st-blau-bg); color: var(--st-blau-fg); } .cell.co-gelb { background: var(--st-gelb-bg); color: var(--st-gelb-fg); font-weight: 600; } /* Auswahl */ .cell.sel { outline: 2px solid var(--copper); outline-offset: -2px; box-shadow: inset 0 0 0 100vmax rgba(185,106,59,.10); position: relative; } .cell.editing { padding: 2px; } .fill-handle { position: absolute; right: -1px; bottom: -1px; width: 14px; height: 14px; background: var(--copper); border: 2px solid var(--card); border-radius: 3px; cursor: crosshair; z-index: 5; touch-action: none; } /* Gruppen-Zeilen */ tr.group-row td { background: var(--head-bg); color: var(--head-fg); font-weight: 700; font-size: 12.5px; letter-spacing: .8px; text-transform: uppercase; padding: 5px 10px; border-right: none; position: sticky; left: 0; } /* Druck: Farben mitdrucken, Toolbar ausblenden */ @media print { .color-toolbar { display: none !important; } .cell.co-gruen { background: #d6f0c8 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cell.co-rot { background: #f8c7dc !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cell.co-blau { background: #cfe0f5 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cell.co-gelb { background: #fdf3b3 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } tr.group-row td { background: #ddd !important; color: #000 !important; position: static; } .fill-handle { display: none !important; } } /* ---------------- Zeitliche Gültigkeit ---------------- */ .validity-label { color: var(--ink-soft); font-size: 12px; } .emp-removefrom { white-space: nowrap; } .emp-removefrom input[type="week"] { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--input-bg); color: var(--ink); font-size: 12.5px; width: 128px; } /* ---------------- Auslastung ---------------- */ .ausl-wrap { overflow-x: auto; } .ausl-table { border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 8px; min-width: 720px; } .ausl-table th, .ausl-table td { border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); padding: 6px 10px; text-align: left; font-size: 13px; } .ausl-table thead th { background: var(--head-bg); color: var(--head-fg); position: sticky; top: 0; } .ausl-row { cursor: pointer; } .ausl-row:hover td { outline: 2px solid var(--copper); outline-offset: -2px; } .ausl-current td { box-shadow: inset 3px 0 0 var(--copper); font-weight: 600; } .td-kw { white-space: nowrap; font-weight: 700; color: var(--namecol-fg); } .td-num { text-align: center; } .ausl-cell { text-align: center; min-width: 108px; } .ausl-cell .ausl-sub { display: block; font-size: 11px; opacity: .8; font-weight: 400; } .ausl-total { font-weight: 700; } /* Heatmap: wenig belegt = hell (viel frei), voll = kräftig */ .u-none { color: var(--ink-soft); } .u0 { background: color-mix(in srgb, var(--st-blau-bg) 12%, var(--card)); } .u20 { background: color-mix(in srgb, var(--st-blau-bg) 35%, var(--card)); } .u40 { background: color-mix(in srgb, var(--st-blau-bg) 55%, var(--card)); } .u60 { background: color-mix(in srgb, var(--st-blau-bg) 75%, var(--card)); } .u80 { background: var(--st-blau-bg); color: var(--st-blau-fg); } .u100 { background: var(--st-blau-bg); color: var(--st-blau-fg); box-shadow: inset 0 0 0 2px var(--st-blau-fg); } /* ---------------- Übersichtsmodus (TV) ---------------- */ body.tv-mode .topbar, body.tv-mode .color-toolbar, body.tv-mode .hint, body.tv-mode .ferien-details, body.tv-mode .add-emp-row, body.tv-mode .kw-select, body.tv-mode .btn-nav, body.tv-mode .btn-today, body.tv-mode #tvModeBtn ~ * , body.tv-mode .week-tools .btn { display: none !important; } body.tv-mode #tvModeBtn { display: inline-flex !important; opacity: .25; } body.tv-mode { background: var(--paper); } body.tv-mode .page { padding: 6px 5px 0; max-width: none; } body.tv-mode .week-header { margin-bottom: 6px; } body.tv-mode .grid-wrap { overflow: hidden; max-height: none; border: none; background: transparent; } body.tv-mode .cell:hover { outline: none; } body.tv-mode .fill-handle { display: none; } /* ---------------- KI-Eingabe ---------------- */ .ki-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 8px 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; } .ki-icon { font-size: 17px; } #kiInput { flex: 1; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); color: var(--ink); font-size: 14px; min-width: 200px; } #kiInput:focus { outline: 2px solid var(--copper); border-color: transparent; } .ki-preview { margin-bottom: 10px; padding: 10px; background: var(--card); border: 2px solid var(--copper); border-radius: 8px; } .ki-preview-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ki-spacer { flex: 1; } .ki-overwrite { color: var(--ink-soft); font-size: 13px; display: flex; align-items: center; gap: 5px; } .ki-errors { color: #d05050; font-size: 13px; margin-bottom: 6px; } .ki-table { width: 100%; border-collapse: collapse; } .ki-table th, .ki-table td { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left; font-size: 13px; } .ki-table thead th { color: var(--ink-soft); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; } .ki-table tr.ki-conflict td { opacity: .75; background: var(--st-feiertag-bg); } .ki-badge { padding: 2px 8px; border-radius: 5px; } .ki-badge.co-gruen { background: var(--st-gruen-bg); color: var(--st-gruen-fg); font-weight: 600; } .ki-badge.co-rot { background: var(--st-rot-bg); color: var(--st-rot-fg); font-weight: 600; } .ki-badge.co-blau { background: var(--st-blau-bg); color: var(--st-blau-fg); } .ki-badge.co-gelb { background: var(--st-gelb-bg); color: var(--st-gelb-fg); font-weight: 600; } body.tv-mode .ki-bar, body.tv-mode .ki-preview { display: none !important; } @media print { .ki-bar, .ki-preview { display: none !important; } } /* "mit Geselle"-Schnellauswahl */ .mit-select { max-width: 210px; font-weight: 600; } body.tv-mode .mit-select { display: none !important; } /* Auswahl per Ziehen: keine Browser-Textmarkierung; im Editor normal */ .plan-grid .cell, .plan-grid .col-name { user-select: none; -webkit-user-select: none; } .plan-grid .cell.editing, .plan-grid .cell textarea { user-select: text; -webkit-user-select: text; } /* ---------------- In-App-Dialoge & Toast ---------------- */ .dlg-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(10, 25, 30, .55); display: flex; align-items: center; justify-content: center; padding: 20px; } .dlg-box { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; max-width: 440px; width: 100%; box-shadow: 0 20px 50px var(--shadow); } .dlg-msg { font-size: 14.5px; line-height: 1.45; margin-bottom: 14px; } .dlg-input { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 7px; background: var(--input-bg); color: var(--ink); font-size: 14px; margin-bottom: 14px; } .dlg-input:focus { outline: 2px solid var(--copper); border-color: transparent; } .dlg-buttons { display: flex; gap: 10px; justify-content: flex-end; } .dlg-buttons .btn { min-width: 110px; } .toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--petrol-900); color: #fff; padding: 10px 18px; border-radius: 8px; font-size: 14px; box-shadow: 0 8px 24px var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 210; max-width: 90vw; } html[data-theme="dark"] .toast { background: var(--copper); } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------------- Zoom-Steuerung ---------------- */ .zoom-ctl { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,.14); border-radius: 6px; padding: 2px; } .zoom-btn { width: 28px; height: 26px; border: none; border-radius: 5px; background: transparent; color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; line-height: 1; } .zoom-btn:hover { background: rgba(255,255,255,.22); } .zoom-label { border: none; background: transparent; color: #dcebef; font-size: 12px; font-weight: 600; cursor: pointer; min-width: 46px; padding: 0 2px; } .zoom-label:hover { color: #fff; } @media print { .zoom-ctl { display: none !important; } } /* ---------------- Bearbeiter-Nachweis (bei markierter Zelle) ---------------- */ .cell.sel { padding-bottom: 16px; } .cell.sel[data-edit]:not([data-edit=""])::after { content: attr(data-edit); position: absolute; left: 4px; right: 16px; bottom: 1px; font-size: 9.5px; font-weight: 400; opacity: .75; color: var(--ink-soft); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .cell.co-gruen.sel::after, .cell.co-rot.sel::after, .cell.co-blau.sel::after, .cell.co-gelb.sel::after { color: inherit; opacity: .65; } @media print { .cell.sel::after { display: none; } } /* ---------------- FIX: Statusfarben schlagen Zebra/Heute-Hintergrund ---------------- (Zebra-Streifen und die Heute-Spalte hatten höhere Spezifität und ließen bei manchen Zellen nur die Schrift gefärbt erscheinen) */ .plan-grid td.cell.co-gruen { background: var(--st-gruen-bg) !important; color: var(--st-gruen-fg) !important; font-weight: 600; } .plan-grid td.cell.co-rot { background: var(--st-rot-bg) !important; color: var(--st-rot-fg) !important; font-weight: 600; } .plan-grid td.cell.co-blau { background: var(--st-blau-bg) !important; color: var(--st-blau-fg) !important; } .plan-grid td.cell.co-gelb { background: var(--st-gelb-bg) !important; color: var(--st-gelb-fg) !important; font-weight: 600; } /* Eigene Farben (Inline-Style) ebenfalls über Zebra/Heute stellen */ .plan-grid td.cell[style*="background"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Eigene Farb-Buttons */ .ct-custom { background: var(--cc); border-color: color-mix(in srgb, var(--cc) 60%, #000); color: #1c2428; position: relative; padding-right: 24px; } html[data-theme="dark"] .ct-custom { color: #1c2428; } .ct-custom .ct-del { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; line-height: 14px; text-align: center; border-radius: 50%; font-size: 12px; font-weight: 700; background: rgba(0,0,0,.18); cursor: pointer; } .ct-custom .ct-del:hover { background: rgba(0,0,0,.4); color: #fff; } .ct-add { border-style: dashed; } .dlg-colorrow { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 14px; } .dlg-colorrow input[type="color"] { width: 60px; height: 34px; border: 1px solid var(--line); border-radius: 6px; background: var(--input-bg); cursor: pointer; } /* Zellen: Basis für absolute Marker */ .plan-grid td.cell { position: relative; } /* ---------------- Geburtstags-Marker ---------------- */ .cell.has-bday::before { content: "🎂"; position: absolute; top: 1px; right: 3px; font-size: 12px; line-height: 1; pointer-events: none; z-index: 2; } .cell.has-bday { box-shadow: inset 0 0 0 2px var(--copper); } /* Geburtstags-Eingabe Mitarbeiterseite */ .emp-bday input[type="date"] { padding: 4px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--input-bg); color: var(--ink); font-size: 12.5px; width: 140px; } /* ---------------- PWA / iOS Standalone ---------------- */ @supports (padding: env(safe-area-inset-top)) { .topbar { padding-top: calc(10px + env(safe-area-inset-top)); } body.tv-mode .page { padding-top: env(safe-area-inset-top); } } @media (display-mode: standalone) { body { -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } } /* ================================================================ MOBILE-ANSICHT (Telefon, <= 700px): App-artige Tagesansicht ================================================================ */ .mobile-plan { display: none; } .m-ki-toggle { display: none; } @media (max-width: 700px) { /* PC-Elemente ausblenden */ .grid-wrap, .color-toolbar, .hint, .add-emp-row { display: none !important; } .week-tools .btn, #tvModeBtn, #yearSelect { display: none !important; } .zoom-ctl { display: none !important; } .ki-bar, .ki-preview { display: none; } body.ki-open .ki-bar { display: flex; } body.ki-open .ki-preview:not([hidden]) { display: block; } .ki-preview { overflow-x: auto; } .ki-bar { flex-wrap: wrap; } #kiInput { min-width: 0; width: 100%; font-size: 16px; } /* Topbar kompakt */ .topbar { padding: 8px 10px calc(8px); gap: 8px; } .brand-text { display: none; } #globalSearch { width: 110px; font-size: 16px; } .topnav { gap: 8px; } .navlink { font-size: 13px; padding: 4px 2px; } /* Wochenkopf kompakt */ .page { padding: 8px 8px 30px; } .week-header { gap: 6px; margin-bottom: 8px; } .week-nav { gap: 6px; width: 100%; } .kw-big { font-size: 18px; } .kw-range { font-size: 11.5px; } .week-title { min-width: 0; flex: 1; } .btn-nav { width: 42px; height: 42px; } .btn-today { padding: 8px 10px; font-size: 13px; } #kwSelect { font-size: 16px; } .m-ki-toggle { display: inline-flex; } .week-tools { width: 100%; } .ruf-input { font-size: 16px; } .ferien-banner { order: 0; } /* Mobile Tagesansicht */ .mobile-plan { display: block; } .m-tabs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; position: sticky; top: 54px; z-index: 30; background: var(--paper); padding: 4px 0 8px; } .m-tab { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 8px; padding: 6px 2px; text-align: center; cursor: pointer; display: flex; flex-direction: column; gap: 1px; min-height: 48px; } .m-tab span { font-size: 11px; color: var(--ink-soft); } .m-tab b { font-size: 13px; } .m-tab.on { background: var(--petrol-800); border-color: var(--petrol-800); } .m-tab.on span, .m-tab.on b { color: #fff; } .m-tab.today:not(.on) { box-shadow: inset 0 -3px 0 var(--today-line); } .m-tab.hol { border-color: var(--copper); } .m-note { background: var(--st-feiertag-bg); color: var(--st-feiertag-fg); border-radius: 8px; padding: 6px 10px; font-size: 13px; font-weight: 600; margin-bottom: 6px; } .m-group { background: var(--head-bg); color: var(--head-fg); font-size: 11.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; padding: 5px 10px; border-radius: 7px; margin: 10px 0 5px; } .m-row { background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; min-height: 48px; } .m-row:active { border-color: var(--copper); } .m-name { font-weight: 700; font-size: 14px; color: var(--namecol-fg); margin-bottom: 3px; } .m-entry { font-size: 14px; line-height: 1.35; border-radius: 6px; padding: 5px 8px; background: var(--card-alt); } .m-entry.m-empty { color: var(--ink-soft); font-style: italic; background: transparent; padding-left: 0; } .m-entry.co-gruen { background: var(--st-gruen-bg); color: var(--st-gruen-fg); font-weight: 600; } .m-entry.co-rot { background: var(--st-rot-bg); color: var(--st-rot-fg); font-weight: 600; } .m-entry.co-blau { background: var(--st-blau-bg); color: var(--st-blau-fg); } .m-entry.co-gelb { background: var(--st-gelb-bg); color: var(--st-gelb-fg); font-weight: 600; } .m-edit { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; } .m-add { width: 100%; margin: 12px 0; padding: 12px; } /* Bottom Sheet */ .msheet-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(8, 20, 25, .55); display: flex; align-items: flex-end; } .msheet { background: var(--card); width: 100%; border-radius: 16px 16px 0 0; padding: 16px 14px calc(16px + env(safe-area-inset-bottom)); max-height: 85vh; overflow-y: auto; box-shadow: 0 -10px 40px var(--shadow); } .msheet-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; } .msheet-head b { font-size: 16px; } .msheet-head span { color: var(--ink-soft); font-size: 13px; } .msheet-text, .msheet-name { width: 100%; min-height: 84px; padding: 10px; font-size: 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--input-bg); color: var(--ink); resize: vertical; margin-bottom: 10px; } .msheet-name { min-height: 0; } .msheet-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .m-chip { border: 2px solid var(--line); border-radius: 16px; padding: 7px 13px; font-size: 13px; font-weight: 700; background: var(--card-alt); color: var(--ink); cursor: pointer; } .m-chip.on { border-color: var(--copper); box-shadow: 0 0 0 2px var(--copper); } .m-chip.ct-gruen { background: var(--st-gruen-bg); color: var(--st-gruen-fg); } .m-chip.ct-rot { background: var(--st-rot-bg); color: var(--st-rot-fg); } .m-chip.ct-blau { background: var(--st-blau-bg); color: var(--st-blau-fg); } .m-chip.ct-gelb { background: var(--st-gelb-bg); color: var(--st-gelb-fg); } .msheet-mit { width: 100%; font-size: 16px; padding: 9px; margin-bottom: 12px; } .msheet-btns { display: flex; gap: 8px; } .msheet-btns .btn { flex: 1; padding: 12px; font-size: 15px; } .msheet-btns .m-clear { color: #d05050; } /* Dialoge & Toast über Safe-Area */ .dlg-box { margin-bottom: env(safe-area-inset-bottom); } .toast { bottom: calc(20px + env(safe-area-inset-bottom)); } /* Mitarbeiter- & Auslastungsseite: scrollbar statt gequetscht */ .emp-table, .ausl-table { display: block; overflow-x: auto; white-space: nowrap; } .emp-add { width: 100%; flex-wrap: wrap; } .emp-add input { width: 100%; font-size: 16px; } } /* ---------------- Mehrere Termine (Segmente) + Notiz ---------------- */ .cell .seg { border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 5px; padding: 3px 6px; margin-bottom: 3px; background: color-mix(in srgb, currentColor 7%, transparent); } .cell .seg:last-child { margin-bottom: 0; } .cell .seg-note { background: var(--st-rot-bg) !important; color: var(--st-rot-fg) !important; border-color: var(--st-rot-fg); font-weight: 600; } .ct-note { color: var(--st-rot-fg); border-color: var(--st-rot-fg); } .m-seg-hr { border: none; border-top: 1px dashed currentColor; opacity: .5; margin: 4px 0; } .m-note-entry { background: var(--st-rot-bg) !important; color: var(--st-rot-fg) !important; font-weight: 600; margin-top: 4px; } .msheet-note { width: 100%; min-height: 52px; padding: 10px; font-size: 16px; border: 1px solid var(--st-rot-fg); border-radius: 8px; background: var(--st-rot-bg); color: var(--st-rot-fg); margin-bottom: 10px; resize: vertical; } .m-add-termin { width: 100%; margin-bottom: 10px; border-style: dashed; } /* ---------------- Live-Sync: Anwesenheit + Fremdänderungen ---------------- */ .presence { color: var(--ink-soft); font-size: 12.5px; font-weight: 600; margin-right: 6px; } .cell.remote-sel { outline: 2px dashed #3d7d90; outline-offset: -2px; } .cell.remote-sel::before { content: attr(data-remote); position: absolute; top: -1px; left: -1px; background: #3d7d90; color: #fff; font-size: 9px; font-weight: 700; padding: 1px 5px; border-radius: 0 0 5px 0; z-index: 3; } @keyframes remoteFlash { 0% { box-shadow: inset 0 0 0 3px var(--copper); } 100% { box-shadow: none; } } .cell.remote-flash { animation: remoteFlash 1.5s ease-out; } @media print { .presence, .cell.remote-sel::before { display: none !important; } }