/* ═══════════════════════════════════════════════════════════════════ KIVIEO DESIGN-SYSTEM v1 (Phase 45) Globale Tokens + konsistente Button-Klassen + Mikro-Interaktionen. Eingebunden auf ALLEN Pages via . ═══════════════════════════════════════════════════════════════════ */ :root { /* Brand-Tokens (Kivieo) */ --kv-bg: oklch(7% .005 160); --kv-bg-card: oklch(11% .008 160); --kv-bg-elev: oklch(15% .01 160); --kv-border: oklch(100% 0 0 / .10); --kv-border-hover: oklch(100% 0 0 / .22); --kv-green: oklch(80% .24 145); /* Primary */ --kv-green-dim: oklch(65% .18 145); --kv-cyan: oklch(78% .14 200); --kv-violet: oklch(65% .22 295); --kv-orange: oklch(80% .17 75); --kv-red: oklch(65% .22 30); --kv-text: oklch(92% .005 145); --kv-text-dim: oklch(72% .01 145); --kv-text-muted: oklch(58% .01 145); /* Radius-Skala (bewusste Hierarchie) */ --kv-r-xs: 4px; --kv-r-sm: 8px; --kv-r-md: 12px; --kv-r-lg: 18px; --kv-r-xl: 24px; --kv-r-pill: 999px; /* Spacing-Skala */ --kv-sp-1: 4px; --kv-sp-2: 8px; --kv-sp-3: 12px; --kv-sp-4: 16px; --kv-sp-5: 20px; --kv-sp-6: 24px; --kv-sp-8: 32px; --kv-sp-10: 40px; --kv-sp-12: 48px; --kv-sp-16: 64px; --kv-sp-20: 80px; --kv-sp-24: 96px; /* Easing & Timing */ --kv-ease-out: cubic-bezier(.22, 1, .36, 1); --kv-ease-in: cubic-bezier(.55, 0, .68, .25); --kv-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --kv-t-fast: .15s; --kv-t-med: .25s; --kv-t-slow: .45s; /* Z-Layers */ --kv-z-sticky: 100; --kv-z-drawer: 200; --kv-z-modal: 300; --kv-z-toast: 400; --kv-z-overlay: 500; /* Schatten */ --kv-shadow-sm: 0 2px 6px rgba(0,0,0,.20); --kv-shadow-md: 0 4px 14px rgba(0,0,0,.30); --kv-shadow-lg: 0 12px 36px rgba(0,0,0,.45); --kv-shadow-xl: 0 24px 60px rgba(0,0,0,.55); --kv-glow-green: 0 0 0 3px oklch(80% .24 145 / .15), 0 8px 24px oklch(80% .24 145 / .25); /* ═══ Responsive-Foundation v1 (Phase 60, 2026-05-30) ═══ Zentrale Breakpoint-Tokens — diese sind die Source-of-Truth. Media-Queries nutzen dieselben Zahlen konsistent (CSS-Spec erlaubt Custom-Properties NICHT in @media-Queries, daher Zahlen-Duplikation in Code). Werte hier als visueller Anker für Devs. */ --kv-bp-xs: 380px; /* iPhone SE und kleiner */ --kv-bp-sm: 540px; /* großes Mobile */ --kv-bp-md: 768px; /* Tablet portrait */ --kv-bp-lg: 920px; /* Tablet landscape / kleines Laptop */ --kv-bp-xl: 1024px; /* Laptop */ --kv-bp-xxl: 1280px; /* Desktop */ --kv-bp-xxxl:1440px; /* Large Desktop */ /* Fluid-Container & Spacing */ --kv-cx-pad: clamp(16px, 4vw, 32px); /* Section padding-inline */ --kv-cx-pad-tight: clamp(12px, 2.5vw, 20px); --kv-sec-y: clamp(60px, 10vh, 120px); /* Section vertical-spacing */ --kv-sec-y-tight: clamp(40px, 6vh, 80px); --kv-stack-gap: clamp(16px, 3vw, 32px); /* Fluid-Typografie */ --kv-fs-h1: clamp(32px, 6.5vw, 78px); --kv-fs-h2: clamp(26px, 4vw, 46px); --kv-fs-h3: clamp(18px, 2.5vw, 24px); --kv-fs-body: clamp(14px, 1.6vw, 18px); --kv-fs-small: clamp(12px, 1.3vw, 14px); /* Touch-Target Minimum (Apple HIG 44px / Material 48px) */ --kv-tap-min: 48px; } /* ═══ Wiederverwendbare Layout-Utility-Klassen ═══ */ .kv-container{ width:100%; max-width:1280px; margin-inline:auto; padding-inline:var(--kv-cx-pad); } .kv-container-narrow{ width:100%; max-width:920px; margin-inline:auto; padding-inline:var(--kv-cx-pad); } .kv-container-wide{ width:100%; max-width:1440px; margin-inline:auto; padding-inline:var(--kv-cx-pad); } .kv-stack > * + *{ margin-top:var(--kv-stack-gap); } .kv-tap{ min-height:var(--kv-tap-min); min-width:var(--kv-tap-min); } /* Globale Safety-Net: kein H-Scroll wegen Overflow. WICHTIG: overflow-x:clip statt hidden — `hidden` macht zum Scroll-Container und bricht damit `position:sticky` (Header/Warenkorb scrollen weg → auf Mobile war der Cart-Button nicht erreichbar). `clip` kappt H-Overflow OHNE Scroll-Container. */ html{ scroll-behavior:smooth; } body{ overflow-x:clip; } /* ═══════════════════════════════════════════════════════════════════ BUTTONS — 6 Varianten × 3 Größen. Mehr Varianten = inkonsistenter Look. ═══════════════════════════════════════════════════════════════════ */ .kv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--kv-sp-2); font-family: inherit; font-weight: 600; letter-spacing: -.005em; border: 1px solid transparent; border-radius: var(--kv-r-md); cursor: pointer; transition: all var(--kv-t-fast) var(--kv-ease-out); text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; } .kv-btn:focus-visible { outline: 2px solid var(--kv-green); outline-offset: 2px; } .kv-btn:active { transform: scale(.97); transition-duration: 80ms; } .kv-btn[disabled], .kv-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } /* Größen */ .kv-btn-sm { padding: 6px 14px; font-size: 12.5px; min-height: 32px; } .kv-btn-md { padding: 10px 18px; font-size: 14px; min-height: 40px; } .kv-btn-lg { padding: 14px 24px; font-size: 15.5px; min-height: 48px; } /* Varianten */ .kv-btn-primary { background: var(--kv-green); color: oklch(15% .02 160); font-weight: 700; } .kv-btn-primary:hover { background: oklch(85% .24 145); transform: translateY(-2px); box-shadow: var(--kv-glow-green); } .kv-btn-secondary { background: transparent; color: var(--kv-text); border-color: var(--kv-border-hover); } .kv-btn-secondary:hover { border-color: var(--kv-green); color: var(--kv-green); background: oklch(80% .24 145 / .04); } .kv-btn-ghost { background: transparent; color: var(--kv-text-dim); } .kv-btn-ghost:hover { color: var(--kv-text); background: oklch(100% 0 0 / .05); } .kv-btn-link { background: transparent; color: var(--kv-green); padding: 4px 0; min-height: auto; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .kv-btn-link:hover { color: oklch(85% .24 145); } .kv-btn-icon { background: transparent; color: var(--kv-text-dim); border-radius: var(--kv-r-pill); padding: 0; width: 40px; height: 40px; } .kv-btn-icon.kv-btn-sm { width: 32px; height: 32px; } .kv-btn-icon.kv-btn-lg { width: 48px; height: 48px; } .kv-btn-icon:hover { color: var(--kv-text); background: oklch(100% 0 0 / .08); } .kv-btn-pill { background: oklch(100% 0 0 / .04); color: var(--kv-text-dim); border-color: var(--kv-border); border-radius: var(--kv-r-pill); padding: 6px 14px; font-size: 12.5px; font-weight: 600; min-height: 32px; } .kv-btn-pill:hover { color: var(--kv-text); border-color: var(--kv-border-hover); } .kv-btn-pill.is-active { background: oklch(80% .24 145 / .12); color: var(--kv-green); border-color: oklch(80% .24 145 / .42); } /* Loading-State */ .kv-btn[data-loading="true"] { pointer-events: none; position: relative; color: transparent !important; } .kv-btn[data-loading="true"]::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: kv-spin .7s linear infinite; color: oklch(15% .02 160); } @keyframes kv-spin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════════════ PILLS — Standalone-Filter (z.B. „Sie / Du" oder Branche-Auswahl) ═══════════════════════════════════════════════════════════════════ */ .kv-pill-group { display: flex; flex-wrap: wrap; gap: 6px; } .kv-pill-group .kv-btn-pill { margin: 0; } /* ═══════════════════════════════════════════════════════════════════ INPUTS — konsistente Form-Elemente ═══════════════════════════════════════════════════════════════════ */ .kv-input, .kv-textarea, .kv-select { width: 100%; background: var(--kv-bg-elev); border: 1px solid var(--kv-border); color: var(--kv-text); font-family: inherit; font-size: 14px; padding: 10px 14px; border-radius: var(--kv-r-sm); transition: border-color var(--kv-t-fast) var(--kv-ease-out), box-shadow var(--kv-t-fast); min-height: 40px; } .kv-input:focus, .kv-textarea:focus, .kv-select:focus { outline: none; border-color: var(--kv-green); box-shadow: 0 0 0 3px oklch(80% .24 145 / .12); } .kv-textarea { min-height: 88px; resize: vertical; line-height: 1.55; } .kv-input-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--kv-text-dim); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; } /* ═══════════════════════════════════════════════════════════════════ CARDS ═══════════════════════════════════════════════════════════════════ */ .kv-card { background: var(--kv-bg-card); border: 1px solid var(--kv-border); border-radius: var(--kv-r-md); padding: var(--kv-sp-5); transition: border-color var(--kv-t-fast) var(--kv-ease-out), transform var(--kv-t-fast), box-shadow var(--kv-t-fast); } .kv-card-hover:hover { border-color: var(--kv-border-hover); transform: translateY(-2px); box-shadow: var(--kv-shadow-md); } /* ═══════════════════════════════════════════════════════════════════ BADGE / CHIP ═══════════════════════════════════════════════════════════════════ */ .kv-badge { display: inline-flex; align-items: center; gap: 5px; background: oklch(100% 0 0 / .06); border: 1px solid oklch(100% 0 0 / .12); color: var(--kv-text-dim); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--kv-r-pill); } .kv-badge.is-beta { background: oklch(80% .17 75 / .15); color: var(--kv-orange); border-color: oklch(80% .17 75 / .35); } .kv-badge.is-soon { background: oklch(80% .24 145 / .12); color: var(--kv-green); border-color: oklch(80% .24 145 / .32); } .kv-badge.is-live { background: oklch(65% .22 30 / .14); color: var(--kv-red); border-color: oklch(65% .22 30 / .32); } .kv-badge.is-dot::before { content: ''; width: 6px; height: 6px; background: currentColor; border-radius: 50%; } /* ═══════════════════════════════════════════════════════════════════ FOCUS-RING global — Accessibility ═══════════════════════════════════════════════════════════════════ */ *:focus-visible { outline: 2px solid var(--kv-green); outline-offset: 2px; border-radius: var(--kv-r-xs); } /* ═══════════════════════════════════════════════════════════════════ MOTION-PREFERENCE ═══════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }