@font-face {
    font-family: 'PowerGrotesk';
    src:  url('../links/PowerGrotesk-Medium.woff2') format('woff2'),
          url('../links/PowerGrotesk-Medium.woff') format('woff');
  }


  /*GLOBAL*/

*, html {
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family:"PowerGrotesk", Arial, Helvetica, sans-serif;
    overflow-x:hidden;
}


body {
    margin:0;
    padding:0;
    height:100vh;
    font-size:1.5em;
    
    }
    

/*TYPO*/

h1, h2, h3, h4 {
    text-transform: uppercase;
    margin:0;
    padding:0;
    line-height:0.8em;
}



.animatedText span {
    display: inline-block;
    animation: randomSpacing 30s infinite alternate ease-in-out;
}

h2 {
  font-size:3.5vw;
  line-height:0.9;
  margin:0;
padding:0;
color:black;  
  opacity:0.05;
    -webkit-text-stroke: 2px black; /* Outline */
    text-stroke: 2px black; /* Standard-Text-Outline */
    font-weight:inherit;
    padding-top:6px;
    overflow:hidden;
    transition:all ease-out 0.2s;
}

.draggable:hover h2 {
        animation: cubic-bezier(0.16, 1, 0.3, 1) randomSpacing 20s infinite;
        transition:all ease-out 0.2s;
}

@keyframes randomSpacing {
    0% { letter-spacing: var(--spacing-0, 0px); }
    25% { letter-spacing: var(--spacing-1, 8px); }
    50% { letter-spacing: var(--spacing-2, 2px); }
    75% { letter-spacing: var(--spacing-3, 5px); }
    100% { letter-spacing: var(--spacing-4, 0px); }
}



h3 {
    
    margin-top:8px;
    font-size:18px;
  padding:p2x;    
    color:#E5E5E5;
      -webkit-text-stroke: 1px #E5E5E5; /* Outline */
      text-stroke: 1px #E5E5E5; /* Standard-Text-Outline */
      font-weight:inherit;
      letter-spacing:1px;
  }

h4 {
  
  margin-top:8px;
  font-size:18px;
padding:2px;    
  color:#c8ff00;
    -webkit-text-stroke: 1px #c8ff00; /* Outline */
    text-stroke: 1px #c8ff00; /* Standard-Text-Outline */
    font-weight:inherit;
}

h4 a {
    color:#c8ff00
}
/*LOGO*/

#logo_container {
    width:33vw;
    position:fixed;
    top:2%;
    left:2%;
    opacity:0.05;
}

#logo_container img {
    width:100%;
}

/*MENU*/

ul#menu {
    margin:0;
    padding:0;
    position:fixed;
    top:2%;
    right:2%;
    border-radius:8px;
    padding:0 8px
}

ul#menu li {
    font-size:14px;
    text-transform:uppercase;
    list-style: none;
    margin:0;
    padding:0;
    color:black;
    display:inline-block;
    opacity:0.2;
}


ul#menu li:hover, h4:hover, #contact_link:hover {
    color:#c8ff00;
    filter:blur(2px);
    cursor: pointer;
}

#menu a {
    color:inherit;
    text-decoration: none;
}


#contact_link {
    font-size:3.5vw;
    color:#c8ff00;
    position:absolute;
    top:1%;
    left:66%;
    text-transform:uppercase;
    text-decoration: none;
    -webkit-text-stroke: 2px #c8ff00; /* Outline */
    text-stroke: 2px #c8ff00; /* Standard-Text-Outline */;
    padding-left:2px;
    letter-spacing:-2px;

}

/*DRAGGABLE*/

    
    .draggable {
        position: absolute;
        cursor: grab;
        user-select: none;
      border:1px dashed lightgrey;
       white-space: nowrap;
        overflow: hidden;
        user-select: none; /* 🔥 Verhindert Textmarkierung */
        
    
    }
    
    .draggable:hover {
      -webkit-box-shadow: 0px 0px 25px 0px rgba(200,255,0,0.5); 
    box-shadow: 0px 0px 25px 0px rgba(200,255,0,0.5);
    transition:all ease 0.1s;
    }
    
    .draggable:active {
        cursor: grabbing;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(200,255,0,0.5); 
    box-shadow: 0px 0px 25px 0px rgba(200,255,0,0.5);
    }
        

