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

  body:after {
    content: "L";
  }

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

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

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

  


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


h1 {
  font-size: 72px;
  line-height: 70px;
  line-height: 48px;
  margin-bottom: 42px;
}


  /* ------------[ Body ]------------ */
  #main-content{
  padding-top: 60px;
}


  /* ==============================[ 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 ]------------ */

  /* ------------[ Hauptnavigation ]------------ */
.header-flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

  .header-section .mainnav,
  .header-flex.closed .mainnav > ul {
	display: flex;
	visibility: visible;
	opacity: 1;
	height: auto;

}
.header-section{
  Background-color: transparent;
  
}
.header-section.background{
  Background-color: var(--color-white);
}

  nav.mainnav {
    display: block;
    position: relative;
    width: auto;
    height: auto;
    top: 0;
    margin-left: 24px;
    overflow-x: unset;
  }

  nav.mainnav ul {
    position: fixed;
    top: 54px;
    left: 0;
    right: 0;
    height: auto;
    border: none;
    box-shadow: none;
    padding: 42px 6px 72px;
    overflow: auto;
  }

  nav.mainnav ul li a {
    color: var(--color-black);
  }

  nav.mainnav > ul {
    display: block;
    position: relative;
    top: 0;
    left: auto;
    background-color: inherit;
    border: none;
    padding: 0;
    margin: 0;
    overflow: inherit;
  }

  nav.mainnav > ul > li {
    display: inline-block;
    background: none;
    padding: 0;
    margin: 0;
  }

  nav.mainnav > ul > li a {
    padding: 16px 12px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
  }

  .header-flex.closed .mainnav > ul {
    display: flex;
  }
   

  nav.mainnav > ul > li.current > a,
  nav.mainnav ul li.current > a:hover,
  nav.mainnav ul li > a:hover,
  nav.mainnav > ul > li:hover > a,
  nav.mainnav > ul > li:focus > a,
  nav.mainnav ul li > a:focus,
  nav.mainnav li:focus-within > a {
    background: transparent;
    color: var(--color-black);
  }

  nav.mainnav > ul > li.current > a svg,
  nav.mainnav ul li.current > a:hover svg,
  nav.mainnav ul li > a:hover svg,
  nav.mainnav > ul > li:hover > a svg,
  nav.mainnav > ul > li:focus > a svg,
  nav.mainnav ul li > a:focus svg,
  nav.mainnav li:focus-within > a svg{
    fill: var(--color-yellow-dark);
  }

  nav.mainnav p {
    position: absolute;
    bottom: -44px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    opacity: 0;
    background-color: var(--color-yellow-dark);
    padding: 4px 8px;
    border-radius: 12px 0;
    transition: all 0.2s ease;
    font-weight: 500;
    pointer-events: none;
}

  nav.mainnav p:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);
    border-width: 8px;
    border-style: solid;
    border-color: transparent transparent var(--color-yellow-dark) transparent;
  }
  nav.mainnav ul li.current > a:hover p,
  nav.mainnav ul li > a:hover p,
  nav.mainnav > ul > li:hover > a p,
  nav.mainnav > ul > li:focus > a p,
  nav.mainnav ul li > a:focus p,
  nav.mainnav li:focus-within > a p{
    opacity: 1;
    display: inline-block;
    bottom: -34px;
    transition: all 0.2s ease;
  }
  /* ------------[ Subnavigation ]------------ */

  nav ul.subnav, .subnav.esc-closed {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    transition: opacity 0.2s ease-in-out, visibility 0.2s;
    width: auto;
    display: table;
    height: 0; 
    font-weight: 400;
  }

/* Öffne das Untermenü, wenn der Hauptmenüpunkt fokussiert wird */
nav.mainnav li:focus-within > .subnav,
nav.mainnav li:hover > .subnav {
  visibility: visible;
  opacity: 1;
  height: auto; /* Ermöglicht das Anzeigen des Menüs */
}

/* Untermenü-Links */
nav ul.subnav li {
  display: block;
  
}

/* Links im Untermenü */
nav ul.subnav li a {
  display: block;
  padding: 12px;
  text-decoration: none;
  white-space: nowrap;
  background: var(--color-yellow);
  border-radius: 20px 0;
}

/* Fokus & Hover für Untermenüpunkte */
nav ul.subnav li a:hover,
nav ul.subnav li a:focus {
  background-color: var(--color-yellow-dark);
  border-radius: 0 20px;
}

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

  #nav-toggle-wrap {
    display: none;
    flex: none;
  }


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

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

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

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

  .button {
  margin: 24px 2px 0;
}

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

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

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

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

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

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

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

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

  /* ------------[ Schräge Kante an der Sektion]------------ */

.border-oblique:before{
  top: -50px;
  height: 50px;
}


  /* ------------[ Galerie ]------------ */
    .container {
      grid-template-columns: repeat(3, 1fr);
  }

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

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

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

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

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

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

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



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

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

  /* Sticky Footer (http://www.cssstickyfooter.com) */
  /* Wenn nicht gewünscht inklusive im HTML #wrap und #main löschen. Ansonsten Höhe an 3 Stellen anpassen */
  /* HTML-Konstrukt muss sein: <div id="wrap"><div id="main">...</div></div> <footer>...</footer> */

  /*
    html, body {
     height: 100%;
    }

    #wrap {
     min-height: 100%;
    }

    #main {
     padding-bottom: 120px;
    }

    footer {
     position: relative;
     height: 120px;
     background-color:#f1f1f1;
     padding:24px 0;
     margin-top: -120px;
    }
   */

   footer .tab {
     padding: 0;
   }

   footer a {
   	padding: 0;
   }

 }