/* ────────────────────────────────────────────────────── DREAMWORLD CI v1 Brand-Quelle: invoice_converter/convert.py Font: Satoshi (Fontshare) · Monochrome Light + Editorial Dark Verwendung: ← oder weglassen für light (default) ────────────────────────────────────────────────────── */ @import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700,900&display=swap'); :root { /* ── Typography ── */ --dw-font: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; --dw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --dw-text-xs: 11px; --dw-text-sm: 12.5px; --dw-text-base: 14px; --dw-text-md: 16px; --dw-text-lg: 20px; --dw-text-xl: 28px; --dw-text-2xl: 36px; --dw-text-3xl: 52px; --dw-text-4xl: 72px; --dw-leading-tight: 1.15; --dw-leading-normal: 1.55; --dw-leading-relaxed: 1.7; --dw-tracking-tight: -0.015em; --dw-tracking-normal: 0; --dw-tracking-wide: 0.04em; --dw-tracking-caps: 1.5px; /* ── Spacing ── */ --dw-space-1: 4px; --dw-space-2: 8px; --dw-space-3: 12px; --dw-space-4: 16px; --dw-space-5: 20px; --dw-space-6: 24px; --dw-space-8: 32px; --dw-space-10: 40px; --dw-space-12: 48px; --dw-space-16: 64px; /* ── Radius ── */ --dw-radius-sm: 6px; --dw-radius-md: 10px; --dw-radius-lg: 14px; --dw-radius-pill: 999px; /* ── Shadows ── */ --dw-shadow-card: 0 1px 2px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05); --dw-shadow-pop: 0 6px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06); /* ── Transitions ── */ --dw-trans-fast: 120ms cubic-bezier(0.32, 0.72, 0, 1); --dw-trans: 180ms cubic-bezier(0.32, 0.72, 0, 1); --dw-trans-slow: 280ms cubic-bezier(0.32, 0.72, 0, 1); } /* ── LIGHT THEME (default — Rechnung/PDF/Print Brand) ── */ :root, [data-dw-theme="light"] { --dw-bg: #f5f5f5; --dw-surface: #ffffff; --dw-surface-hi: #fafafa; --dw-text: #1a1a1a; --dw-text-soft: #444444; --dw-dim: #888888; --dw-border: #dddddd; --dw-border-hi: #aaaaaa; --dw-accent: #1a1a1a; /* monochrome */ --dw-accent-soft: rgba(26,26,26,0.08); --dw-success: #2d8b4f; --dw-warn: #d97706; --dw-error: #d50000; --dw-overlay: rgba(255,255,255,0.85); } /* ── DARK THEME (interne Web-Tools — Lulu, BIX, etc.) ── */ [data-dw-theme="dark"] { --dw-bg: #0a0e1e; --dw-surface: #1a1f33; --dw-surface-hi: #252b42; --dw-text: #e5e7ed; --dw-text-soft: #c5c8d0; --dw-dim: #8a8f9c; --dw-border: rgba(255,255,255,0.08); --dw-border-hi: rgba(255,255,255,0.16); --dw-accent: #7ea7ff; --dw-accent-soft: rgba(126,167,255,0.10); --dw-success: #2dd47a; --dw-warn: #ffa726; --dw-error: #f87171; --dw-overlay: rgba(10,14,30,0.85); } /* ── BASE ── */ * { box-sizing: border-box; } *::selection { background: var(--dw-accent); color: var(--dw-bg); } html, body { margin: 0; padding: 0; background: var(--dw-bg); color: var(--dw-text); font-family: var(--dw-font); font-size: var(--dw-text-base); line-height: var(--dw-leading-normal); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } a:hover { color: var(--dw-accent); } /* ── TYPOGRAPHY ── */ .dw-display { font-size: var(--dw-text-3xl); line-height: var(--dw-leading-tight); letter-spacing: var(--dw-tracking-tight); font-weight: 300; } .dw-heading { font-size: var(--dw-text-2xl); line-height: var(--dw-leading-tight); letter-spacing: var(--dw-tracking-tight); font-weight: 500; } .dw-title { font-size: var(--dw-text-lg); font-weight: 600; letter-spacing: var(--dw-tracking-tight); } .dw-label { font-size: var(--dw-text-xs); text-transform: uppercase; letter-spacing: var(--dw-tracking-caps); color: var(--dw-dim); font-weight: 500; } .dw-mono { font-family: var(--dw-font-mono); font-size: var(--dw-text-sm); } /* ── WORDMARK (Lulu, Dreamworld, etc.) ── */ .dw-wordmark { display: inline-flex; align-items: center; gap: 10px; font-size: var(--dw-text-md); font-weight: 500; letter-spacing: var(--dw-tracking-tight); } .dw-wordmark-mark { width: 8px; height: 8px; background: var(--dw-accent); border-radius: 50%; flex-shrink: 0; } /* ── BUTTONS ── */ .dw-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--dw-space-2); padding: 11px 22px; border: none; border-radius: var(--dw-radius-pill); font-family: inherit; font-size: var(--dw-text-base); font-weight: 600; letter-spacing: var(--dw-tracking-normal); cursor: pointer; transition: background var(--dw-trans), transform var(--dw-trans-fast), border-color var(--dw-trans), color var(--dw-trans); text-decoration: none; white-space: nowrap; } .dw-btn-primary { background: var(--dw-accent); color: var(--dw-bg); } .dw-btn-primary:hover { transform: translateY(-1px); filter: brightness(0.92); } .dw-btn-primary:active { transform: translateY(0); } .dw-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; transform: none; } .dw-btn-secondary { background: var(--dw-surface); color: var(--dw-text); border: 1px solid var(--dw-border); } .dw-btn-secondary:hover { border-color: var(--dw-border-hi); background: var(--dw-surface-hi); } .dw-btn-ghost { background: transparent; color: var(--dw-dim); padding: 8px 12px; } .dw-btn-ghost:hover { color: var(--dw-text); } .dw-btn-sm { padding: 7px 14px; font-size: var(--dw-text-sm); } .dw-btn-lg { padding: 14px 28px; font-size: var(--dw-text-md); } /* ── INPUTS ── */ .dw-input, .dw-textarea { width: 100%; background: var(--dw-bg); border: 1px solid var(--dw-border); border-radius: var(--dw-radius-md); padding: 11px 14px; font-family: inherit; font-size: var(--dw-text-base); color: var(--dw-text); outline: none; transition: border-color var(--dw-trans), box-shadow var(--dw-trans-slow); } .dw-input::placeholder, .dw-textarea::placeholder { color: var(--dw-dim); } .dw-input:focus, .dw-textarea:focus { border-color: var(--dw-accent); box-shadow: 0 0 0 3px var(--dw-accent-soft); } .dw-textarea { resize: vertical; min-height: 80px; line-height: var(--dw-leading-normal); } /* ── CARD ── */ .dw-card { background: var(--dw-surface); border: 1px solid var(--dw-border); border-radius: var(--dw-radius-lg); padding: var(--dw-space-6) var(--dw-space-8); } .dw-card-sm { padding: var(--dw-space-4) var(--dw-space-5); border-radius: var(--dw-radius-md); } /* ── PILL / BADGE ── */ .dw-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; background: var(--dw-accent-soft); color: var(--dw-accent); border-radius: var(--dw-radius-pill); font-size: var(--dw-text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--dw-tracking-wide); } .dw-pill::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; } /* ── STATUS DOT ── */ .dw-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; background: var(--dw-dim); flex-shrink: 0; } .dw-dot-success { background: var(--dw-success); } .dw-dot-warn { background: var(--dw-warn); } .dw-dot-error { background: var(--dw-error); } .dw-dot-accent { background: var(--dw-accent); } .dw-dot-pulse { animation: dw-pulse 2.5s ease-in-out infinite; } @keyframes dw-pulse { 0%,100% { opacity: 0.35 } 50% { opacity: 1 } } /* ── DIVIDER ── */ .dw-hr { border: 0; height: 1px; background: var(--dw-border); margin: var(--dw-space-6) 0; } /* ── HELPERS ── */ .dw-stack-1 { display: flex; flex-direction: column; gap: var(--dw-space-1); } .dw-stack-2 { display: flex; flex-direction: column; gap: var(--dw-space-2); } .dw-stack-3 { display: flex; flex-direction: column; gap: var(--dw-space-3); } .dw-stack-4 { display: flex; flex-direction: column; gap: var(--dw-space-4); } .dw-stack-6 { display: flex; flex-direction: column; gap: var(--dw-space-6); } .dw-row-2 { display: flex; gap: var(--dw-space-2); align-items: center; } .dw-row-3 { display: flex; gap: var(--dw-space-3); align-items: center; } .dw-row-4 { display: flex; gap: var(--dw-space-4); align-items: center; } .dw-row-6 { display: flex; gap: var(--dw-space-6); align-items: center; } .dw-dim { color: var(--dw-dim); } .dw-soft { color: var(--dw-text-soft); } .dw-strong { font-weight: 700; } /* ── REDUCED MOTION ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }