/* === RESET (gleiche Basis in allen Browsern) === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === GRUNDLAYOUT DER SEITE === */
body {
  display: flex;               /* Sidebar & Stage nebeneinander */
  height: 100vh;               /* volle Fensterhöhe */
  font-family: 'Rubik', Arial, sans-serif;
  background: #e7e7e7;
}




.sidebar {
  width: 180px;
  background: #e7e7e7;     /* etwas dunkler für optische Tiefe */
  flex-shrink: 0;          /* bleibt gleich breit */

  position: fixed;
}




/* === STAGE RECHTS === */
.stage {
  flex: 1;                      /* nimmt restlichen Platz ein */
  background: #e7e7e7;
  padding: 24px;
  display: flex;
  flex-wrap: wrap;              /* Kacheln umbrechen */
  gap: 20px;                    /* Abstand zwischen Kacheln */
  align-content: flex-start;
  position: relative;
  margin-left: 180px;   /* Platz für linke Sidebar */
 /* Kacheln starten oben */
}
.stage.tiles-locked .tile {
  pointer-events: none;
  }




/* === KACHELN === */
.tile {

  border-radius: 16px !important;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition:
    transform 1s ease,
    box-shadow 0.5s ease,
    outline-color 0.2s ease,
    scale 2s ease,
    left 0.8s ease,
    top 0.8s ease;

  outline: 2px solid transparent;    /* <— unsichtbar standardmäßig */
  outline-offset: -2px;
  background-size: cover;        /* füllt die Kachel */
  background-position: center;   /* zentriert das Motiv */
  background-repeat: no-repeat;  /* kein Kacheln */
  outline: 2px solid transparent;
  outline-offset: -2px;
  position: absolute;
  cursor: grab;
  will-change: left, top;
  will-change: transform;
  will-change: opacity;
  -webkit-user-drag: none;

}


.tile.dragging { cursor: grabbing; transition: none !important; }
body.dragging { user-select: none; }

/* Kleine Hover-Animation */
.tile:not(.tile--info, .tile.active):hover {
  box-shadow:
    0 0 8px rgba(14,13,10,0.6),
    0 0 16px rgba(14,13,10,0.4),
    0 0 32px rgba(14,13,10,0.2);
    cursor: pointer;
    scale: 1.1;
    z-index: 20;
    transition: scale 0.5s ease, z-index 0.5s ease;


}
/* Overlay in jeder Tile */
.overlayfoto {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #b9b9b9;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
  pointer-events: none;

}

/* Wenn Tile "gedimmt" ist */
.tile.dimmed .overlayfoto {
  opacity: 0.7;
}

/* Aber wenn man direkt drüber ist — wieder klar */
.tile:hover .overlayfoto {
  opacity: 0;
}

.tile-slides {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  border-radius: inherit;
  -webkit-user-drag: none;

}

.slide {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.8s ease;


}

.slide.active {
  opacity: 1;
}



/* Marker-Gruppe */
.tile .markers {
  position: absolute;
  left: 50%;
  bottom: -22px;              /* leicht unter dem Bild */
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  pointer-events: none;       /* rein visuell */
  opacity: 0;                 /* standardmäßig unsichtbar */
  transition: opacity 0.3s ease;
  z-index: 3;                 /* über den Slides/Overlays */
}

