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

  :root {
    --unit-feinregler: 29px;
  }

  body {
    position: relative;
    top: 0;
    min-height: 100vh;
  }


  /*mobil elemente ausblenden*/
  #m-header-container {
    display: none;
  }

  .m-sticky-section {
    display: none;
  }


  .m-nav-item {
    display: none;
  }

  .dropdown-container {
    display: none;


  }

  #m-logo {
    display: none;
  }

  #m-byline {
    display: none;
  }

  #m-date {
    display: none;
  }

  #m-date-archive {
    display: none;
  }

  #mNav {
    display: none;
  }

  .m-img-container-schopf {
    display: block;
  }

  .d-img-container-schopf {
    display: block;
  }


  /*desktop elemente*/
  .d-sticky-section {
    position: sticky;
    top: var(--unit-body-margin);
    z-index: 11;
  }

  .d-header-container {
    display: grid;
    grid-template-columns: 1fr 2fr auto 1fr;
    width: 100%;
  }

  .d-nav-container {
    position: relative;
    top: 0;
    display: flex;
    /*grid-template-columns: var(--square-36) repeat(5, 1fr);*/
    width: 100%;

  }

  #d-menu-icon {
    display: none;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: var(--square-36);
    width: var(--square-36);
  }

  #d-close-menu-btn {
    position: relative;
    top: 0;
    left: 0;
    height: var(--square-36);
    display: flex;
    justify-content: center;
    cursor: pointer;
    z-index: 200;
    border: var(--variable-border) solid white;
  }

  /* Desktop Overlay Nav  */
  .d-overlay-nav {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */
    position: fixed; /* Stay in place */
    /*top:  calc(var(--variable-border) * 3);*/
    /*top: calc(var(--sticky-pos-1) + (var(--unit-body-margin)) + (2 * var(--variable-border)));*/
    top: var(--sticky-pos-1);
    right: var(--unit-body-margin);
    bottom: var(--unit-body-margin);
    height: 0;
    width: calc(100% - var(--unit-body-margin) * 2);
    z-index: 200; /* Sit on top */

    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.2s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }

  .d-overlay-nav-surface {
    position: relative;
    top: 0;

    background-color: rgb(255, 255, 255); /* White fallback color */
    background-color: rgba(255, 255, 255, 0.95); /* White w/opacity */
    height: calc(100% - var(--sticky-pos-1) * 1);
  }

  /* Position the content inside the overlay */
  .d-overlay-nav-content {
    position: relative;
    /* left: var(--square-36); */
    width: 50%;
    top: 0px;
    /*top: var(--sticky-pos-2);*/
  }

  /* The navigation links inside the overlay */
  .d-overlay-nav-content a, .dropdown-btn {
    text-decoration: none;
    text-align: left;
    /*display: block; !* Display block instead of inline *!*/
    transition: 0.3s; /* Transition effects on hover (color) */
  }

  /* When you mouse over the navigation links, change their color */
  .d-overlay-nav-content a:hover, .m-overlay-nav-content a:focus {
    color: red;
  }


  .dropdown-btn {
    cursor: pointer;
    display: block;


  }

  /* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
  .dropdown-container {
    display: none;
    position: relative;
    top: 0;
    left: 0px;
    /*padding-left: var(--square-36);*/
    color: var(--variable-black);
    width: 100%;
    z-index: 5;
  }


  .dropdown-item {
  }


  .dropdown-container a {
    color: black;
    background-color: #e6e6e6;

  }

  /* Optional: Style the caret down icon */
  .fa-caret-down {
    float: right;
    padding-right: 8px;
  }

  /* Add an active class to the active dropdown button */
  .active {
    /*background-color: darkblue;*/
    color: white;
  }


  .news-item-1 {
    grid-column-start: 1;
    grid-row-start: 2;
    /*grid-area: 2 / 2 / 3 / 3;*/
  }

  .news-item-2 {
    grid-column-start: 3;
    grid-row-start: 3;
  }

  .news-item-3 {
    grid-column-start: 2;
    grid-row-start: 4;
  }

  .news-item-4 {
    grid-column-start: 4;
    grid-row-start: 5;
  }


  footer {
    position: sticky;
    top: calc(100vh - var(--square-36));
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /*grid-template-rows: 50px;*/
    width: 100%;
    /*margin-top: 50px;*/
    /*padding-bottom: 50px;*/
    color: var(--variable-grey-light);
    background-color: var(--variable-grey-dark);
  }


  /*Desktop Container Section*/
  .two-col-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1400px;
    margin: auto;
    border: var(--variable-border);
    grid-gap: var(--square-36);


  }

  /*Weil sich die höhe des containers nicht automatisch an den inhalt anpasst:*/
  .artist-and-img-group {
    /*height: 700px;*/
  }

  .d-img-container-schopf {
    width: 100%;
    height: calc(100vw / 2 * 4 / 6);
    max-height: 400px;
    /*damit das bild nicht mehr breiter wird sobald die maximale breite des main-containers erreicht ist*/
  }

  .img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }


}

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


  :root {
    --variable-colums-number: 4;
  }
}


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


  :root {
    --unit-feinregler: 32px;
    --variable-colums-number: 5;
  }
}


@media only screen and (min-width: 701px) and (max-width: 1041px) {


  :root {
    --sticky-pos-1: calc(var(--zab-6) * 2 +
    var(--unit-padding-top-bottom) * 2 +
    var(--unit-body-margin) +
    var(--variable-border) * 2);


    --sticky-pos-2: calc(var(--zab-6) * 3 +
    var(--unit-padding-top-bottom) * 4 +
    var(--unit-body-margin) +
    var(--variable-border) * 5);


    --sticky-pos-3: calc(var(--zab-6) * 4 +
    var(--unit-padding-top-bottom) * 6 +
    var(--unit-body-margin) +
    var(--variable-border) * 7);

    --sticky-pos-4: calc(var(--zab-6) * 5 +
    var(--unit-padding-top-bottom) * 8 +
    var(--unit-body-margin) +
    var(--variable-border) * 9);


  }

}