/* ============ DASHBOARD MOCKUP ============ */
/* Styles für das inline HTML-Mockup in der Dashboard-Sektion */

.dashboard-mockup {
  width: 420px;
  background: transparent;
  border-radius: 12px;
  border: 0.5px solid #D8D4CE;
  box-shadow: 0 20px 50px rgba(26,25,23,0.10), 0 6px 16px rgba(15,110,86,0.07);
  overflow: hidden;
}
.dashboard-mockup.compact {
  width: 420px;
  box-shadow: 0 24px 56px rgba(26,25,23,0.11), 0 8px 20px rgba(15,110,86,0.08);
}
.dm-titlebar {
  background: #EFEDE8;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 0.5px solid #E0DDD7;
}
.dm-dots {
  display: flex;
  gap: 5px;
}
.dm-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.dm-dot.red { background: #E24B4A; }
.dm-dot.orange { background: #EF9F27; }
.dm-dot.green { background: #1D9E75; }
.dm-titlebar-text {
  font-size: 10px;
  color: var(--text-secondary);
}
.dm-body {
  background: var(--bg);
  padding: 14px;
}
.dm-body.compact {
  padding: 12px;
}
.dm-header {
  margin-bottom: 12px;
}
.dm-page-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.dm-page-title.compact {
  font-size: 13px;
}
.dm-subtitle {
  font-size: 9px;
  color: var(--text-muted);
}
.dm-kpi-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.dm-kpi {
  background: var(--surface);
  border: 0.5px solid #E0DDD7;
  border-radius: 6px;
  padding: 8px 10px;
}
.dm-kpi.compact {
  padding: 7px 8px;
}
.dm-kpi-label {
  font-size: 9px;
  color: var(--text-muted);
  margin-bottom: 2px;
}
.dm-kpi-label.compact {
  font-size: 10px;
}
.dm-kpi-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 2px;
}
.dm-kpi-value.compact {
  font-size: 13px;
}
.dm-kpi-change {
  font-size: 9px;
}
.dm-kpi-change.compact {
  font-size: 10px;
  font-weight: 500;
}
.dm-kpi-change.pos { color: var(--accent); }
.dm-kpi-change.neg { color: #A32D2D; }
.dm-chart {
  background: var(--surface);
  border: 0.5px solid #E0DDD7;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 10px;
}
.dm-chart.compact {
  padding: 9px;
}
.dm-chart-title {
  font-size: 9px;
  color: var(--text);
  margin-bottom: 8px;
}
.dm-chart-title.compact {
  font-size: 10px;
  font-weight: 500;
}
.dm-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 60px;
  gap: 6px;
  margin-bottom: 4px;
}
.dm-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.dm-bar {
  width: 100%;
  background: #D4EDE5;
  border-radius: 2px 2px 0 0;
}
.dm-bar.current { background: var(--accent); }
.dm-bar-label {
  font-size: 8px;
  color: var(--text-muted);
}
.dm-bar-label.current { color: var(--accent); font-weight: 500; }
.dm-bar-col:nth-child(1) .dm-bar { height: 24px; }
.dm-bar-col:nth-child(2) .dm-bar { height: 28px; }
.dm-bar-col:nth-child(3) .dm-bar { height: 34px; }
.dm-bar-col:nth-child(4) .dm-bar { height: 26px; }
.dm-bar-col:nth-child(5) .dm-bar { height: 30px; }
.dm-bar-col:nth-child(6) .dm-bar { height: 40px; }
.dm-tasks {
  background: var(--surface);
  border: 0.5px solid #E0DDD7;
  border-radius: 6px;
  padding: 10px;
  margin-bottom: 6px;
}
.dm-tasks-title {
  font-size: 10px;
  color: var(--text);
  margin-bottom: 8px;
}
.dm-task {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  font-size: 9px;
}
.dm-checkbox {
  width: 12px;
  height: 12px;
  border: 1px solid #D8D4CE;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--surface);
}
.dm-checkbox.checked { background: var(--accent); border-color: var(--accent); }
.dm-task-text {
  flex: 1;
  color: var(--text);
}
.dm-task-text.done { text-decoration: line-through; color: var(--text-muted); }
.dm-task-badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
}
.dm-task-badge.pending { background: var(--warning-bg); color: var(--warm-text); }
.dm-task-badge.done { background: var(--accent-light); color: var(--accent-dark); }
.dm-footer {
  background: #EFEDE8;
  border-top: 0.5px solid #E0DDD7;
  padding: 6px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dm-footer-left {
  font-size: 10px;
  color: var(--text-muted);
}
.dm-footer-left.compact {
  font-size: 7px;
}
.dm-footer-badge {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 4px;
  background: var(--accent-light);
  color: var(--accent-dark);
}
.dm-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.dm-progress-card {
  background: var(--surface);
  border: 0.5px solid #E0DDD7;
  border-radius: 6px;
  padding: 9px;
}
.dm-card-title {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.dm-progress-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}
.dm-progress-item:last-child { margin-bottom: 0; }
.dm-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dm-progress-label {
  font-size: 10px;
  color: var(--text-secondary);
}
.dm-progress-value {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
}
.dm-progress-value.warning { color: #EF9F27; }
.dm-progress-bar-bg {
  height: 4px;
  background: #EFEDE8;
  border-radius: 2px;
  overflow: hidden;
}
.dm-progress-bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
}
.dm-progress-bar-fill.warning { background: #EF9F27; }
.dm-progress-item:nth-child(2) .dm-progress-bar-fill { width: 100%; }
.dm-progress-item:nth-child(3) .dm-progress-bar-fill { width: 80%; }
.dm-progress-item:nth-child(4) .dm-progress-bar-fill { width: 40%; }
.dm-platform-card {
  background: var(--surface);
  border: 0.5px solid #E0DDD7;
  border-radius: 6px;
  padding: 9px;
}
.dm-platform-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.dm-platform-item:last-child { margin-bottom: 0; }
.dm-platform-name {
  font-size: 8px;
  color: var(--text-secondary);
}
.dm-platform-value {
  font-size: 10px;
  font-weight: 500;
  color: var(--text);
}
.dm-tasks-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.dm-task-count-badge {
  font-size: 7px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--accent-light);
  color: var(--accent-dark);
}