/* ================================ 
    Custom Cursor – Container 
 ================================ */ 
 #cursor { 
   position: fixed; 
   z-index: 9999; 
   left: 0; 
   top: 0; 
   pointer-events: none; 
   will-change: transform; 
 } 
 
 /* ================================ 
    Grundzustand 
    Rund, Outline, transparent 
 ================================ */ 
 .cursor__circle { 
   width: 24px; 
   height: 24px; 
   /* margin-left: -50%; margin-top: -50%; removed to rely on JS centering for better accuracy with dynamic sizing */
   border-radius: 50%; 
   background-color: transparent; 
   position: relative; 
   transform-origin: center center;
 
   transition: 
     width 0.2s cubic-bezier(0.25, 1, 0.5, 1), 
     height 0.2s cubic-bezier(0.25, 1, 0.5, 1); 
 } 
 
 /* Kontur als innerer Ring, invertierbar */ 
 .cursor__circle::before { 
   content: ''; 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
   border-radius: 50%; 
 
   border: 1px solid rgba(140, 140, 140, 0.8); /* Normal grau */ 
   background-color: transparent; 
 
   transition: 
     border-color 0.2s ease, 
     background-color 0.2s ease, 
     width 0.2s ease, 
     height 0.2s ease; 
 } 
 
 /* ================================ 
    Hover / Active 
    Fläche + Kontur invertiert + monochrom 
    Kreis vergrößert 
 ================================ */ 
 #cursor.active .cursor__circle { 
   width: 60px;  /* noch größer */ 
   height: 60px; 
 } 
 
 #cursor.active .cursor__circle::before { 
   border-color: transparent;  /* Kontur weg */ 
   background-color: rgba(0, 0, 0, 0); /* Fläche transparent */ 
   
   /* Untergrund invertieren + monochrom */ 
   backdrop-filter: invert(1) grayscale(1); 
   -webkit-backdrop-filter: invert(1) grayscale(1); 
 
   width: 100%; 
   height: 100%; 
 } 
 
 /* ================================ 
    Fallback für Browser ohne backdrop-filter 
 ================================ */ 
 @supports not ((backdrop-filter: invert(1)) or (-webkit-backdrop-filter: invert(1))) { 
   #cursor.active .cursor__circle::before { 
     border-color: rgb(0,0,0); 
     background-color: rgba(128,128,128,0.2); 
   } 
 }

 /* Disable custom cursor on mobile devices */
 @media (hover: none) and (pointer: coarse) {
    #cursor {
        display: none !important;
    }
    body.has-custom-cursor {
        cursor: auto !important;
    }
 }