/* Hintergrund-Gradienten – per data-ui-bg am -Element */ :root { --bg-fallback: #0b1024; } :root[data-ui-bg='indigo'] { --bg-fallback: #0b1024; --bg-app: radial-gradient(circle at 18% 22%, #4338ca 0, transparent 44%), radial-gradient(circle at 82% 12%, #7c3aed 0, transparent 40%), #0b1024; } :root[data-ui-bg='blue'] { --bg-fallback: #0c1929; --bg-app: radial-gradient(circle at 15% 20%, #0369a1 0, transparent 42%), radial-gradient(circle at 85% 10%, #1d4ed8 0, transparent 38%), #0c1929; } :root[data-ui-bg='sky'] { --bg-fallback: #0c1929; --bg-app: radial-gradient(circle at 20% 25%, #0284c7 0, transparent 42%), radial-gradient(circle at 80% 15%, #0ea5e9 0, transparent 40%), #0f172a; } :root[data-ui-bg='cyan'] { --bg-fallback: #0a0f1e; --bg-app: radial-gradient(circle at 25% 30%, #0891b2 0, transparent 40%), radial-gradient(circle at 75% 15%, #06b6d4 0, transparent 42%), #0a0f1e; } :root[data-ui-bg='teal'] { --bg-fallback: #042f2e; --bg-app: radial-gradient(circle at 22% 28%, #0f766e 0, transparent 42%), radial-gradient(circle at 78% 18%, #14b8a6 0, transparent 40%), #042f2e; } :root[data-ui-bg='green'] { --bg-fallback: #071510; --bg-app: radial-gradient(circle at 20% 25%, #047857 0, transparent 42%), radial-gradient(circle at 80% 20%, #15803d 0, transparent 40%), #071510; } :root[data-ui-bg='emerald'] { --bg-fallback: #052e16; --bg-app: radial-gradient(circle at 18% 24%, #059669 0, transparent 42%), radial-gradient(circle at 82% 16%, #10b981 0, transparent 40%), #052e16; } :root[data-ui-bg='lime'] { --bg-fallback: #1a2e05; --bg-app: radial-gradient(circle at 22% 26%, #4d7c0f 0, transparent 42%), radial-gradient(circle at 78% 14%, #65a30d 0, transparent 38%), #1a2e05; } :root[data-ui-bg='yellow'] { --bg-fallback: #1a1508; --bg-app: radial-gradient(circle at 22% 24%, #ca8a04 0, transparent 42%), radial-gradient(circle at 78% 18%, #eab308 0, transparent 38%), #1a1508; } :root[data-ui-bg='amber'] { --bg-fallback: #1c1108; --bg-app: radial-gradient(circle at 20% 22%, #d97706 0, transparent 42%), radial-gradient(circle at 80% 16%, #f59e0b 0, transparent 40%), #1c1108; } :root[data-ui-bg='orange'] { --bg-fallback: #1a0a12; --bg-app: radial-gradient(circle at 20% 20%, #ea580c 0, transparent 40%), radial-gradient(circle at 80% 15%, #f97316 0, transparent 38%), #1a0a12; } :root[data-ui-bg='red'] { --bg-fallback: #1a0505; --bg-app: radial-gradient(circle at 22% 24%, #b91c1c 0, transparent 42%), radial-gradient(circle at 78% 16%, #ef4444 0, transparent 40%), #1a0505; } :root[data-ui-bg='rose'] { --bg-fallback: #1a0812; --bg-app: radial-gradient(circle at 22% 22%, #db2777 0, transparent 42%), radial-gradient(circle at 78% 16%, #f43f5e 0, transparent 40%), #1a0812; } :root[data-ui-bg='fuchsia'] { --bg-fallback: #1a051a; --bg-app: radial-gradient(circle at 20% 24%, #c026d3 0, transparent 42%), radial-gradient(circle at 80% 14%, #e879f9 0, transparent 40%), #1a051a; } :root[data-ui-bg='violet'] { --bg-fallback: #120818; --bg-app: radial-gradient(circle at 20% 24%, #7e22ce 0, transparent 42%), radial-gradient(circle at 80% 14%, #a855f7 0, transparent 40%), #120818; } :root[data-ui-bg='purple'] { --bg-fallback: #1e0a3b; --bg-app: radial-gradient(circle at 22% 26%, #6b21a8 0, transparent 42%), radial-gradient(circle at 78% 16%, #9333ea 0, transparent 40%), #1e0a3b; } :root[data-ui-bg='navy'] { --bg-fallback: #0a1628; --bg-app: linear-gradient(165deg, #1e3a8a 0%, #0f172a 55%, #020617 100%); } :root[data-ui-bg='slate'] { --bg-fallback: #1e293b; --bg-app: linear-gradient(160deg, #334155 0%, #1e293b 45%, #0f172a 100%); } :root[data-ui-bg='charcoal'] { --bg-fallback: #171717; --bg-app: linear-gradient(155deg, #404040 0%, #262626 45%, #0a0a0a 100%); } :root[data-ui-bg='aurora'] { --bg-fallback: #0b1024; --bg-app: radial-gradient(circle at 15% 20%, #6366f1 0, transparent 38%), radial-gradient(circle at 85% 15%, #06b6d4 0, transparent 36%), radial-gradient(circle at 50% 85%, #a855f7 0, transparent 40%), #0b1024; } :root[data-ui-bg='sunset'] { --bg-fallback: #1a0812; --bg-app: radial-gradient(circle at 20% 30%, #ea580c 0, transparent 40%), radial-gradient(circle at 75% 20%, #db2777 0, transparent 38%), radial-gradient(circle at 50% 90%, #7c3aed 0, transparent 42%), #1a0812; } :root[data-ui-bg='pearl'] { --bg-fallback: #eef2ff; --bg-app: linear-gradient(145deg, #eef2ff 0%, #fdf2f8 45%, #ecfeff 100%); } :root[data-ui-bg='sand'] { --bg-fallback: #fef3c7; --bg-app: linear-gradient(145deg, #fffbeb 0%, #fef3c7 40%, #fed7aa 100%); } :root[data-ui-bg='snow'] { --bg-fallback: #f0f9ff; --bg-app: linear-gradient(150deg, #f0f9ff 0%, #f8fafc 50%, #e0f2fe 100%); } /* Vorschau-Chips im Design-Menü */ .theme-chip-bg--indigo { background: radial-gradient(circle at 18% 22%, #4338ca 0, transparent 44%), radial-gradient(circle at 82% 12%, #7c3aed 0, transparent 40%), #0b1024; } .theme-chip-bg--blue { background: radial-gradient(circle at 15% 20%, #0369a1 0, transparent 42%), radial-gradient(circle at 85% 10%, #1d4ed8 0, transparent 38%), #0c1929; } .theme-chip-bg--sky { background: radial-gradient(circle at 20% 25%, #0284c7 0, transparent 42%), radial-gradient(circle at 80% 15%, #0ea5e9 0, transparent 40%), #0f172a; } .theme-chip-bg--cyan { background: radial-gradient(circle at 25% 30%, #0891b2 0, transparent 40%), radial-gradient(circle at 75% 15%, #06b6d4 0, transparent 42%), #0a0f1e; } .theme-chip-bg--teal { background: radial-gradient(circle at 22% 28%, #0f766e 0, transparent 42%), radial-gradient(circle at 78% 18%, #14b8a6 0, transparent 40%), #042f2e; } .theme-chip-bg--green { background: radial-gradient(circle at 20% 25%, #047857 0, transparent 42%), radial-gradient(circle at 80% 20%, #15803d 0, transparent 40%), #071510; } .theme-chip-bg--emerald { background: radial-gradient(circle at 18% 24%, #059669 0, transparent 42%), radial-gradient(circle at 82% 16%, #10b981 0, transparent 40%), #052e16; } .theme-chip-bg--lime { background: radial-gradient(circle at 22% 26%, #4d7c0f 0, transparent 42%), radial-gradient(circle at 78% 14%, #65a30d 0, transparent 38%), #1a2e05; } .theme-chip-bg--yellow { background: radial-gradient(circle at 22% 24%, #ca8a04 0, transparent 42%), radial-gradient(circle at 78% 18%, #eab308 0, transparent 38%), #1a1508; } .theme-chip-bg--amber { background: radial-gradient(circle at 20% 22%, #d97706 0, transparent 42%), radial-gradient(circle at 80% 16%, #f59e0b 0, transparent 40%), #1c1108; } .theme-chip-bg--orange { background: radial-gradient(circle at 20% 20%, #ea580c 0, transparent 40%), radial-gradient(circle at 80% 15%, #f97316 0, transparent 38%), #1a0a12; } .theme-chip-bg--red { background: radial-gradient(circle at 22% 24%, #b91c1c 0, transparent 42%), radial-gradient(circle at 78% 16%, #ef4444 0, transparent 40%), #1a0505; } .theme-chip-bg--rose { background: radial-gradient(circle at 22% 22%, #db2777 0, transparent 42%), radial-gradient(circle at 78% 16%, #f43f5e 0, transparent 40%), #1a0812; } .theme-chip-bg--fuchsia { background: radial-gradient(circle at 20% 24%, #c026d3 0, transparent 42%), radial-gradient(circle at 80% 14%, #e879f9 0, transparent 40%), #1a051a; } .theme-chip-bg--violet { background: radial-gradient(circle at 20% 24%, #7e22ce 0, transparent 42%), radial-gradient(circle at 80% 14%, #a855f7 0, transparent 40%), #120818; } .theme-chip-bg--purple { background: radial-gradient(circle at 22% 26%, #6b21a8 0, transparent 42%), radial-gradient(circle at 78% 16%, #9333ea 0, transparent 40%), #1e0a3b; } .theme-chip-bg--navy { background: linear-gradient(165deg, #1e3a8a 0%, #0f172a 55%, #020617 100%); } .theme-chip-bg--slate { background: linear-gradient(160deg, #334155 0%, #1e293b 45%, #0f172a 100%); } .theme-chip-bg--charcoal { background: linear-gradient(155deg, #404040 0%, #262626 45%, #0a0a0a 100%); } .theme-chip-bg--aurora { background: radial-gradient(circle at 15% 20%, #6366f1 0, transparent 38%), radial-gradient(circle at 85% 15%, #06b6d4 0, transparent 36%), radial-gradient(circle at 50% 85%, #a855f7 0, transparent 40%), #0b1024; } .theme-chip-bg--sunset { background: radial-gradient(circle at 20% 30%, #ea580c 0, transparent 40%), radial-gradient(circle at 75% 20%, #db2777 0, transparent 38%), radial-gradient(circle at 50% 90%, #7c3aed 0, transparent 42%), #1a0812; } .theme-chip-bg--pearl { background: linear-gradient(145deg, #eef2ff 0%, #fdf2f8 45%, #ecfeff 100%); } .theme-chip-bg--sand { background: linear-gradient(145deg, #fffbeb 0%, #fef3c7 40%, #fed7aa 100%); } .theme-chip-bg--snow { background: linear-gradient(150deg, #f0f9ff 0%, #f8fafc 50%, #e0f2fe 100%); } .theme-chip-surface--black { background: #0a0a0a; } .theme-chip-surface--charcoal { background: #1c1917; } .theme-chip-surface--dark { background: #141925; } .theme-chip-surface--navy { background: #0f172a; } .theme-chip-surface--blue { background: #1e3a5f; } .theme-chip-surface--teal { background: #134e4a; } .theme-chip-surface--green { background: #14532d; } .theme-chip-surface--purple { background: #3b0764; } .theme-chip-surface--red { background: #450a0a; } .theme-chip-surface--rose { background: #4c0519; } .theme-chip-surface--orange { background: #431407; } .theme-chip-surface--yellow { background: #fef08a; } .theme-chip-surface--mint { background: #ecfdf5; } .theme-chip-surface--lavender { background: #f5f3ff; } .theme-chip-surface--coral { background: #fff1f2; } .theme-chip-surface--cream { background: #fffbeb; } .theme-chip-surface--white { background: #ffffff; } .theme-chip-surface--light { background: #f3f4f6; } .theme-chip-surface--graphite { background: #374151; }