body{position:relative}.bg-notes{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;overflow:hidden}
.bg-note{will-change:transform;position:absolute;width:150px;height:130px;padding:16px 14px;border-radius:6px;box-shadow:0 14px 28px -18px rgba(40,63,78,.35);opacity:.38;animation:bg-float 4s ease-in-out;--lift:-40px}
.bg-note i{display:block;height:6px;border-radius:3px;background:rgba(40,63,78,.22);margin:9px 0}
.bg-note i:nth-child(2){width:70%}
.bg-note i:nth-child(3){width:45%}
.bg-n1{left:4%;top:14%;--c:#fff1a8;background:var(--c);transform:rotate(-6deg);--lift:-44px}
.bg-n2{right:6%;top:22%;--c:#d5ecf7;background:var(--c);transform:rotate(5deg);--lift:-36px;animation-duration:3.6s}
.bg-n3{left:8%;top:62%;--c:#fbd3da;background:var(--c);transform:rotate(4deg);--lift:-48px;animation-duration:3.8s}
.bg-n4{right:10%;top:74%;--c:#ddf1d6;background:var(--c);transform:rotate(-4deg);--lift:-40px;animation-duration:3.4s}
.bg-n5{left:44%;top:88%;--c:#d5ecf7;background:var(--c);transform:rotate(-2deg);--lift:-32px;animation-duration:3.7s}
.bg-n6{right:38%;top:8%;--c:#fff1a8;background:var(--c);transform:rotate(7deg);--lift:-38px;animation-duration:3.5s;width:120px;height:104px}
.bg-note.tiny{opacity:.3}
main,header,footer{position:relative;z-index:1}
/* Schweben nur einmal beim Laden, höchstens 4 Sekunden: danach ruhen die Zettel */
@keyframes bg-float{0%,100%{translate:0 0}50%{translate:0 var(--lift)}}
@media (prefers-reduced-motion:reduce){.bg-note{animation:none}}
@media (max-width:700px){.bg-note{width:96px;height:84px;padding:10px}.bg-n6,.bg-n5{display:none}}