/*EP ELEMENTS*/


.cover {
  width:60px;
  height:60px;
  opacity:0.3;
  margin-bottom:8px;
  display:inline-block;
}


#ep0102 #cover1 {
  background:#3A6C94;  
}

#ep0102 #cover2 {
    background:#ABA767
}

/*TRACKLIST*/

.draggable:hover .tracklist {
    opacity:0.5;
    transition:all ease 0.2s;
}

.tracklist {
    font-size: 14px;
    margin: 0;
    padding: 0;
    position: absolute;
    padding: 0.5vw 0;
    opacity:0;
    letter-spacing:1px;
    transition:all ease 0.2s;
}

#ep0102 .tracklist {
    color:#3A6C94
}

#ego .tracklist {
    color:#4f4691
}

.draggable#ep0102 {
    top: 60%;
    left: 2%;
    }

    #ep0102:hover #cover1 {
        background:url(../links/mw_ep01.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        opacity:1    
    }


    #ep0102:hover #cover2 {
        background:url(../links/mw_ep02.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        opacity:1    
    }

#ego
 .cover {
    background:#4f4691;
    
  }

  .draggable#ego {
    top: 20%;
    left: 30%;
    }

    #ego:hover .cover {
        background:url(../links/mw_ego_cover.jpg);
        background-size:cover;
        background-repeat: no-repeat;
        opacity:1
        
    }


    #vinyl .cover {
        background:url(../links/vinyl_placeholder.png);
        background-size:cover;
        background-repeat: no-repeat;
        opacity:1;
        border-radius:100px;
        animation:rotate 10s infinite linear;
      }

      @keyframes rotate {
        0%{transform:rotate(0deg)}
        100%{transform:rotate(360deg)}
      }
    
      .draggable#vinyl {
        top: 30%;
        left: 66%;
        }

        #vinyl:hover .cover {
            background:url(../links/wm_vinyl.jpg);
            background-size:cover;
            background-repeat: no-repeat;
            opacity:1
            
        }

        #news .cover {
            background:#c8ff00;
            opacity:1 !important;
            
          }
        
          .draggable#news {
            top: 66%;
            left: 55%;
            }

            #news:hover .cover {
                background:url(https://www.planetarium.berlin/sites/default/files/styles/gallery_768x576/public/2025-03/musicalspheres_MadlenWittenstein.jpg);
                background-size:cover;
                background-repeat: no-repeat;
                background-position:center center;
                
            }
    

@media only screen and (max-width: 768px) { 

    *, html{
overflow-x:unset;
    }
    body {
        min-height:100vh;
    }

    #logo_container {
        width:94vw;
        position:absolute;
    }

    #contact_link {
        top:unset;
        bottom:10px !important;
        left:1%;
        font-size:20.5vw;
        -webkit-text-stroke: 8px #c8ff00;
    text-stroke: 8px #c8ff00;
    position:fixed;
    z-index:99;
    }

    .draggable {
        position:static;
        margin:100px 2%;
        width:94vw;
        
    }

    .cover {
        width:120px;
        height:120px;
        display:inline-block;
    }

    h2 {
        font-size:40px;
    }

    h4 a {
        text-decoration:none;
    }

    #ep0102 #cover1 {
        background:url(../links/mw_ep01.jpg);
        opacity:1;
        background-size:cover;
        background-repeat:no-repeat;
    }

    #ep0102 #cover2 {
        background:url(../links/mw_ep02.jpg);
        opacity:1;
        background-size:cover;
        background-repeat:no-repeat;
    }


    #ego .cover {
        background:url(../links/mw_ego_cover.jpg);
        opacity:1;
        background-size:cover;
        background-repeat:no-repeat;
    }

    #vinyl .cover {
        background:url(../links/wm_vinyl.jpg);
        opacity:1;
        background-size:cover;
        background-repeat:no-repeat;
    }

    #news .cover {
        
        opacity:1;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center center;
    }

    #news {
        padding-bottom:200px;
    }
  
}