/* ============================================================= ReloCrate — App (v2 · minimal / full-width / airy) ============================================================= */ /* ============================================================= Admin-Bereich — identisches UI, nur Akzent verschoben (Magenta). Scope auf überschreibt die Akzent-Tokens für alles darunter (inkl. .bg-glow). Steht bewusst nach tokens.css, damit es auch im Dark-Theme greift. ============================================================= */ body.is-admin { --accent: #C7318C; --accent-hover: #B62D80; --accent-press: #A22873; --accent-soft: rgba(199, 49, 140, 0.10); --accent-line: rgba(199, 49, 140, 0.22); --accent-glow: rgba(199, 49, 140, 0.35); } :root[data-theme="dark"] body.is-admin { --accent-soft: rgba(199, 49, 140, 0.18); --accent-line: rgba(199, 49, 140, 0.32); } /* ---- Reset --------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-weight: 400; font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; } input { font: inherit; color: inherit; } svg { display: block; } [hidden] { display: none !important; } ::selection { background: var(--accent-soft); color: var(--accent); } * { scrollbar-width: thin; scrollbar-color: var(--n-200) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-thumb { background: var(--n-200); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; } *::-webkit-scrollbar-thumb:hover { background: var(--n-300); background-clip: content-box; } /* ---- Typo-Helfer --------------------------------------------- */ .h-cond { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; color: var(--text-strong); line-height: var(--lh-tight); } .eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.18em; font-weight: 600; font-size: var(--fs-xs); color: var(--text-faint); } a.eyebrow--link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; transition: color var(--dur-fast) var(--ease); } a.eyebrow--link:hover { color: var(--accent); } .crate-detail__title { display: inline-flex; align-items: center; gap: var(--space-3); } .crate-detail__icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--hairline); color: var(--accent); font-size: 16px; } .mono { font-family: var(--font-mono); font-feature-settings: "tnum"; letter-spacing: -0.01em; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } /* ============================================================= App-Shell + Hintergrund-Glow ============================================================= */ .app { min-height: 100vh; } /* zwei sehr dezente, weiche Glows im Hintergrund */ .bg-glow { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .bg-glow::before, .bg-glow::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5; } .bg-glow::before { width: 620px; height: 620px; top: -260px; right: -120px; background: radial-gradient(circle, var(--accent-glow), transparent 70%); opacity: 0.28; } .bg-glow::after { width: 520px; height: 520px; bottom: -240px; left: 180px; background: radial-gradient(circle, rgba(31,168,144,0.22), transparent 70%); opacity: 0.22; } /* ---- Schwebende Sidebar (ruhig) ------------------------------ */ .sidebar { position: fixed; top: var(--sidebar-gap); left: var(--sidebar-gap); bottom: var(--sidebar-gap); width: var(--sidebar-w); z-index: 40; display: flex; flex-direction: column; padding: var(--space-6) var(--space-4) var(--space-4); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform var(--dur) var(--ease); } .brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-7); } /* Echtes Wortmarken-Logo (hell/invertiert je Theme); Icon-only im eingeklappten Zustand. */ .brand__wordmark { height: 34px; width: auto; max-width: 100%; display: block; } .brand__wordmark--dark { display: none; } :root[data-theme="dark"] .brand__wordmark--light { display: none; } :root[data-theme="dark"] .brand__wordmark--dark { display: block; } .brand__icononly { width: 40px; height: 40px; display: none; flex-shrink: 0; } /* Admin-Sidebar-Marke (Icon-Box + Text) */ .brand__mark { width: 40px; height: 40px; border-radius: 11px; background: linear-gradient(150deg, var(--accent), var(--accent-press)); color: #fff; display: grid; place-items: center; font-size: 17px; box-shadow: 0 6px 16px var(--accent-glow); flex-shrink: 0; } .brand__name { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; font-size: var(--fs-lg); color: var(--text-strong); line-height: 1; } .brand__name b { color: var(--accent); font-weight: 700; } .nav { display: flex; flex-direction: column; gap: 1px; } .nav__label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.16em; font-size: 10px; font-weight: 600; color: var(--text-faint); padding: var(--space-5) var(--space-3) var(--space-2); } .nav__item { display: flex; align-items: center; gap: var(--space-4); padding: 11px var(--space-4); border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); } .nav__item i { font-size: 18px; width: 24px; text-align: center; color: var(--text-faint); transition: color var(--dur-fast) var(--ease); } /* Warn-Punkt (z.B. KI-Guthaben fast aufgebraucht) */ .nav__dot, .tab__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); } .nav__dot { margin-left: auto; } .tab__dot { margin-left: 7px; } .app.is-collapsed .nav__dot { position: absolute; top: 8px; right: 8px; margin: 0; } .nav__item { position: relative; } .nav__item:hover { background: var(--surface-hover); color: var(--text-strong); } .nav__item:hover i { color: var(--text); } .nav__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .nav__item.is-active i { color: var(--accent); } /* Administration: leicht abgesetzt (weiches Admin-Magenta) + „öffnet in neuem Tab"-Marker */ .nav__item--admin { background: rgba(199, 49, 140, 0.08); } .nav__item--admin:hover { background: rgba(199, 49, 140, 0.16); color: var(--text-strong); } .nav__item--admin > i:first-child, .nav__item--admin:hover > i:first-child { color: #C7318C; } .nav__item-ext { margin-left: auto; font-size: 12px; } .nav__item--admin .nav__item-ext { color: #C7318C; opacity: 0.7; } /* Verwaltung + User nach unten schieben */ .sidebar__bottom { margin-top: auto; } .sidebar__foot { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px solid var(--hairline); } .user { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); transition: background var(--dur-fast) var(--ease); } .user:hover { background: var(--surface-hover); } .user__avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--n-800); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 500; flex-shrink: 0; } .user__meta { min-width: 0; line-height: 1.3; } .user__name { font-size: var(--fs-sm); font-weight: 500; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user__mail { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- User-Menü (Account-Switcher + Logout) ------------------- */ .user-menu { position: relative; } .user-menu > summary { list-style: none; cursor: pointer; } .user-menu > summary::-webkit-details-marker { display: none; } .user-menu > summary::marker { content: ""; } .user-menu[open] > summary { background: var(--surface-hover); } .user-pop { position: absolute; bottom: calc(100% + var(--space-2)); left: 0; right: 0; background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: var(--space-2); z-index: 40; animation: userpop-in var(--dur-fast) var(--ease-out); } @keyframes userpop-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .user-pop__label { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.1em; font-size: 10px; font-weight: 600; color: var(--text-faint); padding: var(--space-2) var(--space-3) var(--space-1); } .user-pop__form { margin: 0; } .user-pop__item { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xs); font-size: var(--fs-sm); color: var(--text); text-align: left; background: none; border: none; cursor: pointer; transition: background var(--dur-fast) var(--ease); } .user-pop__item:hover { background: var(--surface-hover); color: var(--text-strong); } .user-pop__item > i { margin-left: 0; font-size: 14px; color: var(--text-faint); width: 16px; text-align: center; } .user-pop__item.is-active { color: var(--text-strong); } .user-pop__item.is-active > i { color: var(--accent); } a.user-pop__item { text-decoration: none; } .user-pop__item .user-pop__acc-go { margin-left: auto; width: auto; color: var(--text-faint); font-size: 13px; } .user-pop__item.is-active:hover .user-pop__acc-go { color: var(--accent); } .user-pop__item--danger:hover { background: var(--danger-soft); color: var(--danger); } .user-pop__item--danger:hover > i { color: var(--danger); } .user-pop__acc { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; } .user-pop__acc-name { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-pop__acc-role { font-size: 11px; color: var(--text-faint); } .user-pop__sep { height: 1px; background: var(--hairline); margin: var(--space-2) 0; } /* ---- Content: volle Breite ----------------------------------- */ .content { position: relative; z-index: 1; margin-left: calc(var(--sidebar-w) + var(--sidebar-gap) * 2); padding: var(--pad-top) var(--pad-x) var(--space-20); min-height: 100vh; } /* ============================================================= Page-Header (grosszügig, ruhig) ============================================================= */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-10); } .page-head__titles { display: flex; flex-direction: column; gap: var(--space-3); } .page-title { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.02em; font-weight: 700; font-size: var(--fs-2xl); color: var(--text-strong); line-height: 1; } .page-meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--fs-sm); color: var(--text-muted); } .page-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--n-300); } .page-meta b { color: var(--text-strong); font-weight: 500; } .page-head__actions { display: flex; align-items: center; gap: var(--space-3); } /* ============================================================= Buttons (reduziert) ============================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 42px; padding: 0 var(--space-5); border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; border: 1px solid transparent; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .btn i { font-size: 14px; } .btn:active { transform: translateY(0.5px); } .btn--primary { background: var(--accent); color: var(--text-on-accent); box-shadow: 0 6px 18px var(--accent-glow); } .btn--primary:hover { background: var(--accent-hover); } .btn--ghost { background: var(--surface); color: var(--text-strong); border-color: var(--hairline-strong); } .btn--ghost:hover { border-color: var(--n-300); background: var(--surface-2); } .btn--quiet { background: transparent; color: var(--text-muted); height: 38px; padding: 0 var(--space-3); } .btn--quiet:hover { background: var(--surface-hover); color: var(--text-strong); } .btn--sm { height: 36px; padding: 0 var(--space-4); } .icon-btn { width: 42px; height: 42px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--surface); border: 1px solid var(--hairline-strong); color: var(--text-muted); font-size: 15px; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); } .icon-btn:hover { color: var(--text-strong); border-color: var(--n-300); background: var(--surface-2); } /* ============================================================= Toolbar (Suche · Filter · View) ============================================================= */ .toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6); flex-wrap: wrap; } .toolbar__spacer { flex: 1; } .result-count { font-size: var(--fs-sm); color: var(--text-faint); } .result-count b { color: var(--text); font-weight: 500; } .search { display: flex; align-items: center; gap: var(--space-3); height: 42px; padding: 0 var(--space-4); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); min-width: 300px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .search:focus-within { border-color: var(--accent-line); box-shadow: var(--ring); } .search i { color: var(--text-faint); font-size: 14px; } .search input { border: none; outline: none; background: none; width: 100%; font-size: var(--fs-sm); } .search input::placeholder { color: var(--text-faint); } .search kbd { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); border: 1px solid var(--hairline-strong); border-radius: 5px; padding: 1px 6px; } /* Segmented / View-Toggle */ .seg { display: inline-flex; padding: 3px; background: var(--n-100); border-radius: var(--radius-sm); } /* Buttons wachsen mit ihrem (Text-)Inhalt; min-width hält reine Icon-Toggles quadratisch. */ .seg button, .seg__btn { min-width: 34px; height: 30px; padding: 0 var(--space-4); border-radius: 7px; color: var(--text-faint); font-size: var(--fs-sm); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); transition: all var(--dur-fast) var(--ease); } .seg button.is-active, .seg__btn.is-active { background: var(--surface); color: var(--text-strong); box-shadow: var(--shadow-xs); } /* [hidden] muss die display-Regel oben schlagen (sonst bleibt der Button sichtbar) – z. B. QR-only-Vorlagen, die labels.js bei anderen Druck-Stilen ausblendet. */ .seg button[hidden], .seg__btn[hidden] { display: none; } /* ============================================================= Custom Inline-Dropdown (ruhig) ============================================================= */ .dropdown { position: relative; } .dropdown__toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--space-3); height: 42px; padding: 0 var(--space-3) 0 var(--space-4); background: var(--surface); border: 1px solid var(--hairline-strong); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-strong); text-align: left; transition: border-color var(--dur-fast) var(--ease); } /* Labels immer linksbündig – nicht zentriert (gilt für Toggle-Wert und Menü-Optionen). */ .dropdown__toggle .value { text-align: left; } .dropdown__toggle:hover { border-color: var(--n-300); } .dropdown.is-open .dropdown__toggle { border-color: var(--accent-line); box-shadow: var(--ring); } .dropdown__toggle .lead { color: var(--text-faint); font-size: 13px; } .dropdown__toggle .chev { color: var(--text-faint); font-size: 11px; transition: transform var(--dur) var(--ease); margin-left: 2px; } .dropdown.is-open .dropdown__toggle .chev { transform: rotate(180deg); } .dropdown__menu { position: absolute; top: calc(100% + 8px); left: 0; display: flex; flex-direction: column; /* Items füllen volle Breite */ min-width: 100%; width: max-content; /* so breit wie längster Eintrag */ background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 7px; z-index: 60; opacity: 0; transform: translateY(-6px) scale(0.985); transform-origin: top; pointer-events: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease-out); } .dropdown__menu--right { left: auto; right: 0; } .dropdown.is-open .dropdown__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .dropdown__opt { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); padding: 9px var(--space-3); border-radius: var(--radius-xs); font-size: var(--fs-sm); color: var(--text); white-space: nowrap; text-align: left; transition: background var(--dur-fast) var(--ease); } .dropdown__opt i:first-child { width: 15px; text-align: center; color: var(--text-faint); font-size: 13px; } .dropdown__opt:hover { background: var(--surface-hover); color: var(--text-strong); } .dropdown__opt .check { margin-left: auto; color: var(--accent); opacity: 0; font-size: 12px; } .dropdown__opt.is-selected { color: var(--text-strong); font-weight: 500; } .dropdown__opt.is-selected .check { opacity: 1; } .dropdown__sep { height: 1px; background: var(--hairline); margin: 6px 4px; } /* ============================================================= Kisten-Liste (volle Breite, luftig) ============================================================= */ /* Schwebende Tabelle: kein Container-Rahmen, kein Hintergrund, kein Gitternetz */ .panel { background: transparent; border: none; box-shadow: none; } .crate-cols { display: grid; grid-template-columns: 26px minmax(220px, 2.2fr) minmax(128px, 1fr) 1.2fr 1fr 44px; align-items: center; gap: var(--space-6); column-gap: var(--space-5); padding: var(--space-4) var(--space-4); } .crate-row { cursor: pointer; } .crate-head { padding-top: 0; padding-bottom: var(--space-3); } .crate-head .col { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.12em; font-size: 10.5px; font-weight: 600; color: var(--text-faint); } .crate-head .col.right, .crate-row .cell.right { justify-self: end; text-align: right; } /* Zeilen ohne Trennlinien – heben sich erst beim Hover als schwebende Kachel ab */ .crate-row { width: 100%; text-align: left; /*