/* einzelne Marker-Box */
.tile .marker {
  width: 28px;
  height: 10px;
  background: #ffffff;
  border-radius: 4px;
  opacity: 0.35;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

/* Wenn Tile aktiv ist → Marker-Leiste leicht sichtbar */
.tile.active .markers {
  opacity: 0.6;
}

/* Aktiver Marker in aktiver Tile → leuchtet stärker */
.tile.active .marker.active {
  opacity: 1;
  transform: scale(1.05);
}

.miniWrapper {
  overflow: hidden;
  border-radius: inherit;
  height: 100%;
  width: 100%;
  position: relative;
  object-fit: cover;

}


.foto1 {

  background-color: transparent;  transition:
      background-image 0.4s ease;

      width: 300px;
      height: 200px;
      position: absolute;
      left: 100px;
      top: 300px;
transition:left 2s ease, top 2s ease, scale 0.5s ease;
border-radius: 16px;
}



.slide.slide1   {

  height: 200px;
  width:  300px;
  background-image: url("../images/foto.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}
.slide.slide2   {


  background-image: url("../images/wald.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide3   {


  background-image: url("../images/schnitthoch.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide4   {


  background-image: url("../images/schnittnieder.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide5   {

  height: 200px;
  width:  300px;
  background-image: url("../images/b4.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide6   {

  height: 200px;
  width:  300px;
  background-image: url("../images/caveblack.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.foto1:has(.slide.slide6.active) {
  height: : 200px;
  width: : 260px;
}
.btn {

    position: absolute;     /* ← frei positionierbar innerhalb der Tile */
    top: 50%;               /* mittig von oben/unten */
    transform: translateY(-50%); /* wirklich zentriert vertikal */
    width: inherit;
    height: inherit;
    background-color: rgba(255,255,255,0.8);
    border: inherit;
    border-radius: inherit;

    cursor: pointer;
    opacity: 0;             /* erstmal unsichtbar */
    transition: opacity 0 ease;
    pointer-events: none;

  }

.btn:hover  {

  opacity: 0;


}


.btn-next {
  right: -2px;


}





.tile.active .btn {
pointer-events: all;
  z-index: 10;

}

.tile.pos2 {

  z-index: 8;

}




.foto2 {

  background-color: transparent;
  transition:
    background-image 0.4s ease,
    left 2s ease,
    top 2s ease,
    scale 0.5s ease;

transform-origin: center;
border-radius: inherit;


      width: 300px;
      height: 200px;
      position: absolute;
      left: 280px;
      top: 100px;
z-index: 4;
}

.slide.slide7   {


  background-image: url("../images/brunnen.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide8   {


  background-image: url("../images/brunnen5.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide9   {


  background-image: url("../images/brunnen3.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}



.foto2:has(.slide.slide8.active) {
  width: 250px;
  height: 300px;
}

.foto2:has(.slide.slide9.active) {
  width: 350px;
  height: 200px;
}




.foto3 {
      width: 300px;
      height: 220px;
      position: absolute;
      left: 300px;
      top: 150px;
}

.slide.slide10   {


  background-image: url("../images/zeichnungwohnbau.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide11   {


  background-image: url("../images/axo.png");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide12   {


  background-image: url("../images/grunten.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide13   {


  background-image: url("../images/grfelber.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide14   {


  background-image: url("../images/kugeln.png");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.foto3:has(.slide.slide14.active) {
  width: 200px;
  height: 300px;
}







.foto4 {

  position: absolute;
  transition:
    left 2s ease, top 2s ease, scale 0.5s ease;
  height: 300px;
  width:  200px;
  left: 200px;
  top: 200px;

}

.slide.slide15   {


  background-image: url("../images/norama.png");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}
.slide.slide16   {


  background-image: url("../images/schnitt.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide17   {


  background-image: url("../images/epher.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide18  {


  background-image: url("../images/ganzesdetail.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide19   {


  background-image: url("../images/röhre.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide20   {


  background-image: url("../images/detailröhre.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.foto4:has(.slide.slide16.active)  {

  height: 300px;
  width:  350px;

}
.foto4:has(.slide.slide17.active)  {

  height: 230px;
  width:  350px;

}


.foto4:has(.slide.slide18.active)  {

  height: 300px;
  width:  150px;

}
.foto4:has(.slide.slide19.active)  {

  height: 300px;
  width:  150px;

}
.foto4:has(.slide.slide20.active)  {

  height: 300px;
  width:  150px;

}




.foto5 {

  position: absolute;
  transition:
    left 2s ease, top 2s ease, scale 0.5s ease;
  width: 250px;
  height: 200px;
  left: 500px;
  top: 120px;

}


.slide.slide21   {


  background-image: url("../images/skizze.png");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide22   {


  background-image: url("../images/grgbl.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}
.slide.slide23   {


  background-image: url("../images/explo.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}
.slide.slide24   {


  background-image: url("../images/axogbl.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.foto5:has(.slide.slide22.active)  {

  height: 220px;
  width:  350px;

}

.foto5:has(.slide.slide23.active)  {

  height: 300px;
  width:  180px;

}

.foto5:has(.slide.slide24.active)  {

  height: 280px;
  width:  350px;

}



.foto6 {

  position: absolute;
  transition:
    left 2s ease, top 2s ease, scale 0.5s ease;
  width: 300px;
  height: 200px;
  left: 600px;
  top: 200px;

}

.slide.slide25   {


  background-image: url("../images/lacusmortis.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide26   {


  background-image: url("../images/cave.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.slide.slide27   {


  background-image: url("../images/lunarschnitt.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide28   {


  background-image: url("../images/grspaceo.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide29   {


  background-image: url("../images/grspaceu.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}


.slide.slide30   {


  background-image: url("../images/zeichnungspace.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}

.foto6:has(.slide.slide27.active)  {

  height: 250px;
  width:  400px;

}

.foto6:has(.slide.slide28.active)  {

  height: 300px;
  width:  300px;

}

.foto6:has(.slide.slide29.active)  {

  height: 300px;
  width:  300px;

}


.foto7 {
background-color: #ffffff;
  position: absolute;
  transition:
    left 2s ease, top 2s ease, scale 0.5s ease, opacity 0.3s ease;
  width: 300px;
  height: 200px;
  left: 400px;
  top: 200px;
opacity: 0;
z-index: 5;
pointer-events: none;
}

.foto7.yes{

opacity: 0;
pointer-events: none;
}

.circularfunk {

width: 100px;
height: 100px;
position: absolute;
transition:
  left 2s ease, top 2s ease, scale 0.5s ease, opacity 0.3s ease;
  left: 500px;
  top: 300px;
  background-image: url("../images/CF.gif");
  box-shadow: none;
  }


  .kontaktTile {
    padding: 10px;
    text-align: center;
  background-color: #d0d0d0;
  background-position: center;
  background-size: cover;
    position: absolute;
    transition:
      left 2s ease, top 2s ease, scale 0.5s ease, transform 0.3s ease, opacity 0.3s ease;
    width: 200px;
    height: 80px;
    left: 700px;
    top: 450px;
  opacity: 0;
  z-index: 5;
  pointer-events: none;

  }

.kontaktTile.yes{

opacity: 1;
pointer-events: all;
z-index: 6;
}


.aboutTile {
font-family: Rubik;
background-position: center;
background-size: cover;
  position: absolute;
  transition:
    left 2s ease, top 2s ease, scale 0.5s ease, opacity 0.3s ease;
  width: 240px;
  height: 240px;
  left: 80px;
  top: 200px;
opacity: 0;
z-index: 5;
pointer-events: none;

}
.slide.slide31   {

  background: url("../images/bildvers.jpg");
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;

}
.slide.slide32   {
background: #ffffff;
  background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 text-align: center;
 padding: 10px;

}


.slide.slide32 p {
  font-style: italic;
  font-size: 12px;
margin: 0 0 1rem;
  text-align: left;
  margin-top: 10px;
}


.aboutTile:has(.slide.slide32.active)  {
  width: 350px;
  height: 250px;
}



.aboutTile.yes{
pointer-events: all;
opacity: 1;
}

.call {
font-style: italic;
font-weight: 150;
}

.popUp {
  position: absolute;      /* bleibt bei dir an top/left */

  width: 130px;            /* ← feste Größe geben */
  height: 80px;           /* ← feste Größe geben */

  /* Hintergrund als „Tile“ */


  text-align: center;
  font-style: italic;
  font-weight: 300;
  border-radius: 5px;

  opacity: 0  ;
  z-index: 5;
  cursor: pointer;
  padding: 15px;

  /* Syntax korrigiert (kein Doppelpunkt nach transform) */
  transition: opacity 1s ease, transform 1s ease, scale 0.3s ease;
  /* overflow: visible;  meist nicht nötig, kann sogar stören */
}
.popUp:hover  {
  scale: 1.1;
  }




.popUp.dragMe {
  position: absolute;      /* bleibt bei dir an top/left */
  top: 100px;
  left: 140px;
  width: 130px;            /* ← feste Größe geben */
  height: 80px;           /* ← feste Größe geben */

  /* Hintergrund als „Tile“ */
  background: url("../images/blase.png") center / cover no-repeat;
  }

  .popUp.dragMe h2
  {
   font-weight: 200;
   font-style: italic;
   font-size: 20px;
   padding-right: 10px;
   }

.opener {
  background-color: #f1f1f1;
  position: absolute;      /* bleibt bei dir an top/left */

  top: -20px;
  left: -20px;
  width: 80px;            /* ← feste Größe geben */
  height: 50px;
  /* Hintergrund als „Tile“ */
overflow: hidden;

  text-align: center;
  font-style: italic;
  font-weight: 200;
  border-radius: 5px;

  opacity: 0  ;
  z-index: 10;
  cursor: pointer;
  padding: 5px;

  /* Syntax korrigiert (kein Doppelpunkt nach transform) */
  transition: opacity 1s ease, transform 1s ease, scale 0.3s ease;

    }
.opener p {
  font-size: 10px;
  }
    .opener.juu {
      opacity: 1;
      }


/*
.popUp.moon {
  background: url("../images/boxdreh.png") center / cover no-repeat;
left: 900px;
top: 360px;
  height: 80px;
width: 130px;
position: absolute;
font-size: 12px;
padding: 10px;
text-align: center;
padding-top: 35px;

} */




.popUp.juu {
  opacity: 1;
  }


  .tile.active {
     /* nach vorne holen */
     box-shadow:
       0 0 8px rgba(14,13,10,0.6),
       0 0 16px rgba(14,13,10,0.4),
       0 0 32px rgba(14,13,10,0.2);
  transition: scale 0.3s ease;
      scale: 1.5;
      opacity: 1;
      z-index: 10;

    }

    .tile.ebene  {
      z-index: 10

    }

    .tile.invisible {
      opacity: 0;

    }



.box--info {
  background: #e7e7e7;           /* gleiche Farbe wie Stage, damit sie integriert wirkt */
  color: #fff;
  width: 120px;
  height: 170px;
  padding: 10px;
  align-items: flex-start;       /* Text links ausrichten */
  justify-content: flex-start;   /* oben beginnen */
  box-shadow: 0 0px 0px rgba(0,0,0,0.3);
  border: 0px solid rgba(255,255,255,0.1);
  position: relative;
  left: 20px;
  top: 200px;
  transition: 0.5s ease
}


/* Inhalt in der Info-Kachel */
  .box--info h1 {
    font-family: Rubik, sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 12px;
    color: #000000;                /* Akzentfarbe */
  }

.aboutButton {
  font-family: Rubik, sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: #000000;
  cursor: pointer;
    margin-bottom: 10px;          /* Akzentfarbe */
}
.aboutButton:hover {
  font-size: 14px;
}
.contactButton {
  font-family: Rubik, sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: #000000;
  cursor: pointer;
  margin-bottom: 10px;        /* Akzentfarbe */
}
.contactButton:hover {
  font-size: 14px;
}

.projektButton {
  font-family: Rubik, sans-serif;
  font-size: 12px;
  font-weight: 200;
  color: #000000;
  cursor: pointer;
  margin-bottom: 10px;            /* Akzentfarbe */
}
.projektButton:hover {
  font-size: 14px;
}
 .contactButton.buttoned{
  font-family: Rubik, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #000000;
               /* Akzentfarbe */
}


.aboutButton.buttoned {
 font-family: Rubik, sans-serif;
 font-size: 14px;
 font-weight: 500;
 color: #000000;
              /* Akzentfarbe */
}

.projekt.buttoned {
 font-family: Rubik, sans-serif;
 font-size: 12px;
 font-weight: 500;
 color: #000000;
              /* Akzentfarbe */
}




.info {

  background: #ffffff;     /* etwas dunkler für optische Tiefe */
  flex-shrink: 0;          /* bleibt gleich breit */
  box-shadow: 4px 0 12px rgba(0,0,0,0.2);
  position: fixed;        /* bleibt rechts kleben */
  right: 40px;            /* Abstand vom Rand (anpassen) */
  top: 50%;               /* Mitte der Höhe … */
  transform: translateY(-50%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
 /* … und exakt zentrieren */

  opacity: 0;
  border-radius: 8px;
  padding: 10px;
  pointer-events: none;

}



.info.is-open {
 /* etwas dunkler für optische Tiefe */
  flex-shrink: 0;          /* bleibt gleich breit */
  opacity: 1;
  z-index: 10;
  pointer-events: all;

}

.info-power
{
width: 550px;
height: 500px;
background-color:#e7e7e7;

}

.info-power h2
{
  font-family: Rubik, sans-serif;
  font-size: 24px;
  font-weight: 250;
  margin-bottom: 12px;
  color: #000000;
  text-align: center;


}

.info-power p
 {
  color: #000000;
  font-size: 12;
  margin: 0 0 1rem;
  }
  .info-power2 {
    opacity: 0;
    height: 100%;
    width: 100%;
    z-index: 5;
    }




  .info-brunnen
  {
  width:500px;
  height: 500px;
  top: 50%;
  background-color:#e7e7e7;
  }

  .info-brunnen h2
  {
    font-family: Rubik, sans-serif;
    font-size: 24px;
    font-weight: 250;
    margin-bottom: 12px;
    color: #000000;
    text-align: center;

  }

  .info-brunnen p
   {
    color: #000000;
    font-size: 12;
    margin: 0 0 1rem;
    }


  .info-gast
  {
  width: 500px;
  height: 350;
  top: 50%;
  background-color:#ffffff;
  }

  .info-gast h2
  {
    color: #000000;
    font-size: 24px;
    margin: 0 0 1rem;
    text-align: center;
    font-weight: 250;
  }

  .info-gast p
  {
    font-family: Rubik, sans-serif;
    font-size: 12;


    color: #000000;

    margin: 0 0 1rem;

              /* Akzentfarbe */
  }


  .info-turm
  {
  width: 400px;
  top: 50%;
  background-color:#ffffff;
  }

.info-turm p
   {
    color: #000000;
    font-size: 12;
    margin: 0 0 1rem;
    }

.info-turm h2
     {
       text-align: center;
      color: #000000;
      font-size: 12;
      margin: 0 0 1rem;
      font-weight: 250;
      }

  .info-flex
  {
  width: 400px;
  top: 50%;
  background-color:#FBFBFF;
  }
  .info-flex h2
       {
         text-align: center;
        color: #000000;
        font-size: 24px;
        margin: 0 0 1rem;
        font-weight: 250;
        }
        .info-flex p
             {

              color: #000000;
              font-size: 12;
              margin: 0 0 1rem;

              }

.info-moon
  {
  width:500px;
  height: 350px;
  top: 50%;
  background-color:#ffffff;
  }

  .info-moon h2{
  text-align: center;
  font-weight: 250;
  }

  .info-moon p {
    color: #000000;
    font-size: 12;
    margin: 0 0 1rem;
  }

  @keyframes grow-wobble-shrink {
    /* --- Phase 1: sanftes Aufskalieren --- */
    0%   { transform: scale(1) rotate(0deg); }
    5%   { transform: scale(1.01) rotate(0deg); }
    10%  { transform: scale(1.03) rotate(0deg); }
    15%  { transform: scale(1.05) rotate(0deg); }
    20%  { transform: scale(1.06) rotate(0deg); }
    25%  { transform: scale(1.07) rotate(0deg); }
    30%  { transform: scale(1.08) rotate(0deg); }

    /* --- Phase 2: leichtes Wackeln auf voller Größe --- */
    35%  { transform: scale(1.08) rotate(0.5deg); }
    40%  { transform: scale(1.08) rotate(-0.5deg); }
    45%  { transform: scale(1.08) rotate(0.8deg); }
    50%  { transform: scale(1.08) rotate(-0.8deg); }
    55%  { transform: scale(1.08) rotate(0.3deg); }
    60%  { transform: scale(1.08) rotate(0deg); }

    /* --- Phase 3: sanftes Zurückschwingen --- */
    65%  { transform: scale(1.06) rotate(0deg); }
    70%  { transform: scale(1.04) rotate(0deg); }
    75%  { transform: scale(1.03) rotate(0deg); }
    80%  { transform: scale(1.02) rotate(0deg); }
    85%  { transform: scale(1.01) rotate(0deg); }
    90%  { transform: scale(1.005) rotate(0deg); }
    95%  { transform: scale(1.002) rotate(0deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  .tile.wobbling {
    animation: grow-wobble-shrink 1s cubic-bezier(0.4, 0, 0.2, 1);
  }





  .audioButton {
  text-align: center;
  margin: 0;
  position: absolute;
  top: 314px;
  background-color: transparent;
  left: 29px;
  border-radius: 10px;
  padding: 5px;
  opacity: 1;
  transition: transform 0.2s ease;
  width: auto;
  height: auto;

  }
  .musicButton {
    width: 50px;
    height: 50px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background: none;
    border: none;
    color: #000;
    opacity: 0.5;
    background: url("../images/cd.png");
    background-position: center;
    background-size: cover;
  }


  .musicButton:hover {
    transform: scale(1.1);

  }


.musicButton.play
{

  opacity: 1;


}

  .track-title {
    font-size: 12px;
    opacity: 0;


  }



.overlay {
  position: fixed;         /* über allem, egal wo man scrollt */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #b9b9b9;
  opacity: 0;              /* unsichtbar am Anfang */
  pointer-events: none;    /* blockiert keine Klicks */
  transition: opacity 0.3s ease;
  z-index: 5;              /* unter deiner Sidebar, aber über allen Tiles */
}



.overlay.visible {
  opacity: 0.8;
  pointer-events: all;
}