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

  body:after {
    content: "M";
  }

  .only-s {
    display: none !important;
  }

  .only-m {
    display: block !important;
  }

  .no-m {
    display: none !important;
  }


  /* ------------[ Schriften ]------------ */

  /* ------------[ Body ]------------ */

  /* ==============================[ Begrenzung Inhalt ]============================== */

  /* ==============================[ Formate für Sektionen ]============================== */

  /* ------------[ spezielle Klassen für Sektionen ]------------ */

  /* ========================[ universelle Klassen ]======================== */

  /* ------------[ Positionierung der Elmente ]------------ */

  /* ------------[ verschiedene Abstände ]------------ */

  /* ------------[ verschiedene Abstände im Grid ]------------ */

  /* ------------[ Klassen für Texte ]------------ */


  /* ========================[ Header-Bereich ]======================== */

  /* ------------[ Logo ]------------ */

  a.logo {
    max-width: 160px;
  }

  /* ------------[ Hauptnavigation ]------------ */

  /* ------------[ Subnavigation ]------------ */

  /* ------------[ Mobile Navigation ]------------ */


  /* ========================[ Standard-Elemente ]======================== */

  /* ------------[ Überschriften ]------------ */

  /* ------------[ Absätze ]------------ */

  /* ------------[ Verlinkungen ]------------ */

  /* ------------[ Bilder ]------------ */

  /* ------------[ Bild größer klicken ]------------ */


  /* ------------[ Text-Bild-Element ]------------ */

  /* Kombinationen für Bildbreiten und Bildposition */
  .pic-img {
    margin: 0;
  }

  .pic-img.half {
    width: 48.05195%;
  }

  .pic-img.third {
    width: 30.7359333333%;
  }

  .pic-img.fourth {
    width: 22.077925%;
  }

  .pic-img.left {
    float: left;
    margin-right: 24px;
    margin-bottom: 0;
  }

  .pic-img.right {
    float: right;
    margin-left: 24px;
    margin-top: 0;
  }


  /* ------------[ Unnummerierte Listen ]------------ */

  /* ------------[ Nummerierte Listen ]------------ */

  /* ------------[ Listen mit mehr Abstand ]------------ */

  /* ------------[ Tabellen ]------------ */

  /* ========================[ Sonderelmente ]======================== */

  /* ------------[ Galerie-Section ]------------ */

.galerie-image-content.second{
  display: block;
}

.galerie-content{
  margin: 8px 32px;
}
.galerie-background.right{
  min-height: 400px;
}

