/* ========================================================================== Aiva Hub — Kompott design tokens + shared components (Etappe 1) Colours are RGB triplets so Tailwind alpha modifiers work: rgb(var(--surface-700) / 0.5). Tailwind mapping: /js/tw-config.js. Light (Kompott) is default; dark is opt-in via (set by /js/theme.js from localStorage 'hub-theme'). Quieter light variants (calm | leinen | fjord) live in themes-extra.css and mostly override the theme knobs below (--k-bw, --k-shadow, --font-*, ...). ========================================================================== */ :root { color-scheme: light; /* Kompott palette */ --bg: 255 246 234; /* #FFF6EA */ --butter: 255 224 138; /* #FFE08A */ --mint: 189 235 211; /* #BDEBD3 */ --lilac: 220 208 255; /* #DCD0FF */ --sky: 196 228 255; /* #C4E4FF */ --peach: 255 211 194; /* #FFD3C2 */ /* Surfaces (Tailwind surface-*) */ --surface-900: var(--bg); /* page */ --surface-800: 255 255 255; /* card */ --surface-700: 250 241 227; /* inset / row #FAF1E3 */ --surface-600: 242 229 210; /* hover / pressed #F2E5D2 */ --surface-500: 230 214 192; --surface-400: 212 196 174; /* Lines */ --line: 42 34 56; /* ink contour #2A2238 */ --line-soft: 226 212 192; /* separators, inputs #E2D4C0 */ --line-mid: 190 174 154; /* checkbox outlines etc. */ --shadow-c: 42 34 56; /* Text (all >= 4.5:1 on bg and on white) */ --text-primary: 42 34 56; /* 14.2:1 */ --text-secondary: 94 86 112;/* 6.4:1 */ --text-muted: 101 93 121; /* 5.8:1 */ /* Accent (fills) + readable accent text */ --accent: 240 96 63; /* #F0603F, ink text on it 4.6:1 */ --accent-hover: 243 118 88; --accent-text: 184 64 30; /* #B8401E 5.2:1 */ --accent-text-hover: 143 47 20; --on-accent: 42 34 56; /* Status (fill + readable text) */ --ok: 35 148 95; /* #23945F */ --ok-text: 23 116 74; /* #17744A 5.4:1 */ --warn: 217 138 0; /* #D98A00 */ --warn-text: 138 90 0; /* #8A5A00 5.5:1 */ --err: 214 54 43; /* #D6362B */ --err-text: 180 35 24; /* #B42318 6.1:1 */ --info: 29 78 216; --info-text: 29 78 216; /* 6.3:1 */ /* Remapped Tailwind -300/-400 text shades (see tw-config.js) */ --tx-red: var(--err-text); --tx-green: var(--ok-text); --tx-amber: var(--warn-text); --tx-orange: 170 70 12; --tx-blue: var(--info-text); --tx-cyan: 14 106 128; --tx-purple: 116 52 170; --tx-pink: 170 36 100; --tx-gray: 94 86 112; --bg-red-900: 214 54 43; /* used only as /30 tint */ --scrim: 42 34 56; --k-radius: 18px; --k-shadow: 3px 3px 0 rgb(var(--shadow-c)); --k-shadow-sm: 2px 2px 0 rgb(var(--shadow-c)); --k-border: 2px; --area: var(--surface-800); /* Theme knobs (Kompott values). Quieter themes in themes-extra.css override these instead of re-declaring every component. */ --k-bw: 2px; /* control contours (buttons, chips, nav) */ --k-bw-sm: 1.5px; /* small contours (dots, badges, checks) */ --k-radius-xl: 0.75rem; /* Tailwind rounded-xl */ --k-radius-lg: 0.5rem; /* Tailwind rounded-lg */ --k-radius-btn: 14px; /* .k-btn / .k-chip / .k-seg */ --font-display: 'Bricolage Grotesque', 'Nunito', sans-serif; --font-body: 'Nunito', sans-serif; --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --body-weight: 500; --display-tracking: -0.01em; } /* ---------- Dark: aubergine/ink instead of black, pastels muted ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: 26 20 36; /* #1A1424 */ --butter: 84 70 34; --mint: 30 70 54; --lilac: 60 50 98; --sky: 30 58 86; --peach: 88 52 42; --surface-900: var(--bg); --surface-800: 36 28 49; /* #241C31 */ --surface-700: 46 37 64; /* #2E2540 */ --surface-600: 59 49 80; /* #3B3150 */ --surface-500: 76 64 102; --surface-400: 96 83 125; --line: 92 78 120; --line-soft: 62 52 84; --line-mid: 110 96 140; --shadow-c: 8 5 14; --text-primary: 240 234 247; --text-secondary: 190 181 208; --text-muted: 167 159 186; --accent: 240 110 82; --accent-hover: 246 138 112; --accent-text: 255 145 115; --accent-text-hover: 255 180 158; --on-accent: 26 20 36; --ok: 74 200 140; --ok-text: 110 214 160; --warn: 245 185 74; --warn-text: 245 190 90; --err: 255 110 100; --err-text: 255 128 118; --info: 110 170 250; --info-text: 130 182 250; --tx-red: 248 113 113; --tx-green: 74 222 128; --tx-amber: 251 191 36; --tx-orange: 251 146 60; --tx-blue: 96 165 250; --tx-cyan: 34 211 238; --tx-purple: 192 132 252; --tx-pink: 244 114 182; --tx-gray: 156 163 175; --bg-red-900: 127 29 29; --scrim: 5 3 10; } /* ---------- Base ---------- */ html, body { overflow-x: hidden; max-width: 100vw; } body { background: rgb(var(--surface-900)); color: rgb(var(--text-primary)); font-family: var(--font-body); font-weight: var(--body-weight); } * { box-sizing: border-box; } body, input, select, textarea, button { font-family: var(--font-body); } h1, h2, h3, h4, .font-display { font-family: var(--font-display); letter-spacing: var(--display-tracking); } .font-mono { font-family: var(--font-mono) !important; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgb(var(--surface-900)); } ::-webkit-scrollbar-thumb { background: rgb(var(--surface-500)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--surface-400)); } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--accent) / 0.35); } input, select, textarea { color: rgb(var(--text-primary)); } input::placeholder, textarea::placeholder { color: rgb(var(--text-muted)); opacity: 1; } option, optgroup { background: rgb(var(--surface-800)); color: rgb(var(--text-primary)); } /* ---------- Kompott card ---------- Cards: .k-card, or any existing `bg-surface-800 rounded-2xl border` card (that pattern is the card in all views, so it's styled here once). */ .k-card, .bg-surface-800.rounded-2xl.border { border: var(--k-border) solid rgb(var(--line)) !important; box-shadow: var(--k-shadow); border-radius: var(--k-radius); } /* Smaller tiles (rounded-xl cards) get the contour but lighter */ .bg-surface-800.rounded-xl.border { border-color: rgb(var(--line) / 0.85); } /* Dense data views: thinner contours (design review) */ [data-dense] .k-card, [data-dense] .bg-surface-800.rounded-2xl.border { border-width: 1.5px !important; box-shadow: var(--k-shadow-sm); } [data-dense] .bg-surface-800.rounded-xl.border { border-width: 1px; border-color: rgb(var(--line-soft)); } [data-dense] table { border-collapse: collapse; } [data-dense] thead th { color: rgb(var(--text-secondary)); } /* ---------- Area colours per module ---------- */ .k-butter, [data-area="butter"] { --area: var(--butter); } .k-mint, [data-area="mint"] { --area: var(--mint); } .k-lilac, [data-area="lilac"] { --area: var(--lilac); } .k-sky, [data-area="sky"] { --area: var(--sky); } .k-peach, [data-area="peach"] { --area: var(--peach); } .k-plain, [data-area="plain"] { --area: var(--surface-900); } .k-tile { background: rgb(var(--area)) !important; } /* Dashboard tiles: whole tile in its area colour (mockup), rows stay light */ [data-dash-module="time"], [data-dash-module="todos"] { --area: var(--butter); } [data-dash-module="waste"] { --area: var(--surface-800); } [data-dash-module="shopping"] { --area: var(--mint); } [data-dash-module="meals"] { --area: var(--peach); } [data-dash-module="contracts"]{ --area: var(--lilac); } [data-dash-module="fuel"], [data-dash-module="audi"] { --area: var(--sky); } #view-dashboard [data-dash-module].bg-surface-800 { background: rgb(var(--area)); } #view-dashboard [data-dash-module] .bg-surface-700, #view-dashboard [data-dash-module] .bg-surface-700\/50 { background: rgb(var(--surface-800) / 0.72); } #view-dashboard [data-dash-module] .hover\:bg-surface-600:hover, #view-dashboard [data-dash-module] .hover\:bg-surface-700:hover { background: rgb(var(--surface-800)); } #view-dashboard [data-dash-module] .border-surface-600 { border-color: rgb(var(--line) / 0.25); } /* The dashboard's first tile (ToDos) stays white like the mockup */ #view-dashboard [data-dash-module="todos"]:not(#dash-deadlines-widget) { --area: var(--surface-800); } /* Greeting hero */ .k-hero { background: rgb(var(--butter)); border: var(--k-border) solid rgb(var(--line)); border-radius: var(--k-radius); box-shadow: var(--k-shadow); } /* ---------- App header: area colour of the current view ---------- */ #app-header { background: rgb(var(--area) / 0.96); border-bottom: var(--k-bw) solid rgb(var(--line)); transition: background-color .2s ease; } #app-header[data-area="plain"] { background: rgb(var(--surface-900) / 0.92); } /* ---------- Sidebar ---------- */ #sidebar { background: rgb(var(--surface-900)); border-right: var(--k-bw) solid rgb(var(--line)); } .k-logo-dot { width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--accent)); border: var(--k-bw) solid rgb(var(--line)); display: inline-block; flex: none; } .k-dot { width: 12px; height: 12px; border-radius: 4px; flex: none; border: var(--k-bw-sm) solid rgb(var(--line)); background: rgb(var(--area)); } .nav-item { transition: background-color .15s ease, color .15s ease; position: relative; border: var(--k-bw) solid transparent; font-weight: 700; } .nav-item:hover { background: rgb(var(--surface-800) / 0.7); } .nav-item.active { background: rgb(var(--surface-800)) !important; color: rgb(var(--text-primary)) !important; border-color: rgb(var(--line)); box-shadow: var(--k-shadow); } /* ---------- Buttons / chips ---------- */ .k-btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 40px; padding: 0 14px; border-radius: var(--k-radius-btn); border: var(--k-bw) solid rgb(var(--line)); background: rgb(var(--surface-800)); color: rgb(var(--text-primary)); font-weight: 800; font-size: 14px; line-height: 1; box-shadow: var(--k-shadow-sm); transition: transform .08s ease, box-shadow .08s ease, background-color .15s; white-space: nowrap; cursor: pointer; } .k-btn:hover { background: rgb(var(--surface-700)); } .k-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 rgb(var(--shadow-c)); } .k-btn-accent { background: rgb(var(--accent)); color: rgb(var(--on-accent)); } .k-btn-accent:hover { background: rgb(var(--accent-hover)); } .k-btn-ink { background: rgb(var(--text-primary)); color: rgb(var(--surface-900)); } .k-btn-ink:hover { background: rgb(var(--text-primary) / 0.88); } .k-btn-icon { padding: 0; width: 40px; } .k-chip { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 52px; padding: 10px 14px; border-radius: var(--k-radius-btn); border: var(--k-bw) solid rgb(var(--line)); background: rgb(var(--surface-800)); color: rgb(var(--text-primary)); font-weight: 800; font-size: 15px; text-align: left; box-shadow: var(--k-shadow-sm); cursor: pointer; transition: transform .08s ease, box-shadow .08s ease, background-color .15s; } .k-chip:hover { background: rgb(var(--butter)); } .k-chip:active { transform: translate(2px, 2px); box-shadow: none; } .k-chip .k-swatch { width: 14px; height: 14px; border-radius: 50%; border: var(--k-bw-sm) solid rgb(var(--line)); flex: none; } .k-chip small { display: block; font-weight: 600; font-size: 12px; color: rgb(var(--text-muted)); } .k-badge { font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 8px; border: var(--k-bw-sm) solid rgb(var(--line)); background: rgb(var(--surface-800)); } /* ---------- Header quick timer ---------- */ #header-timer-widget .k-timer-run { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 4px 0 12px; border-radius: var(--k-radius-btn); border: var(--k-bw) solid rgb(var(--line)); background: rgb(var(--surface-800)); box-shadow: var(--k-shadow-sm); } .k-live-dot { width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--ok)); border: var(--k-bw-sm) solid rgb(var(--line)); flex: none; animation: k-blink 1.6s ease-in-out infinite; } .k-live-dot.paused { background: rgb(var(--warn)); animation: none; } @keyframes k-blink { 50% { opacity: .35; } } .k-stop-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; min-width: 44px; padding: 0 12px; border-radius: 10px; border: var(--k-bw) solid rgb(var(--line)); background: rgb(var(--err)); color: #fff; font-weight: 800; font-size: 13px; cursor: pointer; } .k-stop-btn:hover { filter: brightness(1.08); } #timer-dropdown { background: rgb(var(--surface-900)); border: var(--k-bw) solid rgb(var(--line)); border-radius: var(--k-radius); box-shadow: var(--k-shadow); } @media (max-width: 639px) { #timer-dropdown { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: calc(100vh - 170px); overflow-y: auto; } } .k-toast { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(24px + env(safe-area-inset-bottom)); width: min(420px, calc(100vw - 24px)); background: rgb(var(--surface-800)); border: var(--k-bw) solid rgb(var(--line)); border-radius: var(--k-radius); box-shadow: var(--k-shadow); padding: 12px 14px; } /* ---------- Mobile bottom navigation ---------- */ #k-bottomnav { position: fixed; z-index: 45; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); height: 64px; display: flex; justify-content: space-around; align-items: center; background: rgb(var(--surface-800)); border: var(--k-bw) solid rgb(var(--line)); border-radius: 22px; box-shadow: var(--k-shadow); } #k-bottomnav a, #k-bottomnav button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 56px; min-height: 48px; padding: 4px 8px; border-radius: 14px; font-size: 11px; font-weight: 800; color: rgb(var(--text-secondary)); text-decoration: none; border: 1.5px solid transparent; background: none; cursor: pointer; } #k-bottomnav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #k-bottomnav .on { background: rgb(var(--area)); color: rgb(var(--text-primary)); border-color: rgb(var(--line)); } #k-bottomnav[hidden] { display: none; } @media (min-width: 1024px) { #k-bottomnav { display: none !important; } } @media (max-width: 1023px) { .k-has-bottomnav { padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important; } #mobile-menu-btn { display: none !important; } } /* ---------- Shopping list: big tap targets ---------- */ .k-shop-group { overflow: hidden; } .k-shop-group > .k-shop-head { background: rgb(var(--mint)); border-bottom: var(--k-bw) solid rgb(var(--line)); padding: 8px 14px; display: flex; align-items: center; gap: 8px; font-weight: 800; } .k-shop-row { min-height: 56px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .k-shop-row + .k-shop-row { border-top: 1.5px dashed rgb(var(--line-soft)); } .k-shop-row:hover { background: rgb(var(--surface-700)); } .k-check-hit { width: 44px; height: 44px; display: grid; place-items: center; flex: none; } .k-check { width: 28px; height: 28px; border-radius: 9px; border: var(--k-bw) solid rgb(var(--line)); background: rgb(var(--surface-800)); display: grid; place-items: center; color: #fff; font-size: 16px; font-weight: 900; } .k-check.on { background: rgb(var(--ok)); } .k-del-hit { min-width: 44px; min-height: 44px; display: grid; place-items: center; } /* ---------- Theme switcher (settings) ---------- */ .k-seg { display: inline-flex; border: var(--k-bw) solid rgb(var(--line)); border-radius: var(--k-radius-btn); overflow: hidden; box-shadow: var(--k-shadow-sm); } .k-seg button { padding: 8px 14px; font-weight: 800; font-size: 14px; background: rgb(var(--surface-800)); color: rgb(var(--text-secondary)); } .k-seg button + button { border-left: var(--k-bw) solid rgb(var(--line)); } .k-seg button[aria-pressed="true"] { background: rgb(var(--butter)); color: rgb(var(--text-primary)); } /* Theme picker: wraps on phones (6 options) */ .k-theme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } @media (min-width: 640px) { .k-theme-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .k-theme-grid button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: var(--k-bw) solid rgb(var(--line)); border-radius: var(--k-radius-btn); background: rgb(var(--surface-800)); color: rgb(var(--text-secondary)); font-weight: 800; font-size: 13px; line-height: 1.15; text-align: center; cursor: pointer; } .k-theme-grid button:hover { background: rgb(var(--surface-700)); } .k-theme-grid button[aria-pressed="true"] { background: rgb(var(--butter)); color: rgb(var(--text-primary)); box-shadow: var(--k-shadow-sm); } .k-theme-grid .k-sw { display: flex; width: 36px; height: 18px; border-radius: 6px; overflow: hidden; border: 1px solid rgb(var(--line) / 0.35); } .k-theme-grid .k-sw i { flex: 1; } /* Motion: keep entrances subtle, respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Floating action buttons sit above the mobile bottom nav */ @media (max-width: 1023px) { .fixed.bottom-6.right-6 { bottom: calc(90px + env(safe-area-inset-bottom)) !important; } } /* ========================================================================== Etappe 2 — navigation icons, dashboard "Heute", tile headings, states ========================================================================== */ .k-ico { width: 18px; height: 18px; flex: none; } .nav-item .k-ico { opacity: .8; } .nav-item.active .k-ico, .nav-item:hover .k-ico { opacity: 1; } #sidebar-nav .k-nav-label { font-size: 11px; letter-spacing: .08em; } .k-eyebrow { margin: 0 0 6px; font-family: var(--font-body); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--text-muted)); } .k-link { font-size: 12px; font-weight: 700; color: rgb(var(--accent-text)); background: none; border: 0; cursor: pointer; padding: 4px 0; } .k-link:hover { color: rgb(var(--accent-text-hover)); text-decoration: underline; } .k-empty { font-size: 14px; color: rgb(var(--text-muted)); } .k-empty-err { color: rgb(var(--err-text)); } /* Tile headings: one icon style instead of emojis */ .k-tile-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: var(--display-tracking); } .k-tile-ico { display: inline-flex; color: rgb(var(--text-muted)); } .k-tile-ico svg { width: 18px; height: 18px; } /* "Heute" card */ .k-today { display: grid; gap: 20px; padding: 18px; } @media (min-width: 640px) { .k-today { padding: 22px 24px; } } @media (min-width: 1024px) { .k-today { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; padding: 24px 28px; } .k-today:has(> .k-agenda[hidden]) { grid-template-columns: minmax(0, 1fr); } } .k-today-main { min-width: 0; } .k-weather[hidden], .k-agenda[hidden] { display: none !important; } .k-weather { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(var(--line-soft)); } .k-weather-ico { display: inline-flex; color: rgb(var(--accent-text)); } .k-weather-ico svg { width: 30px; height: 30px; } .k-weather-temp { font-family: var(--font-display); font-size: 38px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; } .k-weather-desc { font-size: 14px; line-height: 1.4; color: rgb(var(--text-secondary)); min-width: 0; } .k-hints { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .k-hint { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 5px 12px; max-width: 100%; border-radius: 999px; border: 1px solid rgb(var(--line)); background: rgb(var(--surface-800)); color: rgb(var(--text-secondary)); font-size: 13px; font-weight: 700; line-height: 1.2; text-align: left; } .k-hint span { overflow: hidden; text-overflow: ellipsis; } .k-hint svg { width: 15px; height: 15px; flex: none; } button.k-hint { cursor: pointer; } button.k-hint:hover { filter: brightness(0.97); } button.k-hint:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } .k-hint[data-tone="warn"] { background: rgb(var(--warn) / 0.12); border-color: rgb(var(--warn) / 0.40); color: rgb(var(--warn-text)); } .k-hint[data-tone="err"] { background: rgb(var(--err) / 0.10); border-color: rgb(var(--err) / 0.40); color: rgb(var(--err-text)); } li.k-hint-calm { background: transparent; border-style: dashed; color: rgb(var(--text-muted)); font-weight: 600; } .k-agenda { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; min-width: 0; } @media (min-width: 640px) { .k-agenda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (min-width: 1024px) { .k-agenda { border-left: 1px solid rgb(var(--line-soft)); padding-left: 28px; } } .k-agenda-more { grid-column: 1 / -1; justify-self: start; } .k-agenda-list { list-style: none; margin: 0; padding: 2px 0 2px 16px; display: flex; flex-direction: column; gap: 12px; border-left: 2px solid rgb(var(--line-soft)); } .k-agenda-item { position: relative; display: flex; flex-direction: column; min-width: 0; } .k-agenda-item::before { content: ''; position: absolute; left: -22px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: rgb(var(--surface-800)); border: 2px solid rgb(var(--accent)); } .k-agenda-item.is-allday::before { background: rgb(var(--accent)); } .k-agenda-item.is-past { opacity: .55; } .k-agenda-time { font-size: 12px; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; } .k-agenda-title { font-size: 14px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .k-agenda-where { font-size: 12px; color: rgb(var(--text-muted)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .k-agenda-empty { font-size: 14px; color: rgb(var(--text-muted)); } /* Off-canvas sidebar on phones: keep the user row above the bottom nav */ @media (max-width: 1023px) { #sidebar { padding-bottom: calc(84px + env(safe-area-inset-bottom)); } } /* ========================================================================== Zeiterfassung (/time) — Sheets, Tagesleiste, Monatskalender, Eintragszeilen Nur Tokens; funktioniert in allen Themes. ========================================================================== */ .tt-label { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 700; color: rgb(var(--text-secondary)); } .tt-input { display: block; width: 100%; min-height: 44px; padding: 8px 12px; font: inherit; font-size: 16px; color: rgb(var(--text-primary)); background: rgb(var(--surface-700)); border: 1px solid rgb(var(--line-soft)); border-radius: var(--k-radius-lg); } .tt-input:focus { outline: none; border-color: rgb(var(--accent)); box-shadow: 0 0 0 3px rgb(var(--accent) / .25); } .tt-input[aria-invalid="true"] { border-color: rgb(var(--err)); } .tt-danger { color: rgb(var(--err-text)); } .tt-danger:hover { background: rgb(var(--err) / .1); } /* Sheet: rechts auf Desktop, von unten auf dem Handy */ .tt-sheet { position: absolute; right: 0; top: 0; height: 100%; width: 100%; max-width: 32rem; display: flex; flex-direction: column; background: rgb(var(--surface-800)); border-left: var(--k-border) solid rgb(var(--line)); box-shadow: var(--k-shadow); animation: tt-sheet-in .18s ease-out; } .tt-sheet-head, .tt-sheet-foot { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 18px; } .tt-sheet-head { justify-content: space-between; border-bottom: 1px solid rgb(var(--line-soft)); } .tt-sheet-foot { border-top: 1px solid rgb(var(--line-soft)); padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .tt-sheet-body { flex: 1; overflow-y: auto; padding: 18px; } @keyframes tt-sheet-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } } @media (max-width: 639px) { .tt-sheet { top: auto; bottom: 0; height: auto; max-height: calc(100% - 24px); max-width: none; border-left: 0; border-top: var(--k-border) solid rgb(var(--line)); border-radius: var(--k-radius) var(--k-radius) 0 0; } .tt-sheet-body { padding: 14px 16px; } .tt-sheet-head, .tt-sheet-foot { padding: 12px 16px; } .tt-sheet-foot { padding-bottom: calc(12px + env(safe-area-inset-bottom)); } @keyframes tt-sheet-in { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } } } /* Firmen-Summen */ .tt-co { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; width: 100%; padding: 8px 10px; border-radius: var(--k-radius-lg); text-align: left; cursor: pointer; background: rgb(var(--surface-700) / .5); border: 1px solid transparent; } .tt-co:hover { background: rgb(var(--surface-700)); } .tt-co[aria-pressed="true"] { border-color: rgb(var(--line)); background: rgb(var(--surface-700)); } .tt-co .tt-sw { width: 12px; height: 12px; border-radius: 50%; } .tt-co .tt-bar { grid-column: 2 / 4; height: 6px; border-radius: 99px; background: rgb(var(--surface-600)); overflow: hidden; } .tt-co .tt-bar i { display: block; height: 100%; border-radius: 99px; } .tt-co-wrap { display: flex; gap: 6px; align-items: stretch; } .tt-co-wrap .tt-co { flex: 1; min-width: 0; } .tt-co-actions { display: flex; flex-direction: column; gap: 4px; } .tt-mini { min-height: 32px; padding: 0 10px; font-size: 12px; } /* Woche: 7 Säulen, gestapelt nach Firma */ .tt-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; align-items: end; } .tt-week-col { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; } .tt-week-bar { width: 100%; max-width: 44px; height: 140px; display: flex; flex-direction: column-reverse; border-radius: 8px; background: rgb(var(--surface-700)); overflow: hidden; } .tt-week-bar i { display: block; width: 100%; } .tt-week-val { font-family: var(--font-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; } .tt-week-day { font-size: 12px; font-weight: 700; color: rgb(var(--text-muted)); } .tt-week-col.is-today .tt-week-day { color: rgb(var(--accent-text)); } /* Monat: Kalender mit Tagessummen */ .tt-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; } .tt-cal-h { font-size: 11px; font-weight: 800; text-align: center; color: rgb(var(--text-muted)); padding-bottom: 2px; } .tt-cal-d { min-height: 48px; padding: 4px 5px; border-radius: 8px; background: rgb(var(--surface-700) / .45); display: flex; flex-direction: column; justify-content: space-between; text-align: left; border: 1.5px solid transparent; color: inherit; cursor: default; min-width: 0; } .tt-cal-d.has { cursor: pointer; } .tt-cal-d.has:hover { border-color: rgb(var(--line-mid)); } .tt-cal-d .n { font-size: 11px; font-weight: 700; color: rgb(var(--text-muted)); } .tt-cal-d .v { font-family: var(--font-mono); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .tt-cal-d.l1 { background: rgb(var(--accent) / .12); } .tt-cal-d.l2 { background: rgb(var(--accent) / .22); } .tt-cal-d.l3 { background: rgb(var(--accent) / .34); } .tt-cal-d.we { opacity: .8; } .tt-cal-d.is-today { border-color: rgb(var(--accent)); } .tt-cal-d.warn .n::after { content: ' ⚠'; color: rgb(var(--warn-text)); } .tt-cal-pad { min-height: 48px; } /* Eintragszeilen */ .tt-day-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; padding: 2px 0; } .tt-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; padding: 10px 12px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-700) / .5); text-align: left; color: inherit; border: 1px solid transparent; } button.tt-row { cursor: pointer; } button.tt-row:hover { background: rgb(var(--surface-700)); } .tt-row.is-warn { border-color: rgb(var(--warn) / .7); } .tt-row .tt-stripe { align-self: stretch; border-radius: 99px; min-height: 36px; } .tt-row .tt-dur { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; } .tt-row .tt-span { font-size: 13px; color: rgb(var(--text-muted)); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; } .tt-desc { font-size: 14px; color: rgb(var(--text-secondary)); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .tt-flag { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 99px; white-space: nowrap; } .tt-flag-warn { background: rgb(var(--warn) / .16); color: rgb(var(--warn-text)); } .tt-flag-live { background: rgb(var(--ok) / .16); color: rgb(var(--ok-text)); } .tt-flag-info { background: rgb(var(--info) / .12); color: rgb(var(--info-text)); } .tt-alert { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: var(--k-radius-lg); background: rgb(var(--warn) / .12); border: 1px solid rgb(var(--warn) / .5); color: rgb(var(--text-primary)); font-size: 14px; } .tt-flash { animation: tt-flash 1.2s ease-out; } @keyframes tt-flash { from { box-shadow: 0 0 0 3px rgb(var(--accent) / .6); } to { box-shadow: 0 0 0 0 rgb(var(--accent) / 0); } } .tt-readonly .tt-manage { display: none !important; } #tt-manage-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; } #tt-manage-details > summary::-webkit-details-marker { display: none; } #tt-manage-details > summary::after { content: '▾'; color: rgb(var(--text-muted)); transition: transform .15s; } #tt-manage-details[open] > summary::after { transform: rotate(180deg); } /* Zeiterfassung: Toolbar-Anordnung (Handy: Modus + Nachtragen oben, Monat darunter) */ #time-toolbar .tt-add { margin-left: auto; } @media (min-width: 640px) { #time-toolbar .tt-filter { margin-left: auto; } #time-toolbar:not(.tt-single) .tt-add { margin-left: 0; } } #time-toolbar.tt-single .tt-filter { display: none; } @media (max-width: 639px) { .k-seg button { padding: 8px 12px; } } /* ========================================================================== ToDos (/todos) — Schnell-Eingabe, Filter-Chips, Zeilen, Detail-Sheet. Baut auf den .tt-* Bausteinen der Zeiterfassung auf. Nur Tokens. ========================================================================== */ .td-preview { font-size: 13px; color: rgb(var(--text-muted)); } .td-preview:not(:empty) { margin-top: 10px; } .td-preview .td-pv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .td-preview .td-pv-title { font-weight: 700; color: rgb(var(--text-primary)); overflow-wrap: anywhere; margin-right: 2px; } .td-pchip { display: inline-flex; align-items: center; gap: 5px; min-height: 30px; padding: 0 6px 0 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgb(var(--surface-700)); border: 1px solid rgb(var(--line-soft)); color: rgb(var(--text-primary)); } .td-pchip button { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: rgb(var(--text-muted)); font-size: 15px; line-height: 1; } .td-pchip button:hover { background: rgb(var(--surface-600)); color: rgb(var(--text-primary)); } .td-pchip select { background: transparent; border: 0; font: inherit; font-weight: 800; color: inherit; padding: 0 2px; min-height: 28px; cursor: pointer; } .td-pchip[data-tone="warn"] { background: rgb(var(--warn) / .14); border-color: rgb(var(--warn) / .45); color: rgb(var(--warn-text)); } .td-pchip[data-tone="err"] { background: rgb(var(--err) / .10); border-color: rgb(var(--err) / .40); color: rgb(var(--err-text)); } .td-hintline code { white-space: nowrap; font-family: var(--font-mono); font-size: 12px; padding: 0 4px; border-radius: 4px; background: rgb(var(--surface-700)); color: rgb(var(--text-secondary)); } .td-toolbar { display: flex; flex-direction: column; gap: 10px; } @media (min-width: 768px) { .td-toolbar { flex-direction: row; align-items: center; } .td-search { flex: 0 0 260px; } } .td-search { position: relative; } .td-search svg { position: absolute; left: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: rgb(var(--text-muted)); pointer-events: none; } .td-search .tt-input { padding-left: 38px; background: rgb(var(--surface-800)); } .td-chips { display: flex; gap: 6px; overflow-x: auto; min-width: 0; padding: 2px; margin: -2px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .td-chips::-webkit-scrollbar { display: none; } .td-chip { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 99px; font-size: 13px; font-weight: 800; white-space: nowrap; cursor: pointer; color: rgb(var(--text-secondary)); background: rgb(var(--surface-800)); border: 1px solid rgb(var(--line-soft)); } .td-chip:hover { background: rgb(var(--surface-700)); } .td-chip[aria-pressed="true"] { background: rgb(var(--text-primary)); border-color: rgb(var(--text-primary)); color: rgb(var(--surface-800)); } .td-chip .n { font-weight: 700; opacity: .7; font-variant-numeric: tabular-nums; } .td-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: rgb(var(--surface-400)); border: 1px solid rgb(var(--line) / .35); } .td-dot[data-cat="Familie/Privat"] { background: rgb(var(--peach)); } .td-dot[data-cat="FLEET"] { background: rgb(var(--sky)); } .td-dot[data-cat="Satiata"] { background: rgb(var(--lilac)); } .td-dot[data-cat="Wellfairs"] { background: rgb(var(--mint)); } .td-dot[data-cat="HolliWoodKids"] { background: rgb(var(--butter)); } .td-sec { display: flex; align-items: baseline; gap: 8px; margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--text-secondary)); } .td-sec:first-child { margin-top: 4px; } .td-sec[data-tone="err"] { color: rgb(var(--err-text)); } .td-sec[data-tone="warn"] { color: rgb(var(--warn-text)); } .td-sec-n { font-size: 12px; font-weight: 700; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; text-transform: none; letter-spacing: 0; } .td-rows { display: flex; flex-direction: column; gap: 6px; } .td-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 2px 6px; padding: 4px 8px 4px 2px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-800)); border: 1px solid rgb(var(--line-soft)); transition: opacity .25s ease, background-color .15s; } .td-row:hover { background: rgb(var(--surface-700) / .6); } .td-row.is-overdue { border-left: 4px solid rgb(var(--err)); padding-left: 0; } .td-row.is-today { border-left: 4px solid rgb(var(--warn)); padding-left: 0; } .td-row.is-done .td-title { text-decoration: line-through; color: rgb(var(--text-muted)); } .td-row.is-leaving { opacity: .35; } .td-row .k-check { width: 26px; height: 26px; border-radius: 50%; font-size: 14px; } .td-row .k-check-hit { cursor: pointer; border-radius: 50%; } .td-row .k-check-hit:hover .k-check:not(.on) { background: rgb(var(--ok) / .15); } .td-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 0; text-align: left; cursor: pointer; color: inherit; background: none; border: 0; } .td-main:focus-visible, .td-row .k-check-hit:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 8px; } .td-title { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .td-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: rgb(var(--text-muted)); } .td-meta .td-cat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; } .td-meta .td-ic { display: inline-flex; align-items: center; gap: 3px; } .tt-flag-err { background: rgb(var(--err) / .12); color: rgb(var(--err-text)); } .tt-flag-muted { background: rgb(var(--surface-700)); color: rgb(var(--text-secondary)); } .td-side { display: flex; align-items: center; gap: 4px; } .td-snooze { min-height: 36px; padding: 0 10px; font-size: 12px; } @media (hover: hover) and (min-width: 640px) { .td-row .td-snooze { opacity: 0; transition: opacity .12s; } .td-row:hover .td-snooze, .td-row .td-snooze:focus-visible { opacity: 1; } } .td-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 16px; border: 1.5px dashed rgb(var(--line-soft)); border-radius: var(--k-radius); color: rgb(var(--text-muted)); } .td-empty strong { font-family: var(--font-display); font-size: 18px; color: rgb(var(--text-primary)); } .td-done > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: var(--k-radius-lg); cursor: pointer; font-weight: 800; font-size: 14px; color: rgb(var(--text-secondary)); background: rgb(var(--surface-700) / .5); } .td-done > summary::-webkit-details-marker { display: none; } .td-done > summary::after { content: '▾'; color: rgb(var(--text-muted)); transition: transform .15s; } .td-done[open] > summary::after { transform: rotate(180deg); } .td-done[open] > summary { margin-bottom: 8px; } /* Detail-Sheet */ .td-title-input { font-weight: 700; font-size: 17px; line-height: 1.35; } .td-quick { display: flex; flex-wrap: wrap; gap: 6px; } .td-seg { display: flex; width: 100%; } .td-seg button { flex: 1; min-height: 44px; padding: 0 6px; font-size: 13px; } .td-seg button[data-prio="high"][aria-pressed="true"] { background: rgb(var(--warn) / .22); color: rgb(var(--warn-text)); } .td-seg button[data-prio="urgent"][aria-pressed="true"] { background: rgb(var(--err) / .16); color: rgb(var(--err-text)); } .td-mail { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: var(--k-radius-lg); background: rgb(var(--info) / .08); border: 1px solid rgb(var(--info) / .3); font-size: 14px; } .td-mail dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; margin: 0; } .td-mail dt { color: rgb(var(--text-muted)); font-size: 13px; } .td-mail dd { margin: 0; overflow-wrap: anywhere; } .td-mail .k-btn { align-self: flex-start; text-decoration: none; } .td-desc-view { padding: 10px 12px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-700) / .6); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; color: rgb(var(--text-secondary)); max-height: 260px; overflow-y: auto; } .td-desc-view a, .td-link { color: rgb(var(--accent-text)); text-decoration: underline; text-underline-offset: 2px; } .td-sec-block { padding-top: 14px; border-top: 1px solid rgb(var(--line-soft)); } .td-block-h { display: flex; align-items: baseline; gap: 6px; margin: 0 0 8px; font-size: 13px; font-weight: 800; color: rgb(var(--text-secondary)); } .td-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px 4px 8px 12px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-700) / .6); } .td-item .td-item-sub { font-size: 12px; color: rgb(var(--text-muted)); } .td-item .td-x { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 8px; color: rgb(var(--text-muted)); } .td-item .td-x:hover { background: rgb(var(--err) / .1); color: rgb(var(--err-text)); } .td-comment p { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; } .td-drop { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1.5px dashed rgb(var(--line-soft)); border-radius: var(--k-radius-lg); cursor: pointer; font-size: 14px; color: rgb(var(--text-secondary)); } .td-drop:hover { background: rgb(var(--surface-700)); } .td-drop:focus-within { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } .td-pl-results { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10; max-height: 14rem; overflow-y: auto; background: rgb(var(--surface-800)); border: 1px solid rgb(var(--line)); border-radius: var(--k-radius-lg); box-shadow: var(--k-shadow); } .td-pl-results button { display: block; width: 100%; text-align: left; padding: 10px 12px; font-size: 14px; min-height: 44px; } .td-pl-results button + button { border-top: 1px solid rgb(var(--line-soft)); } .td-pl-results button:hover { background: rgb(var(--surface-700)); } .td-readonly .td-manage { display: none !important; } /* ========================================================================== Einkaufsliste (/shopping) — Schnell-Eingabe, Zeilen, Laden-Modus, Sheets. Baut auf .tt-* / .td-* / .k-shop-* auf. Nur Tokens; funktioniert in allen Themes. ========================================================================== */ .sh-suggest button { display: flex; align-items: center; gap: 10px; } .sh-suggest button[aria-selected="true"] { background: rgb(var(--surface-700)); } .sh-sug-meta { flex: none; font-size: 12px; color: rgb(var(--text-muted)); } .sh-at { color: rgb(var(--text-muted)); font-weight: 700; } .sh-frequent:not(:empty) { margin-top: 12px; } .sh-freq-h { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--text-muted)); margin-bottom: 6px; } .sh-freq { min-height: 40px; } .sh-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sh-progress { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .sh-prog-txt { font-size: 14px; color: rgb(var(--text-secondary)); } .sh-prog-txt strong { font-family: var(--font-display); font-size: 18px; color: rgb(var(--text-primary)); } .sh-prog-bar { display: block; height: 6px; border-radius: 99px; background: rgb(var(--surface-600)); overflow: hidden; } .sh-prog-bar i { display: block; height: 100%; border-radius: 99px; background: rgb(var(--ok)); transition: width .25s ease; } .sh-tools { display: flex; gap: 6px; margin-left: auto; } @media (max-width: 639px) { .sh-store .sh-tools { width: 100%; } .sh-store .sh-store-toggle { flex: 1; } } .sh-tool { min-height: 44px; } .sh-tool svg { width: 18px; height: 18px; flex: none; } .sh-tool.k-btn-icon { width: 44px; } .sh-tool[aria-pressed="true"] { background: rgb(var(--accent) / .12); color: rgb(var(--accent-text)); border-color: rgb(var(--accent) / .55); } .sh-group { margin-bottom: 12px; } .sh-group .k-shop-head { margin: 0; font-size: 14px; } .sh-count { font-size: 12px; font-weight: 700; color: rgb(var(--text-muted)); font-variant-numeric: tabular-nums; } .sh-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 0 4px; padding: 2px 10px 2px 4px; transition: opacity .2s ease, background-color .15s; } .sh-row:hover { background: rgb(var(--surface-700) / .6); } .sh-row .k-check { width: 26px; height: 26px; border-radius: 50%; font-size: 14px; } .sh-row .k-check-hit { cursor: pointer; border-radius: 50%; } .sh-row .k-check-hit:hover .k-check:not(.on) { background: rgb(var(--ok) / .15); } .sh-row.is-urgent { box-shadow: inset 3px 0 0 rgb(var(--err)); } .sh-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; min-height: 48px; justify-content: center; padding: 6px 0; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; } .sh-main:focus-visible, .sh-row .k-check-hit:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; border-radius: 8px; } .sh-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; } .sh-name { font-weight: 700; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; } .sh-qty { flex: none; font-family: var(--font-mono); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgb(var(--accent-text)); } .sh-meta { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 12px; color: rgb(var(--text-muted)); min-width: 0; } .sh-shop { font-weight: 800; } .sh-note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .sh-by { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 32px; font-weight: 800; color: rgb(var(--text-secondary)); } .sh-by::before { content: attr(data-by); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(var(--lilac) / .35); color: rgb(var(--text-primary)); font-size: 12px; } .sh-by[data-by="H"]::before { background: rgb(var(--sky) / .45); } .sh-by[data-by="F"]::before { background: rgb(var(--peach) / .5); } .sh-by .sh-when { font-size: 11px; font-weight: 600; color: rgb(var(--text-muted)); white-space: nowrap; } .sh-by-none::before { content: none; } .sh-row.is-done .sh-name { text-decoration: line-through; color: rgb(var(--text-muted)); } .sh-row.is-done .sh-qty { color: rgb(var(--text-muted)); } .td-done .k-shop-group { margin-top: 0; } /* Laden-Modus: ganze Zeile = Abhaken, groß, ohne Ablenkung */ .sh-store .sh-add { display: none; } .sh-store .sh-row { grid-template-columns: 52px minmax(0, 1fr) auto; min-height: 64px; padding-right: 12px; } .sh-store .sh-row .k-check { width: 32px; height: 32px; font-size: 18px; } .sh-store .sh-row .k-check-hit { width: 52px; height: 52px; } .sh-store .sh-main { min-height: 60px; } .sh-store .sh-name { font-size: 19px; } .sh-store .sh-qty { font-size: 17px; } .sh-store .sh-by .sh-when { display: none; } .sh-store .sh-prog-bar { height: 10px; } .sh-store .sh-row:active { background: rgb(var(--ok) / .12); } .sh-readonly .sh-manage { display: none !important; } .sh-readonly .k-check-hit { pointer-events: none; } /* Sheet: Abteilung per Tipp */ .sh-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } @media (min-width: 640px) { .sh-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .sh-cat-btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px; border-radius: var(--k-radius-lg); font-size: 13px; font-weight: 700; text-align: left; line-height: 1.2; color: rgb(var(--text-secondary)); background: rgb(var(--surface-700) / .6); border: 1px solid rgb(var(--line-soft)); cursor: pointer; } .sh-cat-btn:hover { background: rgb(var(--surface-700)); } .sh-cat-btn[aria-pressed="true"] { background: rgb(var(--accent) / .12); border-color: rgb(var(--accent)); color: rgb(var(--accent-text)); } .sh-prio-btn[aria-pressed="true"] { background: rgb(var(--err) / .12); border-color: rgb(var(--err) / .6); color: rgb(var(--err-text)); } .sh-order { display: flex; flex-direction: column; gap: 6px; } .sh-order-row { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-700) / .6); font-weight: 700; } .sh-order-row .k-btn-icon { width: 44px; min-height: 44px; } .sh-order-row .k-btn:disabled { opacity: .35; cursor: default; } /* Breite Screens: Abteilungen zweispaltig (Lesereihenfolge spaltenweise, Gruppen brechen nicht um) */ @media (min-width: 1100px) { #shopping-list { columns: 2; column-gap: 12px; } #shopping-list > .sh-group { break-inside: avoid; display: inline-block; width: 100%; } #shopping-list > .td-empty { column-span: all; } } /* Einkaufsliste: nach links wischen zum Löschen */ .sh-row { position: relative; touch-action: pan-y; } .sh-row.sh-swiping { transform: translateX(var(--sh-sx, 0px)); background: rgb(var(--surface-800)); z-index: 1; } .sh-row.sh-swiping.sh-snap { transition: transform .2s ease; } .sh-row.sh-swiping::after { content: 'Löschen'; position: absolute; top: 0; bottom: 0; left: 100%; width: 100vw; display: flex; align-items: center; padding-left: 18px; background: rgb(var(--err)); color: #fff; font-weight: 700; font-size: 14px; pointer-events: none; opacity: var(--sh-so, 0.75); } /* ========================================================================== Verträge (/contracts) — Übersicht, Liste, Sheet, Liquidität, Statistik. Baut auf .tt-* / .td-* / .sh-* / .k-* auf. Nur Tokens; alle Themes. (2026-09-25) ========================================================================== */ .ct-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px 14px; text-align: left; color: inherit; } button.ct-stat { cursor: pointer; } button.ct-stat:hover { background: rgb(var(--surface-700)); } button.ct-stat:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; } .ct-stat-l { font-size: 12px; font-weight: 700; color: rgb(var(--text-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-stat-v { font-family: var(--font-display); font-size: 22px; font-weight: 700; line-height: 1.2; letter-spacing: var(--display-tracking); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ct-stat-s { font-size: 12px; color: rgb(var(--text-secondary)); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 1.3em; } .ct-stat[data-tone="err"] { box-shadow: inset 3px 0 0 rgb(var(--err)); } .ct-stat[data-tone="err"] .ct-stat-v { color: rgb(var(--err-text)); } .ct-stat[data-tone="warn"] { box-shadow: inset 3px 0 0 rgb(var(--warn)); } .ct-stat[data-tone="warn"] .ct-stat-v { color: rgb(var(--warn-text)); } @media (max-width: 639px) { .ct-stat { padding: 10px 12px; } .ct-stat-v { font-size: 18px; } } .ct-hints { margin: 0; } .ct-hint-calm { background: transparent; border-style: dashed; color: rgb(var(--text-muted)); font-weight: 600; } .ct-tabs button { min-height: 40px; } .ct-status button { min-height: 38px; padding: 6px 12px; font-size: 13px; } .ct-status .ct-n { font-weight: 700; opacity: .65; font-variant-numeric: tabular-nums; } .ct-sort { width: auto; flex: none; max-width: 46%; background: rgb(var(--surface-800)); } .ct-chip-sep { flex: none; width: 1px; margin: 6px 2px; background: rgb(var(--line-soft)); } .ct-sec + .ct-sec { margin-top: 4px; } .ct-sec .td-sec { margin-top: 14px; } .ct-sec:first-child .td-sec { margin-top: 2px; } .ct-sec-sum { margin-left: auto; font-size: 12px; font-weight: 700; letter-spacing: 0; text-transform: none; color: rgb(var(--text-secondary)); font-variant-numeric: tabular-nums; } .ct-group { overflow: hidden; } .ct-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 10px 14px; text-align: left; color: inherit; background: none; border: 0; cursor: pointer; min-height: 56px; } .ct-row + .ct-row { border-top: 1px solid rgb(var(--line-soft)); } .ct-row:hover { background: rgb(var(--surface-700) / .6); } .ct-row:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: -2px; } .ct-row[data-tone="err"] { box-shadow: inset 3px 0 0 rgb(var(--err)); } .ct-row[data-tone="warn"] { box-shadow: inset 3px 0 0 rgb(var(--warn)); } .ct-row[data-tone="off"] .ct-name, .ct-row[data-tone="off"] .ct-amt-v { color: rgb(var(--text-muted)); } .ct-ico { font-size: 18px; line-height: 1; text-align: center; } .ct-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ct-name { font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; color: rgb(var(--text-muted)); } .ct-prov { font-weight: 600; color: rgb(var(--text-secondary)); } .ct-flags { display: flex; flex-wrap: wrap; gap: 4px; } .ct-flags:empty { display: none; } .ct-soft { font-size: 11px; font-weight: 700; color: rgb(var(--text-muted)); } .ct-amt { display: flex; flex-direction: column; align-items: flex-end; text-align: right; } .ct-amt-v { font-family: var(--font-mono); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-amt-u { font-size: 11px; color: rgb(var(--text-muted)); white-space: nowrap; } .ct-readonly .ct-manage { display: none !important; } /* Sheet */ .ct-sheet { max-width: 36rem; } .ct-head { display: flex; gap: 12px; align-items: flex-start; } .ct-head-ico { font-size: 26px; line-height: 1.2; flex: none; } .ct-money { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 8px; } .ct-money > div { display: flex; flex-direction: column; padding: 8px 10px; border-radius: var(--k-radius-lg); background: rgb(var(--surface-700) / .6); min-width: 0; } .ct-money-v { font-family: var(--font-mono); font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-money-l { font-size: 12px; color: rgb(var(--text-muted)); } .ct-dl { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--k-radius-lg); border: 1px solid rgb(var(--line-soft)); border-left-width: 4px; background: rgb(var(--surface-700) / .45); } .ct-dl-l { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: rgb(var(--text-muted)); } .ct-dl-v { font-family: var(--font-display); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; } .ct-dl-v small { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: rgb(var(--text-secondary)); margin-left: 4px; } .ct-dl-v.ct-dl-none { font-family: var(--font-body); font-size: 14px; font-weight: 600; color: rgb(var(--text-secondary)); } .ct-dl-s { font-size: 13px; color: rgb(var(--text-secondary)); } .ct-dl[data-tone="err"] { border-left-color: rgb(var(--err)); background: rgb(var(--err) / .07); } .ct-dl[data-tone="err"] .ct-dl-v { color: rgb(var(--err-text)); } .ct-dl[data-tone="warn"] { border-left-color: rgb(var(--warn)); background: rgb(var(--warn) / .09); } .ct-dl[data-tone="warn"] .ct-dl-v { color: rgb(var(--warn-text)); } .ct-dl[data-tone="info"] { border-left-color: rgb(var(--info)); } .ct-dl[data-tone="ok"] { border-left-color: rgb(var(--ok)); } .ct-dlist { display: grid; grid-template-columns: minmax(7rem, auto) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: 14px; } .ct-dlist dt { color: rgb(var(--text-muted)); } .ct-dlist dd { margin: 0; overflow-wrap: anywhere; } .ct-notes { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; } .ct-draft-text { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; resize: vertical; } .ct-hintline { font-size: 12px; color: rgb(var(--text-muted)); } .ct-hintline strong { color: rgb(var(--text-primary)); } .ct-check { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; cursor: pointer; } .ct-check input { width: 20px; height: 20px; accent-color: rgb(var(--accent)); flex: none; } .ct-sheet .td-seg { box-shadow: none; } .ct-sheet .td-seg button { min-height: 42px; } /* Liquidität */ .ct-chart-liq { height: 240px; } @media (max-width: 639px) { .ct-chart-liq { height: 200px; } } .ct-alert-warn { background: rgb(var(--warn) / .1); border: 1px solid rgb(var(--warn) / .4); color: rgb(var(--warn-text)); } .ct-months { display: flex; flex-direction: column; gap: 6px; } .ct-month > summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 14px; cursor: pointer; } .ct-month > summary::-webkit-details-marker, .ct-base > summary::-webkit-details-marker { display: none; } .ct-month > summary::after { content: '▾'; color: rgb(var(--text-muted)); transition: transform .15s; } .ct-month[open] > summary::after { transform: rotate(180deg); } .ct-month-n { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; } .ct-month-name { font-weight: 700; white-space: nowrap; } .ct-month-t { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-month-body { padding: 0 8px 8px; border-top: 1px solid rgb(var(--line-soft)); } .ct-pay { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; padding: 8px 6px; min-height: 40px; text-align: left; font-size: 14px; color: rgb(var(--text-secondary)); background: none; border: 0; border-radius: var(--k-radius-lg); cursor: pointer; } .ct-pay:hover { background: rgb(var(--surface-700) / .6); } .ct-pay small { color: rgb(var(--text-muted)); font-size: 12px; } .ct-pay.is-special { color: rgb(var(--text-primary)); font-weight: 700; } .ct-pay.is-special small { font-weight: 600; } .ct-pay-v { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-base > summary { list-style: none; display: flex; justify-content: space-between; gap: 10px; padding: 8px 6px; min-height: 40px; align-items: center; font-size: 14px; color: rgb(var(--text-muted)); cursor: pointer; border-radius: var(--k-radius-lg); } .ct-base > summary:hover { background: rgb(var(--surface-700) / .6); } .ct-base > summary span:first-child::after { content: ' ▸'; } .ct-base[open] > summary span:first-child::after { content: ' ▾'; } /* Statistik */ .ct-donut-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; } @media (min-width: 640px) { .ct-donut-wrap { grid-template-columns: 200px minmax(0, 1fr); } } .ct-chart-donut { height: 200px; max-width: 220px; width: 100%; margin: 0 auto; } .ct-donut-c { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; } .ct-donut-c span { font-family: var(--font-display); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; } .ct-donut-c small { font-size: 12px; color: rgb(var(--text-muted)); } .ct-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .ct-legend button { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; padding: 6px 8px; min-height: 40px; text-align: left; background: none; border: 0; border-radius: var(--k-radius-lg); color: inherit; cursor: pointer; font-size: 14px; } .ct-legend button:hover { background: rgb(var(--surface-700) / .6); } .ct-legend i { width: 10px; height: 10px; border-radius: 50%; } .ct-legend-n { display: flex; flex-direction: column; min-width: 0; font-weight: 700; overflow-wrap: anywhere; line-height: 1.3; } .ct-legend-n small { font-size: 12px; font-weight: 600; color: rgb(var(--text-muted)); } .ct-legend-v { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; } .ct-toolbar { display: flex; flex-direction: column; gap: 8px; } .ct-toolbar .td-search { flex: 1 1 auto; } .ct-filterrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; } .ct-cat-chips { flex: 1 1 100%; } @media (min-width: 900px) { .ct-cat-chips { flex: 1 1 0; } } @media (max-width: 639px) { .ct-hints { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; } .ct-hints::-webkit-scrollbar { display: none; } .ct-hints li { flex: none; } .ct-hints .k-hint { white-space: nowrap; } }