@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 400 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; } :root { --bg: #edf0ec; --surface: #fbfcfa; --surface-2: #f3f6f2; --ink: #15211b; --muted: #5b6961; --line: #d3dad4; --line-strong: #b9c3bb; --accent: #0f5c46; --accent-ink: #0a4433; --accent-soft: #dcebe3; --side: #0f3d31; --side-ink: #dbe8e0; --ok: #1b7244; --ok-soft: #dcefe3; --warn: #8a590f; --warn-soft: #f6e8c9; --bad: #a93226; --bad-soft: #f5dcd8; --info: #2c5a86; --info-soft: #dbe6f2; --on-accent: #fff; --accent-hover: #0a4433; --link: var(--accent); --bad-solid: #a93226; --on-solid: #fff; --input-bg: #fff; --placeholder: #69766e; --danger-line: #d9aaa4; --off-soft: #e4e8e5; --chip-on-line: #b6d3c4; --guilloche: rgba(15, 92, 70, .045); --ticket-shadow: 0 1px 0 rgba(15, 61, 49, .06); --code-bg: #14231d; --code-ink: #d8e8de; --code-btn-bg: #22382f; --code-btn-line: #37524a; --toast-bg: #15211b; --toast-ink: #fff; --dialog-shadow: 0 18px 50px rgba(10, 30, 22, .28); --backdrop: rgba(15, 33, 27, .45); --side-border: transparent; --dev: #5b3fa0; --dev-soft: #ece6f7; --dev-line: #cdbfe9; --dev-solid: #5b3fa0; --on-dev-solid: #fff; color-scheme: light; --radius: 5px; --sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; } /* ---------- Dunkles Design (gesetzt über , siehe js/theme.js) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0d1512; --surface: #141f1a; --surface-2: #1a2821; --ink: #e6eee8; --muted: #94a79c; --line: #263630; --line-strong: #37493f; --accent: #34a87e; --accent-ink: #8fe3c1; --accent-soft: rgba(52, 168, 126, .16); --accent-hover: #55c79b; --on-accent: #05130c; --link: #63d0a5; --side: #09100d; --side-ink: #dbe8e0; --side-border: #1c2a24; --ok: #5fcf9c; --ok-soft: rgba(95, 207, 156, .15); --warn: #e6b04f; --warn-soft: rgba(230, 176, 79, .15); --bad: #f2887c; --bad-soft: rgba(242, 136, 124, .15); --info: #82b4ea; --info-soft: rgba(130, 180, 234, .15); --bad-solid: #b93a2d; --on-solid: #fff; --input-bg: #0f1a15; --placeholder: #7b8e83; --danger-line: #6b332d; --off-soft: #22302a; --chip-on-line: #2f5a49; --guilloche: rgba(120, 200, 165, .06); --ticket-shadow: 0 1px 0 rgba(0, 0, 0, .4); --code-bg: #0a120e; --code-ink: #cfe3d6; --code-btn-bg: #1b2b23; --code-btn-line: #2f453a; --dev: #c4acf6; --dev-soft: rgba(196, 172, 246, .15); --dev-line: #4b3a7a; --dev-solid: #4a3789; --on-dev-solid: #f1eafe; --toast-bg: #e6eee8; --toast-ink: #0d1512; --dialog-shadow: 0 18px 50px rgba(0, 0, 0, .6); --backdrop: rgba(3, 8, 6, .65); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); font-feature-settings: "ss01" 1; } h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; } h1 { font-size: 26px; } h2 { font-size: 18px; } h3 { font-size: 15px; } p { margin: 0; } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--accent-hover); } .mono { font-family: var(--mono); font-size: 0.92em; } .muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; } .nowrap { white-space: nowrap; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; } /* ---------- Layout ---------- */ .app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .side { background: var(--side); color: var(--side-ink); padding: 22px 14px; display: flex; flex-direction: column; gap: 26px; position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--side-border); } .brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; color: #fff; } .brand svg { flex: none; } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius); color: var(--side-ink); text-decoration: none; font-weight: 500; } .nav a:hover { background: rgba(255,255,255,.07); color: #fff; } .nav a[aria-current="page"] { background: rgba(255,255,255,.14); color: #fff; } .nav svg { width: 18px; height: 18px; flex: none; opacity: .85; } .side-foot { margin-top: auto; padding: 0 8px; font-size: 13px; color: #a9c0b3; display: grid; gap: 8px; } .side-foot button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: var(--side-ink); } .side-foot button:focus-visible { outline: 2px solid #fff; } .main { padding: 34px clamp(18px, 4vw, 48px) 80px; max-width: 1180px; width: 100%; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 26px; } .page-head .sub { color: var(--muted); margin-top: 4px; } .back { display: inline-block; margin-bottom: 10px; font-size: 14px; text-decoration: none; } .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } section.block { margin-top: 34px; } section.block > header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } section.block > header p { color: var(--muted); font-size: 14px; } /* ---------- Buttons & Formulare ---------- */ .btn { font: inherit; font-weight: 550; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); text-decoration: none; line-height: 1.3; } .btn:hover { border-color: var(--ink); color: var(--ink); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); } .btn.danger { color: var(--bad); border-color: var(--danger-line); } .btn.danger:hover { background: var(--bad-solid); border-color: var(--bad-solid); color: var(--on-solid); } .btn.small { padding: 4px 10px; font-size: 13px; } .btn.link { border: 0; background: none; padding: 2px 4px; color: var(--link); text-decoration: underline; text-underline-offset: 2px; font-weight: 500; } .btn[disabled] { opacity: .5; cursor: not-allowed; } .field { display: grid; align-content: start; gap: 5px; margin-bottom: 14px; min-width: 0; } .field > label, .field > .lbl { font-weight: 550; font-size: 14px; } .field .hint { font-size: 13px; color: var(--muted); } input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], input[type=search], select, textarea { font: inherit; color: var(--ink); background: var(--input-bg); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 8px 10px; width: 100%; min-width: 0; } textarea { min-height: 84px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: var(--accent); } input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; } input::placeholder, textarea::placeholder { color: var(--placeholder); } .check { display: flex; align-items: center; gap: 8px; font-weight: 450; } .grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; align-items: start; } .grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; align-items: start; } .inline { display: flex; gap: 8px; align-items: center; } .inline > * { min-width: 0; } .err { color: var(--bad); font-size: 14px; margin: 4px 0 12px; min-height: 0; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .panel + .panel { margin-top: 16px; } /* ---------- Tabellen ---------- */ .table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } table { border-collapse: collapse; width: 100%; font-size: 14.5px; } th { text-align: left; font-weight: 600; font-size: 13px; color: var(--muted); padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; } td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } tr:last-child td { border-bottom: 0; } tbody tr.row-link { cursor: pointer; } tbody tr.row-link:hover td { background: var(--surface-2); } td .sub { color: var(--muted); font-size: 13px; } .empty { padding: 36px 22px; text-align: center; color: var(--muted); } .empty strong { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; } /* ---------- Status ---------- */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 8px; border-radius: 999px; font-size: 13px; font-weight: 550; white-space: nowrap; } .pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .pill.ok { background: var(--ok-soft); color: var(--ok); } .pill.warn { background: var(--warn-soft); color: var(--warn); } .pill.bad { background: var(--bad-soft); color: var(--bad); } .pill.info { background: var(--info-soft); color: var(--info); } .pill.off { background: var(--off-soft); color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { font-size: 13px; padding: 2px 9px; border-radius: 4px; border: 1px solid var(--line); background: var(--surface); } .chip.on { background: var(--accent-soft); border-color: var(--chip-on-line); color: var(--accent-ink); font-weight: 550; } .chip.off { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); } /* ---------- Übersicht ---------- */ .tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .tally a { padding: 18px 20px; text-decoration: none; color: var(--ink); background: var(--surface); display: grid; gap: 2px; } .tally a:hover { background: var(--surface-2); } .tally .n { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; } .tally .l { color: var(--muted); font-size: 14px; } .tally a.warn .n { color: var(--warn); } .tally a.bad .n { color: var(--bad); } .tally a.ok .n { color: var(--ok); } .facts { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 14px; color: var(--muted); font-size: 14px; } .facts b { color: var(--ink); font-weight: 600; } .log { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .log li { display: grid; grid-template-columns: 150px 1fr; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 14px; } .log li:last-child { border-bottom: 0; } .log time { color: var(--muted); font-size: 13px; padding-top: 1px; } .log .who { color: var(--muted); } /* ---------- Lizenz-Ticket ---------- */ .ticket { display: grid; grid-template-columns: minmax(0, 1fr) 272px; position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--ticket-shadow); } .ticket-main { padding: 26px 30px 26px; min-width: 0; background-image: repeating-radial-gradient(circle at 100% 0, transparent 0 9px, var(--guilloche) 9px 10px); } .ticket-meta { display: flex; gap: 18px; flex-wrap: wrap; color: var(--muted); font-size: 14px; } .ticket-meta b { color: var(--ink); font-weight: 600; } .keyline { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; flex-wrap: wrap; } .keyline .key { font-family: var(--mono); font-weight: 600; font-size: clamp(20px, 3.6vw, 30px); letter-spacing: 0.04em; color: var(--accent-ink); word-break: break-all; } .ticket-cust { font-size: 17px; font-weight: 550; } .ticket-cust span { font-weight: 400; color: var(--muted); font-size: 14px; margin-left: 8px; } .ticket-stub { border-left: 2px dashed var(--line-strong); padding: 22px 24px; position: relative; display: grid; gap: 12px; align-content: start; background: var(--surface-2); } .ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; left: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-strong); } .ticket-stub::before { top: -11px; } .ticket-stub::after { bottom: -11px; } .stamp { justify-self: start; border: 2px solid currentColor; border-radius: 4px; padding: 3px 12px; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(-3deg); opacity: .92; } .stamp.ok { color: var(--ok); } .stamp.warn { color: var(--warn); } .stamp.bad { color: var(--bad); } .stamp.info { color: var(--info); } .stub-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; } .stub-row span:first-child { color: var(--muted); } .stub-row b { font-weight: 600; text-align: right; } .flash { border: 1px solid var(--chip-on-line); background: var(--accent-soft); color: var(--accent-ink); border-radius: var(--radius); padding: 12px 16px; margin-bottom: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } /* ---------- Schema / Editor ---------- */ .defs { display: grid; gap: 8px; } .def-row { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(140px, 1.4fr) 190px auto; gap: 8px; align-items: center; } .def-row.head { color: var(--muted); font-size: 13px; font-weight: 600; } .matrix { display: grid; grid-template-columns: minmax(140px, 1.3fr) minmax(130px, 1fr) minmax(130px, 1fr); gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--input-bg); } .matrix > div { padding: 9px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; min-width: 0; } .matrix > .h { background: var(--surface-2); font-weight: 600; font-size: 13px; color: var(--muted); } .matrix > div:nth-last-child(-n+3) { border-bottom: 0; } .matrix small { color: var(--muted); font-size: 12.5px; display: block; } .matrix input[type=number] { width: 92px; } pre.code { margin: 0; padding: 14px 16px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--line); border-radius: var(--radius); font: 13px/1.55 var(--mono); overflow-x: auto; white-space: pre; } .copyable { position: relative; } .copyable .btn { position: absolute; top: 8px; right: 8px; background: var(--code-btn-bg); color: var(--code-ink); border-color: var(--code-btn-line); } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; overflow-x: auto; } .tabs a { padding: 9px 14px; text-decoration: none; color: var(--muted); font-weight: 550; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; } .tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .filters { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; color: var(--muted); font-size: 14px; } /* ---------- Login ---------- */ .login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; } .login { width: min(400px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 30px 30px 26px; position: relative; overflow: hidden; } .login::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--accent); } .login h1 { font-size: 24px; margin: 6px 0 4px; } .login .sub { color: var(--muted); margin-bottom: 22px; } /* ---------- Dialog, Toast ---------- */ dialog { border: 1px solid var(--line-strong); border-radius: 8px; padding: 22px 24px; width: min(440px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: var(--dialog-shadow); } dialog::backdrop { background: var(--backdrop); } dialog h3 { font-size: 18px; margin-bottom: 8px; } dialog .btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } #toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 8px; z-index: 50; max-width: calc(100vw - 36px); } .toast { background: var(--toast-bg); color: var(--toast-ink); padding: 10px 16px; border-radius: var(--radius); font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .toast.bad { background: var(--bad-solid); color: var(--on-solid); } @media (prefers-reduced-motion: no-preference) { .toast { animation: toast-in .18s ease-out; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } } } /* ---------- Entwicklungslizenz (fest eingebaute Funktion "dev") ---------- */ .pill.dev { background: var(--dev-soft); color: var(--dev); } .pill.tiny { font-size: 11.5px; padding: 1px 8px 1px 7px; margin-left: 8px; vertical-align: 1px; } .dev-band { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 4px 16px; flex-wrap: wrap; padding: 7px 26px; color: var(--on-dev-solid); font-size: 11.5px; font-weight: 650; letter-spacing: .12em; text-transform: uppercase; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .14) 0 6px, transparent 6px 12px), var(--dev-solid); } .ticket.is-dev .ticket-stub::before { display: none; } .dev-box { border: 1px solid var(--dev-line); background: var(--dev-soft); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 20px; } .dev-box .check { font-weight: 550; } .dev-box .hint { display: block; margin-top: 6px; } .def-row.sys input[readonly] { background: var(--surface-2); color: var(--muted); cursor: default; } .def-row.sys { align-items: center; } /* ---------- Umschalter Hell/Dunkel ---------- */ .theme-btn { font: inherit; font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); } .theme-btn:hover { border-color: var(--ink); } .theme-btn svg { width: 16px; height: 16px; flex: none; } .side-foot .theme-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; color: var(--side-ink); font-size: 13px; } .side-foot .theme-btn:hover { color: #fff; } .side-foot .theme-btn:focus-visible { outline: 2px solid #fff; border-radius: 3px; } .side-foot .theme-btn svg { width: 16px; height: 16px; } .login-wrap .theme-btn { position: fixed; top: 16px; right: 16px; } /* ---------- Mobil ---------- */ @media (max-width: 900px) { .app { grid-template-columns: 1fr; } .side { position: static; height: auto; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; } .nav { flex-direction: row; flex-wrap: wrap; } .nav a { padding: 6px 10px; } .side-foot { margin: 0 0 0 auto; flex-direction: row; align-items: center; gap: 12px; } .main { padding-top: 24px; } .ticket { grid-template-columns: 1fr; } .ticket-stub { border-left: 0; border-top: 2px dashed var(--line-strong); } .ticket-stub::before, .ticket-stub::after { top: -11px; bottom: auto; } .ticket-stub::before { left: -11px; } .ticket-stub::after { left: auto; right: -11px; } .filters { grid-template-columns: 1fr 1fr; } .filters > :first-child { grid-column: 1 / -1; } .grid2, .grid3 { grid-template-columns: 1fr; } .def-row { grid-template-columns: 1fr 1fr; } .def-row.head { display: none; } .log li { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 560px) { .side .nav a span { display: none; } .matrix { grid-template-columns: 1fr 1fr; } .matrix > div:first-child, .matrix > .h:first-child { grid-column: 1 / -1; } }