/* grafik-section */
 .grafik {
  display: block;
  width: 100%;
  height: 500px;
  position: relative;
  padding: 0;
  }
   .grafik .grafik-item-wrap {
    display: block;
    width: 100%;
    max-width: 900px;
    height: 480px;
    position: relative;
    margin: 0 auto;
  }
  /* Allgemeines Styling Item-Links */
   .grafik-item {
     display: block;
     width: 350px;
     position: absolute;
     color: var(--color-blue);
     background: none;
     padding: 0;
     margin: 0;
  }

  .grafik-item-text{
    max-width: 300px;
    transition: all 0.3s ease-in-out;
    padding: 16px;
  }
  .grafik-item-text h3{
        text-shadow: 1px 1px 4px white;
  }
  .grafik-item:hover .grafik-item-text{
    background-color: rgba(255,255,255,0.9);
    box-shadow: 1px 1px 6px rgb(0 0 0 / 20%);
    max-width: 350px;
    transition: all 0.3s ease-in-out;

 }
   .grafik-item .grafik-link-dot:before {
    content: '';
    height: 2px;
    position: absolute;
    top: 10px;
    background-color: var(--color-blue);
      transition: all 0.3s ease-in;
  }

   .grafik-item .grafik-link-dot {
    display: block;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 22px;
    background-color: var(--color-blue);
    border-radius: 100%;
    transition: all 0.3s ease-in;
    z-index: 1;
  }
   .grafik-item .grafik-link-dot:after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-creme-light);
    position: absolute;
    border-radius: 50%;
    top: 3px;
    left: 3px;

}
   .grafik-item:hover .grafik-link-dot:after {
     transform: scale(2);
     opacity: 0;
     transition: all 0.3s ease-in;
  }

  .grafik-item:hover .grafik-link-dot:before {
    /*display: none;*/
    transition: all 0.3s ease-in;
 }
  /* Styling item1*/
   .grafik-item.item1 {
    top: 0;
    left: 0px;
    text-align: right;
  }
   .grafik-item.item1 .grafik-link-dot:before {
     width: 142px;
     right: 0;
  }
  .grafik-item.item1:hover .grafik-link-dot:before {
    width: 100px;
    transition: all 0.3s ease-in;
 }
   .grafik-item.item1:after {
    right: -172px;
    transition: all 0.3s ease-in;
  }

   .grafik-item.item1 .grafik-link-dot {
    right: -100px;
  }
  /* Styling item2 */
   .grafik-item.item2 {
     top: 185px;
     left: 0;
    text-align: right;
   }

   .grafik-item.item2 .grafik-link-dot:before {
    width: 94px;
    right: 0;
  }
  .grafik-item.item2:hover .grafik-link-dot:before {
    width: 50px;
    transition: all 0.3s ease-in;
 }
   .grafik-item.item2:after {
    right: -132px;
    transition: all 0.3s ease-in;
  }

   .grafik-item.item2 .grafik-link-dot {
    right: -50px;
  }

  /* Styling item3 */
   .grafik-item.item3 {
    top: 50px;
    right: 0;
  }
  .grafik-item.item3 .grafik-item-text{
    margin: 0 0 0 auto;
  }
  .grafik-item.item3 .grafik-link-dot {
   left: -60px;
  }
 .grafik-item.item3 .grafik-link-dot:before {
    width: 100px;
    left: 0;
  }
  .grafik-item.item3:hover .grafik-link-dot:before {
    width: 60px;
    transition: all 0.3s ease-in;
 }
   .grafik-item.item3:after {
    left: -50px;
    transition: all 0.3s ease-in;
  }
   .grafik-item.item3:hover:after {
    width: 90px;
    transition: all 0.3s ease-in;
  }

  /* Item 4 */
   .grafik-item.item4 {
     top: 230px;
     right: 0px;

  }
  .grafik-item.item4 .grafik-item-text{
    margin: 0 0 0 auto;
 }
   .grafik-item.item4 .grafik-link-dot:before {
    width: 120px;
    left: 0;
  }
  .grafik-item.item4:hover .grafik-link-dot:before {
    width: 80px;
    transition: all 0.3s ease-in;
 }
   .grafik-item.item4:after {
    left: -172px;
    transition: all 0.3s ease-in;
  }
   .grafik-item.item4:hover:after {
    width: 160px;
    transition: all 0.3s ease-in;
  }
   .grafik-item.item4 .grafik-link-dot {
    left: -80px;
  }


  .grafik-item p {
    color: #444;
    max-height: 0;
    line-height: 0;
    overflow: hidden;
    transition: all 0.5s ease-in-out;
    opacity: 0;
}
.grafik-item:hover p {
  max-height: 300px;
  line-height: inherit;
  transition: all 0.5s ease-in-out;
  opacity: 1;
}


.container{
    grid-template-columns: repeat(2,1fr);
    grid-auto-rows:250px;
}

.w-1{
    grid-column: span 1;
}
.w-2{
    grid-column: span 2;
}
.w-3{
    grid-column: span 3;
}
.w-4{
    grid-column: span 4;
}
.w-5{
    grid-column: span 5;
}
.w-6{
    grid-column: span 6;
}

.h-1{
    grid-row: span 1;
}
.h-2{
    grid-row: span 2;
}
.h-3{
    grid-row: span 3;
}
.h-4{
    grid-row: span 4;
}
.h-5{
    grid-row: span 5;
}
.h-6{
    grid-row: span 6;
}


  /* ------------[ Infobox ]------------ */

  /* ------------[ Teaser ]------------ */

  /* ------------[ Akkordeon ]------------ */

  /* ------------[ Videoplayer ]------------ */

  /* ------------[ Formulare ]------------ */

  .fieldset-one .field,
  .fieldset-one .field {
  	display: inline-block;
  	vertical-align: top;
  	width: 49.61%;
  }

  .field-left-padding {
  	padding-right: 1.6vw;
  }

  .field-right-padding {
  	padding-left: 1.94805vw;
  }


  /* ========================[ Sonderelmente Website ]======================== */

  /* ------------[ Keyvisual ]------------ */


  /* ------------[ Call to Action ]------------ */

  /* ========================[ Footer-Bereich ]======================== */

  footer .tab {
    padding: 6px 0;
  }

  footer a {
  	padding: 6px 0;
  	display: inline-block;
  }

}