/* Design 1:1 aus der Demo-HTML uebernommen (Lock-Screen, Kacheln, Tabelle, Pills, Modal-Optik).
Nur der Abschnitt ganz unten ist neu: die Demo war eine Single-Page-App mit Modals, hier sind
Anlegen/Bearbeiten/Detail eigene, servergerenderte Seiten. */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1a1f2e 100%);
min-height: 100vh;
padding: 30px 20px;
color: #e0e0e0;
}
.container { max-width: 1700px; margin: 0 auto; }
/* ══ LOCK SCREEN ══ */
.lock-screen {
position: fixed; inset: 0;
background: linear-gradient(135deg, #0d1117 0%, #161b22 50%, #1a1f2e 100%);
display: flex; align-items: center; justify-content: center;
z-index: 9999; padding: 20px; overflow-y: auto;
}
.lock-box {
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
backdrop-filter: blur(20px);
border-radius: 20px; padding: 50px 40px;
text-align: center; width: 100%; max-width: 460px;
}
.lock-box .lock-icon-big { font-size: 4rem; display: block; margin-bottom: 18px; }
.lock-box h2 { color: #fff; font-size: 1.6rem; margin-bottom: 6px; }
.lock-box .lock-sub { color: #8b949e; font-size: 0.88rem; margin-bottom: 22px; }
.lock-box input[type="password"],
.lock-box input[type="text"],
.lock-box select {
width: 100%; padding: 13px 18px;
border-radius: 10px; border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.07); color: #fff;
font-size: 1rem; margin-bottom: 14px; outline: none;
transition: border-color 0.3s; font-family: inherit;
}
.lock-box select option { background: #161b22; color: #fff; }
.lock-box input:focus,
.lock-box select:focus { border-color: #4299e1; }
.login-btn-group { display: flex; gap: 10px; }
.login-btn-group button {
flex: 1; padding: 13px; border: none; border-radius: 10px;
font-size: 0.92rem; font-weight: 700; cursor: pointer; transition: opacity 0.3s;
}
.btn-login-employee { background: linear-gradient(135deg, #4299e1, #3182ce); color: #fff; }
.login-btn-group button:hover { opacity: 0.85; }
.lock-error { color: #fc8181; font-size: 0.84rem; margin-top: 10px; }
.lock-hint {
margin-top: 20px; background: rgba(255,255,255,0.04);
border-radius: 10px; padding: 14px; text-align: left;
font-size: 0.77rem; color: #6b7280; line-height: 1.8;
}
.lock-hint strong { color: #90cdf4; }
.name-select-label {
font-size: 0.78rem; color: #63b3ed; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px;
margin-bottom: 8px; text-align: left; display: block;
}
/* ══ HEADER ══ */
.header {
text-align: center; margin-bottom: 28px; padding: 28px 30px;
background: rgba(255,255,255,0.04);
border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px);
}
.header .main-icon { font-size: 3rem; display: block; margin-bottom: 10px; }
.header h1 { font-size: 1.9rem; color: #fff; margin-bottom: 5px; letter-spacing: 1px; }
.header p { color: #8b949e; font-size: 0.9rem; }
.role-badge {
display: inline-block; margin-top: 10px;
padding: 4px 16px; border-radius: 20px;
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.5px;
}
.role-badge.admin { background: rgba(252,129,74,0.2); color: #fc814a; border: 1px solid rgba(252,129,74,0.4); }
.role-badge.employee { background: rgba(66,153,225,0.2); color: #90cdf4; border: 1px solid rgba(66,153,225,0.4); }
/* ══ STATS ══ */
.stats-bar { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; }
.stat-card {
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px; padding: 14px 18px;
flex: 1; min-width: 120px; text-align: center;
transition: border-color 0.3s;
}
.stat-card.filtered { border-color: rgba(66,153,225,0.4); background: rgba(66,153,225,0.06); }
.stat-card .stat-num { font-size: 1.8rem; font-weight: 700; }
.stat-card .stat-label { font-size: 0.73rem; color: #8b949e; margin-top: 3px; }
.stat-card .stat-sub { font-size: 0.66rem; color: #4a5568; margin-top: 2px; font-style: italic; }
.c-blue { color: #4299e1; }
.c-red { color: #fc8181; }
.c-green { color: #48bb78; }
.c-orange { color: #f6ad55; }
.c-purple { color: #b794f4; }
.c-cyan { color: #76e4f7; }
.c-gray { color: #718096; }
.c-yellow { color: #fef08a; }
/* ══ TOOLBAR ══ */
.toolbar {
display: flex; gap: 10px; margin-bottom: 18px;
flex-wrap: wrap; align-items: center;
}
.toolbar-divider { width: 1px; height: 34px; background: rgba(255,255,255,0.1); flex-shrink: 0; }
/* ══ FILTER BAR ══ */
.filter-bar {
display: flex; gap: 10px; margin-bottom: 18px;
flex-wrap: wrap; align-items: center;
}
.filter-bar input,
.filter-bar select {
padding: 10px 14px; border-radius: 9px;
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06);
color: #fff; font-size: 0.87rem; outline: none;
transition: border-color 0.3s; font-family: inherit;
}
.filter-bar input { flex: 1; min-width: 200px; }
.filter-bar input::placeholder { color: #4a5568; }
.filter-bar input:focus,
.filter-bar select:focus { border-color: #4299e1; }
.filter-bar select option { background: #161b22; }
.filter-bar select.active-filter {
border-color: rgba(66,153,225,0.6);
background: rgba(66,153,225,0.1);
}
/* ══ BUTTONS ══ */
.btn {
padding: 10px 18px; border-radius: 9px; border: none;
font-size: 0.86rem; font-weight: 600;
cursor: pointer; transition: all 0.25s; white-space: nowrap;
display: inline-flex; align-items: center; gap: 5px;
text-decoration: none; font-family: inherit;
}
.btn-primary { background: linear-gradient(135deg, #4299e1, #3182ce); color: #fff; }
.btn-primary:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-success { background: linear-gradient(135deg, #48bb78, #38a169); color: #fff; }
.btn-success:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-danger { background: linear-gradient(135deg, #fc8181, #e53e3e); color: #fff; }
.btn-danger:hover { opacity: 0.85; }
.btn-warning { background: linear-gradient(135deg, #f6ad55, #dd6b20); color: #fff; }
.btn-warning:hover { opacity: 0.85; }
.btn-purple { background: linear-gradient(135deg, #b794f4, #805ad5); color: #fff; }
.btn-purple:hover { opacity: 0.85; transform: translateY(-1px); }
.btn-cyan { background: linear-gradient(135deg, #76e4f7, #0bc5ea); color: #1a202c; }
.btn-cyan:hover { opacity: 0.85; }
.btn-gray { background: rgba(255,255,255,0.08); color: #a0aec0; border: 1px solid rgba(255,255,255,0.12); }
.btn-gray:hover { background: rgba(255,255,255,0.13); }
.btn-sm { padding: 6px 11px; font-size: 0.76rem; }
/* ══ STATUS PILLS ══ */
.status-pill {
display: inline-block; padding: 3px 10px;
border-radius: 20px; font-size: 0.72rem; font-weight: 700;
letter-spacing: 0.3px; white-space: nowrap;
}
.s-neu { background: rgba(66,153,225,0.18); color: #90cdf4; border: 1px solid rgba(66,153,225,0.3); }
.s-eingereicht { background: rgba(246,173,85,0.18); color: #f6ad55; border: 1px solid rgba(246,173,85,0.3); }
.s-dokumente { background: rgba(183,148,244,0.18); color: #b794f4; border: 1px solid rgba(183,148,244,0.3); }
.s-pruefung { background: rgba(118,228,247,0.18); color: #76e4f7; border: 1px solid rgba(118,228,247,0.3); }
.s-anerkannt { background: rgba(72,187,120,0.18); color: #68d391; border: 1px solid rgba(72,187,120,0.3); }
.s-teilanerkannt{ background: rgba(252,129,74,0.18); color: #fc814a; border: 1px solid rgba(252,129,74,0.3); }
.s-abgelehnt { background: rgba(252,129,74,0.15); color: #fc8181; border: 1px solid rgba(252,81,81,0.3); }
.s-abgeschlossen{ background: rgba(113,128,150,0.18); color: #a0aec0; border: 1px solid rgba(113,128,150,0.3); }
/* ══ PRIORITÄT PILLS ══ */
.prio-pill {
display: inline-block; padding: 2px 9px;
border-radius: 12px; font-size: 0.68rem; font-weight: 700; white-space: nowrap;
}
.prio-hoch { background: rgba(252,129,74,0.2); color: #fc814a; border: 1px solid rgba(252,129,74,0.3); }
.prio-mittel { background: rgba(246,173,85,0.2); color: #f6ad55; border: 1px solid rgba(246,173,85,0.3); }
.prio-normal { background: rgba(113,128,150,0.15);color: #718096; border: 1px solid rgba(113,128,150,0.25); }
/* ══ SCHADEN-ART CHIPS ══ */
.art-chip {
display: inline-block; padding: 2px 9px;
border-radius: 12px; font-size: 0.72rem; font-weight: 600;
background: rgba(255,255,255,0.07); color: #cbd5e0;
border: 1px solid rgba(255,255,255,0.12);
}
/* ══ TABLE ══ */
.table-wrapper {
background: rgba(255,255,255,0.03);
border-radius: 16px; border: 1px solid rgba(255,255,255,0.08);
backdrop-filter: blur(10px); overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; }
thead { background: rgba(66,153,225,0.1); }
th {
padding: 13px 11px; text-align: left;
font-size: 0.75rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.8px;
color: #63b3ed; white-space: nowrap;
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: #90cdf4; }
th a { color: inherit; text-decoration: none; }
th a:hover { color: #90cdf4; }
td {
padding: 12px 11px;
border-top: 1px solid rgba(255,255,255,0.05);
font-size: 0.83rem; vertical-align: middle;
}
tr:hover td { background: rgba(255,255,255,0.02); }
tr.row-abgeschlossen td { opacity: 0.52; }
tr.row-abgelehnt td { opacity: 0.45; }
tr.row-prio-hoch td { box-shadow: inset 3px 0 0 rgba(252,129,74,0.55); }
.customer-name { font-weight: 700; color: #fff; font-size: 0.87rem; }
.betreuer-chip {
display: inline-block; padding: 2px 9px;
border-radius: 12px; font-size: 0.72rem; font-weight: 600;
background: rgba(66,153,225,0.15); color: #90cdf4;
border: 1px solid rgba(66,153,225,0.25);
}
.schaden-nr {
font-family: 'Courier New', monospace;
font-size: 0.78rem; color: #a0aec0;
}
.betrag-cell { font-weight: 700; font-size: 0.88rem; }
.betrag-geschaetzt { color: #718096; font-size: 0.78rem; }
.betrag-anerkannt { color: #68d391; }
.betrag-offen { color: #a0aec0; font-style: italic; font-size: 0.77rem; }
.note-text {
max-width: 180px; color: #8b949e;
font-size: 0.78rem; line-height: 1.4;
font-style: italic; display: inline-block;
}
.note-text.empty { color: #4a5568; }
.actions-cell { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
.badge-num {
display: inline-block; padding: 2px 8px;
border-radius: 20px; font-size: 0.7rem; font-weight: 600;
background: rgba(66,153,225,0.2); color: #90cdf4;
border: 1px solid rgba(66,153,225,0.3);
}
.no-results { text-align: center; padding: 55px; color: #4a5568; }
.no-results span { font-size: 2.5rem; display: block; margin-bottom: 10px; }
/* ══ SECTION LABEL ══ */
.section-label {
font-size: 0.73rem; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: #4a5568; margin-bottom: 10px;
display: flex; align-items: center; gap: 10px;
}
.section-label::after {
content: ''; flex: 1; height: 1px;
background: rgba(255,255,255,0.07);
}
/* ══ PANEL (in der Demo das Modal — hier die Karten der Detail-/Formularseiten) ══ */
.modal {
background: #161b22;
border: 1px solid rgba(255,255,255,0.12);
border-radius: 18px; padding: 32px;
width: 100%; margin-bottom: 18px;
}
.modal h2 { color: #fff; font-size: 1.2rem; margin-bottom: 4px; }
.modal-subtitle { color: #6b7280; font-size: 0.81rem; margin-bottom: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label {
display: block; color: #63b3ed;
font-size: 0.76rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 5px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%; padding: 10px 13px;
border-radius: 9px; border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.06); color: #fff;
font-size: 0.88rem; outline: none;
transition: border-color 0.3s; font-family: inherit;
}
.form-group select option { background: #161b22; }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: #4299e1; }
.form-group textarea { resize: vertical; min-height: 80px; }
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
opacity: 0.45; cursor: not-allowed;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 13px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
/* Betrag-Pflichthinweis */
.betrag-required-hint {
background: rgba(72,187,120,0.1);
border: 1px solid rgba(72,187,120,0.25);
border-radius: 8px; padding: 9px 13px;
font-size: 0.8rem; color: #68d391;
margin-bottom: 14px; display: none;
}
.betrag-required-hint.show { display: block; }
/* ══ HISTORY ══ */
.history-list { margin-top: 10px; }
.history-item {
display: flex; gap: 10px; align-items: flex-start;
padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05);
font-size: 0.8rem;
}
.history-item:last-child { border-bottom: none; }
.history-dot {
width: 8px; height: 8px; border-radius: 50%;
margin-top: 4px; flex-shrink: 0;
}
.history-dot.status { background: #4299e1; }
.history-dot.dokument { background: #b794f4; }
.history-dot.notiz { background: #68d391; }
.history-dot.anlage { background: #f6ad55; }
.history-dot.betrag { background: #48bb78; }
.history-dot.stammdaten { background: #76e4f7; }
.history-dot.reminder { background: #fc8181; }
.history-text { color: #a0aec0; line-height: 1.4; flex: 1; }
.history-text strong { color: #e2e8f0; }
.history-time { color: #4a5568; font-size: 0.72rem; white-space: nowrap; margin-left: auto; }
.history-empty { color: #4a5568; font-size: 0.8rem; text-align: center; padding: 12px 0; }
/* ══ DOKUMENT LOG ══ */
.doc-log-list { margin-top: 8px; }
.doc-item {
display: flex; align-items: center; gap: 10px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 8px; padding: 9px 13px;
margin-bottom: 7px; font-size: 0.8rem;
}
.doc-item:last-child { margin-bottom: 0; }
.doc-icon { font-size: 1.2rem; flex-shrink: 0; }
.doc-name { font-weight: 600; color: #e2e8f0; }
.doc-meta { color: #718096; font-size: 0.73rem; margin-top: 2px; }
.doc-empty { color: #4a5568; font-size: 0.8rem; text-align: center; padding: 12px 0; }
/* ══ INFO BOX ══ */
.info-box {
background: rgba(66,153,225,0.08);
border: 1px solid rgba(66,153,225,0.2);
border-radius: 9px; padding: 10px 14px;
margin-bottom: 16px; font-size: 0.8rem;
color: #90cdf4; line-height: 1.6;
}
/* ══ MEIN BEREICH BANNER ══ */
.my-scope-banner {
background: rgba(66,153,225,0.08);
border: 1px solid rgba(66,153,225,0.2);
border-radius: 11px; padding: 11px 18px;
margin-bottom: 18px; font-size: 0.83rem;
color: #90cdf4; display: flex; align-items: center; gap: 10px;
}
@media (max-width: 900px) {
.form-row, .form-row-3 { grid-template-columns: 1fr; }
th, td { padding: 9px 7px; }
.detail-cols { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
.header h1 { font-size: 1.4rem; }
.modal { padding: 22px 16px; }
}
/* ══════════════════════════════════════════════════════════════════════
NEU gegenüber der Demo: die Demo war eine Single-Page-App mit Modals,
diese App rendert Detail, Anlegen und Verwaltung als eigene Seiten.
══════════════════════════════════════════════════════════════════════ */
/* Fehlerbox — die Demo meldete Validierungsfehler per Toast, hier kommen sie vom Server */
.err-box {
background: rgba(252,129,74,0.1);
border: 1px solid rgba(252,129,74,0.3);
border-radius: 9px; padding: 10px 14px;
margin-bottom: 16px; font-size: 0.85rem;
color: #fc8181; line-height: 1.6;
}
.ok-box {
background: rgba(72,187,120,0.1);
border: 1px solid rgba(72,187,120,0.3);
border-radius: 9px; padding: 10px 14px;
margin-bottom: 16px; font-size: 0.85rem;
color: #68d391; line-height: 1.6;
}
/* Warnbanner für offene Hoch-Prio-Fälle — bewusst laut, es steht ganz oben über den Kacheln */
.prio-banner {
background: rgba(252,81,81,0.12);
border: 1px solid rgba(252,81,81,0.4);
border-radius: 11px; padding: 11px 18px;
margin-bottom: 18px; font-size: 0.9rem; font-weight: 700;
color: #fc8181; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Dezenter 2s-Puls, NUR am Prio-Badge offener Fälle: eine blinkende Tabellenzeile wäre nach
zwei Minuten unerträglich und würde ignoriert. */
@keyframes prio-puls {
0%, 100% { box-shadow: 0 0 0 0 rgba(252,129,74,0); }
50% { box-shadow: 0 0 0 4px rgba(252,129,74,0.35); }
}
tr.row-prio-offen .prio-hoch { animation: prio-puls 2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
tr.row-prio-offen .prio-hoch { animation: none; }
}
.header-nav { display: flex; gap: 8px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.header-nav form { display: inline; }
/* Detailseite: links Stammdaten + Verlauf, rechts die Aktionsformulare */
.detail-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; }
.daten-liste { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; font-size: 0.85rem; }
.daten-liste dt { color: #4a5568; font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.6px; font-weight: 700; padding-top: 2px; }
.daten-liste dd { color: #e2e8f0; overflow-wrap: anywhere; }
.beschreibung { color: #a0aec0; font-size: 0.85rem; line-height: 1.6; margin-top: 14px;
white-space: pre-wrap; }
/* Verwaltungsseite: Nutzer- und Freigabetabellen stehen direkt in einer Karte */
.modal table { margin-top: 8px; }
.modal thead { background: transparent; }
.modal td { border-top: 1px solid rgba(255,255,255,0.06); }
.pw-anzeige {
font-family: 'Courier New', monospace; font-size: 1rem; color: #fff;
background: rgba(72,187,120,0.12); border: 1px solid rgba(72,187,120,0.3);
border-radius: 8px; padding: 10px 14px; display: inline-block; margin-top: 6px;
}