/* ==== Responsive Design ==== */
@media (max-width: 1100px) {
  /* Hamburger sichtbar */
  .hamburger {
    display: block;
  }

  .home-link span {
    display: none;
  }

  .user-btn .username {
    display: none;
  }

  /* Sidebar rausgeschoben */
  .sidebar {
    position: fixed;
    top: 130px; /* unter Header + Navbar */
    left: 0;
    height: calc(100vh - 130px);
    transform: translateX(-100%);
    z-index: 998;
    box-shadow: 2px 0 6px rgba(0,0,0,0.2);
  }

  /* Sidebar sichtbar, wenn aktiv */
  .sidebar.active {
    transform: translateX(0);
    background: #e5e9ef;
  }

  /* Content nimmt volle Breite */
  .content {
    padding: 1rem;
  }


}




/* ==== Tiles ==== */



/* Tablet */
@media (max-width:1024px){

  .tiles{
    gap: 20px;
    max-width: calc(1024px - var(--size-sidebar-width));
    margin: auto;
  }

  .tile{
    width: 200px;
    height: 200px;
  }
}

/* Small Tablet */
@media (max-width:768px){
  .tiles{
    gap: 15px;
    max-width: 768px;
    margin: auto;
  }

  .tile{
    width: 185px;
    height: 185px;
  }
}

/* Mobile */
@media (max-width:480px){
  .tiles{
    gap: 5px;
    max-width: 480px;
    margin: auto;
  }

  .tile{
    width: 25vw;
    height: 25vw;
  }
}

















/* =============================================
       Responsive Anpassungen
    ============================================= 
    @media (max-width: 1100px) {
      .content-tile .tile-icon {
        font-size: 3rem;
      }
      .content-tile .tile-label {
        font-size: 1rem;
      }
    }

    @media (max-width: 800px) {
      .tiles-container {
        padding: 1.2rem;
      }
      .content-tile .tile-icon {
        font-size: 2.8rem;
      }
      .content-tile .tile-label {
        font-size: 1rem;
      }
    }

    @media (max-width: 500px) {
      .content-tile .tile-icon {
        font-size: 2.4rem;
      }
      .content-tile .tile-label {
        font-size: 0.95rem;
      }
    }
*/