.ffn-eb-sc { font-family: inherit; }
.ffn-eb-sc-box { padding: 14px 16px; border: 1px solid #d0d7de; border-radius: 12px; background: #fff; }
.ffn-eb-sc-header { display:flex; gap:16px; justify-content:space-between; align-items:flex-end; margin: 0 0 14px; }
.ffn-eb-sc-title { font-size: 22px; font-weight: 700; line-height: 1.2; }
.ffn-eb-sc-subtitle { font-size: 13px; opacity: .75; margin-top: 2px; }
.ffn-eb-sc-kpi { text-align:right; padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 12px; background: #f6f8fa; min-width: 160px; }
.ffn-eb-sc-kpi-label { font-size: 12px; opacity: .75; }
.ffn-eb-sc-kpi-value { font-size: 18px; font-weight: 700; }
.ffn-eb-sc-list { display:flex; flex-direction:column; gap: 10px; }
.ffn-eb-sc-card { border: 1px solid #d0d7de; border-radius: 14px; background: #fff; padding: 12px 14px; }
.ffn-eb-sc-card-top { display:flex; justify-content:space-between; gap: 14px; align-items:flex-start; }
.ffn-eb-sc-card-date { font-size: 12px; opacity: .75; margin-bottom: 4px; }
.ffn-eb-sc-card-title { font-size: 16px; font-weight: 700; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.ffn-eb-sc-pill { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; border: 1px solid #d0d7de; background: #f6f8fa; }
.ffn-eb-sc-pill-muted { opacity: .75; }
.ffn-eb-sc-card-meta { margin-top: 6px; font-size: 13px; opacity: .9; }
.ffn-eb-sc-card-right { min-width: 160px; text-align:right; }
.ffn-eb-sc-hours { font-size: 16px; font-weight: 800; margin-top: 2px; }
.ffn-eb-sc-bar { height: 8px; border-radius: 999px; background: #eaeef2; margin-top: 8px; overflow:hidden; }
.ffn-eb-sc-bar > span { display:block; height:100%; background: #2da44e; border-radius: 999px; }
.ffn-eb-sc-footnote { font-size: 12px; opacity: .75; margin-top: 10px; }
@media (max-width: 640px) {
  .ffn-eb-sc-header { flex-direction:column; align-items:flex-start; }
  .ffn-eb-sc-card-top { flex-direction:column; }
  .ffn-eb-sc-card-right { width:100%; text-align:left; }
}

.ffn-eb-sc-summary { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 10px 0 14px; }
.ffn-eb-sc-kpi2 { padding: 10px 12px; border: 1px solid #d0d7de; border-radius: 12px; background: #fff; }
.ffn-eb-sc-months { border: 1px solid #d0d7de; border-radius: 14px; background: #fff; padding: 12px 14px; margin: 0 0 14px; }
.ffn-eb-sc-months-title { font-weight: 800; margin-bottom: 10px; }
.ffn-eb-sc-months-grid { display:flex; flex-direction:column; gap: 8px; }
.ffn-eb-sc-month-row { display:grid; grid-template-columns: 90px 1fr 70px; gap: 10px; align-items:center; }
.ffn-eb-sc-month-label { font-size: 12px; opacity: .85; }
.ffn-eb-sc-month-val { font-weight: 800; text-align:right; }
.ffn-eb-sc-month-bar { height: 10px; border-radius: 999px; background:#eaeef2; overflow:hidden; position:relative; }
.ffn-eb-sc-month-total { display:block; height:100%; background:#2da44e; border-radius: 999px; position:relative; }
.ffn-eb-sc-month-dienst { display:block; height:100%; background:#0969da; border-radius: 999px 0 0 999px; }
.ffn-eb-sc-legend { display:flex; gap: 14px; margin-top: 10px; font-size: 12px; opacity: .85; }
.ffn-eb-sc-legend-swatch { display:inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ffn-eb-sc-swatch-einsatz { background:#2da44e; }
.ffn-eb-sc-swatch-dienst { background:#0969da; }
@media (max-width: 640px) {
  .ffn-eb-sc-summary { grid-template-columns: 1fr; }
  .ffn-eb-sc-month-row { grid-template-columns: 70px 1fr 60px; }
}