:root {
|
--bg: #f2f4f1;
|
--surface: #ffffff;
|
--ink: #1e2a32;
|
--ink-soft: #5b6b74;
|
--line: #dfe3e0;
|
--sidebar: #16232b;
|
--sidebar-ink: #cfd9dc;
|
--sidebar-ink-dim: #7c8b93;
|
--accent: #2f8f86;
|
--accent-ink: #0c3a35;
|
--status-ok-bg: #e5f3ec;
|
--status-ok-ink: #1f6b45;
|
--status-warn-bg: #fbf0dc;
|
--status-warn-ink: #8a5a12;
|
--status-unbekannt-bg: #eceef0;
|
--status-unbekannt-ink: #5b6b74;
|
|
--font-ui: "Segoe UI", "Segoe UI Variable", system-ui, -apple-system, sans-serif;
|
--font-mono: Consolas, "Cascadia Mono", "SFMono-Regular", Menlo, monospace;
|
}
|
|
* { box-sizing: border-box; }
|
|
html, body {
|
margin: 0;
|
padding: 0;
|
background: var(--bg);
|
color: var(--ink);
|
font-family: var(--font-ui);
|
font-size: 15px;
|
line-height: 1.5;
|
}
|
|
a { color: var(--accent-ink); text-decoration: none; }
|
a:hover { text-decoration: underline; }
|
|
.layout {
|
display: flex;
|
min-height: 100vh;
|
}
|
|
/* --- Sidebar --- */
|
.sidebar {
|
width: 230px;
|
flex-shrink: 0;
|
background: var(--sidebar);
|
color: var(--sidebar-ink);
|
padding: 24px 18px;
|
display: flex;
|
flex-direction: column;
|
gap: 28px;
|
position: sticky;
|
top: 0;
|
height: 100vh;
|
overflow-y: auto;
|
}
|
|
.brand {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
}
|
|
.brand-mark {
|
width: 30px;
|
height: 30px;
|
border-radius: 7px;
|
background: var(--accent);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-weight: 700;
|
color: #08211d;
|
font-size: 14px;
|
flex-shrink: 0;
|
}
|
|
.brand-text {
|
font-weight: 700;
|
letter-spacing: 0.02em;
|
font-size: 15px;
|
color: #fff;
|
line-height: 1.2;
|
}
|
.brand-text small {
|
display: block;
|
font-weight: 400;
|
color: var(--sidebar-ink-dim);
|
font-size: 11.5px;
|
letter-spacing: 0.03em;
|
text-transform: uppercase;
|
}
|
|
.nav {
|
display: flex;
|
flex-direction: column;
|
gap: 2px;
|
}
|
|
.nav a {
|
color: var(--sidebar-ink);
|
padding: 9px 12px;
|
border-radius: 6px;
|
font-size: 14px;
|
display: flex;
|
align-items: center;
|
gap: 9px;
|
}
|
.nav a:hover { background: #1f303a; text-decoration: none; }
|
.nav a.active { background: var(--accent); color: #05201c; font-weight: 600; }
|
|
.nav-dot {
|
width: 6px;
|
height: 6px;
|
border-radius: 50%;
|
background: currentColor;
|
opacity: 0.55;
|
flex-shrink: 0;
|
}
|
|
.sidebar-foot {
|
margin-top: auto;
|
font-size: 11.5px;
|
color: var(--sidebar-ink-dim);
|
letter-spacing: 0.02em;
|
border-top: 1px solid #223038;
|
padding-top: 14px;
|
}
|
|
/* --- Main --- */
|
.main {
|
flex: 1;
|
padding: 32px 40px;
|
max-width: 1100px;
|
}
|
|
.page-head {
|
display: flex;
|
justify-content: space-between;
|
align-items: flex-end;
|
margin-bottom: 22px;
|
gap: 16px;
|
flex-wrap: wrap;
|
}
|
|
.eyebrow {
|
text-transform: uppercase;
|
letter-spacing: 0.09em;
|
font-size: 11.5px;
|
color: var(--ink-soft);
|
font-weight: 600;
|
margin: 0 0 4px;
|
}
|
|
h1 {
|
font-size: 24px;
|
margin: 0;
|
letter-spacing: -0.01em;
|
}
|
|
h2 { font-size: 17px; margin: 0 0 12px; }
|
|
.btn {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
background: var(--accent);
|
color: #06251f;
|
border: none;
|
padding: 9px 16px;
|
border-radius: 7px;
|
font-weight: 600;
|
font-size: 13.5px;
|
cursor: pointer;
|
transition: transform 0.08s ease, background 0.15s ease;
|
}
|
.btn:hover { background: #278178; text-decoration: none; }
|
.btn:active { transform: translateY(1px); }
|
|
.btn-secondary {
|
background: var(--surface);
|
color: var(--ink);
|
border: 1px solid var(--line);
|
}
|
.btn-secondary:hover { background: #ebedea; }
|
|
.btn-danger {
|
background: #fdeceb;
|
color: #9c3a2f;
|
border: 1px solid #f3d3ce;
|
}
|
.btn-danger:hover { background: #fadad6; }
|
|
.btn-small { padding: 6px 11px; font-size: 12.5px; border-radius: 6px; }
|
|
/* --- Stat strip --- */
|
.stat-strip {
|
display: flex;
|
gap: 14px;
|
margin-bottom: 24px;
|
flex-wrap: wrap;
|
}
|
.stat-card {
|
background: var(--surface);
|
border: 1px solid var(--line);
|
border-radius: 10px;
|
padding: 14px 18px;
|
min-width: 150px;
|
}
|
.stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; }
|
.stat-label { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
|
|
/* --- Search --- */
|
.search-row {
|
margin-bottom: 18px;
|
}
|
.search-row input[type="text"] {
|
width: 100%;
|
max-width: 340px;
|
padding: 9px 13px;
|
border-radius: 7px;
|
border: 1px solid var(--line);
|
background: var(--surface);
|
font-family: var(--font-ui);
|
font-size: 14px;
|
}
|
|
/* --- Catalog cards (Signature element) --- */
|
.catalog {
|
display: flex;
|
flex-direction: column;
|
gap: 10px;
|
}
|
|
.catalog-card {
|
background: var(--surface);
|
border: 1px solid var(--line);
|
border-radius: 10px;
|
padding: 14px 18px;
|
display: flex;
|
align-items: center;
|
gap: 16px;
|
}
|
|
.tag-punch {
|
width: 34px;
|
height: 34px;
|
border-radius: 8px;
|
background: var(--bg);
|
border: 1px solid var(--line);
|
position: relative;
|
flex-shrink: 0;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.tag-punch::after {
|
content: "";
|
width: 8px;
|
height: 8px;
|
border-radius: 50%;
|
background: var(--status-dot, var(--ink-soft));
|
}
|
|
.catalog-main { flex: 1; min-width: 0; }
|
.catalog-name {
|
font-weight: 600;
|
font-size: 15px;
|
}
|
.catalog-meta {
|
font-size: 12.5px;
|
color: var(--ink-soft);
|
margin-top: 2px;
|
display: flex;
|
gap: 10px;
|
flex-wrap: wrap;
|
}
|
.catalog-meta .v { font-family: var(--font-mono); }
|
|
.badge {
|
display: inline-flex;
|
align-items: center;
|
gap: 6px;
|
padding: 5px 11px;
|
border-radius: 100px;
|
font-size: 12px;
|
font-weight: 600;
|
white-space: nowrap;
|
}
|
.status-ok { background: var(--status-ok-bg); color: var(--status-ok-ink); }
|
.status-warnung { background: var(--status-warn-bg); color: var(--status-warn-ink); }
|
.status-unbekannt { background: var(--status-unbekannt-bg); color: var(--status-unbekannt-ink); }
|
|
.catalog-card:has(.status-ok) .tag-punch { --status-dot: var(--status-ok-ink); }
|
.catalog-card:has(.status-warnung) .tag-punch { --status-dot: var(--status-warn-ink); }
|
.catalog-card:has(.status-unbekannt) .tag-punch { --status-dot: var(--status-unbekannt-ink); }
|
|
.catalog-actions {
|
display: flex;
|
gap: 8px;
|
flex-shrink: 0;
|
}
|
|
.empty-state {
|
background: var(--surface);
|
border: 1px dashed var(--line);
|
border-radius: 10px;
|
padding: 40px 20px;
|
text-align: center;
|
color: var(--ink-soft);
|
}
|
|
/* --- Detail page --- */
|
.detail-grid {
|
display: grid;
|
grid-template-columns: 2fr 1fr;
|
gap: 20px;
|
align-items: start;
|
}
|
@media (max-width: 800px) {
|
.detail-grid { grid-template-columns: 1fr; }
|
}
|
|
.panel {
|
background: var(--surface);
|
border: 1px solid var(--line);
|
border-radius: 10px;
|
padding: 20px 22px;
|
margin-bottom: 18px;
|
}
|
|
.kv-row {
|
display: flex;
|
justify-content: space-between;
|
padding: 9px 0;
|
border-bottom: 1px solid var(--line);
|
font-size: 13.5px;
|
gap: 12px;
|
}
|
.kv-row:last-child { border-bottom: none; }
|
.kv-label { color: var(--ink-soft); }
|
.kv-value { font-family: var(--font-mono); text-align: right; word-break: break-all; }
|
|
.docs-block {
|
white-space: pre-wrap;
|
font-size: 13.5px;
|
line-height: 1.6;
|
color: var(--ink);
|
}
|
|
table.data-table {
|
width: 100%;
|
border-collapse: collapse;
|
font-size: 13.5px;
|
}
|
table.data-table th {
|
text-align: left;
|
color: var(--ink-soft);
|
font-weight: 600;
|
font-size: 11.5px;
|
text-transform: uppercase;
|
letter-spacing: 0.04em;
|
padding: 8px 10px;
|
border-bottom: 1px solid var(--line);
|
}
|
table.data-table td {
|
padding: 10px 10px;
|
border-bottom: 1px solid var(--line);
|
vertical-align: top;
|
}
|
table.data-table tr:last-child td { border-bottom: none; }
|
|
/* --- Forms --- */
|
.form-grid {
|
display: grid;
|
gap: 14px;
|
max-width: 640px;
|
}
|
.field label {
|
display: block;
|
font-size: 13px;
|
font-weight: 600;
|
margin-bottom: 5px;
|
}
|
.field .hint {
|
font-size: 12px;
|
color: var(--ink-soft);
|
font-weight: 400;
|
margin-top: 3px;
|
}
|
.field .hint code {
|
font-family: var(--font-mono);
|
background: var(--bg);
|
border: 1px solid var(--line);
|
border-radius: 4px;
|
padding: 1px 5px;
|
font-size: 11.5px;
|
color: var(--ink);
|
}
|
.field input[type="text"],
|
.field input[type="date"],
|
.field select,
|
.field textarea {
|
width: 100%;
|
padding: 9px 12px;
|
border-radius: 7px;
|
border: 1px solid var(--line);
|
font-family: var(--font-ui);
|
font-size: 14px;
|
background: var(--surface);
|
}
|
.field textarea { font-family: var(--font-mono); resize: vertical; }
|
.field input:focus, .field select:focus, .field textarea:focus {
|
outline: 2px solid var(--accent);
|
outline-offset: 1px;
|
}
|
|
.form-actions {
|
display: flex;
|
gap: 10px;
|
margin-top: 6px;
|
}
|
|
/* --- Auto-Update: Felder + Mini-Doku nebeneinander --- */
|
.auto-update-layout {
|
display: flex;
|
gap: 18px;
|
align-items: flex-start;
|
flex-wrap: wrap;
|
}
|
.auto-update-fields {
|
flex: 1 1 240px;
|
min-width: 220px;
|
display: flex;
|
flex-direction: column;
|
gap: 14px;
|
}
|
|
.mini-doku {
|
flex: 1 1 240px;
|
min-width: 220px;
|
background: var(--status-ok-bg);
|
border: 1px solid var(--accent);
|
border-radius: 8px;
|
padding: 14px 16px;
|
font-size: 13px;
|
line-height: 1.55;
|
color: var(--ink);
|
}
|
.mini-doku-titel {
|
font-weight: 600;
|
font-size: 12px;
|
text-transform: uppercase;
|
letter-spacing: 0.04em;
|
color: var(--accent-ink);
|
margin-bottom: 8px;
|
}
|
.mini-doku ol {
|
margin: 0 0 10px;
|
padding-left: 18px;
|
}
|
.mini-doku li { margin-bottom: 4px; }
|
.mini-doku code {
|
font-family: var(--font-mono);
|
background: var(--surface);
|
padding: 1px 5px;
|
border-radius: 4px;
|
font-size: 12px;
|
}
|
.mini-doku .beispiel {
|
font-family: var(--font-mono);
|
font-size: 12px;
|
background: var(--surface);
|
border: 1px solid var(--line);
|
border-radius: 6px;
|
padding: 6px 10px;
|
display: inline-block;
|
}
|
|
/* --- Checkliste bei Zuweisungen --- */
|
.checklist-kopf {
|
display: flex;
|
align-items: center;
|
gap: 7px;
|
font-size: 13px;
|
font-weight: 600;
|
margin: 4px 0 8px;
|
cursor: pointer;
|
}
|
.checklist {
|
border: 1px solid var(--line);
|
border-radius: 8px;
|
background: var(--surface);
|
max-height: 340px;
|
overflow-y: auto;
|
padding: 4px 0;
|
}
|
.checklist-gruppe { padding: 6px 0; }
|
.checklist-gruppe + .checklist-gruppe { border-top: 1px solid var(--line); }
|
.checklist-gruppen-titel {
|
font-size: 11px;
|
text-transform: uppercase;
|
letter-spacing: 0.04em;
|
color: var(--ink-soft);
|
font-weight: 600;
|
padding: 5px 14px;
|
}
|
.check-item {
|
display: flex;
|
align-items: center;
|
gap: 9px;
|
padding: 7px 14px;
|
font-size: 13.5px;
|
cursor: pointer;
|
}
|
.check-item:hover { background: var(--bg); }
|
.check-item input[type="checkbox"] { width: auto; }
|
.check-item .v { font-family: var(--font-mono); color: var(--ink-soft); font-size: 12px; }
|
|
/* --- Flash messages --- */
|
.flash {
|
padding: 11px 16px;
|
border-radius: 8px;
|
font-size: 13.5px;
|
margin-bottom: 16px;
|
}
|
.flash-erfolg { background: var(--status-ok-bg); color: var(--status-ok-ink); }
|
.flash-fehler { background: #fdeceb; color: #9c3a2f; }
|
|
.filter-row {
|
display: flex;
|
gap: 10px;
|
margin-bottom: 16px;
|
flex-wrap: wrap;
|
}
|
.filter-row input {
|
padding: 8px 12px;
|
border-radius: 7px;
|
border: 1px solid var(--line);
|
font-family: var(--font-ui);
|
font-size: 13.5px;
|
}
|
|
/* --- Doku-Bilder --- */
|
.doku-bilder-grid {
|
display: grid;
|
grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
|
gap: 12px;
|
margin-top: 16px;
|
}
|
.doku-bild-kachel {
|
border: 1px solid var(--line);
|
border-radius: 8px;
|
overflow: hidden;
|
background: var(--bg);
|
}
|
.doku-bild-kachel img {
|
width: 100%;
|
height: 100px;
|
object-fit: cover;
|
display: block;
|
}
|
.doku-bild-kachel form { padding: 6px; }
|
.doku-bild-kachel .btn { width: 100%; }
|
|
.bild-upload-form {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
margin-top: 16px;
|
padding-top: 14px;
|
border-top: 1px solid var(--line);
|
}
|
.bild-upload-form input[type="file"] {
|
font-size: 13px;
|
color: var(--ink-soft);
|
}
|
