/* Gemeinsamer Honeycomb-Hintergrund/Animation von index.css und bookmarks.css.
   Haengt an body::before/::after, ist unabhaengig von den seitenspezifischen
   body{}-Regeln (Farben, Layout) in den jeweiligen Dateien. */
body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    will-change: transform, opacity;
}
body::before {
    background-image:
        linear-gradient(30deg, rgba(255, 255, 255, 0.2) 11.2%, transparent 12.8%, transparent 87.2%, rgba(255, 255, 255, 0.2) 88.8%, rgba(255, 255, 255, 0.2)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.2) 11.2%, transparent 12.8%, transparent 87.2%, rgba(255, 255, 255, 0.2) 88.8%, rgba(255, 255, 255, 0.2)),
        linear-gradient(30deg, rgba(255, 255, 255, 0.2) 11.2%, transparent 12.8%, transparent 87.2%, rgba(255, 255, 255, 0.2) 88.8%, rgba(255, 255, 255, 0.2)),
        linear-gradient(150deg, rgba(255, 255, 255, 0.2) 11.2%, transparent 12.8%, transparent 87.2%, rgba(255, 255, 255, 0.2) 88.8%, rgba(255, 255, 255, 0.2)),
        linear-gradient(60deg, rgba(255, 255, 255, 0.13) 24.2%, transparent 25.8%, transparent 74.2%, rgba(255, 255, 255, 0.13) 75.8%, rgba(255, 255, 255, 0.13)),
        linear-gradient(60deg, rgba(255, 255, 255, 0.13) 24.2%, transparent 25.8%, transparent 74.2%, rgba(255, 255, 255, 0.13) 75.8%, rgba(255, 255, 255, 0.13));
    background-size: 296px 513px;
    background-position: 0 0, 0 0, 148px 256.5px, 148px 256.5px, 0 0, 148px 256.5px;
    background-repeat: repeat;
    opacity: 0.2;
    animation: honeycombPulse 6.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
body::after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 34%, transparent 66%, rgba(0, 0, 0, 0.08));
    opacity: 0.12;
    animation: ambientBreath 6.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes honeycombPulse {
    0% {
        transform: translate3d(-10px, -8px, 0) scale(1);
        opacity: 0.15;
    }
    50% {
        transform: translate3d(10px, 8px, 0) scale(1.012);
        opacity: 0.28;
    }
    100% {
        transform: translate3d(-10px, -8px, 0) scale(1);
        opacity: 0.15;
    }
}
@keyframes ambientBreath {
    0% {
        transform: translateY(0) scale(1);
        opacity: 0.08;
    }
    50% {
        transform: translateY(-10px) scale(1.008);
        opacity: 0.18;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 0.08;
    }
}
@media (max-width: 700px) {
    body::before {
        background-size: 210px 364px;
        background-position: 0 0, 0 0, 105px 182px, 105px 182px, 0 0, 105px 182px;
        opacity: 0.16;
    }
    body::after {
        opacity: 0.1;
    }
}