:root{
  --white: #fff;
  --text-shadow: 3px 3px 3px rgba(0,0,0,.9);
  --bg-primary: #7384e5;   /* ähnlich zum Beispiel */
  --fill-tip:   #b21edb;
  --bg-brown:   #58453e;
  --fill-sub:   #e867a0;
  --fill-follow:#aeee11;
}

* { box-sizing: border-box; font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
html, body { margin:0; padding:0; background:transparent; }
#app { position: relative; overflow: hidden; }

.goal { position: absolute; }
.goal-bar { position: relative; width: 100%; height: 100%; border-radius: 4px; overflow: hidden; }
.bg-primary { background: var(--bg-primary); }
.bg-brown   { background: var(--bg-brown); }

.goal-fill {
  position: absolute; left: 0; top: 0; height: 100%;
  width: 0%;
  transition: width .2s linear;
}
.fg-tip    { background: var(--fill-tip); }
.fg-sub    { background: var(--fill-sub); }
.fg-follow { background: var(--fill-follow); }

.goal-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 8px;
  color: var(--white);
  font-family: Nunito, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  text-shadow: var(--text-shadow);
}
.goal-row p { margin: 0; padding: 0; font-size: 24px; }
.goal-row.small p { font-size: 14px; text-shadow: 1px 1px 2px black; }

.goal-tip .goal-row p {margin-top: -4px !important;}
.goal-small .goal-row p {margin-top: -2px !important;}

.goal-label   { position: absolute; left: 5px; }
.goal-current { opacity: .95; width: 100%; text-align: center;}
.goal-amount  { opacity: .95; text-align: right; position: absolute; right: 5px;}