@font-face { font-family: "Caveat"; src: url("../fonts/caveat-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
:root { --hand: "Caveat", "Segoe Print", cursive; --kalk: #eceef2; }
.hand { font-family: var(--hand); font-weight: 400; line-height: 1.05; }
.strich path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.unterstrich { position: relative; white-space: nowrap; }
.unterstrich svg { position: absolute; left: -1%; bottom: -.06em; width: 102%; height: .22em; overflow: visible; }
.unterstrich path { stroke: var(--gold); stroke-width: 2.2; opacity: .55; stroke-dasharray: 420; stroke-dashoffset: 420; animation: zeichnen .9s .5s cubic-bezier(.16,1,.3,1) forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.wand { position: relative; }
.notiz-wand { position: absolute; left: 7%; bottom: 74px; margin: 0; color: var(--kalk); opacity: .82; font-size: 1.45rem; transform: rotate(-3deg); pointer-events: none; z-index: 2; }
.notiz-wand svg { position: absolute; left: calc(100% + 16px); bottom: .55em; width: 66px; height: 44px; overflow: visible; }
.notiz-wand path { stroke: var(--kalk); stroke-width: 1.6; }
.kreis { position: relative; display: inline-block; }
.kreis svg { position: absolute; left: 0; bottom: -.16em; width: 100%; height: .16em; overflow: visible; }
.kreis path { stroke: var(--gold); stroke-width: 1.6; opacity: .6; }
.randnotiz { display: block; margin-top: 22px; color: var(--gold-text); font-size: 1.45rem; transform: rotate(-2deg); transform-origin: left; }
@media (max-width: 980px) { .notiz-wand { display: none; } }
@media (prefers-reduced-motion: reduce) { .unterstrich path { animation: none; stroke-dashoffset: 0; } }