/*Mobil*/

@media (max-width: 768px) {

  #mobile {
    display: block;
  }

  #desktop {
    display: none;
  }

  .content {
    display: flex;
    flex-direction: column;
  }

  .wii-container {
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 1.5rem; 
    margin-top: -100vh;
    z-index: 1;
    touch-action: manipulation;
  }

  .werkschau[data-id="1"] { 
    z-index: 3; 
    background: var(--Section3); 
  }

  .infos[data-id="2"] { 
    z-index: 2; 
    background: var(--Section2); 
  }

  .impressionen[data-id="3"] { 
    z-index: 1; 
    background: var(--Section1); 
    margin-top: 0; 
  } 

  .wii-content, .wii-content-head, .wii-content-info, .info-scroll{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .wii-content {
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    gap: 2rem; 
    margin-top: -1.5rem; 
    margin-left: -1.5rem;
    border: var(--border);
  }

  .wii-content-head, .wii-content-info {
    flex-direction: row;
    width: 98.5vw;
    justify-content: space-between;
    border: var(--border);
  }

  .info-scroll {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
    width: 100vw;
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
  }

  .info-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 35vh;
    width: 80vw;
    padding: 0.5em;
    flex: 1;
    border: 0.2rem solid var(--boxColor);
    background: var(--boxHoverColor);
    border-radius: 0.5em;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
  }

  .banner {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 10;
    background: var(--bannerColor);
    overflow: hidden;
    white-space: nowrap;
  }

  .news {
    align-items: center;
    display: inline-block;
    white-space: nowrap;
    animation: news-loop 60s linear infinite;
  }

  @keyframes news-loop {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .news-text {
    font-size: clamp(10vw, 10vw, 10vw); 
  }

  .impressionen .wii-content {
    justify-content: flex-start;
    gap: 1rem;
  }

  .impressionen .wii-content-info {
    width: 100vw;
    margin-top: 1rem;
    margin-bottom: 2rem;
  }

  .mobile-image-scroll {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
    padding: 1rem 0;
    width: 100vw;
    -webkit-overflow-scrolling: touch; 
    scroll-behavior: smooth;
  }

  .mobile-image-scroll::-webkit-scrollbar, 
  .info-scroll::-webkit-scrollbar {
    height: 4px;
  }

  .mobile-image-scroll::-webkit-scrollbar-track, {
    background: rgba(0,0,0,0.1);
    border-radius: 2px;
  }

  .mobile-image-scroll::-webkit-scrollbar-thumb,
  .info-scroll::-webkit-scrollbar-thumb  {
    background: rgba(0,0,0,0.3);
    border-radius: 2px;
  }

  .mobile-image-scroll::-webkit-scrollbar-thumb:hover,
  .info-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(0,0,0,0.5);
  }

  .mobile-scroll-image {
    flex: 0 0 auto;
    width: 80vw;
    height: 50vh;
    object-fit: cover;
  }


  .impressionen .overlay {
    display: none !important;
  }

  .impressionen .follow-container {
    display: none !important;
  }

  .hover-wobble:hover {
    animation: none;
  }

  .hover-wobble:hover span {
    animation: none;
  }
}