/*
* ============================================================
* SCHWEIHER DESIGN SYSTEM — style.css
* Version: 1.0 | Basis: SDB-Portal (sicherheitsdatenblatt.schweiher.cloud)
* Schriftart: IBM Plex Sans + IBM Plex Mono (Google Fonts)
* Einbinden:
* + Google Fonts im :
*
* ============================================================
*/
/* ── Design Tokens ─────────────────────────────────────────── */
:root {
--bg: #999999; /* Seitenhintergrund */
--surface: #b8b8b8; /* Karten, Header, Panels */
--surface2: #acacac; /* Inputs, Tabellen-Header, Chips */
--border: #888888; /* Trennlinien, Rahmen */
--accent: #1a5fa8; /* Primärfarbe (Buttons, Links, Badges) */
--accent2: #1a6fd4; /* Hover / Fokus-Akzent */
--danger: #cc2020; /* Löschen, Fehler */
--text: #1a1a1a; /* Fließtext */
--text-muted: #3a3a3a; /* Labels, Metadaten, Platzhalter */
--radius: 8px; /* Border-Radius (global) */
--font: 'IBM Plex Sans', system-ui, sans-serif;
--mono: 'IBM Plex Mono', monospace;
}
/* ── Reset ──────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
min-height: 100vh;
font-size: 15px;
line-height: 1.6;
}
/* ── Header ─────────────────────────────────────────────────── */
.site-header {
background: var(--surface);
border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 100;
}
.header-inner {
max-width: 1100px; margin: 0 auto;
padding: 14px 24px;
display: flex; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 14px; }
.logo-icon { font-size: 28px; }
.logo h1 { font-size: 18px; font-weight: 600; letter-spacing: -.3px; }
.logo p { font-size: 12px; color: var(--text-muted); font-family: var(--mono); }
.header-actions { display: flex; gap: 12px; align-items: center; }
.admin-link {
font-size: 13px; font-family: var(--mono);
color: var(--text-muted); text-decoration: none;
padding: 6px 12px; border: 1px solid var(--border);
border-radius: var(--radius); transition: all .2s;
}
.admin-link:hover { color: var(--accent); border-color: var(--accent); }
.admin-link.logout { color: var(--danger); }
.admin-link.logout:hover { border-color: var(--danger); }
/* ── Container ───────────────────────────────────────────────── */
.container {
max-width: 1100px; margin: 0 auto;
padding: 32px 24px;
}
/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 20px; border-radius: var(--radius);
font-family: var(--mono); font-size: 13px; font-weight: 600;
cursor: pointer; border: none; text-decoration: none;
transition: all .2s;
}
.btn-primary { background: var(--accent); color: #000; }
.btn-primary:hover { opacity: .85; }
.btn-full { width: 100%; justify-content: center; }
.btn-ghost {
background: transparent; color: var(--text-muted);
border: 1px solid var(--border);
}
.btn-ghost:hover { border-color: var(--accent2); color: var(--accent2); }
.btn-edit { background: transparent; color: var(--accent2); border: 1px solid var(--accent2); }
.btn-edit:hover { background: var(--accent2); color: #fff; }
.btn-danger { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 5px 12px; font-size: 12px; }
/* Icon-only Buttons */
.btn-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px;
border-radius: var(--radius); border: 1px solid var(--border);
background: transparent; cursor: pointer;
font-size: 15px; text-decoration: none; color: var(--text-muted);
transition: all .15s;
}
.btn-icon.btn-edit { border-color: var(--accent2); color: var(--accent2); }
.btn-icon.btn-edit:hover { background: var(--accent2); color: #fff; }
.btn-icon.btn-danger { border-color: var(--danger); color: var(--danger); }
.btn-icon.btn-danger:hover { background: var(--danger); color: #fff; }
.action-btns { display: flex; gap: 5px; align-items: center; }
/* ── Formular ────────────────────────────────────────────────── */
.form-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-group label { font-size: 13px; font-family: var(--mono); color: var(--text-muted); }
.form-group input[type="text"],
.form-group input[type="password"],
.form-group input[type="email"],
.form-group input[type="number"],
.form-group textarea {
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text);
padding: 10px 14px; font-family: var(--font); font-size: 14px;
outline: none; transition: border-color .2s;
width: 100%;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--accent2); }
.form-group textarea { resize: vertical; min-height: 90px; }
.form-select {
width: 100%;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius); color: var(--text);
padding: 10px 14px; font-family: var(--font); font-size: 14px;
outline: none; transition: border-color .2s;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.form-select:focus { border-color: var(--accent2); }
.form-actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.hint { font-family: var(--mono); font-size: 11px; color: var(--text-muted); }
.req { color: var(--danger); }
/* File Drop Zone */
.file-drop {
border: 2px dashed var(--border); border-radius: var(--radius);
transition: border-color .2s; cursor: pointer; position: relative;
}
.file-drop.drag-over { border-color: var(--accent2); background: rgba(74,158,255,.05); }
.file-drop input {
position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.file-drop-inner {
padding: 32px; text-align: center;
display: flex; flex-direction: column; align-items: center; gap: 8px;
pointer-events: none;
}
.file-icon { font-size: 32px; }
/* ── Suchleiste ──────────────────────────────────────────────── */
.search-section { margin-bottom: 28px; }
.search-box {
position: relative;
display: flex; align-items: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 16px;
transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--accent2); }
.search-icon { padding: 0 14px; font-size: 18px; opacity: .5; }
.search-box input {
flex: 1; background: transparent; border: none; outline: none;
color: var(--text); font-family: var(--font); font-size: 16px;
padding: 14px 0;
}
.search-box input::placeholder { color: var(--text-muted); }
.clear-btn {
padding: 0 16px; color: var(--text-muted); text-decoration: none;
font-size: 18px; line-height: 1;
}
.clear-btn:hover { color: var(--danger); }
/* Admin Suchbox (kompakt) */
.admin-search-box {
display: flex; align-items: center; gap: 8px;
background: var(--surface2); border: 1px solid var(--border);
border-radius: var(--radius); padding: 6px 12px;
}
.admin-search-box input {
background: transparent; border: none; outline: none;
color: var(--text); font-family: var(--font); font-size: 14px; width: 200px;
}
.admin-search-box input::placeholder { color: var(--text-muted); }
/* Results Bar */
.results-bar {
font-family: var(--mono); font-size: 12px;
color: var(--text-muted); margin-bottom: 20px;
padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
/* ── Karten-Grid ─────────────────────────────────────────────── */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 16px;
}
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 20px;
display: flex; flex-direction: column; gap: 14px;
transition: border-color .2s, transform .2s;
}
.card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.card-header { display: flex; flex-direction: column; gap: 4px; }
.card-meta { font-family: var(--mono); font-size: 11px; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.card-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.card-footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: auto; padding-top: 12px;
border-top: 1px solid var(--border);
}
/* ── Admin-Karte (Panel) ─────────────────────────────────────── */
.admin-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 28px;
margin-bottom: 24px;
}
.section-title-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.section-title {
font-size: 16px; font-weight: 600;
}
.table-count { font-family: var(--mono); font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
/* ── Tabelle ─────────────────────────────────────────────────── */
.admin-table-wrap { overflow-x: auto; max-width: 100%; }
.admin-table { width: 100%; min-width: 700px; border-collapse: collapse; font-size: 14px; }
.admin-table th {
text-align: left; padding: 10px 14px;
font-family: var(--mono); font-size: 11px; font-weight: 600;
color: var(--text-muted); border-bottom: 1px solid var(--border);
text-transform: uppercase; letter-spacing: .06em;
}
.admin-table td {
padding: 12px 14px; border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.admin-table tr:last-child td { border-bottom: none; }
.admin-table tr:hover td { background: var(--surface2); }
.mono { font-family: var(--mono); font-size: 12px; }
/* ── Badges & Status ─────────────────────────────────────────── */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 600; }
.badge-green { background: rgba(40,160,60,.15); border: 1px solid rgba(40,160,60,.4); color: #28a03c; }
.badge-yellow { background: rgba(200,160,0,.15); border: 1px solid rgba(200,160,0,.4); color: #a07800; }
.badge-red { background: rgba(200,40,40,.15); border: 1px solid rgba(200,40,40,.4); color: #c02828; }
.badge-blue { background: rgba(26,95,168,.15); border: 1px solid rgba(26,95,168,.4); color: var(--accent); }
/* Mini Tags */
.mini-tag {
display: inline-block; font-size: 11px; font-family: var(--mono);
padding: 2px 6px; background: var(--surface2);
border: 1px solid var(--border); border-radius: 3px; margin: 1px;
}
.muted-tag {
font-family: var(--mono); font-size: 11px;
color: var(--text-muted); padding: 3px 8px;
border: 1px dashed var(--border); border-radius: 4px;
}
/* ── Alerts ──────────────────────────────────────────────────── */
.alert {
padding: 12px 16px; border-radius: var(--radius);
margin-bottom: 20px; font-size: 14px; font-family: var(--mono);
}
.alert-success { background: rgba(40,200,80,.1); border: 1px solid rgba(40,200,80,.4); color: #50c878; }
.alert-error { background: rgba(232,64,64,.1); border: 1px solid rgba(232,64,64,.4); color: var(--danger); }
.alert-info { background: rgba(26,95,168,.1); border: 1px solid rgba(26,95,168,.4); color: var(--accent); }
/* ── Login ───────────────────────────────────────────────────── */
.login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.login-wrap { width: 100%; max-width: 400px; padding: 24px; }
.login-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 40px; text-align: center;
}
.login-logo { font-size: 40px; margin-bottom: 16px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-card > p { color: var(--text-muted); margin-bottom: 28px; font-size: 14px; }
.login-card .form-group { text-align: left; margin-bottom: 20px; }
.back-link {
display: block; margin-top: 20px;
font-size: 13px; color: var(--text-muted); text-decoration: none;
font-family: var(--mono);
}
.back-link:hover { color: var(--text); }
/* ── Empty State ─────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 80px 20px; color: var(--text-muted); }
.empty-state.small { padding: 32px 20px; }
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-state h2 { font-size: 20px; margin-bottom: 8px; color: var(--text); }
/* ── Download Button ─────────────────────────────────────────── */
.download-btn {
display: inline-block; font-family: var(--mono); font-size: 12px;
padding: 7px 14px;
background: var(--accent); color: #000; font-weight: 600;
border-radius: var(--radius); text-decoration: none;
transition: opacity .2s;
}
.download-btn:hover { opacity: .85; }
/* ── Footer ──────────────────────────────────────────────────── */
footer {
text-align: center; padding: 32px;
font-family: var(--mono); font-size: 12px; color: var(--text-muted);
border-top: 1px solid var(--border); margin-top: 40px;
}
/* ── Wartungsportal Ergänzungen ─────────────────────────────── */
/* Größere Touch-Targets auf Mobilgeräten */
@media (max-width: 600px) {
.card-grid {
grid-template-columns: 1fr;
}
.filter-bar {
gap: 6px;
}
.filter-btn {
padding: 10px 14px;
font-size: 14px;
}
.btn-done {
padding: 20px;
font-size: 18px;
}
.done-form .form-select {
font-size: 16px; /* verhindert Auto-Zoom auf iOS */
padding: 14px;
}
.container {
padding: 16px 12px;
}
.admin-card {
padding: 16px;
}
.stat-grid {
grid-template-columns: repeat(3, 1fr);
}
.nav-grid {
grid-template-columns: 1fr 1fr;
}
.filter-form {
flex-direction: column;
}
.filter-form .form-select {
width: 100% !important;
}
.admin-table th,
.admin-table td {
padding: 8px 10px;
font-size: 13px;
}
}