/* ================================ 
    Custom Cursor – Container 
 ================================ */ 
 #cursor { 
   position: fixed; 
  z-index: 2147483647; 
   left: 0; 
   top: 0; 
   pointer-events: none; 
  will-change: left, top; 
 } 
 
 /* ================================ 
    Grundzustand 
    Rund, Outline, transparent 
 ================================ */ 
 .cursor__circle { 
  width: 10px; 
  height: 10px; 
   /* 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: 0; 
  background-color: rgba(255,255,255,0.001); 
  backdrop-filter: invert(1) grayscale(1); 
  -webkit-backdrop-filter: invert(1) grayscale(1); 
 
   transition: 
     border-color 0.2s ease, 
     background-color 0.2s ease, 
     width 0.2s ease, 
     height 0.2s ease; 
 } 

/* Popup/Overlay fallback: use blend mode for strong visibility */
#cursor.blend .cursor__circle::before {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background-color: #fff;
  mix-blend-mode: difference;
}
 
 /* ================================ 
    Hover / Active 
    Fläche + Kontur invertiert + monochrom 
    Kreis vergrößert 
 ================================ */ 
 #cursor.active .cursor__circle { 
  width: 60px;  
   height: 60px; 
 } 
 
#cursor.text .cursor__circle {
  width: 2px;
  height: 18px;
  border-radius: 0;
}

#cursor.text.active .cursor__circle {
  width: 2px;
  height: 38px;
}

 
 /* ================================ 
    Fallback für Browser ohne backdrop-filter 
 ================================ */ 

/* Hide system cursor on desktop when custom cursor is active */
body.has-custom-cursor {
   cursor: none !important;
}
body.has-custom-cursor * {
   cursor: none !important;
}

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

#cursor.hidden {
  opacity: 0;
}
#cursor.hidden .cursor__circle::before {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: normal !important;
}