/* ============================================================ Backstage — Design System (Apple-Premium Light · Aurora) ============================================================ */ :root { color-scheme: light; --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --mono: 'SF Mono', ui-monospace, 'JetBrains Mono', 'Roboto Mono', monospace; --bg: #fbfbfd; --surface: #ffffff; --surface-2: #f5f5f7; --surface-3: #ececee; --glass: rgba(255,255,255,0.72); --glass-dark: rgba(28,28,30,0.82); --text: #1d1d1f; --text-2: #6e6e73; --text-3: #86868b; --line: rgba(60,60,67,0.10); --line-strong: rgba(60,60,67,0.16); --accent: #7c3aed; --accent-strong: #6d28d9; --accent-soft: rgba(124,58,237,0.10); --lav: #a855f7; --indigo: #312e81; --grad: linear-gradient(135deg,#9333ea 0%,#7c3aed 45%,#4338ca 100%); --grad-amber: linear-gradient(135deg,#f59e0b 0%,#d97706 55%,#b45309 100%); --grad-hairline: linear-gradient(180deg,#9333ea,#4338ca); --focus: 0 0 0 4px rgba(124,58,237,0.14); --office: #b45309; --office-bg: rgba(180,83,9,0.10); --verlag: #3730a3; --verlag-bg: rgba(55,48,163,0.10); --waiting: #b45309; --waiting-bg: rgba(180,83,9,0.10); --waiting-dot: #f59e0b; --open: #be123c; --open-bg: rgba(190,18,60,0.09); --open-dot: #ef4444; --done: #047857; --done-bg: rgba(4,120,87,0.10); --done-dot: #22c55e; --danger: #e11d48; --sync-connected: #34c759; --sync-offline: #ff9f0a; --sync-syncing: #0a84ff; --sync-error: #ff3b30; --r-lg: 20px; --r-md: 14px; --r-sm: 10px; --r-xs: 8px; --r-pill: 980px; --sh-sm: 0 1px 2px rgba(28,28,30,.05),0 1px 1px rgba(28,28,30,.04); --sh-md: 0 1px 2px rgba(28,28,30,.05),0 8px 24px rgba(28,28,30,.07); --sh-lg: 0 12px 40px rgba(28,28,30,.12),0 2px 8px rgba(28,28,30,.06); --sh-accent: 0 6px 20px rgba(124,58,237,.28); --edge-top: inset 0 1px 0 rgba(255,255,255,.6); --ease: cubic-bezier(0.32,0.72,0,1); } /* ── Dark mode (opt-in via ) ── */ [data-theme='dark'] { color-scheme: dark; --bg: #14111f; --surface: #221d38; --surface-2: #2b2547; --surface-3: #362f58; --glass: rgba(34,29,56,0.78); --glass-dark: rgba(18,15,30,0.88); --text: #f5f3fc; --text-2: #cbc4e6; --text-3: #978fb8; --line: rgba(188,168,255,0.20); --line-strong: rgba(188,168,255,0.36); --accent: #b98cf9; --accent-strong: #a06bf5; --accent-soft: rgba(185,140,249,0.20); --office: #fcd34d; --office-bg: rgba(252,211,77,0.16); --verlag: #93b4ff; --verlag-bg: rgba(147,180,255,0.16); --waiting: #fcd34d; --waiting-bg: rgba(252,211,77,0.16); --waiting-dot: #fcd34d; --open: #fb8098; --open-bg: rgba(251,113,133,0.16); --open-dot: #fb7185; --done: #4ade80; --done-bg: rgba(74,222,128,0.16); --done-dot: #4ade80; --danger: #fb7185; --sh-sm: 0 1px 3px rgba(0,0,0,.45); --sh-md: 0 10px 30px rgba(0,0,0,.5); --sh-lg: 0 16px 44px rgba(0,0,0,.6); --edge-top: inset 0 1px 0 rgba(255,255,255,.06); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); color: var(--text); background: var(--bg); background-image: radial-gradient(125% 85% at 4% -10%, rgba(147,51,234,0.14) 0%, rgba(147,51,234,0) 48%), radial-gradient(115% 75% at 100% -4%, rgba(79,70,229,0.12) 0%, rgba(79,70,229,0) 46%), radial-gradient(100% 70% at 50% 114%, rgba(168,85,247,0.09) 0%, rgba(168,85,247,0) 55%); background-attachment: fixed; padding: env(safe-area-inset-top) env(safe-area-inset-right) 56px env(safe-area-inset-left); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-tap-highlight-color: transparent; } [data-theme='dark'] body { background-image: radial-gradient(120% 90% at 6% -10%, rgba(109,40,217,0.30) 0%, rgba(109,40,217,0) 50%), radial-gradient(110% 80% at 100% 108%, rgba(147,51,234,0.20) 0%, rgba(147,51,234,0) 50%); } #app-view { max-width: 860px; margin: 0 auto; padding: 24px 24px 56px; } /* Text markier-/kopierbar machen (in installierter PWA sonst standardmäßig deaktiviert) */ .task-title, .task-note, .song-title-row span, .song-artist, .song-writer-row, .portfolio-title, .portfolio-artist, .portfolio-writer-chip, .pipe-stage-title, .share-pill, .effort-chip { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; cursor: text; } h1 { font-size: clamp(1.55rem,4vw,1.9rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--text); } .subtitle { font-size: 0.8rem; color: var(--text-3); display: flex; align-items: center; gap: 7px; } /* ── APP HEADER (frosted chrome, scrollt mit) ── */ .app-header { position: relative; z-index: 40; width: 100%; padding: 12px 18px; margin-bottom: 22px; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .app-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-md), var(--edge-top); } @media (min-width: 640px) { .app-header::before { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%); } } .app-header-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .user-email { font-size: 0.78rem; color: var(--text-3); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .logout-btn { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.78rem; font-weight: 600; color: var(--text-2); padding: 6px 14px; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap; } .logout-btn:hover { border-color: rgba(225,29,72,.4); color: var(--danger); background: rgba(225,29,72,.05); } .theme-toggle { background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-size: 0.95rem; line-height: 1; cursor: pointer; flex-shrink: 0; transition: all .18s var(--ease); } .theme-toggle:hover { border-color: var(--line-strong); transform: translateY(-1px); } .theme-toggle:active { transform: scale(.94); } /* ── USER MENU (Avatar + Dropdown) ── */ .user-menu { position: relative; } .avatar-btn { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); padding: 0; cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: all .18s var(--ease); box-shadow: var(--sh-sm); } .avatar-btn img { width: 100%; height: 100%; object-fit: cover; } .avatar-btn:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .avatar-btn:active { transform: scale(.96); } .menu-dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 224px; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg), var(--edge-top); padding: 8px; z-index: 60; animation: menuIn .16s var(--ease); } .menu-dropdown[hidden] { display: none; } @keyframes menuIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .menu-user { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .menu-user-name { font-weight: 650; font-size: 0.9rem; color: var(--text); } .menu-user-email { font-size: 0.76rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: none; border-radius: var(--r-sm); padding: 10px; font-size: 0.86rem; font-weight: 550; color: var(--text); cursor: pointer; transition: background .12s var(--ease); font-family: inherit; } .menu-item:hover { background: var(--surface-2); } .menu-item-danger { color: var(--danger); } .menu-item-danger:hover { background: rgba(225,29,72,.08); } /* ── MODAL ── */ .modal-overlay { position: fixed; inset: 0; background: rgba(20,16,32,0.44); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px; z-index: 200; overflow-y: auto; animation: menuIn .18s var(--ease); } .modal-overlay[hidden] { display: none; } .modal { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); width: 100%; max-width: 460px; margin: auto; overflow: hidden; } .modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); } .modal-head h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text); } .modal-close { background: none; border: none; font-size: 1rem; color: var(--text-3); cursor: pointer; padding: 4px 7px; border-radius: var(--r-xs); transition: all .12s var(--ease); } .modal-close:hover { background: var(--surface-2); color: var(--text); } .modal-body { padding: 4px 20px 20px; max-height: 74vh; overflow-y: auto; } .modal-section { padding: 16px 0; border-bottom: 1px solid var(--line); } .modal-section:last-child { border-bottom: none; } .modal-section-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 12px; } .field-label { display: block; font-size: 0.76rem; color: var(--text-2); margin: 8px 0 4px; font-weight: 550; } .modal-input { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 13px; font-size: 0.9rem; font-family: inherit; outline: none; background: var(--surface); color: var(--text); transition: all .18s var(--ease); margin-bottom: 8px; } .modal-input:focus { border-color: var(--accent); box-shadow: var(--focus); } .modal-input:disabled { opacity: 0.55; } .modal-save { background-image: var(--grad); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 16px; font-size: 0.84rem; font-weight: 650; cursor: pointer; box-shadow: var(--sh-accent); transition: all .18s var(--ease); margin-top: 4px; } .modal-save:hover { filter: brightness(1.05); } .modal-save:active { transform: scale(.98); } .modal-msg { font-size: 0.8rem; margin-top: 8px; min-height: 1em; } .modal-msg.ok { color: var(--done); } .modal-msg.err { color: var(--open); } .modal-hint { font-size: 0.78rem; color: var(--text-2); line-height: 1.5; margin-bottom: 12px; } .cal-add-row { display: flex; flex-direction: column; margin-top: 10px; } .cal-item { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 6px; } .cal-item-label { font-weight: 600; font-size: 0.84rem; white-space: nowrap; } .cal-item-url { font-size: 0.72rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .cal-item-del { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 0.9rem; padding: 2px 6px; border-radius: var(--r-xs); } .cal-item-del:hover { color: var(--danger); background: rgba(225,29,72,.08); } .hours-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .hours-row .field-label { margin: 0; } .hours-in { width: auto; flex: 0 0 auto; margin-bottom: 0; font-variant-numeric: tabular-nums; } .portfolio-edit-btn { background: none; border: none; cursor: pointer; font-size: 0.9rem; color: var(--text-3); padding: 2px 5px; border-radius: var(--r-xs); transition: all .15s var(--ease); } .portfolio-edit-btn:hover { color: var(--accent); background: var(--accent-soft); } .portfolio-card-editing { display: block; } .portfolio-card-editing .portfolio-card-body { width: 100%; } /* ── TAGESVORSCHLAG ── */ .today-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-sm); padding: 14px 16px 14px 18px; margin-bottom: 28px; position: relative; overflow: hidden; } .today-panel::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-image: var(--grad); } .today-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .today-title { font-size: 0.9rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; } .today-refresh { background: none; border: 1px solid var(--line); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; color: var(--text-2); font-size: 0.9rem; transition: all .3s var(--ease); flex-shrink: 0; } .today-refresh:hover { border-color: var(--accent); color: var(--accent); transform: rotate(180deg); } .today-hint { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; } .today-link { color: var(--accent); cursor: pointer; font-weight: 600; text-decoration: none; } .today-link:hover { text-decoration: underline; } .plan-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); } .plan-item:first-child { border-top: none; } .plan-time { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.78rem; font-weight: 650; color: var(--accent-strong); white-space: nowrap; } .plan-task { font-size: 0.86rem; color: var(--text); flex: 1; min-width: 0; } .plan-dur { font-family: var(--mono); font-size: 0.72rem; color: var(--text-3); background: var(--surface-2); border-radius: 6px; padding: 1px 7px; white-space: nowrap; } .plan-note { font-size: 0.78rem; color: var(--text-3); margin-top: 8px; line-height: 1.4; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--sync-connected); box-shadow: 0 0 0 3px rgba(52,199,89,.16); transition: all .2s var(--ease); } .sync-dot.offline { background: var(--sync-offline); box-shadow: 0 0 0 3px rgba(255,159,10,.16); } .sync-dot.syncing { background: var(--sync-syncing); box-shadow: 0 0 0 3px rgba(10,132,255,.16); animation: pulse 1.1s infinite var(--ease); } .sync-dot.error { background: var(--sync-error); box-shadow: 0 0 0 3px rgba(255,59,48,.16); } @keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } /* ── LOGIN ── */ .auth-view { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--sh-lg), var(--edge-top); padding: 40px 32px 30px; width: 100%; max-width: 384px; text-align: center; } .auth-logo { width: 78px; height: 78px; border-radius: 20px; margin-bottom: 14px; box-shadow: 0 10px 30px rgba(124,58,237,.35), 0 0 0 1px rgba(124,58,237,.10); } .auth-title { font-size: 1.85rem; font-weight: 700; letter-spacing: -0.021em; color: var(--text); margin-bottom: 3px; } .auth-sub { font-size: 0.85rem; color: var(--text-3); margin-bottom: 26px; } #auth-form { display: flex; flex-direction: column; gap: 10px; text-align: left; } .auth-input { border: 1px solid var(--line-strong); border-radius: 12px; padding: 13px 15px; font-size: 0.95rem; font-family: inherit; outline: none; background: rgba(255,255,255,.7); color: var(--text); transition: all .18s var(--ease); width: 100%; } .auth-input:focus { border-color: var(--accent); box-shadow: var(--focus); background: #fff; } .auth-remember { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-2); margin: 2px 0; cursor: pointer; } .auth-remember input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } .auth-error { font-size: 0.82rem; color: var(--open); min-height: 0; line-height: 1.4; } .auth-error:not(:empty) { padding: 2px 0; } .auth-btn { background-image: var(--grad); color: #fff; border: none; border-radius: 12px; padding: 14px; font-size: 0.95rem; font-weight: 650; cursor: pointer; box-shadow: var(--sh-accent); transition: all .18s var(--ease); margin-top: 4px; } .auth-btn:hover { filter: brightness(1.05); } .auth-btn:active { transform: scale(.985); } .auth-btn:disabled { opacity: 0.6; cursor: default; } .auth-toggle { background: none; border: none; color: var(--accent); font-size: 0.82rem; font-weight: 600; cursor: pointer; margin-top: 18px; padding: 4px; } .auth-toggle:hover { color: var(--accent-strong); text-decoration: underline; } /* ── SECTIONS ── */ .section { margin-bottom: 40px; } /* ── Widget-Wrapper + Werkzeugleiste ── */ .widget-wrap { position: relative; margin-bottom: 40px; } .widget-wrap > .section, .widget-wrap > .today-panel { margin-bottom: 0; } .widget-tools { display: flex; justify-content: flex-end; align-items: center; gap: 4px; margin-bottom: 6px; opacity: .5; transition: opacity .15s var(--ease); } .widget-wrap:hover .widget-tools, .widget-tools:focus-within { opacity: 1; } .wtool { width: 26px; height: 26px; border: 1px solid var(--line); background: var(--surface-2); border-radius: var(--r-xs); color: var(--text-2); font-size: .78rem; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 0; transition: all .15s var(--ease); } .wtool:hover:not(:disabled) { border-color: var(--line-strong); color: var(--text); } .wtool:disabled { opacity: .3; cursor: default; } .wtool-del:hover { border-color: rgba(225,29,72,.4); color: var(--danger); background: rgba(225,29,72,.05); } .wtool-drag { cursor: grab; touch-action: none; } .wtool-drag:active { cursor: grabbing; } .widget-wrap.dragging { opacity: .45; } .widget-title-input { font: inherit; font-size: 1rem; font-weight: 600; border: 1px solid var(--accent); border-radius: var(--r-xs); padding: 2px 8px; background: var(--surface); color: var(--text); width: min(60%, 260px); } /* ── „+ Widget" – Leiste ── */ .widget-add-bar { position: relative; margin: 4px 0 48px; display: flex; justify-content: center; } .widget-add-btn { border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2); border-radius: var(--r-pill); padding: 10px 22px; font-size: .85rem; font-weight: 600; cursor: pointer; transition: all .15s var(--ease); } .widget-add-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .widget-add-menu { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-md, var(--sh-sm)); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 50; min-width: 220px; } .widget-add-menu[hidden] { display: none; } .widget-add-opt { text-align: left; background: transparent; border: none; border-radius: var(--r-sm); padding: 10px 12px; font-size: .9rem; color: var(--text); cursor: pointer; } .widget-add-opt:hover { background: var(--accent-soft); } /* ── To-do-Liste auf-/zuklappen ── */ .todo-collapse { background: none; border: none; cursor: pointer; padding: 2px 4px; margin-left: -4px; color: var(--text-3); display: flex; align-items: center; flex-shrink: 0; border-radius: var(--r-xs); } .todo-collapse:hover { color: var(--text); background: var(--surface-2); } .todo-chevron { display: inline-block; transition: transform .18s var(--ease); font-size: 0.8rem; line-height: 1; } .todo-widget.collapsed .todo-chevron, .projekt-widget.collapsed .todo-chevron { transform: rotate(-90deg); } .todo-widget.collapsed .section-header, .projekt-widget.collapsed .section-header { margin-bottom: 0; } /* ── Projekt-Widget ── */ .pj-goal { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; background: var(--accent-soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 14px; margin-bottom: 12px; } .pj-goal-label { font-weight: 700; color: var(--accent); white-space: nowrap; } .pj-goal-text { flex: 1; min-width: 120px; color: var(--text); } .pj-goal-edit { background: none; border: none; cursor: pointer; color: var(--text-3); padding: 2px 4px; border-radius: var(--r-xs); } .pj-goal-edit:hover { color: var(--text); background: var(--surface-2); } .pj-goal-input { flex: 1; min-width: 160px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 8px; font: inherit; background: var(--surface); color: var(--text); } .pj-progress { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .pj-progress-track { flex: 1; height: 8px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; } .pj-progress-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #22c55e); border-radius: 99px; transition: width .35s var(--ease); } .pj-progress-pct { font-size: 0.78rem; font-weight: 700; color: var(--text-2); min-width: 38px; text-align: right; } .pj-next { font-size: 0.85rem; margin-bottom: 12px; } .pj-next-label { color: var(--text-3); font-weight: 600; } .pj-next-text { color: var(--text); font-weight: 600; } .pj-next-done { color: #16a34a; font-weight: 700; } .step-card .task-body { display: flex; align-items: center; } .pj-steps .task-card { padding-top: 8px; padding-bottom: 8px; } /* Anlege-Dialog */ .pj-goal-area { resize: vertical; } .pj-step-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .pj-step-row .pj-step-in { flex: 1; margin-bottom: 0; } .pj-modal-btns { display: flex; gap: 10px; margin-top: 14px; align-items: center; } .pj-modal-btns .modal-save { margin-top: 0; } .section-header { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; } .section-icon { width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; box-shadow: inset 0 0 0 1px var(--line); } .section-title { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; } .section-count { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 650; background: var(--surface-2); color: var(--text-2); border-radius: var(--r-pill); padding: 3px 10px; margin-left: auto; } .archive-btn { background: none; border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 600; color: var(--text-3); padding: 4px 11px; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap; } .archive-btn:hover { border-color: var(--line-strong); color: var(--text-2); } .archive-btn.active { background: var(--accent-soft); border-color: transparent; color: var(--accent-strong); } .steuer .section-icon { background: var(--office-bg); } .steuer .section-title { color: var(--office); } .verlag .section-icon { background: var(--verlag-bg); } .verlag .section-title { color: var(--verlag); } .songsec .section-icon { background: var(--accent-soft); } .songsec .section-title { color: var(--accent-strong); } /* ── TASK CARD ── */ .task-list { display: flex; flex-direction: column; gap: 9px; } .task-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: flex; align-items: flex-start; gap: 13px; box-shadow: var(--sh-sm); transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease); } .task-card:hover { transform: translateY(-1px); box-shadow: var(--sh-md); border-color: var(--line-strong); } /* Prioritäts-Kante links */ .task-card.prio-high::before, .task-card.prio-medium::before, .task-card.prio-low::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px 0 0 3px; } .task-card.prio-high::before { background: var(--open); } .task-card.prio-medium::before { background: var(--waiting-dot); } .task-card.prio-low::before { background: var(--line-strong); } .task-check { width: 21px; height: 21px; border: 2px solid var(--line-strong); border-radius: 50%; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin-top: 1px; background: #fff; transition: all .18s var(--ease); } .task-check:hover { border-color: var(--accent); box-shadow: var(--focus); } .task-check.done { background-image: var(--grad); border-color: transparent; box-shadow: var(--sh-accent); } .task-check.done::after { content: '✓'; color: #fff; font-size: 0.72rem; font-weight: 700; animation: checkPop .28s var(--ease); } @keyframes checkPop { 0% { transform: scale(.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } } .task-body { flex: 1; min-width: 0; } .task-title { font-size: 0.94rem; font-weight: 590; letter-spacing: -0.006em; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; } .task-title.done-text { text-decoration: line-through; color: var(--text-3); font-weight: 500; } .task-note { font-size: 0.8rem; color: var(--text-2); margin-top: 3px; line-height: 1.42; overflow-wrap: anywhere; } .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 650; border-radius: 7px; padding: 3px 9px 3px 8px; margin-top: 8px; } .tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .tag-waiting { background: var(--waiting-bg); color: var(--waiting); } .tag-waiting::before { background: var(--waiting-dot); } .tag-open { background: var(--open-bg); color: var(--open); } .tag-open::before { background: var(--open-dot); } .tag-done { background: var(--done-bg); color: var(--done); } .tag-done::before { background: var(--done-dot); } .task-btns { display: flex; gap: 2px; flex-shrink: 0; } .task-del, .task-edit { background: none; border: none; cursor: pointer; font-size: 0.9rem; padding: 4px 5px; border-radius: var(--r-xs); color: var(--text-3); transition: all .15s var(--ease); flex-shrink: 0; } .task-edit:hover { color: var(--accent); background: var(--accent-soft); } .task-del:hover { color: var(--danger); background: rgba(225,29,72,.08); } /* Umsortier-Griff + ▲▼ an der Aufgabe */ .task-drag { background: none; border: none; cursor: grab; color: var(--text-3); font-size: 0.95rem; padding: 0 1px; margin-top: 1px; flex-shrink: 0; opacity: .45; touch-action: none; line-height: 1; } .task-drag:hover { opacity: 1; color: var(--text-2); } .task-drag:active { cursor: grabbing; } .task-move { background: none; border: none; cursor: pointer; font-size: 0.66rem; padding: 3px 4px; border-radius: var(--r-xs); color: var(--text-3); transition: all .15s var(--ease); flex-shrink: 0; line-height: 1; } .task-move:hover:not(:disabled) { color: var(--accent); background: var(--accent-soft); } .task-move:disabled { opacity: .3; cursor: default; } .task-card.dragging { opacity: .5; box-shadow: var(--sh-md); } /* ── INLINE EDIT FORM ── */ .task-edit-form { display: flex; flex-direction: column; gap: 8px; flex: 1; } .task-edit-form input, .task-edit-form textarea, .task-edit-form select { border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 9px 11px; font-size: 0.85rem; font-family: inherit; outline: none; color: var(--text); background: var(--surface); transition: all .18s var(--ease); width: 100%; } .task-edit-form input:focus, .task-edit-form textarea:focus, .task-edit-form select:focus { border-color: var(--accent); box-shadow: var(--focus); } .task-edit-form textarea { resize: vertical; min-height: 54px; line-height: 1.4; } .task-edit-actions { display: flex; gap: 6px; } .btn-save { background-image: var(--grad); color: #fff; border: none; border-radius: var(--r-sm); padding: 8px 15px; font-size: 0.8rem; font-weight: 650; cursor: pointer; box-shadow: 0 3px 10px rgba(124,58,237,.24); transition: all .18s var(--ease); } .btn-save:hover { filter: brightness(1.05); } .btn-save:active { transform: scale(.98); } .btn-cancel { background: var(--surface-2); color: var(--text-2); border: none; border-radius: var(--r-sm); padding: 8px 15px; font-size: 0.8rem; font-weight: 600; cursor: pointer; transition: background .15s var(--ease); } .btn-cancel:hover { background: var(--surface-3); } /* ── ADD ROW ── */ .add-row { display: flex; gap: 8px; margin-top: 11px; } .add-input { flex: 1; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 13px; font-size: 0.85rem; font-family: inherit; outline: none; background: var(--surface); color: var(--text); transition: all .18s var(--ease); } .add-input:focus { border-color: var(--accent); box-shadow: var(--focus); } .add-btn { background-image: var(--grad); color: #fff; border: none; border-radius: var(--r-sm); padding: 10px 16px; font-size: 0.85rem; font-weight: 650; cursor: pointer; box-shadow: var(--sh-accent); transition: all .18s var(--ease); white-space: nowrap; } .add-btn:hover { filter: brightness(1.05); } .add-btn:active { transform: scale(.98); } .steuer .add-btn { background-image: var(--grad-amber); box-shadow: 0 6px 20px rgba(180,83,9,.24); } .add-row .effort-input { flex: 0 0 118px; max-width: 118px; } .add-row .prio-input { flex: 0 0 122px; max-width: 122px; } .effort-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.7rem; font-weight: 650; color: var(--accent-strong); background: var(--accent-soft); border-radius: 7px; padding: 3px 9px; margin-top: 8px; margin-left: 6px; vertical-align: top; } /* ── SONG PIPELINE (vertikal gestapelte Stufen) ── */ .kanban-label { font-size: 0.7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.07em; margin: 20px 0 12px; } .pipe-label { font-size: 0.7rem; font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.07em; margin: 22px 0 12px; } .pipe-board { display: flex; flex-direction: column; gap: 12px; } .pipe-stage { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; } .pipe-stage-head { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .pipe-stage-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-2); } .pipe-stage-count { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.68rem; font-weight: 700; color: var(--text-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 1px 8px; } .pipe-stage.col-inarbeit { background: var(--waiting-bg); border-color: rgba(180,83,9,.14); } .pipe-stage.col-inarbeit .pipe-stage-title { color: var(--office); } .pipe-songs { display: flex; flex-direction: column; gap: 8px; } .pipe-empty { font-size: 0.75rem; color: var(--text-3); padding: 3px 2px; grid-column: 1 / -1; } .song-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 11px; font-size: 0.8rem; color: var(--text); box-shadow: var(--sh-sm); display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .song-card:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .song-name { flex: 1; line-height: 1.3; min-width: 0; } .song-title-row { display: flex; align-items: center; gap: 5px; font-weight: 600; letter-spacing: -0.004em; } .song-expand-chevron { font-size: 0.62rem; color: var(--text-3); flex-shrink: 0; transition: transform .18s var(--ease), color .18s var(--ease); display: inline-block; } .song-expand-chevron.open { transform: rotate(90deg); color: var(--accent); } .song-artist { font-size: 0.7rem; color: var(--text-3); margin-top: 2px; } .song-details { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--line); } .song-writers { display: flex; flex-direction: column; gap: 3px; } .song-writer-row { font-size: 0.7rem; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .song-writer-name { color: var(--text-2); } .song-writer-type { background: var(--surface-2); color: var(--text-2); border-radius: 6px; padding: 1px 7px; font-weight: 600; font-size: 0.66rem; } .song-writer-share { font-family: var(--mono); font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-strong); border-radius: 6px; padding: 1px 7px; font-weight: 700; font-size: 0.68rem; } .song-edit-btn { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 0.75rem; padding: 1px 3px; transition: color .15s var(--ease); margin-left: auto; } .song-edit-btn:hover { color: var(--accent); } /* dropbox links */ .song-dropbox-icon { text-decoration: none; font-size: 0.72rem; line-height: 1; flex-shrink: 0; opacity: .8; } .song-dropbox-icon:hover { opacity: 1; } .song-dropbox-link { display: inline-block; margin-top: 7px; font-size: 0.72rem; font-weight: 600; color: var(--accent); text-decoration: none; } .song-dropbox-link:hover { color: var(--accent-strong); text-decoration: underline; } /* ── SONG EDIT FORM ── */ .song-edit-form { margin-top: 7px; display: flex; flex-direction: column; gap: 6px; } .song-edit-form .dropbox-in, .song-edit-form .writer-edit-row input, .song-edit-form .writer-edit-row select { border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 6px 9px; font-size: 0.75rem; font-family: inherit; outline: none; color: var(--text); background: var(--surface); transition: all .18s var(--ease); } .song-edit-form .dropbox-in { width: 100%; } .song-edit-form .writer-edit-row { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; } .song-edit-form .writer-edit-row input:focus, .song-edit-form .writer-edit-row select:focus, .song-edit-form .dropbox-in:focus { border-color: var(--accent); box-shadow: var(--focus); } .song-edit-form .writer-edit-row input.name-in { flex: 1; min-width: 80px; } .song-edit-form .writer-edit-row select.type-in { flex: 0 0 auto; width: 140px; } .song-edit-form .writer-edit-row input.share-in { width: 64px; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } .song-edit-form-actions { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; } .song-edit-add-writer { background: none; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--text-3); font-size: 0.72rem; padding: 4px 11px; cursor: pointer; transition: all .18s var(--ease); } .song-edit-add-writer:hover { border-color: var(--accent); color: var(--accent); } .song-edit-save { background-image: var(--grad); color: #fff; border: none; border-radius: var(--r-xs); padding: 5px 13px; font-size: 0.75rem; font-weight: 650; cursor: pointer; box-shadow: 0 3px 10px rgba(124,58,237,.22); transition: all .18s var(--ease); } .song-edit-save:hover { filter: brightness(1.05); } .song-edit-cancel { background: var(--surface-2); color: var(--text-2); border: none; border-radius: var(--r-xs); padding: 5px 13px; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .song-edit-cancel:hover { background: var(--surface-3); } /* ── SHARE SUM (two-sided pills) ── */ .share-sum { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; min-height: 1.4em; } .song-edit-form .share-sum { margin: 3px 0; } .share-pill { font-family: var(--mono); font-variant-numeric: tabular-nums; display: inline-flex; align-items: center; gap: 4px; font-size: 0.7rem; font-weight: 650; border-radius: 7px; padding: 2px 9px; background: var(--surface-2); color: var(--text-3); } .share-pill.ok { background: var(--done-bg); color: var(--done); } .share-pill.bad { background: var(--open-bg); color: var(--open); } .share-pill.idle { background: var(--surface-2); color: var(--text-3); } /* ── NEW SONG ── */ .add-song-row { display: flex; gap: 8px; margin-top: 12px; } .add-song-dropbox { margin-top: 8px; } .add-song-dropbox .add-input { width: 100%; } .writers-form { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; } .writer-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .writer-row .add-input { font-size: 0.8rem; padding: 8px 11px; } .writer-row .add-input.share-input { max-width: 90px; flex: none; font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; } .writer-row select.add-input { flex: 0 0 auto; width: 160px; } .writer-remove { background: none; border: none; cursor: pointer; color: var(--text-3); font-size: 0.9rem; padding: 0 3px; transition: color .15s var(--ease); } .writer-remove:hover { color: var(--danger); } .add-writer-btn { background: none; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--text-3); font-size: 0.78rem; padding: 6px 13px; cursor: pointer; transition: all .18s var(--ease); align-self: flex-start; margin-top: 4px; } .add-writer-btn:hover { border-color: var(--accent); color: var(--accent); } .song-actions { display: flex; gap: 3px; flex-shrink: 0; } .song-btn { background: none; border: none; cursor: pointer; font-size: 0.75rem; padding: 3px 5px; border-radius: 6px; color: var(--text-3); transition: all .12s var(--ease); } .song-btn:hover { background: var(--surface-2); color: var(--text); } .song-btn.del-btn:hover { background: rgba(225,29,72,.08); color: var(--danger); } .divider { border: none; border-top: 1px solid var(--line); margin: 18px 0; } /* ── UNDO TOAST ── */ .undo-toast { position: fixed; bottom: calc(28px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); background: var(--glass-dark); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border: 1px solid rgba(255,255,255,.08); color: #fff; border-radius: 16px; padding: 14px 16px 11px; min-width: 300px; max-width: 440px; box-shadow: var(--sh-lg), var(--edge-top); z-index: 9999; display: none; flex-direction: column; gap: 9px; animation: toastIn .32s var(--ease); } .undo-toast.visible { display: flex; } .undo-toast-row { display: flex; align-items: center; gap: 10px; } .undo-label { flex: 1; font-size: 0.84rem; line-height: 1.3; opacity: 0.92; } .undo-btn { background: #fff; color: #1d1d1f; border: none; border-radius: var(--r-sm); padding: 7px 14px; font-size: 0.8rem; font-weight: 700; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all .1s var(--ease); } .undo-btn:hover { background: #f0f0f2; } .undo-btn:active { transform: scale(.97); } .undo-close { background: none; border: none; color: rgba(255,255,255,0.5); font-size: 0.9rem; cursor: pointer; padding: 0 2px; flex-shrink: 0; transition: color .1s var(--ease); } .undo-close:hover { color: #fff; } .undo-bar-track { height: 3px; background: rgba(255,255,255,0.16); border-radius: 2px; overflow: hidden; } .undo-bar-fill { height: 100%; width: 100%; background: linear-gradient(90deg,#a855f7,#c4b5fd); border-radius: 2px; transform-origin: left; transition: none; } @keyframes toastIn { from { opacity: 0; transform: translateX(-50%) translateY(14px) scale(.97); } to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } /* ── PORTFOLIO ── */ .portfolio-header { display: flex; align-items: center; gap: 11px; margin-top: 26px; } .portfolio-toggle { display: flex; align-items: center; gap: 9px; background: none; border: none; cursor: pointer; padding: 0; } .portfolio-toggle-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--done-bg); box-shadow: inset 0 0 0 1px var(--line); display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; transition: background .18s var(--ease); } .portfolio-toggle:hover .portfolio-toggle-icon { background: rgba(4,120,87,.16); } .portfolio-toggle-title { font-size: 1.12rem; font-weight: 650; letter-spacing: -0.01em; color: var(--done); } .portfolio-count { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 0.72rem; font-weight: 650; background: var(--done-bg); color: var(--done); border-radius: var(--r-pill); padding: 3px 10px; } .pf-export-btn { margin-left: auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 0.72rem; font-weight: 650; color: var(--text-2); padding: 4px 12px; cursor: pointer; transition: all .18s var(--ease); white-space: nowrap; } .pf-export-btn:hover { border-color: var(--done); color: var(--done); background: var(--done-bg); } .portfolio-chevron { font-size: 0.7rem; color: var(--text-3); margin-left: 4px; transition: transform .2s var(--ease); } .portfolio-chevron.open { transform: rotate(180deg); } .portfolio-body { margin-top: 14px; } .portfolio-search { width: 100%; border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 10px 14px; font-size: 0.85rem; font-family: inherit; outline: none; background: var(--surface); color: var(--text); transition: all .18s var(--ease); margin-bottom: 12px; } .portfolio-search:focus { border-color: var(--done); box-shadow: 0 0 0 4px rgba(4,120,87,.13); } .portfolio-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap: 10px; } .portfolio-card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px 14px 18px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--sh-sm); overflow: hidden; transition: transform .18s var(--ease), box-shadow .18s var(--ease); } .portfolio-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-image: var(--grad-hairline); } .portfolio-card:hover { transform: translateY(-1px); box-shadow: var(--sh-md); } .portfolio-card-body { flex: 1; min-width: 0; } .portfolio-title { font-size: 0.94rem; font-weight: 650; letter-spacing: -0.006em; color: var(--text); } .portfolio-artist { font-size: 0.78rem; color: var(--text-3); margin-top: 2px; } .portfolio-writers { margin-top: 6px; display: flex; flex-wrap: wrap; gap: 5px; } .portfolio-writer-chip { font-size: 0.7rem; background: var(--done-bg); border: 1px solid rgba(4,120,87,.18); color: var(--done); border-radius: 7px; padding: 2px 9px; } .portfolio-dropbox { display: inline-block; font-size: 0.72rem; font-weight: 600; color: var(--accent); text-decoration: none; } .portfolio-dropbox:hover { color: var(--accent-strong); text-decoration: underline; } .portfolio-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; } .portfolio-spotify { font-size: 0.72rem; font-weight: 600; color: #1db954; text-decoration: none; } .portfolio-spotify:hover { text-decoration: underline; filter: brightness(1.12); } .portfolio-sp-btn { background: none; border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 0.85rem; line-height: 1; color: var(--text-3); padding: 4px 7px; cursor: pointer; transition: all .15s var(--ease); } .portfolio-sp-btn:hover { border-color: #1db954; color: #1db954; } .pf-spotify-edit { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; } .pf-spotify-edit .pf-spotify-in { flex: 1 1 100%; border: 1px solid var(--line-strong); border-radius: var(--r-xs); padding: 7px 10px; font-size: 0.78rem; font-family: inherit; outline: none; background: var(--surface); color: var(--text); transition: all .15s var(--ease); } .pf-spotify-edit .pf-spotify-in:focus { border-color: var(--accent); box-shadow: var(--focus); } .pf-spotify-save { background-image: var(--grad); color: #fff; border: none; border-radius: var(--r-xs); padding: 6px 13px; font-size: 0.75rem; font-weight: 650; cursor: pointer; } .pf-spotify-cancel { background: var(--surface-2); color: var(--text-2); border: none; border-radius: var(--r-xs); padding: 6px 13px; font-size: 0.75rem; font-weight: 600; cursor: pointer; } .portfolio-card-actions { display: flex; gap: 4px; flex-shrink: 0; } .portfolio-back { background: none; border: 1px solid var(--line); border-radius: var(--r-xs); font-size: 0.72rem; color: var(--text-3); padding: 4px 9px; cursor: pointer; transition: all .18s var(--ease); } .portfolio-back:hover { border-color: var(--accent); color: var(--accent); } .portfolio-del { background: none; border: none; cursor: pointer; font-size: 0.9rem; color: var(--text-3); padding: 2px 4px; border-radius: var(--r-xs); transition: all .15s var(--ease); } .portfolio-del:hover { color: var(--danger); background: rgba(225,29,72,.08); } .portfolio-empty { font-size: 0.82rem; color: var(--text-3); text-align: center; padding: 22px 0; grid-column: 1 / -1; } /* ── loading splash ── */ .app-loading { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 5000; font-size: 0.9rem; color: var(--text-3); } /* ── responsive ── */ @media (max-width: 560px) { #app-view { padding: 16px 16px 56px; } .app-header { padding: 11px 15px; } h1 { font-size: 1.5rem; } .add-song-row { flex-wrap: wrap; } .add-song-row .add-input { flex: 1 1 100%; } .add-row { flex-wrap: wrap; } .add-row > .add-input:first-child { flex: 1 1 100%; } .add-row .effort-input, .add-row .prio-input { flex: 1 1 auto; max-width: none; } .user-email { display: none; } .pipe-songs { grid-template-columns: 1fr; } .portfolio-grid { grid-template-columns: 1fr; } } /* ── glass fallback ── */ @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .app-header, .auth-card { background: rgba(255,255,255,0.94); } .undo-toast { background: rgba(28,28,30,0.97); } } /* ── reduced motion ── */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition-duration: .01ms !important; } }