/* WHOLE STACK Randnotiz */
.ws-note{
  --ws-accent: var(--accent, #1f3a68);
  --ws-ink: var(--ink, #15161a);
  --ws-sheet-half: 105mm; /* halbe Breite des zentrierten Blatts */
  position: fixed; top: 50%; z-index: 40;
  right: calc(50% + var(--ws-sheet-half) + 36px);
  width: min(230px, calc(50vw - var(--ws-sheet-half) - 60px));
  display: none;
  color: var(--ws-accent); text-decoration: none;
  transform: translateY(-50%);
  transition: transform .25s ease-out;
}
.ws-note .note{
  display: block;
  font-family: "Caveat", cursive; font-weight: 500;
  font-size: 25px; line-height: 1.05;
  transform: rotate(-4deg); text-wrap: balance;
}
.ws-note .link{
  position: relative; display: inline-block;
  margin: 14px 0 0 18px;
  font-family: "Caveat", cursive; font-weight: 700; font-size: 30px;
  color: var(--ws-ink); transform: rotate(-2deg);
}
.ws-note .link svg{
  position: absolute; left: -16px; top: -10px;
  width: calc(100% + 32px); height: calc(100% + 20px); overflow: visible;
}
.ws-note .link ellipse{
  fill: none; stroke: var(--ws-accent); stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 420; stroke-dashoffset: 420;
  transition: stroke-dashoffset .7s cubic-bezier(.6,.1,.2,1);
}
.ws-note:hover .link ellipse{ stroke-dashoffset: 0; }
.ws-note .arrow{ display: block; width: 120px; height: 62px; margin: 2px 0 0 auto; overflow: visible; }
.ws-note .arrow path{ fill: none; stroke: var(--ws-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 1180px){ .ws-note{ display: block; } }
@media print{ .ws-note{ display: none !important; } }
@media (prefers-reduced-motion: reduce){ .ws-note{ transition: none; } }