/****************** DESIGNED BY *****************/
/*               Constanze Deten                */
/* Idee und Inhalt: Hans-Peter Herrmann         */
/*                   c 2023                     */
/************************************************/

@import url(style.css);

.topnav {
  margin: 0;
  border: 0;
  padding: 0.5vw;
  overflow: hidden;
  background-color: var(--water100);
}

.topnav div {
  float: left;
}

.home-icon .fa-fw {
  width: 100%;
  font-size: 2.2vw;
  padding: 0.2vh 2vw 0.1vh 1vw;
  color: var(--weisz80);
}
.nav-icon {
  font-size: 3.5vw;
  padding: 0 0.8vw 0;
  color: var(--weisz80);
}

.nav-item {
  padding: 0.2vh 2vw 0.1vh 1vw;
}

.topnav .drop-item .nav-item a,
.topnav div div a {
  color: var(--weisz80);
  padding: 0.2vh 2vw 0.2vh 0vw;
  line-height: 130%;
  text-decoration: none;
  transition: 0.3s;
  font-size: 3vh;
}

.home-icon:hover,
.topnav div div a:hover,
.nav-icon:hover {
  background-color: var(--greyturquoise100);
  color: var(--weisz80);
}

.topnav div.nav-icon {
  float: right;
  display: none;
  border: none;
}

.nav-item a {
  width: 100%;
  text-align: left;
}

/* Optional für eine second level Navigation in der Screen Ansicht */
.innen {
  color: var(--weisz80);
  display: none;
  padding: 0.5vh;
}

div:hover .innen {
  color: var(--sienna100);
  display: inline-block;
}

/* ##### Ende DESKTOP ##### */

/* ################################################################ */
/* ############## 1. Schritt 2-spaltig, Landscape ################ */
@media only screen and (min-width: 400px) and (max-width: 820px) and (orientation: landscape) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  /* @media only screen and (max-width: 800px) and (orientation: landscape) { */

  .topnav div:not(:first-child) {
    display: none;
  }

  .topnav {
    position: relative;
    padding: 0.3vw;
  }

  .home-icon .fa-fw {
    font-size: 3.5vw;
  }

  .nav-icon {
    font-size: 3.5vw;
  }

  #drop-item.drop-item.responsive,
  #drop-item.drop-item.responsive div {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav-item:hover {
    background-color: var(--greyturquoise100);
  }

  .topnav div.nav-icon {
    display: inline-block;
  }
  .topnav.responsive div.nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Optional für eine second level Navigation in der Mobile Ansicht */
  .innen {
    display: inline-block;
  }
  /* Ende second level Navigation Mobile */
}

/* ##### Ende 2-spaltig, Landscape ##### */

/* ################################################################ */
/* ##### 2. Schritt 2-spaltig, PC-Ansicht und hochauflösende Smartphones, hochkant ##### */
@media only screen and (max-width: 1080px) and (orientation: portrait) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */
  /* @media screen and (max-width: 680px) and (orientation: portrait) { */

  .topnav div:not(:first-child) {
    display: none;
  }

  .topnav {
    position: relative;
    padding: 0.3vw;
  }

  .home-icon .fa-fw {
    font-size: 3.5vw;
  }

  .nav-icon {
    font-size: 3.5vw;
  }

  #drop-item.drop-item.responsive,
  #drop-item.drop-item.responsive div {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav-item:hover {
    background-color: var(--greyturquoise100);
  }

  .topnav div.nav-icon {
    display: inline-block;
  }
  .topnav.responsive div.nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Optional für eine second level Navigation in der Mobile Ansicht */
  .innen {
    display: inline-block;
  }
  /* Ende second level Navigation Mobile */
}

/* ##### Ende 2-spaltig, Portrait ##### */

/* ################################################################ */
/* ################# 3. Schritt: 1-spaltig, Portrait ##############*/
/* Smartphone hochkant mit 1-spaltiger Darstellung der Inhalte  */
@media only screen and (max-width: 430px) and (orientation: portrait) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  .topnav div:not(:first-child) {
    display: none;
  }

  .topnav {
    position: relative;
    padding: 0.4vw;
  }

  .home-icon .fa-fw {
    font-size: 3.5vw;
  }

  .nav-icon {
    font-size: 3.5vw;
  }

  #drop-item.drop-item.responsive,
  #drop-item.drop-item.responsive div {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav-item:hover {
    background-color: var(--greyturquoise100);
  }

  .topnav div.nav-icon {
    display: inline-block;
  }
  .topnav.responsive div.nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Optional für eine second level Navigation in der Mobile Ansicht */
  .innen {
    display: inline-block;
  }
  /* Ende second level Navigation Mobile */
}

/* ##### Ende 1-spaltig, Portrait ##### */

/* ################################################################ */
/* ################# 4. Schritt: 1-spaltig, Landscape ##############*/
/* Smartphone hochkant mit 1-spaltiger Darstellung der Inhalte  */
@media only screen and (max-width: 400px) and (orientation: landscape) {
  /* flexible Größen durch %, em, vh/ vw (viewport with) */

  .topnav div:not(:first-child) {
    display: none;
  }

  .topnav {
    position: relative;
    _font-size: 2.4vh;
    padding: 0.4vw;
  }

  .home-icon .fa-fw {
    font-size: 2.5vw;
  }

  .nav-icon {
    font-size: 2.5vw;
  }

  #drop-item.drop-item.responsive,
  #drop-item.drop-item.responsive div {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  .nav-item:hover {
    background-color: var(--greyturquoise100);
  }

  .topnav div.nav-icon {
    display: inline-block;
  }
  .topnav.responsive div.nav-icon {
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Optional für eine second level Navigation in der Mobile Ansicht */
  .innen {
    display: inline-block;
  }
  /* Ende second level Navigation Mobile */
}