@media screen and (min-width: 980px) {

    .bricklayer-column-sizer {
       width: 33%;
    }
    
    .col-9 {
        width: 100%;
    }
    
    #sidebar {
        display: none;
    }
    
    .container.grid-lg {
/*      max-width: 95%;*/
    }
    
/*    .ace_editor {
      font-size: 30px !important;
    }*/
    
    /*.aufgabe #wrapper {
    visibility: hidden;
    }
    .aufgabe .title-bar{
    display: none;
    }
    .aufgabe #graphic-wrap,
    .aufgabe .run-it {
    visibility: visible;
    }
    .aufgabe #graphic-wrap {
    width: 100%;
    }
    .aufgabe canvas {
    width: 600 !important;
    } */
    
    .card {
      position: relative; /* Relativ, um die Positionierung der Overlays zu ermöglichen */
    }

    .card-header,
    .card-footer {
      position: absolute;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.9); /* Teiltransparenter Hintergrund */
      color: white;
      padding: 10px;
      opacity: 0; /* Standardmäßig unsichtbar */
      transition: opacity 0.3s ease-in-out;
    }

    .card img {
      display: block; /* baseline loswerden */
    }

    .card-header {
      top: 0; /* Positioniere den Header oben */
    }

    .card-footer {
      bottom: 0; /* Positioniere den Footer unten */
    }

    /* Effekt beim Hover auf die card */
    .card:hover .card-header,
    .card:hover .card-footer {
      opacity: 1; /* Sichtbar bei Hover */
    }

}



/*  hgfds*/

#header {
  background: #555555;
}



.card-title {  /* weil auch die category (Stufe) hier noch angezeigt wird */
  display: flex;
  justify-content: space-between;
}

.card-title .p-category {
  color: #222222;
  background: rgba(255, 255, 255, 0);
}

.hero {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* scrolldown nicht anzeigen */
.modular-hero #to-start {
  display: none;
}

.h3black a {
  color: #222;
}