============================================================================= */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.stagger > * {
opacity: 0;
animation: fadeInUp 0.4s ease forwards;
}
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.08s; }
.stagger > *:nth-child(3) { animation-delay: 0.12s; }
.stagger > *:nth-child(4) { animation-delay: 0.16s; }
.stagger > *:nth-child(5) { animation-delay: 0.20s; }
.stagger > *:nth-child(6) { animation-delay: 0.24s; }
.stagger > *:nth-child(7) { animation-delay: 0.28s; }
.stagger > *:nth-child(8) { animation-delay: 0.32s; }
.stagger > *:nth-child(9) { animation-delay: 0.36s; }
.stagger > *:nth-child(10) { animation-delay: 0.40s; }
.stagger > *:nth-child(n+11) { animation-delay: 0.44s; }
/* =============================================================================
7c. Micro-Interactions (Hover-Lifts, Focus-Rings, Transitions)
Globale Hover- und Focus-Stile fuer interaktive Elemente.
============================================================================= */
/* --- Hover Lift: Cards, Buttons, interaktive Container --- */
.card-lift {
transition: box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.card-lift:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
}
.card-lift:active {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
/* --- Globaler Focus-Ring (F-07) --- */
:focus-visible {
outline: 2px solid var(--tool-accent);
outline-offset: 2px;
border-radius: 2px;
}
/* Focus innerhalb Sidebar: heller Ring auf dunklem Hintergrund */
.sidebar :focus-visible {
outline-color: var(--sos-gruen-80);
}
/* Input-Elemente: eigener Focus-Stil (ueberschreibt generic) */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: none;
border-color: var(--tool-accent);
box-shadow: 0 0 0 3px var(--tool-accent-light);
}
/* --- Button Hover/Active Micro-Interactions --- */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
transition: background-color 0.15s ease, color 0.15s ease,
box-shadow 0.15s ease, transform 0.1s ease;
}
.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active {
transform: scale(0.97);
}
/* --- Nav-Item Hover: subtle glow --- */
.nav-item {
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
/* =============================================================================
7d. Skeleton Loader (.skeleton)
Platzhalter waehrend Daten laden. Shimmer-Animation.
Verwendung:
============================================================================= */
@keyframes shimmer {
0% { background-position: -400px 0; }
100% { background-position: 400px 0; }
}
.skeleton {
background: linear-gradient(90deg,
#e2e8f0 25%, #f1f5f9 37%, #e2e8f0 63%);
background-size: 800px 100%;
animation: shimmer 1.5s ease-in-out infinite;
border-radius: var(--radius-sm);
}
.skeleton-text {
height: 14px;
margin-bottom: 10px;
border-radius: 4px;
}
.skeleton-text.short { width: 40%; }
.skeleton-text.medium { width: 70%; }
.skeleton-text.long { width: 95%; }
.skeleton-heading {
height: 22px;
width: 60%;
margin-bottom: 16px;
border-radius: 4px;
}
.skeleton-card {
height: 120px;
border-radius: var(--radius);
}
.skeleton-kpi {
height: 100px;
border-radius: var(--radius);
border-left: 4px solid #e2e8f0;
}
.skeleton-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
}
.skeleton-chart {
height: 200px;
border-radius: var(--radius);
}
/* Skeleton Row: mehrere Zeilen als Gruppe */
.skeleton-row {
display: flex;
gap: 12px;
align-items: center;
margin-bottom: 14px;
}
.skeleton-row .skeleton-avatar { flex-shrink: 0; }
.skeleton-row .skeleton-text { flex: 1; margin-bottom: 0; }
/* =============================================================================
7e. Empty State, Error State, Loading State
Standardisierte Zustandsanzeigen fuer alle Tools.
Verwendung:
📭
Keine Daten vorhanden
Erstellen Sie einen neuen Eintrag.
============================================================================= */
.state-empty,
.state-error,
.state-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 60px 24px;
min-height: 200px;
}
.state-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.6;
}
.state-title {
font-size: 17px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.state-desc {
font-size: 13px;
color: var(--text-secondary);
max-width: 360px;
line-height: 1.6;
margin-bottom: 20px;
}
.state-action {
margin-top: 4px;
}
/* Empty State: dezenter Hintergrund */
.state-empty {
background: var(--card-bg);
border: 2px dashed var(--border-color);
border-radius: var(--radius);
}
.state-empty .state-icon { opacity: 0.3; }
/* Error State: rot-akzentuiert */
.state-error {
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: var(--radius);
}
.state-error .state-icon { color: var(--sos-rot); opacity: 0.8; }
.state-error .state-title { color: #991b1b; }
.state-error .state-desc { color: #b91c1c; }
/* Loading State: mit Spinner */
.state-loading .spinner {
margin-bottom: 16px;
}
.state-loading .state-title {
color: var(--text-secondary);
font-weight: 600;
}
/* --- Reduced Motion: alle neuen Animationen respektieren --- */
@media (prefers-reduced-motion: reduce) {
.stagger > *,
.fade-in,
.skeleton,
.card-lift {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
.skeleton {
background: #e2e8f0;
}
}
/* =============================================================================
8. KPI Cards (.kpi-row, .kpi-card)
============================================================================= */
.kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin-bottom: 28px;
}
.kpi-card {
background: var(--card-bg);
border-radius: var(--radius);
padding: 22px 24px;
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
border-top: 3px solid var(--sos-gruen);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.kpi-card::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(180deg, rgba(132, 187, 85, 0.04) 0%, transparent 100%);
pointer-events: none;
}
.kpi-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-3px);
border-top-color: var(--sos-gruen-80);
}
.kpi-card.gelb { border-top-color: var(--sos-gelb); }
.kpi-card.gelb::after { background: linear-gradient(180deg, rgba(250, 187, 0, 0.04) 0%, transparent 100%); }
.kpi-card.blau { border-top-color: var(--sos-blau); }
.kpi-card.blau::after { background: linear-gradient(180deg, rgba(0, 118, 185, 0.04) 0%, transparent 100%); }
.kpi-card.rot { border-top-color: var(--sos-rot); }
.kpi-card.rot::after { background: linear-gradient(180deg, rgba(226, 0, 59, 0.04) 0%, transparent 100%); }
.kpi-card.accent { border-top-color: var(--tool-accent); }
.kpi-icon {
font-size: 24px;
margin-bottom: 8px;
}
.kpi-label {
font-size: 11px;
color: var(--text-light);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.8px;
}
.kpi-value {
font-size: 28px;
font-weight: 800;
color: var(--text-primary);
margin-top: 6px;
letter-spacing: -0.5px;
position: relative;
z-index: 1;
}
/* =============================================================================
9. Cards (.card)
============================================================================= */
.card {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
transition: var(--transition);
}
.card:hover {
box-shadow: var(--shadow-hover);
}
.card-header {
padding: 18px 24px;
border-bottom: 1px solid var(--border-color);
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
display: flex;
justify-content: space-between;
align-items: center;
letter-spacing: -0.2px;
}
.card-body {
padding: 20px 24px;
}
/* =============================================================================
10. Tables (.data-table)
============================================================================= */
.data-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.data-table thead th {
text-align: left;
padding: 12px 16px;
font-size: 10.5px;
text-transform: uppercase;
background: var(--grau-bg);
color: var(--text-secondary);
border-bottom: 2px solid var(--sos-gruen);
font-weight: 700;
letter-spacing: 0.8px;
}
.data-table tbody tr {
border-bottom: 1px solid var(--border-color);
transition: var(--transition-fast);
}
.data-table tbody tr:hover {
background: rgba(132, 187, 85, 0.04);
}
.data-table .case-row {
cursor: pointer;
}
.data-table .case-row:hover {
background: var(--sos-gruen-20);
}
.data-table td {
padding: 12px 16px;
}
.case-nr,
.row-id {
font-weight: 700;
color: var(--sos-gruen-dunkel);
font-family: Consolas, monospace;
font-size: 12px;
}
/* =============================================================================
11. Status Badges (.status-badge)
============================================================================= */
.status-badge {
display: inline-block;
padding: 4px 12px;
border-radius: 20px;
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
letter-spacing: 0.3px;
border: 1px solid transparent;
}
.status-badge.neu { background: #dbeafe; color: #1d4ed8; }
.status-badge.bearbeitung,
.status-badge.warnung { background: #fef3c7; color: #b45309; }
.status-badge.warten { background: #ffedd5; color: #c2410c; }
.status-badge.abgeschlossen,
.status-badge.bestanden { background: #dcfce7; color: #15803d; }
.status-badge.offen { background: #e2e8f0; color: #475569; }
.status-badge.kritisch { background: #fde8ec; color: #E2003B; }
/* =============================================================================
12. Dashboard Layout (.dashboard-columns)
============================================================================= */
.dashboard-columns {
display: grid;
grid-template-columns: 60% 40%;
gap: 24px;
}
.wiedervorlage-item,
.alert-item {
padding: 14px 0;
border-bottom: 1px solid var(--border-color);
}
.wiedervorlage-date {
font-size: 12px;
font-weight: 700;
color: var(--sos-rot);
}
.wiedervorlage-desc {
font-size: 13px;
}
.wiedervorlage-case {
font-size: 11px;
color: var(--text-secondary);
}
/* =============================================================================
13. Filter Bar (.filter-bar)
============================================================================= */
.filter-bar {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.filter-bar select,
.filter-bar input {
padding: 9px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: inherit;
transition: var(--transition-fast);
background: var(--card-bg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.filter-bar select:focus,
.filter-bar input:focus {
outline: none;
border-color: var(--sos-gruen);
box-shadow: 0 0 0 3px rgba(132, 187, 85, 0.15);
}
/* =============================================================================
14. Buttons (.btn)
============================================================================= */
.btn {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 10px 22px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: none;
font-family: inherit;
transition: var(--transition-fast);
text-decoration: none;
letter-spacing: 0.01em;
}
.btn-primary {
background: linear-gradient(135deg, var(--sos-gruen) 0%, #6fa344 100%);
color: #FFFFFF;
box-shadow: 0 2px 8px rgba(132, 187, 85, 0.3);
}
.btn-primary:hover {
background: linear-gradient(135deg, #6fa344 0%, var(--sos-gruen-dunkel) 100%);
transform: translateY(-1px);
box-shadow: 0 4px 16px rgba(132, 187, 85, 0.4);
}
.btn-secondary {
background: var(--card-bg);
color: var(--text-primary);
border: 1px solid var(--border-color);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.btn-secondary:hover {
background: var(--grau-bg);
border-color: #d0d7df;
}
.btn-accent {
background: var(--tool-accent);
color: #FFFFFF;
}
.btn-accent:hover {
background: var(--tool-accent-dark);
}
.btn-back {
background: none;
border: none;
color: var(--sos-blau);
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.btn-back:hover {
color: #005a8e;
}
/* =============================================================================
15. Tabs (.tabs, .tab)
============================================================================= */
.tabs {
display: flex;
gap: 4px;
border-bottom: 1px solid var(--border-color);
margin-bottom: 24px;
}
.tab {
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
color: var(--text-secondary);
border-bottom: 2px solid transparent;
cursor: pointer;
transition: var(--transition-fast);
background: none;
border-top: none;
border-left: none;
border-right: none;
font-family: inherit;
margin-bottom: -1px;
border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.tab:hover {
color: var(--text-primary);
background: rgba(132, 187, 85, 0.05);
}
.tab.active {
color: var(--sos-gruen-dunkel);
border-bottom-color: var(--sos-gruen);
background: rgba(132, 187, 85, 0.06);
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
/* =============================================================================
16. Drop Zone (.drop-zone)
============================================================================= */
.drop-zone {
border: 2px dashed var(--border-color);
border-radius: var(--radius);
padding: 48px 24px;
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.drop-zone:hover,
.drop-zone.drag-over {
border-color: var(--sos-gruen);
background: var(--sos-gruen-20);
}
.drop-zone .drop-icon {
font-size: 40px;
color: var(--text-light);
margin-bottom: 12px;
}
.drop-zone .drop-text {
font-size: 15px;
font-weight: 600;
color: var(--text-secondary);
}
.drop-zone .drop-hint {
font-size: 12px;
color: var(--text-light);
margin-top: 4px;
}
/* =============================================================================
17. Hero Section (.hero)
============================================================================= */
.hero {
text-align: center;
padding: 32px 0;
}
.hero h2 {
font-size: 28px;
font-weight: 800;
color: var(--sos-gruen-dunkel);
}
.hero p {
font-size: 15px;
color: var(--text-secondary);
max-width: 480px;
margin: 8px auto 0;
}
/* =============================================================================
18. Chat Interface (.chat-layout, .chat-main, .chat-sidebar)
============================================================================= */
.chat-layout {
display: grid;
grid-template-columns: 30% 70%;
gap: 24px;
height: calc(100vh - var(--header-height) - 100px);
}
.chat-sidebar {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: 20px;
overflow-y: auto;
}
.chat-sidebar h3 {
font-size: 14px;
font-weight: 700;
margin-bottom: 16px;
}
.chat-question {
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--sos-gruen-dunkel);
cursor: pointer;
transition: var(--transition);
margin-bottom: 4px;
}
.chat-question:hover {
background: var(--sos-gruen-20);
}
.chat-main {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
display: flex;
flex-direction: column;
overflow: hidden;
}
.chat-messages {
flex: 1;
padding: 24px;
overflow-y: auto;
}
.chat-bubble {
max-width: 80%;
padding: 14px 18px;
border-radius: 16px;
font-size: 14px;
line-height: 1.5;
margin-bottom: 16px;
}
.chat-bubble.system {
background: var(--sos-gruen-20);
color: var(--text-primary);
border-bottom-left-radius: 4px;
margin-right: auto;
}
.chat-bubble.user {
background: var(--sos-gruen-dunkel);
color: #FFFFFF;
border-bottom-right-radius: 4px;
margin-left: auto;
}
/* Tool-specific user bubble override (use tool-accent-dark when tool class is set) */
body.tool-legal .chat-bubble.user,
body.tool-seo .chat-bubble.user,
body.tool-briefing .chat-bubble.user {
background: var(--tool-accent-dark);
}
.chat-bubble .bubble-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 4px;
}
.chat-bubble.system .bubble-label {
color: var(--sos-gruen-dunkel);
}
/* Tool-specific system bubble label */
body.tool-legal .chat-bubble.system .bubble-label,
body.tool-seo .chat-bubble.system .bubble-label,
body.tool-briefing .chat-bubble.system .bubble-label {
color: var(--tool-accent-dark);
}
.chat-bubble.user .bubble-label {
color: rgba(255, 255, 255, 0.7);
}
.chat-input-area {
padding: 16px 24px;
border-top: 1px solid var(--border-color);
display: flex;
gap: 10px;
}
.chat-input-area input {
flex: 1;
padding: 12px 16px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: inherit;
transition: var(--transition);
}
.chat-input-area input:focus {
outline: none;
border-color: var(--sos-gruen);
box-shadow: 0 0 0 3px rgba(132, 187, 85, 0.15);
}
/* =============================================================================
19. Template Cards (.template-layout, .template-grid, .template-card)
============================================================================= */
.template-layout {
display: grid;
grid-template-columns: 40% 60%;
gap: 24px;
}
.template-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.template-card {
background: var(--card-bg);
border: 2px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 16px;
text-align: center;
cursor: pointer;
transition: var(--transition);
}
.template-card:hover {
border-color: var(--sos-gruen);
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.template-card.selected {
border-color: var(--sos-gruen);
background: var(--sos-gruen-20);
}
.template-card .template-icon {
font-size: 24px;
margin-bottom: 8px;
}
.template-card .template-name {
font-size: 12px;
font-weight: 700;
}
/* =============================================================================
20. Fristen / Columns (.fristen-grid)
============================================================================= */
.fristen-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.fristen-column {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.fristen-column-header {
padding: 14px 20px;
font-size: 13px;
font-weight: 700;
color: #FFFFFF;
text-transform: uppercase;
}
.fristen-column-header.red { background: var(--sos-rot); }
.fristen-column-header.yellow { background: #d97706; }
.fristen-column-header.blue { background: var(--sos-blau); }
.fristen-column-header.green { background: var(--sos-gruen); }
.fristen-item {
padding: 16px 20px;
border-bottom: 1px solid var(--border-color);
}
/* =============================================================================
21. Compliance Checklist (.checklist-group, .checklist-item)
============================================================================= */
.checklist-group {
margin-bottom: 24px;
}
.checklist-group h3 {
font-size: 15px;
font-weight: 700;
border-bottom: 1px solid var(--border-color);
padding-bottom: 8px;
margin-bottom: 12px;
}
.checklist-item {
display: flex;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid #f1f5f9;
align-items: flex-start;
}
.checklist-item input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--sos-gruen);
flex-shrink: 0;
margin-top: 2px;
}
.checklist-item .check-text {
flex: 1;
font-size: 13px;
}
.summary-bar {
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: var(--radius-sm);
padding: 14px;
font-size: 14px;
font-weight: 700;
color: #15803d;
text-align: center;
margin-top: 20px;
}
/* =============================================================================
22. Bar Charts (CSS-only)
============================================================================= */
.chart-container {
background: var(--card-bg);
border-radius: var(--radius);
box-shadow: var(--shadow);
border: 1px solid var(--border-color);
padding: 24px;
margin-bottom: 24px;
}
.chart-container h3 {
font-size: 15px;
font-weight: 700;
margin-bottom: 20px;
}
/* Vertical bar chart */
.bar-chart {
display: flex;
align-items: flex-end;
gap: 16px;
height: 180px;
border-bottom: 2px solid var(--border-color);
}
.bar-group {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
justify-content: flex-end;
}
.bar {
width: 100%;
max-width: 48px;
background: var(--sos-gruen);
border-radius: 4px 4px 0 0;
transition: var(--transition);
}
.bar-value {
font-size: 11px;
font-weight: 700;
margin-bottom: 4px;
}
.bar-label {
font-size: 11px;
color: var(--text-secondary);
margin-top: 8px;
}
/* Horizontal bar chart */
.hbar-chart {
display: flex;
flex-direction: column;
gap: 12px;
}
.hbar-row {
display: flex;
gap: 12px;
align-items: center;
}
.hbar-label {
width: 140px;
font-size: 13px;
text-align: right;
flex-shrink: 0;
}
.hbar-track {
flex: 1;
height: 28px;
background: #f1f5f9;
border-radius: 6px;
overflow: hidden;
}
.hbar-fill {
height: 100%;
border-radius: 6px;
font-size: 12px;
font-weight: 700;
color: #FFFFFF;
display: flex;
align-items: center;
padding-left: 10px;
transition: var(--transition);
}
/* =============================================================================
23. Plugin / Integration Page
============================================================================= */
.plugin-header {
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 28px;
}
.plugin-header h2 {
font-size: 24px;
font-weight: 800;
color: var(--sos-gruen-dunkel);
}
.anthropic-badge {
font-size: 12px;
color: var(--text-secondary);
background: #f1f5f9;
padding: 4px 12px;
border-radius: 20px;
}
.skills-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.skill-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 20px;
transition: var(--transition);
cursor: default;
}
.skill-card:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.skill-card .skill-icon {
font-size: 28px;
margin-bottom: 10px;
}
.skill-card .skill-name {
font-size: 14px;
font-weight: 700;
}
.skill-card .skill-desc {
font-size: 12px;
color: var(--text-secondary);
margin-top: 4px;
}
.security-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 28px;
}
.security-item {
background: var(--card-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
padding: 16px;
text-align: center;
}
.security-item .sec-label {
font-size: 11px;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 4px;
}
.security-item .sec-value {
font-size: 14px;
font-weight: 700;
color: var(--sos-gruen);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.stat-card {
background: linear-gradient(135deg, var(--sos-gruen), var(--sos-gruen-dunkel));
border-radius: var(--radius);
padding: 24px;
color: #FFFFFF;
text-align: center;
}
.stat-card .stat-value {
font-size: 28px;
font-weight: 800;
}
.stat-card .stat-label {
font-size: 12px;
opacity: 0.85;
margin-top: 4px;
}
/* =============================================================================
24. Detail View Components
============================================================================= */
.case-detail-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.detail-row {
display: flex;
border-bottom: 1px solid #f1f5f9;
padding: 10px 0;
}
.detail-label {
width: 140px;
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
flex-shrink: 0;
}
.detail-value {
flex: 1;
font-size: 13px;
}
.asset-card {
background: var(--sos-gruen-20);
border-radius: var(--radius-sm);
padding: 14px;
margin-bottom: 12px;
}
.asset-card h4 {
font-size: 14px;
margin-bottom: 4px;
}
.asset-card p {
font-size: 12px;
color: var(--text-secondary);
}
.asset-card .asset-value {
font-size: 16px;
font-weight: 800;
color: var(--sos-gruen-dunkel);
margin-top: 6px;
}
/* =============================================================================
25. Document List
============================================================================= */
.doc-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--border-color);
align-items: center;
}
.doc-type-badge {
padding: 4px 10px;
border-radius: 6px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
flex-shrink: 0;
}
.doc-type-badge.testament { background: #f3e8ff; color: #7c3aed; }
.doc-type-badge.erbschein { background: #dbeafe; color: #1d4ed8; }
.doc-type-badge.brief { background: #fef3c7; color: #b45309; }
.doc-type-badge.gutachten { background: #dcfce7; color: #15803d; }
.doc-type-badge.sonstige { background: #e2e8f0; color: #475569; }
.doc-type-badge.analyse { background: #fff8e0; color: #c89600; }
.doc-type-badge.bericht { background: #dbeafe; color: #1d4ed8; }
.doc-type-badge.briefing { background: #fde8ec; color: #E2003B; }
.doc-info {
flex: 1;
}
.doc-info .doc-name {
font-size: 13px;
font-weight: 600;
}
.doc-info .doc-meta {
font-size: 11px;
color: var(--text-light);
margin-top: 2px;
}
/* =============================================================================
26. Correspondence / Communication
============================================================================= */
.corr-item {
display: flex;
gap: 14px;
padding: 14px 0;
border-bottom: 1px solid var(--border-color);
align-items: center;
}
.corr-item .corr-icon {
font-size: 28px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.corr-item .corr-info {
flex: 1;
}
.corr-item .corr-title {
font-size: 13px;
font-weight: 600;
}
.corr-item .corr-meta {
font-size: 11px;
color: var(--text-light);
margin-top: 2px;
}
/* =============================================================================
27. Timeline
============================================================================= */
.timeline {
padding-left: 24px;
border-left: 2px solid var(--sos-gruen-50);
}
.timeline-item {
margin-bottom: 24px;
padding-left: 20px;
position: relative;
}
.timeline-item::before {
content: '';
position: absolute;
left: -24px;
top: 4px;
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--sos-gruen);
border: 2px solid #FFFFFF;
box-shadow: 0 0 0 2px var(--sos-gruen);
}
/* =============================================================================
28. Period Selector (Reporting)
============================================================================= */
.period-selector {
display: inline-flex;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
overflow: hidden;
margin-bottom: 20px;
}
.period-btn {
padding: 10px 20px;
font-size: 13px;
font-weight: 500;
border: none;
background: var(--card-bg);
cursor: pointer;
font-family: inherit;
transition: var(--transition);
border-right: 1px solid var(--border-color);
}
.period-btn:last-child {
border-right: none;
}
.period-btn.active {
background: var(--sos-gruen);
color: #FFFFFF;
}
/* =============================================================================
29. Mini KPIs (Reporting)
============================================================================= */
.mini-kpi-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
.mini-kpi {
background: var(--card-bg);
border-radius: var(--radius-sm);
border: 1px solid var(--border-color);
padding: 16px;
}
.mini-kpi .mini-label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mini-kpi .mini-value {
font-size: 22px;
font-weight: 800;
margin-top: 4px;
}
.mini-kpi .mini-trend {
font-size: 12px;
font-weight: 600;
margin-top: 2px;
}
.mini-kpi .mini-trend.up { color: var(--sos-gruen); }
.mini-kpi .mini-trend.down { color: var(--sos-rot); }
/* =============================================================================
30. KI-Badge (.ki-badge)
============================================================================= */
.ki-badge {
display: inline-flex;
align-items: center;
gap: 6px;
background: linear-gradient(135deg, var(--sos-gruen-20), var(--sos-gruen-50));
color: var(--sos-gruen-dunkel);
padding: 4px 14px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
margin-bottom: 20px;
}
/* =============================================================================
31. Form Elements (.form-group)
============================================================================= */
.form-group {
margin-bottom: 16px;
}
.form-group label {
display: block;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 6px;
letter-spacing: 0.5px;
}
.form-group select,
.form-group input,
.form-group textarea {
width: 100%;
padding: 10px 14px;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
font-size: 13px;
font-family: inherit;
transition: var(--transition);
}
.form-group select:focus,
.form-group input:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--sos-gruen);
box-shadow: 0 0 0 3px rgba(132, 187, 85, 0.15);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
/* =============================================================================
32. Letter Preview (.letter-preview-area)
============================================================================= */
.letter-preview-area {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius);
min-height: 300px;
overflow: hidden;
}
.letter-placeholder {
text-align: center;
padding: 64px;
}
.letter-placeholder .letter-icon {
font-size: 48px;
margin-bottom: 12px;
}
.letter-placeholder p {
color: var(--text-light);
font-size: 14px;
}
.letter-header {
padding: 16px 24px;
border-bottom: 2px solid var(--sos-gruen);
background: #f8fafc;
}
/* =============================================================================
33. Confidence Bars (.confidence-bar)
============================================================================= */
.confidence-bar {
height: 6px;
background: #f1f5f9;
border-radius: 3px;
overflow: hidden;
}
.confidence-bar .confidence-fill {
height: 100%;
background: var(--sos-gruen);
border-radius: 3px;
transition: var(--transition);
}
/* =============================================================================
34. Status Card (.status-card)
============================================================================= */
.status-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 20px;
display: flex;
gap: 16px;
align-items: center;
margin-bottom: 28px;
}
.status-card .status-dot-lg {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--sos-gruen);
animation: pulse-dot 2s infinite;
flex-shrink: 0;
}
.status-card .status-info {
flex: 1;
}
.status-card .status-label {
font-size: 11px;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.status-card .status-value {
font-size: 16px;
font-weight: 700;
color: var(--sos-gruen);
}
/* =============================================================================
36. Score-Explain Popover (Erlaeuterung von Scores & KPIs)
=============================================================================
Verwendung: data-explain="Erklaerungstext" auf jedem klickbaren Score-Element.
Optional: data-explain-title="Titel" fuer eigenen Popover-Titel.
JS: vor
============================================================================= */
[data-explain] {
cursor: help;
position: relative;
}
[data-explain]::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 1px;
background: currentColor;
opacity: 0.25;
border-radius: 1px;
}
[data-explain]:hover::after {
opacity: 0.5;
}
.score-explain-backdrop {
position: fixed;
inset: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.08);
animation: explainFadeIn 0.15s ease;
}
.score-explain {
position: fixed;
z-index: 1000;
background: var(--card-bg, #fff);
border-radius: var(--radius, 12px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.08);
border-top: 3px solid #84BB55;
padding: 0;
max-width: 380px;
min-width: 260px;
animation: explainSlideIn 0.2s ease;
font-family: Arial, Helvetica, sans-serif;
}
.score-explain-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 16px 20px 12px;
border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.score-explain-title {
font-size: 14px;
font-weight: 700;
color: #3B5426;
display: flex;
align-items: center;
gap: 8px;
}
.score-explain-title .i {
color: #84BB55;
}
.score-explain-close {
width: 24px;
height: 24px;
border: none;
background: none;
color: var(--text-light, #9CA3AF);
font-size: 18px;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.15s ease;
}
.score-explain-close:hover {
background: var(--grau-bg, #F5F5F5);
color: var(--text-primary, #000);
}
.score-explain-body {
padding: 16px 20px;
font-size: 13px;
line-height: 1.6;
color: var(--text-secondary, #4B5663);
}
.score-explain-body strong {
color: var(--text-primary, #000);
font-weight: 600;
}
.score-explain-body .explain-formula {
display: block;
margin: 10px 0;
padding: 10px 14px;
background: #f0f7eb;
border-left: 3px solid #84BB55;
border-radius: 0 6px 6px 0;
font-family: 'Consolas', 'Courier New', monospace;
font-size: 12px;
color: #3B5426;
}
.score-explain-body .explain-scale {
display: flex;
gap: 8px;
margin: 10px 0 4px;
flex-wrap: wrap;
}
.score-explain-body .explain-scale span {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
padding: 3px 8px;
border-radius: 4px;
background: var(--grau-bg, #F5F5F5);
}
.score-explain-body .explain-scale .scl-good { background: #dcfce7; color: #15803d; }
.score-explain-body .explain-scale .scl-mid { background: #fef3c7; color: #b45309; }
.score-explain-body .explain-scale .scl-bad { background: #fde8ec; color: #b91c1c; }
.score-explain-footer {
padding: 10px 20px 14px;
font-size: 11px;
color: var(--text-light, #9CA3AF);
border-top: 1px solid var(--border-color, #e2e8f0);
}
@keyframes explainSlideIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes explainFadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* =============================================================================
37. Data-Source Annotator (Demo-Daten-Kennzeichnung)
=============================================================================
Kennzeichnet Elemente mit data-source Attribut als Demo-Daten und zeigt
per Mouseover/Klick die benoetigte Datenquelle an.
JS: vor