/* ========================================================================== ZENOCITY UI KIT — v1 Quelle: "FiveM Shop UI Design" → Shop v3 (finale Fassung). Alle Werte 1:1 aus v3 übernommen. Einheiten: px, weil die Bühne (1380×820) per transform: scale() skaliert wird — vmin würde nicht mitskalieren. Reihenfolge im : zeno-fonts.css → fontawesome → zeno-theme.css → eigenes CSS. ========================================================================== */ :root { /* --- Marke: Neon-Violett (aus dem ZC-Logo) --- */ --zn-violet-100: #f3d9ff; /* Text auf Preis-Pille */ --zn-violet-300: #dd62ff; /* Akzent-Text, Icons, Links, Hover-Stufe des CTA */ --zn-violet-500: #c300ff; /* PRIMÄR: aktive Flächen, Badges, CTA */ --zn-violet-600: #9d00d0; /* CTA-Verlauf unten */ --zn-violet-700: #720068; /* tiefes Magenta: Scrollbar, Aurora, Empty-Icon, Active-Press */ --zn-violet-800: #5c0054; /* Preis-Pille oben */ --zn-violet-900: #3a0036; /* Preis-Pille unten */ /* Violett-Tints (immer von #c300ff = 195,0,255) */ --zn-tint-06: rgba(195,0,255,0.06); --zn-tint-07: rgba(195,0,255,0.07); --zn-tint-09: rgba(195,0,255,0.09); --zn-tint-10: rgba(195,0,255,0.10); --zn-tint-12: rgba(195,0,255,0.12); --zn-tint-15: rgba(195,0,255,0.15); --zn-tint-16: rgba(195,0,255,0.16); --zn-tint-30: rgba(195,0,255,0.30); --zn-ring-hover: rgba(195,0,255,0.35); --zn-ring-focus: rgba(195,0,255,0.50); --zn-ring-active: rgba(195,0,255,0.55); --zn-ring-select: rgba(195,0,255,0.60); /* --- Text (violett-stichige Neutraltöne, nie reines Grau) --- */ --zn-text: #f1ebf4; /* Primärtext */ --zn-text-2: #c9bcd1; /* Sekundär, Dropdown-Einträge */ --zn-text-muted: #8d7f96; /* Meta, inaktive Nav, Stepper */ --zn-text-dim: #6f6278; /* Placeholder, Kicker, Nebeninfo */ --zn-text-faint: #5a4d63; /* Sektionslabels, Counts */ /* --- Flächen --- */ --zn-bg-void: #050407; /* nur Browser-Vorschau, in NUI transparent */ --zn-surface-1: #140e18; /* Toast */ --zn-surface-2: #18131c; /* Dropdown-Menü */ --zn-card-top: #1e1922; --zn-card-bottom: #141117; --zn-well-in: #141018; --zn-well-out: #070509; --zn-aside-bg: rgba(0,0,0,0.22); --zn-fill-1: rgba(255,255,255,0.03); /* Listen-Zeile, inaktive Kachel */ --zn-fill-2: rgba(255,255,255,0.035); /* Input / Select */ --zn-fill-3: rgba(255,255,255,0.04); /* inaktive Icon-Box */ --zn-fill-4: rgba(255,255,255,0.05); /* Stepper */ --zn-fill-hover: rgba(255,255,255,0.06); --zn-line: rgba(255,255,255,0.05); --zn-line-2: rgba(255,255,255,0.06); /* --- Status --- */ --zn-ok: #5ee39a; --zn-warn: #ffb347; --zn-err: #ff4d6d; --zn-danger: #ff5c7a; /* Hover auf destruktiven Aktionen (Leeren) */ /* --- Typo --- */ --zn-font-display: 'Chakra Petch', sans-serif; --zn-font-body: 'Barlow', sans-serif; /* --- Radien --- */ --zn-r-xs: 6px; /* Stepper */ --zn-r-sm: 7px; /* Menü-Eintrag */ --zn-r-md: 8px; /* Input, Icon-Box, Kachel */ --zn-r-lg: 10px; /* Zeile, Well, Toast, CTA, Menü */ --zn-r-xl: 12px; /* Bühne / Panel */ --zn-r-2xl: 14px; /* Item-Karte */ --zn-r-full: 999px; /* --- Bewegung --- */ --zn-ease-out: ease-out; --zn-t-fast: .18s; /* Dropdown, Tilt */ --zn-t-med: .2s; /* Farbe, Ring */ --zn-t-slow: .25s; /* Icon-Box, Chevron */ } /* ========================================================================== Basis ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } /* sonst gewinnt display:flex der Komponenten */ html, body { margin: 0; background: transparent; /* NUI: Spiel muss durchscheinen */ color: var(--zn-text); font-family: var(--zn-font-body); -webkit-font-smoothing: antialiased; user-select: none; } body.zn-preview { background: var(--zn-bg-void); } /* nur im Browser */ button { font: inherit; color: inherit; background: transparent; border: none; cursor: pointer; } input { font: inherit; } a { color: var(--zn-violet-300); } a:hover { color: #fff; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-thumb { background: var(--zn-violet-700); border-radius: 2px; } ::-webkit-scrollbar-track { background: transparent; } input::placeholder { color: var(--zn-text-dim); } select option { background: var(--zn-surface-1); color: var(--zn-text); } /* ========================================================================== Animationen (exakt v3) ========================================================================== */ @keyframes zn-rowIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } @keyframes zn-toastIn { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } } @keyframes zn-dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes zn-popIn { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* Ergänzungen im selben Geist (nicht in v3, für Öffnen/Schließen der Bühne) */ @keyframes zn-stageIn { from { opacity: 0; transform: scale(calc(var(--zn-scale,1) * 0.97)); } to { opacity: 1; transform: scale(var(--zn-scale,1)); } } @keyframes zn-stageOut { from { opacity: 1; transform: scale(var(--zn-scale,1)); } to { opacity: 0; transform: scale(calc(var(--zn-scale,1) * 0.97)); } } .zn-anim-row { animation: zn-rowIn .3s ease-out; } .zn-anim-drop { animation: zn-dropIn .18s ease-out; } .zn-anim-pop { animation: zn-popIn .25s ease-out; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } } /* ========================================================================== Bühne — fester 1380×820-Rahmen, per JS skaliert (--zn-scale) ========================================================================== */ .zn-viewport { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; /* nur die Bühne fängt Klicks */ } .zn-viewport.is-hidden { display: none; } .zn-stage { position: relative; flex-shrink: 0; width: 1380px; height: 820px; transform: scale(var(--zn-scale, 1)); transform-origin: center; display: grid; grid-template-rows: auto minmax(0, 1fr); border-radius: var(--zn-r-xl); overflow: hidden; pointer-events: auto; /* DER Zeno-Hintergrund: violette Aurora oben links + dunkler Diagonal-Verlauf */ background: radial-gradient(ellipse 120% 80% at 30% -10%, rgba(114,0,104,0.38), transparent 65%), linear-gradient(165deg, #1a1220 0%, #110d15 40%, #0c0a0f 75%, #0a080c 100%); box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 40px 90px rgba(0,0,0,0.7); } .zn-stage.is-opening { animation: zn-stageIn .28s cubic-bezier(.2,.8,.2,1) both; } .zn-stage.is-closing { animation: zn-stageOut .18s ease-in both; } /* Punktraster, das nach unten rechts ausblendet */ .zn-dots { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255,255,255,0.075) 1px, transparent 1.3px); background-size: 18px 18px; -webkit-mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.3) 100%); mask-image: linear-gradient(160deg, #000 0%, rgba(0,0,0,0.75) 45%, rgba(0,0,0,0.3) 100%); } /* Optional: Filmkorn (img/grain.png, weißes Rauschen, Alpha ≤ 8 %) */ .zn-grain { position: absolute; inset: 0; pointer-events: none; background-image: url('../img/grain.png'); background-size: 160px 160px; opacity: .6; mix-blend-mode: overlay; } /* Alles, was über Dots/Grain liegen soll */ .zn-layer { position: relative; } /* ========================================================================== Header ========================================================================== */ .zn-header { position: relative; display: flex; align-items: center; gap: 22px; padding: 22px 28px; } .zn-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--zn-line-2); } /* Parallelogramm-Badge — greift die Schräge des Z im Logo auf */ .zn-badge { width: 52px; height: 52px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--zn-violet-500), var(--zn-violet-700)); clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); color: #fff; font-size: 20px; } .zn-title { font-family: var(--zn-font-display); font-weight: 700; font-size: 24px; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; } .zn-meta { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--zn-text-muted); } .zn-meta > span { display: flex; align-items: center; gap: 6px; } .zn-meta i { color: var(--zn-violet-300); font-size: 11px; } .zn-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--zn-ok); } .zn-dot--warn { background: var(--zn-warn); } .zn-dot--err { background: var(--zn-err); } .zn-close { width: 44px; height: 44px; margin-left: 6px; color: var(--zn-text-muted); font-size: 20px; transition: color var(--zn-t-med); } .zn-close:hover { color: #fff; } .zn-spacer { flex: 1; } /* ========================================================================== Body-Layout: Nav | Main | Aside ========================================================================== */ .zn-body { position: relative; display: grid; grid-template-columns: 200px minmax(0,1fr) 360px; min-height: 0; } .zn-body--2col { grid-template-columns: 200px minmax(0,1fr); } .zn-main { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--zn-line); } .zn-aside { display: flex; flex-direction: column; min-height: 0; background: var(--zn-aside-bg); border-left: 1px solid var(--zn-line); } .zn-scroll { flex: 1; min-height: 0; overflow-y: auto; } /* ========================================================================== Seiten-Navigation (Kategorien) ========================================================================== */ .zn-nav { display: flex; flex-direction: column; gap: 4px; padding: 20px 12px; overflow-y: auto; } .zn-label { font-size: 11px; color: var(--zn-text-faint); letter-spacing: 0.16em; text-transform: uppercase; } .zn-nav > .zn-label { padding: 0 14px 10px; } .zn-nav-item { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 10px; color: var(--zn-text-muted); text-align: left; font-family: var(--zn-font-display); font-weight: 600; font-size: 15px; transition: color var(--zn-t-med); } .zn-nav-item:hover { color: #fff; } .zn-nav-icon { width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--zn-r-md); display: flex; align-items: center; justify-content: center; background: var(--zn-fill-3); color: var(--zn-text-dim); font-size: 13px; transition: background var(--zn-t-slow), box-shadow var(--zn-t-slow), color var(--zn-t-slow); } .zn-nav-item > .zn-nav-text { flex: 1; } .zn-nav-count { font-family: var(--zn-font-body); font-size: 12px; color: var(--zn-text-faint); } .zn-nav-item.is-active { color: #fff; } .zn-nav-item.is-active .zn-nav-icon { background: var(--zn-violet-500); color: #fff; box-shadow: 0 4px 14px rgba(195,0,255,0.35); } /* Variante laut Referenz-Screenshot: getönte Zeile + Leuchtbalken links */ .zn-nav--bar .zn-nav-item { position: relative; border-radius: var(--zn-r-md); } .zn-nav--bar .zn-nav-item.is-active { background: linear-gradient(90deg, rgba(195,0,255,0.18), rgba(195,0,255,0.06)); } .zn-nav--bar .zn-nav-item.is-active::before { content: ''; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 2px; background: var(--zn-violet-500); box-shadow: 0 0 10px rgba(195,0,255,0.8); } .zn-nav--bar .zn-nav-item.is-active .zn-nav-icon { background: transparent; box-shadow: none; color: var(--zn-violet-300); } /* ========================================================================== Toolbar (Titel + Suche + Sortierung) ========================================================================== */ .zn-toolbar { display: flex; align-items: center; gap: 16px; padding: 20px 24px 16px; } .zn-h2 { font-family: var(--zn-font-display); font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.05em; } .zn-h3 { font-family: var(--zn-font-display); font-weight: 700; font-size: 18px; text-transform: uppercase; letter-spacing: 0.05em; } .zn-sub { font-size: 13px; color: var(--zn-text-dim); } .zn-field { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; border-radius: var(--zn-r-md); background: var(--zn-fill-2); color: var(--zn-text-dim); box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--zn-t-med); } .zn-field:focus-within { box-shadow: inset 0 0 0 1px var(--zn-ring-focus); } .zn-field i { font-size: 13px; } .zn-field input { width: 170px; height: 38px; border: none; background: transparent; outline: none; color: var(--zn-text); font-family: var(--zn-font-body); font-size: 14px; } /* Dropdown */ .zn-select { position: relative; z-index: 5; } .zn-select-btn { display: flex; align-items: center; gap: 10px; height: 40px; min-width: 190px; padding: 0 14px; border-radius: var(--zn-r-md); background: var(--zn-fill-2); color: var(--zn-text-2); font-size: 14px; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow var(--zn-t-med), background var(--zn-t-med); } .zn-select-btn:hover { background: var(--zn-fill-hover); } .zn-select-btn > i:first-child { font-size: 13px; color: var(--zn-violet-300); } .zn-select-btn > span { flex: 1; text-align: left; } .zn-select-chev { font-size: 11px; color: var(--zn-text-dim); transition: transform var(--zn-t-slow); } .zn-select.is-open .zn-select-btn { box-shadow: inset 0 0 0 1px var(--zn-ring-focus); } .zn-select.is-open .zn-select-chev { transform: rotate(180deg); } .zn-menu { position: absolute; top: 46px; right: 0; min-width: 210px; padding: 6px; display: none; flex-direction: column; gap: 2px; border-radius: var(--zn-r-lg); background: var(--zn-surface-2); box-shadow: 0 18px 40px rgba(0,0,0,0.6), inset 0 0 0 1px var(--zn-line-2); } .zn-select.is-open .zn-menu { display: flex; animation: zn-dropIn .18s ease-out; } .zn-menu-item { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border-radius: var(--zn-r-sm); color: var(--zn-text-2); font-size: 14px; text-align: left; } .zn-menu-item > i:first-child { width: 14px; font-size: 12px; color: var(--zn-text-dim); } .zn-menu-item > span { flex: 1; } .zn-menu-item .zn-check { display: none; font-size: 11px; color: var(--zn-violet-300); } .zn-menu-item:hover { background: var(--zn-tint-12); color: #fff; } .zn-menu-item.is-active { background: var(--zn-tint-10); color: #fff; } .zn-menu-item.is-active > i:first-child { color: var(--zn-violet-300); } .zn-menu-item.is-active .zn-check { display: inline; } /* ========================================================================== Item-Karte mit 3D-Tilt (Herzstück) ========================================================================== */ .zn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; } .zn-card-wrap { perspective: 700px; } .zn-card { --zn-ring: rgba(255,255,255,0.05); position: relative; display: flex; flex-direction: column; gap: 10px; padding: 8px 8px 12px; border-radius: var(--zn-r-2xl); background: linear-gradient(180deg, var(--zn-card-top), var(--zn-card-bottom)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.07), inset 0 0 0 1px var(--zn-ring), 0 14px 28px rgba(0,0,0,0.45); transition: transform .18s ease-out, box-shadow .2s; cursor: pointer; will-change: transform; } .zn-card:hover { --zn-ring: var(--zn-ring-hover); } .zn-card.is-active { --zn-ring: var(--zn-ring-active); } /* Eingelassene Vitrine */ .zn-well { position: relative; height: 124px; border-radius: var(--zn-r-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 40%, var(--zn-well-in), var(--zn-well-out) 75%); box-shadow: inset 0 4px 14px rgba(0,0,0,0.95), inset 0 -1px 0 rgba(255,255,255,0.05); } .zn-well-shadow { position: absolute; left: 50%; bottom: 20px; width: 70px; height: 12px; margin-left: -35px; border-radius: 50%; background: rgba(0,0,0,0.7); filter: blur(5px); transition: transform .18s ease-out; } /* FA-Icon mit Silber→Lila-Verlauf */ .zn-well-icon { position: relative; font-size: 48px; background: linear-gradient(180deg, #ffffff 20%, #d7b8e6 60%, #9c6fb3); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.75)); transition: transform .18s ease-out; } /* Ingame: echtes Item-PNG statt Icon (siehe references/ingame-item-card.png) */ .zn-well-img { position: relative; max-width: 78%; max-height: 96px; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0,0,0,0.75)); transition: transform .18s ease-out; } .zn-qty { position: absolute; top: 8px; right: 8px; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--zn-violet-500); color: #fff; font-family: var(--zn-font-display); font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; animation: zn-popIn .25s ease-out; } .zn-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 0 6px; } .zn-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .zn-kicker { font-family: var(--zn-font-display); font-weight: 600; font-size: 10px; color: var(--zn-text-dim); letter-spacing: 0.16em; text-transform: uppercase; } .zn-card-name { font-family: var(--zn-font-display); font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Preis-Pille: tiefes Magenta, gewölbt */ .zn-price { flex-shrink: 0; padding: 5px 11px; border-radius: var(--zn-r-full); background: linear-gradient(180deg, var(--zn-violet-800), var(--zn-violet-900)); box-shadow: inset 0 0 0 1px rgba(221,98,255,0.3), inset 0 1px 0 rgba(255,255,255,0.08); font-family: var(--zn-font-display); font-weight: 700; font-size: 13px; color: var(--zn-violet-100); } /* ========================================================================== Seitenleiste: Kopf, Zeilen, Stepper, Auswahl-Kacheln, Summe, CTA ========================================================================== */ .zn-aside-head { display: flex; align-items: center; gap: 12px; padding: 20px 22px 14px; } .zn-aside-head > i { color: var(--zn-violet-500); font-size: 16px; } .zn-chip { padding: 1px 8px; border-radius: 10px; background: var(--zn-tint-16); font-family: var(--zn-font-display); font-weight: 600; font-size: 12px; color: var(--zn-violet-300); } .zn-btn-link { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px; color: var(--zn-text-dim); font-size: 13px; transition: color var(--zn-t-med); } .zn-btn-link i { font-size: 12px; } .zn-btn-link:hover { color: #fff; } .zn-btn-link--danger:hover { color: var(--zn-danger); } .zn-list { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 0 22px; } .zn-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px; border-radius: var(--zn-r-lg); background: var(--zn-fill-1); animation: zn-rowIn .3s ease-out; } .zn-row-thumb { width: 42px; height: 42px; border-radius: var(--zn-r-md); display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--zn-text); background: radial-gradient(circle at 50% 100%, rgba(195,0,255,0.3), rgba(195,0,255,0.06)); } .zn-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .zn-row-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zn-row-sub { font-size: 12px; color: var(--zn-text-dim); } .zn-row-end { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .zn-num { font-family: var(--zn-font-display); font-weight: 700; font-size: 14px; } .zn-stepper { display: flex; align-items: center; border-radius: var(--zn-r-xs); background: var(--zn-fill-4); } .zn-stepper button { width: 26px; height: 24px; color: var(--zn-text-muted); font-size: 10px; transition: color var(--zn-t-med); } .zn-stepper button:hover { color: #fff; } .zn-stepper span { min-width: 20px; text-align: center; font-family: var(--zn-font-display); font-weight: 700; font-size: 13px; } .zn-footer { display: flex; flex-direction: column; gap: 14px; padding: 18px 22px 22px; border-top: 1px solid var(--zn-line); } /* Auswahl-Kachel (Bargeld/Karte etc.) */ .zn-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .zn-choice { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--zn-r-md); background: var(--zn-fill-1); color: var(--zn-text); text-align: left; box-shadow: inset 0 0 0 1px transparent; transition: background var(--zn-t-med), box-shadow var(--zn-t-med); } .zn-choice > i { font-size: 15px; color: var(--zn-violet-300); } .zn-choice-text { display: flex; flex-direction: column; gap: 1px; } .zn-choice-title { font-family: var(--zn-font-display); font-weight: 600; font-size: 14px; } .zn-choice-sub { font-size: 11px; color: var(--zn-text-muted); } .zn-choice.is-selected { background: var(--zn-tint-09); box-shadow: inset 0 0 0 1px var(--zn-ring-select); } .zn-choice--ok > i { color: var(--zn-ok); } .zn-choice--ok.is-selected { background: rgba(94,227,154,0.07); box-shadow: inset 0 0 0 1px rgba(94,227,154,0.55); } .zn-total { display: flex; justify-content: space-between; align-items: baseline; padding-top: 2px; } .zn-total-label { font-size: 12px; color: var(--zn-text-muted); letter-spacing: 0.14em; text-transform: uppercase; } .zn-total-value { font-family: var(--zn-font-display); font-weight: 700; font-size: 30px; font-variant-numeric: tabular-nums; } /* Primär-CTA */ .zn-btn-primary { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; padding: 0 22px; border-radius: var(--zn-r-lg); color: #fff; background: linear-gradient(180deg, var(--zn-violet-500), var(--zn-violet-600)); font-family: var(--zn-font-display); font-weight: 700; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase; transition: opacity var(--zn-t-med); } .zn-btn-primary > i { font-size: 13px; } .zn-btn-primary:hover { background: linear-gradient(180deg, var(--zn-violet-300), var(--zn-violet-500)); } .zn-btn-primary:active { background: var(--zn-violet-700); } .zn-btn-primary:disabled, .zn-btn-primary.is-disabled { opacity: .35; pointer-events: none; } /* Sekundär-Button (ergänzt, gleiche Formsprache wie Input/Select) */ .zn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 40px; padding: 0 16px; border-radius: var(--zn-r-md); background: var(--zn-fill-2); color: var(--zn-text-2); font-family: var(--zn-font-display); font-weight: 600; font-size: 14px; box-shadow: inset 0 0 0 1px transparent; transition: background var(--zn-t-med), box-shadow var(--zn-t-med), color var(--zn-t-med); } .zn-btn:hover { background: var(--zn-fill-hover); color: #fff; box-shadow: inset 0 0 0 1px var(--zn-ring-hover); } /* Fortschritt (Gewicht, Kapazität …) */ .zn-progress { height: 4px; border-radius: 2px; background: rgba(255,255,255,0.07); overflow: hidden; } .zn-progress > div { height: 100%; background: linear-gradient(90deg, var(--zn-violet-700), var(--zn-violet-500)); transition: width .4s ease-out; } .zn-progress.is-warn > div { background: var(--zn-warn); } .zn-progress.is-over > div { background: var(--zn-err); } /* ========================================================================== Leerzustände ========================================================================== */ .zn-empty { margin: auto 0; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .zn-empty-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--zn-tint-07); color: var(--zn-violet-700); font-size: 28px; } .zn-empty-title { font-weight: 600; font-size: 15px; color: var(--zn-text-2); } .zn-empty-text { font-size: 13px; color: var(--zn-text-dim); } .zn-noresults { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 80px 0; color: var(--zn-text-dim); } .zn-noresults i { font-size: 32px; } /* ========================================================================== Toast (oben mittig, 2,8 s) ========================================================================== */ .zn-toast { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 14px; border-radius: var(--zn-r-lg); background: var(--zn-surface-1); box-shadow: 0 12px 30px rgba(0,0,0,0.5), inset 0 0 0 1px var(--zn-line); animation: zn-toastIn .3s ease-out; pointer-events: auto; z-index: 50; } .zn-toast-icon { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; background: var(--zn-tint-15); color: var(--zn-violet-300); } .zn-toast.is-error .zn-toast-icon { background: rgba(255,77,109,0.15); color: var(--zn-err); } .zn-toast-text { display: flex; flex-direction: column; gap: 1px; } .zn-toast-title { font-family: var(--zn-font-display); font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; } .zn-toast-msg { font-size: 13px; color: var(--zn-text-muted); }