.andock { position: absolute; inset: 0; pointer-events: none; }
.andock svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.andock line { stroke: rgba(237, 232, 223, .62); stroke-width: 1; vector-effect: non-scaling-stroke; }
.andock circle { fill: var(--akzent, #db693f); }

.marke { position: absolute; left: 0; top: 0; max-width: 13rem; }
.marke-innen {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 7px; border-bottom: 1px solid rgba(237, 232, 223, .62);
  opacity: 0; transform: translateY(5px);
  transition: opacity .22s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.23, 1, .32, 1);
}
.marke[data-seite="unten"] .marke-innen {
  padding: 7px 0 0; border-bottom: 0; border-top: 1px solid rgba(237, 232, 223, .62);
  transform: translateY(-5px);
}
.marke.an .marke-innen { opacity: 1; transform: none; }
.marke-name {
  font: 400 .6875rem/1.5 var(--mono, monospace); letter-spacing: .12em; text-transform: uppercase;
  color: var(--creme, #ede8df);
}
.marke-text { font: 400 .8125rem/1.45 var(--sans, sans-serif); color: rgba(237, 232, 223, .78); text-wrap: pretty; }

.andock-hoch .marke { max-width: 10rem; }
.andock-hoch .marke-text { font-size: .75rem; }
.andock.kurz .marke-text { display: none; }
.andock.ruhig .marke-innen { transition: opacity .2s linear; transform: none; }