/* ══════════════════════════════════════════════════ style-variants.css — Nutzerwählbare Theme-Varianten ---------------------------------------------------- Wirkt orthogonal zu [data-theme="dark"]: Cascade: tenant-default.css → style-variants.css → shared.css ══════════════════════════════════════════════════ */ /* ───── Radius-Tokens (Default-Skala = klassisch) ───── */ :root { --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px; } /* ════════════════════════════════════════ 1) klassisch — Default (keine Overrides) ════════════════════════════════════════ */ [data-style="klassisch"] { /* Erbt tenant-default.css */ } /* ════════════════════════════════════════ 2) spielerisch — pink/gelb, weich gerundet ════════════════════════════════════════ */ [data-style="spielerisch"] { --brand-primary: #e85d75; --brand-primary-rgb: 232, 93, 117; --brand-primary-hover: #f08097; --brand-secondary: #ffd166; --brand-secondary-rgb: 255, 209, 102; --brand-bg: #fff5e6; --brand-bg-rgb: 255, 245, 230; --brand-bg-edge-1: #ffe5d0; --brand-bg-edge-2: #fff0dc; --brand-panel: #ffffff; --brand-ink: #2a1a20; --brand-muted: #6b4f55; --brand-font-display: "Fraunces", "DM Serif Display", "Georgia", serif; --brand-font-body: "Quicksand", "Nunito", "Segoe UI", sans-serif; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 28px; --radius-xl: 36px; --radius-pill: 999px; } [data-style="spielerisch"][data-theme="dark"] { --brand-primary: #ff7a92; --brand-primary-rgb: 255, 122, 146; --brand-primary-hover: #ff95a8; --brand-secondary: #ffd166; --brand-bg: #1f1014; --brand-bg-rgb: 31, 16, 20; --brand-bg-edge-1: #2b1620; --brand-bg-edge-2: #170b0e; --brand-panel: #2c181f; --brand-ink: #ffe9ec; --brand-muted: #d6b3bc; } /* ════════════════════════════════════════ 3) minimalistisch — schwarz/blau, scharfe Kanten ════════════════════════════════════════ */ [data-style="minimalistisch"] { --brand-primary: #111111; --brand-primary-rgb: 17, 17, 17; --brand-primary-hover: #2c2c2c; --brand-secondary: #0066ff; --brand-secondary-rgb: 0, 102, 255; --brand-bg: #fafafa; --brand-bg-rgb: 250, 250, 250; --brand-bg-edge-1: #f0f0f0; --brand-bg-edge-2: #fafafa; --brand-panel: #ffffff; --brand-ink: #0a0a0a; --brand-muted: #6b6b6b; --brand-font-display: "Inter", "Helvetica Neue", "Arial", sans-serif; --brand-font-body: "Inter", "Helvetica Neue", "Arial", sans-serif; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-pill: 8px; } [data-style="minimalistisch"][data-theme="dark"] { --brand-primary: #fafafa; --brand-primary-rgb: 250, 250, 250; --brand-primary-hover: #d4d4d4; --brand-secondary: #4d8fff; --brand-secondary-rgb: 77, 143, 255; --brand-bg: #0a0a0a; --brand-bg-rgb: 10, 10, 10; --brand-bg-edge-1: #141414; --brand-bg-edge-2: #050505; --brand-panel: #161616; --brand-ink: #fafafa; --brand-muted: #a3a3a3; } /* ════════════════════════════════════════ 4) natur — Wald/Sand, weich gerundet, Lora+Nunito ════════════════════════════════════════ */ [data-style="natur"] { --brand-primary: #3a6b3a; --brand-primary-rgb: 58, 107, 58; --brand-primary-hover: #5a8a5a; --brand-secondary: #c9a86b; --brand-secondary-rgb: 201, 168, 107; --brand-bg: #eef2e6; --brand-bg-rgb: 238, 242, 230; --brand-bg-edge-1: #e3eccf; --brand-bg-edge-2: #f0f4ea; --brand-panel: #f9faf3; --brand-ink: #1f2a1f; --brand-muted: #5a6a55; --brand-font-display: "Lora", "Georgia", "Times New Roman", serif; --brand-font-body: "Nunito", "Segoe UI", "Helvetica Neue", sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; } [data-style="natur"][data-theme="dark"] { --brand-primary: #7eb87e; --brand-primary-rgb: 126, 184, 126; --brand-primary-hover: #99c899; --brand-secondary: #d8b87a; --brand-secondary-rgb: 216, 184, 122; --brand-bg: #131811; --brand-bg-rgb: 19, 24, 17; --brand-bg-edge-1: #1c2419; --brand-bg-edge-2: #0d110b; --brand-panel: #1e261b; --brand-ink: #e8efde; --brand-muted: #b8c4ad; } /* ════════════════════════════════════════ 5) retro — Orange/Navy, scharfe Ecken, Serif+Mono ════════════════════════════════════════ */ [data-style="retro"] { --brand-primary: #d4571c; --brand-primary-rgb: 212, 87, 28; --brand-primary-hover: #e3743f; --brand-secondary: #2b4c7e; --brand-secondary-rgb: 43, 76, 126; --brand-bg: #f4ecd8; --brand-bg-rgb: 244, 236, 216; --brand-bg-edge-1: #ebdfc0; --brand-bg-edge-2: #f6efde; --brand-panel: #fcf6e6; --brand-ink: #1f1812; --brand-muted: #6b5a45; --brand-font-display: "DM Serif Display", "Fraunces", "Georgia", serif; --brand-font-body: "JetBrains Mono", "Courier New", monospace; --radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px; --radius-pill: 0px; } [data-style="retro"][data-theme="dark"] { --brand-primary: #ff8a4a; --brand-primary-rgb: 255, 138, 74; --brand-primary-hover: #ffa570; --brand-secondary: #6b8fc4; --brand-secondary-rgb: 107, 143, 196; --brand-bg: #1a140d; --brand-bg-rgb: 26, 20, 13; --brand-bg-edge-1: #241b11; --brand-bg-edge-2: #120d08; --brand-panel: #261d12; --brand-ink: #f4ecd8; --brand-muted: #c4b496; } /* ══════════════════════════════════════════════════ Style-Picker UI (Popover, Buttons, Theme-Cards) ══════════════════════════════════════════════════ */ .style-toggle-fab, .style-toggle.header-btn { /* Erbt das visuelle Verhalten vom Dark-Toggle (siehe shared.css). */ } .style-toggle-fab svg, .style-toggle.header-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .theme-fab-group { position: fixed; top: 16px; right: 16px; display: flex; gap: 8px; z-index: 1000; } .theme-fab-group .theme-toggle-fab, .theme-fab-group .style-toggle-fab { position: static; } @media (max-width: 640px) { .theme-fab-group { top: 12px; right: 12px; gap: 6px; } } @media print { .theme-fab-group { display: none; } } .style-picker-popover { position: absolute; top: calc(100% + 8px); right: 0; min-width: 280px; max-width: 320px; background: var(--surface, #fff); color: var(--ink, #22211f); border: 1px solid var(--border, #e6d9cc); border-radius: var(--radius-lg, 16px); box-shadow: 0 16px 40px var(--shadow, rgba(15, 12, 8, 0.18)); padding: 8px; z-index: 1001; display: none; flex-direction: column; gap: 4px; } .style-picker-popover[data-open="true"] { display: flex; animation: stylePickerFadeIn 140ms ease-out; } @keyframes stylePickerFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .style-picker-popover .style-picker-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #5b554f); padding: 8px 10px 4px; margin: 0; } .style-option { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid transparent; border-radius: var(--radius-md, 12px); background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; transition: background 120ms ease, border-color 120ms ease; } .style-option:hover { background: var(--surface-hover, rgba(0, 0, 0, 0.04)); } .style-option:focus-visible { outline: 2px solid var(--accent, #0f6a52); outline-offset: 2px; } .style-option[aria-pressed="true"] { border-color: var(--accent, #0f6a52); background: var(--surface-soft, rgba(0, 0, 0, 0.03)); } .style-option-swatches { display: flex; flex-shrink: 0; } .style-option-swatches span { width: 14px; height: 28px; border: 1px solid rgba(0, 0, 0, 0.08); } .style-option-swatches span:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } .style-option-swatches span:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } .style-option-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .style-option-name { font-size: 15px; font-weight: 600; line-height: 1.2; } .style-option-meta { font-size: 11px; color: var(--muted, #5b554f); } .style-option-shape { flex-shrink: 0; width: 18px; height: 18px; background: currentColor; opacity: 0.6; } /* Popover-Position-Wrapper (relative anchor, damit absolute Popover sitzt) */ .style-toggle-anchor { position: relative; display: inline-flex; } /* Dark-Mode-Anpassung Popover */ [data-theme="dark"] .style-picker-popover { background: var(--surface, #2a241c); border-color: var(--border, #3a3128); } [data-theme="dark"] .style-option-swatches span { border-color: rgba(255, 255, 255, 0.12); }