/* Zeiterfassung — Clean SaaS, Indigo, Hell/Dunkel (manueller Umschalter), System-Schrift. */ /* Hell ist die Basis. Das Attribut data-theme="light|dark" auf steuert die Auswahl (dauerhaft in localStorage gemerkt; ohne Wahl beim ersten Laden an der OS-Präferenz orientiert). */ :root { color-scheme: light; --ground: #f7f8fb; --surface: #ffffff; --surface-2: #fbfcfe; --text: #1e2330; --muted: #66718c; --faint: #97a1b5; --border: #e7eaf1; --border-strong: #d7dce8; --accent: #5b5bd6; --accent-weak: #ececfb; --good: #1f9d63; --error: #c0392b; --weekend: #f1f3f8; --shadow: 0 1px 2px rgba(20, 28, 54, .04), 0 8px 24px -12px rgba(20, 28, 54, .18); --head-shadow: 0 6px 10px -6px rgba(20, 28, 54, .22); --radius: 14px; } /* Dunkel-Palette — manuell gewählt (data-theme="dark"). */ :root[data-theme="dark"] { color-scheme: dark; --ground: #0e1119; --surface: #161b26; --surface-2: #1b212e; --text: #e7eaf2; --muted: #9aa4ba; --faint: #6b768f; --border: #283143; --border-strong: #36415a; --accent: #9a9af2; --accent-weak: #23253b; --good: #4ec98a; --error: #f0857a; --weekend: #1a2030; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -14px rgba(0, 0, 0, .6); --head-shadow: 0 8px 12px -6px rgba(0, 0, 0, .55); } * { box-sizing: border-box; } body { margin: 0; background: var(--ground); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-variant-numeric: tabular-nums; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } h1 { font-size: 21px; letter-spacing: -.02em; margin: 0 0 2px; } h2 { font-size: 15px; letter-spacing: -.01em; margin: 0 0 10px; } .sub { color: var(--muted); font-size: 13.5px; margin: 0 0 18px; } .muted { color: var(--muted); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* Scrollbars — dezent, theme-aware. Firefox: */ html { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* WebKit/Blink: */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; } ::-webkit-scrollbar-corner { background: transparent; } /* App-Leiste (trägt Monatsfilter bzw. Seitentitel + die Icon-Navigation). */ .appbar { position: sticky; top: 0; z-index: 8; display: flex; align-items: center; gap: 8px; margin-bottom: 22px; } /* .card (folgt später mit padding:18px) überschreiben — Leiste bleibt kompakt. */ .appbar.card { padding: 10px 14px; } .appbar-title { font-size: 15px; font-weight: 650; letter-spacing: -.01em; margin: 0 auto 0 0; } .toolbar-icons { display: flex; align-items: center; gap: 6px; } .toolbar-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--border); } /* Icon-Buttons/-Links (Navigation, Theme, Abmelden) — einheitliches Kästchen. */ .icon-btn, .theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border-strong); border-radius: 9px; background: none; color: var(--muted); cursor: pointer; text-decoration: none; font-family: inherit; } .icon-btn:hover, .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .icon-btn svg { width: 18px; height: 18px; display: block; } .icon-btn.active { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); } /* Theme-Umschalter (Hell / Dunkel): passendes Icon per data-theme. */ .theme-toggle svg { width: 18px; height: 18px; display: none; } :root[data-theme="light"] .theme-toggle .ic-light, :root[data-theme="dark"] .theme-toggle .ic-dark { display: block; } /* Layout */ .container { max-width: 42rem; margin: 26px auto; padding: 0 24px; } .container-wide { max-width: 1300px; } /* Cards */ .card, .day { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; } form.card { max-width: 24rem; display: grid; gap: 1rem; } .day { margin: 0 0 18px; padding: 18px 20px 20px; } .day h2 { display: flex; justify-content: space-between; align-items: baseline; } /* Flash & status */ .flash { padding: .6rem .85rem; margin-bottom: 1rem; border-radius: 10px; color: var(--good); background: color-mix(in srgb, var(--good) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 30%, var(--border)); font-size: .9rem; } .error { padding: .6rem .85rem; border-radius: 10px; margin: 0 0 1rem; color: var(--error); background: color-mix(in srgb, var(--error) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--error) 30%, var(--border)); } ul.error { padding: .6rem .85rem .6rem 1.8rem; } /* Forms */ label { display: grid; gap: .35rem; font-size: .85rem; color: var(--muted); } input[type="text"], input[type="password"], input[type="month"], textarea, select { padding: .6rem .7rem; font-size: 1rem; font-family: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; } textarea { resize: vertical; } input::placeholder { color: var(--faint); } button, .button { padding: .6rem 1rem; font-size: .95rem; font-weight: 600; font-family: inherit; color: #fff; background: var(--accent); border: 0; border-radius: 10px; cursor: pointer; text-decoration: none; display: inline-block; } button:hover, .button:hover { filter: brightness(1.05); } .button-secondary { padding: .55rem .9rem; font-weight: 600; border-radius: 10px; text-decoration: none; color: var(--text); background: color-mix(in srgb, var(--text) 6%, var(--surface)); border: 1px solid var(--border-strong); display: inline-grid; place-items: center; } .button-secondary:hover { border-color: var(--accent); color: var(--accent); } button.link, button.link-danger { background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; color: var(--accent); text-decoration: none; } button.link:hover { text-decoration: underline; } button.link-danger { color: var(--error); } /* Generic tables (Stammdaten) */ table { width: 100%; border-collapse: separate; border-spacing: 0; } .day th, .day td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--border); font-size: .9rem; } .day th { color: var(--faint); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .day tbody tr:last-child td { border-bottom: none; } .inline-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; align-items: center; } /* ---------- Stammdaten: Projektliste ---------- */ #projekt-table { table-layout: auto; } #projekt-table th.c-drag, #projekt-table td.c-drag { width: 34px; padding-right: 0; } #projekt-table th.c-farbe, #projekt-table td.c-farbe { width: 52px; } #projekt-table th.c-status, #projekt-table td.c-status { width: 5.5rem; color: var(--muted); } #projekt-table th.c-akt, #projekt-table td.c-akt { width: 7rem; text-align: right; } #projekt-table td { vertical-align: middle; } .drag-handle { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 28px; color: var(--faint); cursor: grab; } .drag-handle:hover { color: var(--muted); } tr.dragging { opacity: .4; cursor: grabbing; } /* Runder Farbwähler (Liste + Hinzufügen-Maske) */ .color-dot { width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: none; cursor: pointer; vertical-align: middle; -webkit-appearance: none; appearance: none; } .color-dot::-webkit-color-swatch-wrapper { padding: 0; } .color-dot::-webkit-color-swatch { border: 1px solid var(--border-strong); border-radius: 50%; } .color-dot::-moz-color-swatch { border: 1px solid var(--border-strong); border-radius: 50%; } .color-dot:hover::-webkit-color-swatch { border-color: var(--accent); } .color-dot:hover::-moz-color-swatch { border-color: var(--accent); } /* Inline-Bearbeitung Name/Kunde – Box nur bei Hover/Fokus (wie im Raster) */ .edit-name, .edit-kunde { width: 100%; padding: .32rem .45rem; font-size: .9rem; font-family: inherit; color: var(--text); background: transparent; border: 1px solid transparent; border-radius: 8px; } .edit-name { font-weight: 550; } .edit-kunde { color: var(--muted); } .edit-name::placeholder, .edit-kunde::placeholder { color: var(--faint); } .edit-name:hover, .edit-kunde:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .edit-name:focus, .edit-kunde:focus { outline: none; border-color: var(--accent); background: var(--surface); color: var(--text); } /* Kompakte Hinzufügen-Maske in einer Zeile */ .add-projekt { flex-wrap: nowrap; } .add-projekt .add-name { flex: 2 1 8rem; min-width: 6rem; } .add-projekt input[name="kunde"] { flex: 1 1 6rem; min-width: 5rem; } .add-projekt .color-dot { flex: 0 0 auto; } .add-projekt button { flex: 0 0 auto; } @media (max-width: 560px) { .add-projekt { flex-wrap: wrap; } } /* ---------- Erfassung ---------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .erfassung { padding: 18px 18px 16px; } .erfassung-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* .month-bar erbt Leisten-Look von .appbar; hier nur Erfassungs-Spezifika. */ .month-bar .save-status { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .month-bar .nav-arrow { width: 38px; height: 38px; padding: 0; } .month-bar .nav-arrow svg { width: 19px; height: 19px; display: block; } .month-bar .nav-arrow:hover { color: var(--accent); border-color: var(--accent); } .is-disabled { opacity: .4; pointer-events: none; cursor: default; } .month-select { font-size: 15px; font-weight: 600; color: var(--text); background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: 9px; padding: 7px 30px 7px 11px; cursor: pointer; max-width: 14rem; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a1b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .month-select:hover { border-color: var(--accent); } .month-select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } /* Schmale Screens: horizontaler (und ggf. vertikaler) Scroll der breiten Tabelle. */ .table-scroll { overflow-x: auto; } table.grid { table-layout: fixed; width: 100%; font-size: 13.5px; } table.grid th, table.grid td { padding: 7px 12px; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--border); } table.grid thead th { background: var(--surface); font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--border-strong); vertical-align: bottom; } /* Desktop-App-Shell (≥ 861px): kein Seiten-Scroll. Topbar + Monatsleiste sind fix, die Abschnitte füllen den Viewport und scrollen jeweils nur intern. In der linken Karte bleibt der abgerundete Kopf + Tabellenkopf stehen, in der Auswertung Kopf + Filter — der übrige Inhalt scrollt dahinter weg. Umgesetzt per Flexbox (kein 100vh). */ @media (min-width: 861px) { html, body { height: 100%; } body { display: flex; flex-direction: column; overflow: hidden; } main.container { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Erfassungsseite: main scrollt nicht, sondern hostet die fixen Abschnitte. */ main.app-erfassung { overflow: hidden; display: flex; flex-direction: column; } .app-erfassung .month-bar { position: static; } .app-erfassung .split { position: static; height: auto; flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); /* Zeile füllt die verfügbare Höhe */ align-items: stretch; /* Spalten auf volle Höhe strecken */ } /* Linke Karte: Tabellenkörper scrollt hinter den fixen Kopf. */ .erfassung-col { height: 100%; min-height: 0; } .erfassung { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; /* Zeilen hinter der abgerundeten Oberkante kappen */ } .erfassung #grid-form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .erfassung .table-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; } table.grid thead th { position: sticky; top: 0; z-index: 3; transition: box-shadow .15s ease; } .table-scroll.scrolled thead th { box-shadow: var(--head-shadow); } /* Auswertung: Kopf + Filter bleiben fix, Kennzahlen scrollen dahinter. */ .auswertung { position: static; display: flex; flex-direction: column; min-height: 0; } .auswertung .analyse { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; /* Padding wandert in Kopf/Körper (randloser Schatten) */ } .analyse-head { flex: 0 0 auto; position: relative; z-index: 1; background: var(--surface); padding: 18px 18px 0; transition: box-shadow .15s ease; } .analyse-head .analyse-filter { margin-bottom: 16px; } .analyse-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 18px 18px; } .analyse.body-scrolled .analyse-head { box-shadow: var(--head-shadow); } } table.grid tbody tr:last-child td { border-bottom: none; } .datum-col { width: 9rem; text-align: left; vertical-align: top; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-weight: 500; color: var(--text); } thead .datum-col { color: var(--faint); } table.grid .datum-col { white-space: normal; } .d-date { display: inline-block; } .d-info { display: block; margin-top: 2px; font-size: 10.5px; line-height: 1.25; color: var(--faint); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; white-space: normal; overflow-wrap: anywhere; } .d-mark { float: right; background: none; border: 0; margin: 0; padding: 0 0 0 4px; cursor: pointer; color: var(--faint); font-size: 12px; line-height: 1; opacity: 0; } .d-mark:hover { color: var(--accent); } tr:hover .d-mark, tr.markiert .d-mark { opacity: 1; } tr.markiert .d-mark { color: var(--accent); } .proj-col { width: auto; } table.grid thead th.proj-col { text-transform: none; letter-spacing: -.01em; font-size: 12.5px; font-weight: 600; line-height: 1.25; } .proj-col .pname { display: block; } .proj-col .pkunde { display: block; font-weight: 450; font-size: 10.5px; opacity: .75; } .cell-main { display: flex; align-items: baseline; justify-content: flex-start; gap: 4px; overflow: hidden; } .cell-main.empty .unit { display: none; } /* Eingabefelder wie reiner Text – Box nur bei Hover/Fokus */ .grid .h-input { width: 3.4rem; padding: .12rem .3rem; text-align: left; font-size: 13.5px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); } .grid .h-input::placeholder { color: var(--faint); } .grid .h-input:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .grid .h-input:focus { outline: none; border-color: var(--accent); background: var(--surface); } .unit { color: var(--muted); font-size: 12px; } .pct { color: var(--faint); font-size: 11px; white-space: nowrap; } .grid .n-input { width: 100%; margin-top: 3px; padding: .12rem .3rem; font-size: 11.5px; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 6px; } .grid .n-input::placeholder { color: transparent; } .grid .n-input:hover { background: color-mix(in srgb, var(--text) 5%, transparent); } .grid .n-input:hover::placeholder { color: var(--faint); } .grid .n-input:focus { outline: none; border-color: var(--accent); background: var(--surface); color: var(--text); } .grid .n-input:focus::placeholder { color: var(--faint); } .gesamt-col { width: 8rem; background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-left: 1px solid var(--border); } table.grid thead th.gesamt-col { color: var(--accent); } .gesamt-h { font-weight: 650; } .gesamt-pct { color: color-mix(in srgb, var(--accent) 65%, var(--muted)); font-size: 11px; } tr.frei td { background: var(--weekend); } tr.frei .d-date { color: var(--faint); } tr.frei .gesamt-h, tr.frei .gesamt-pct { color: var(--faint); } /* Heutiger Tag */ tr.is-today .datum-col { box-shadow: inset 3px 0 0 var(--accent); } tr.is-today .d-date { color: var(--accent); font-weight: 700; } .foot { margin-top: 14px; color: var(--muted); font-size: 12.5px; } /* Right column */ .auswertung { position: sticky; top: 168px; display: grid; gap: 16px; } .save-panel { padding: 14px 18px; } .save-status { font-size: 12.5px; color: var(--muted); font-weight: 550; } .save-status.ok { color: var(--good); } .save-status.error { color: var(--error); } .save-status.pending { color: var(--muted); } .placeholder { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 7rem; margin: .6rem 0; padding: 1rem; color: var(--faint); font-size: 12.5px; border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); } /* Auswertung */ .hidden { display: none; } .donut-wrap { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; } #donut { flex: none; } .legend { display: grid; gap: 7px; font-size: 12.5px; min-width: 0; } .legend .lg-row { display: flex; align-items: center; gap: 8px; } .legend .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .legend .nm { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .legend .vl { margin-left: auto; font-weight: 600; } .kpis { display: grid; gap: 1px; background: var(--border); border-radius: 10px; overflow: hidden; } .kpi { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 12px; background: var(--surface); } .kpi .k { color: var(--muted); font-size: 12.5px; } .kpi .v { font-weight: 650; font-size: 14px; } .kpi .v.accent { color: var(--accent); } .ph { font-size: 11.5px; margin: 10px 0 0; } .kpi-head { font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); margin: 16px 0 6px; } .analyse-filter { display: flex; gap: 8px; margin: 2px 0 14px; } .analyse-filter select { flex: 1; min-width: 0; font-size: 12.5px; color: var(--text); padding: 6px 26px 6px 9px; border: 1px solid var(--border-strong); border-radius: 8px; background-color: var(--surface); cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2397a1b5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; } .analyse-filter select:hover { border-color: var(--accent); } .analyse-filter select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak); } /* Modal (zentrierte Eingabemaske) */ .modal { position: fixed; inset: 0; z-index: 50; padding: 1rem; display: flex; align-items: center; justify-content: center; background: rgba(15, 17, 25, .45); } .modal[hidden] { display: none; } .modal-card { width: 100%; max-width: 22rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.25rem; } .modal-card h2 { margin: 0 0 .2rem; } .modal-date { margin: 0 0 .9rem; font-size: .9rem; } .modal-card label { margin-bottom: 1.1rem; } .modal-card input[type="text"] { width: 100%; } .modal-actions { display: flex; gap: .5rem; align-items: center; } .modal-actions .spacer { margin-left: auto; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } .auswertung { position: static; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }