/* Eventpunkte 3.2 – Postmarathon; Farben zentral pro Theme überschreibbar. */
:root {
  --epm-line: #5163d9;
  --epm-point: #5163d9;
  --epm-grid: #d6dbe7;
  --epm-axis: #656b78;
  --epm-progress: #5163d9;
  --epm-track: #e8eaf1;
  --epm-border: #d8dce6;
  --epm-surface: transparent;
  --epm-text: inherit;
}
.epm-wrap, .epm-index { color: var(--epm-text); box-sizing: border-box; }
.epm-wrap { max-width: 1080px; margin: 24px auto; padding: 18px; }
.epm-wrap h1 { margin: 0 0 6px; }
.epm-wrap h2 { margin: 30px 0 14px; }
.epm-dates, .epm-note { opacity: .75; }
.epm-progress { margin: 10px 0 16px; max-width: 900px; }
.epm-progress-head { display: flex; gap: 12px; justify-content: space-between; margin-bottom: 7px; font-variant-numeric: tabular-nums; }
.epm-progress-track { height: 12px; background: var(--epm-track); border-radius: 20px; overflow: hidden; }
.epm-progress-track > span { display: block; background: var(--epm-progress); height: 100%; border-radius: inherit; transition: width .25s ease; }
.epm-chart { display: block; width: 100%; height: auto; overflow: visible; background: var(--epm-surface); }
.epm-gridline { stroke: var(--epm-grid); stroke-width: 1; }
.epm-axis { fill: var(--epm-axis); font-size: 13px; font-family: system-ui, sans-serif; }
.epm-line { stroke: var(--epm-line); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.epm-dot { fill: var(--epm-point); }
.epm-goal-form { display: grid; grid-template-columns: repeat(3, minmax(110px,1fr)); gap: 12px; }
.epm-goal-form label { display: flex; flex-direction: column; gap: 6px; }
.epm-goal-form input[type=number] { max-width: 100%; box-sizing: border-box; padding: 8px; }
.epm-goal-form .epm-privacy { grid-column: 1 / -1; flex-direction: row; align-items: center; }
.epm-goal-form button { grid-column: 1 / -1; padding: 10px 14px; cursor: pointer; }
.epm-scroll { overflow-x: auto; }
.epm-table { border-collapse: collapse; width: 100%; min-width: 650px; }
.epm-table th, .epm-table td { border-bottom: 1px solid var(--epm-border); padding: 11px 9px; text-align: left; }
.epm-table th { font-weight: 700; }
.epm-index { margin: 12px 0; padding: 15px; border: 1px solid var(--epm-border); }
.epm-index .epm-progress { max-width: 520px; }
@media (max-width: 650px) { .epm-goal-form { grid-template-columns: 1fr; } .epm-wrap { padding: 12px; } }
