input, textarea, select {
  font-size: 16px !important;
}

a {
  color: #ccc;
  text-decoration: none;
}

a:hover{
  color: #333;
  text-decoration: none;
      transition: color 0.4s;

}


        * {
            box-sizing: border-box; /* Padding und Border in der Breite enthalten */
        }

html {
  scroll-behavior: smooth;
}





/* Versteckt Scrollbars für Webkit (Chrome, Safari) */
body::-webkit-scrollbar {
  display: none;
}

/* Für Firefox */
body {
  scrollbar-width: none; /* Firefox */
}

/* Generell */
body {
  -ms-overflow-style: none;  /* IE & Edge */
}



body {
  margin: 0;
    text-transform: uppercase;

  padding-top: 0;
  font-family: monospace;
  text-align: justify;
  color: #ccc;
  background-color: #222;
  overflow-x: hidden;

}
        .grid-container {
            display: grid;
            grid-template-columns: 1fr;
            gap: 3px;
            border: 1px dashed #ccc;
            width: 100%;
            max-width: 100%; /* Verhindert Überbreite */

        }

        .grid-item {
            padding: 15px;
            border-bottom: 1px dashed #ccc;
            word-wrap: break-word; /* Lange Wörter umbrechen */

        }

      .grid-end {
  padding: 15px;
  text-align: left;
  margin: 0;
  word-wrap: break-word;
}
        

        .grid-item img {
        display: block;
    width: 100%;
    height: auto;


    padding: 0;
    border: none;
    object-fit: contain;
}


    .grid-item2 {
padding: 0px;
            border-bottom: 1px dashed #ccc;
            word-wrap: break-word; /* Lange Wörter umbrechen */
}

        .grid-item2 img {
        display: block;
    width: 100%;
    height: auto;
 

    padding: 0;
    border: none;
    object-fit: contain;
}



        .project-title {
            position: sticky;
            top: 0;
            background-color: #222;
            z-index: 1;
            padding: 15px;
            border-bottom: 1px dashed #ccc;
        }

        /* Container für die 3 Bilder nebeneinander */
        .image-row {
            display: flex;
            width: 100%;
        }

        .image-row .image-container {
            flex: 1; /* Gleichmäßige Aufteilung der Breite */
            border-right: 1px dashed #ccc; /* Gestrichelte Linie zwischen den Bildern */
            overflow: hidden; /* Verhindert Überlauf */
        }

        .image-row .image-container:last-child {
            border-right: none; /* Keine Linie nach dem letzten Bild */
        }

        .image-row img {
            width: 100%;
            height: auto;
            display: block;
            padding: 0;
        }

       @media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .fixed-left, .scrollable-right {
        height: auto;
        position: static;
    }

    /* Bilder untereinander auf kleinen Bildschirmen */
    .image-row {
        flex-direction: column;
    }

    .image-row .image-container {
        border-right: none;
        border-bottom: 1px dashed #ccc;
    }

    .image-row .image-container:last-child {
        border-bottom: none;
    }
}



.ticker {

    background-color: #222;
    color: #ccc;
    padding: 15px 0;
    overflow: hidden;
    white-space: nowrap;
                position: sticky;

    font-size: 16px;
}

.marquee3k__copy a {

    color: #ccc;
    text-decoration: none;
    margin-right: 0px;
    transition: color 0.4s;
}

.marquee3k__copy a:hover {
    color: #333;
}
  

.marquee3k__copy .gap {
    display: inline-block;
    width: 2px; /* oder 100px je nach Gefühl */
}
  


  .video-container  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}



.sc-preview {
  width: 100%;
  height: 160px;
  background-color: #222;
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
}

.sc-preview p {
  margin: 0;
  font-size: 14px;
  text-align: center;
}







.custom-player {

  width: 100%;
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed #ccc;

}


    canvas.waveform {

      width: 100%;
      height: 100px;
      display: block;
      background-color: #222;
      cursor: pointer;
      margin-top: 25px;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-top: 10px;
    }

    .playpause {
      background: none;
      border: 1px dashed #ccc;
      color: #ccc;
      font-size: 16px;
      padding: 5px 10px;
      cursor: pointer;
    }

    .playpause:hover {
      background-color: #ccc;
      color: #222;
    }


    .impressum {
            font-size: 7px;
            background-color: #222;
            line-height: 11px;
            padding: 3px;
            border-radius: 5px;
            color: #ccc;}

@media (max-width: 500px) {
  .waveform {
    height: 70px;

  }
}


.newsletter-container {
  padding: 0;
  border: 1px dashed #ccc;
}

.newsletter-form {
  display: grid;
  grid-template-columns: 3fr 1fr;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px #ccc dashed;
}

.newsletter-input {
  background: #222;
  border: none;
  border-right: 1px dashed #ccc;
  color: #ccc;
  font-family: monospace;
  padding: 15px;
  font-size: 16px;
  outline: none;
}

.newsletter-button {
  background: #222;
  color: #ccc;
  border: none;
  border-left: 1px dashed #ccc;
  font-family: monospace;
  font-size: 14px;
  padding: 15px;
  cursor: pointer;
  text-transform: uppercase;
}

.newsletter-input {
  width: 100%;
  box-sizing: border-box;
}


.newsletter-button:hover {
  background-color: #ccc;
  color: #222;
}




.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    height: auto;
    margin: 0;
    padding: 0;
    display: block;
}

        .video-container {
            position: relative;
               border: 1px #222 dashed !important;

            width: 100%;
            padding-bottom: 33.00%; /* 16:9 aspect ratio */
            opacity: 20%;
            height: 0;
            overflow: hidden;