/* =========================================================
   MENU.CSS

   Navigation für PC, Tablet und Smartphone

   FARBSchema:

   - Hintergrund: #1182B7
   - Hover / aktiv: #39FF14
   - Schrift: #000000

   GERÄTEKLASSEN:

   SMARTPHONE

   - H1:  bis 359.98 px
   - H2:  360 bis 374.98 px
   - H3:  375 bis 399.98 px
   - H4:  400 bis 429.98 px
   - H5:  430 bis 499.98 px
   - HT:  500 bis 767.98 px

   TABLET

   - T1:  768 bis 899.98 px
   - T2:  900 bis 1023.98 px

   PC

   - T3:  1024 bis 1199.98 px
   - T4:  1200 bis 1439.98 px
   - T5:  ab 1440 px

   ========================================================= */

/* =========================================================
   GRUNDDEFINITION
   ========================================================= */

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: #1182b7;
  font-family: "Times New Roman", Times, serif;
}

#header .navbar,
#header .navbar a,
#header .navbar button,
#header .navbar input {
  font-family: "Times New Roman", Times, serif;
}

/* =========================================================
   NAVBAR
   ========================================================= */

#header .navbar {
  padding: 10px 20px;
}

#header .navbar-collapse {
  align-items: center;
}

#header .navbar-nav {
  align-items: center;
}

/* =========================================================
   HAUPTMENÜ – GRUNDDEFINITION
   ========================================================= */

#header .navbar-nav > .nav-item > .nav-link {
  color: #000000;
  background: transparent;
  font-weight: 300;
  white-space: nowrap;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* =========================================================
   HAUPTMENÜ – HOVER / FOKUS
   ========================================================= */

#header .navbar-nav > .nav-item > .nav-link:hover,
#header .navbar-nav > .nav-item > .nav-link:focus {
  color: #000000;
  background: #39ff14;
}

/* =========================================================
   AKTIVER DROPDOWN
   ========================================================= */

#header .navbar-nav > .nav-item > .dropdown-toggle.show {
  color: #000000;
  background: #39ff14;
}

/* =========================================================
   DROPDOWN – GRUNDDEFINITION
   ========================================================= */

#header .dropdown-menu {
  margin-top: 0;
  padding: 1px 0;
  border: 1px solid #000000;
  border-radius: 0;
  background: #1182b7;
}

/* =========================================================
   DROPDOWN EINTRÄGE
   ========================================================= */

#header .dropdown-item {
  color: #000000;
  background: #1182b7;
  white-space: nowrap;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* =========================================================
   DROPDOWN – HOVER / FOKUS
   ========================================================= */

#header .dropdown-item:hover,
#header .dropdown-item:focus {
  color: #000000;
  background: #39ff14;
}

/* =========================================================
   MEHRSTUFIGE DROPDOWNS
   ========================================================= */

#header .dropdown-submenu {
  position: relative;
}

/* =========================================================
   UNTERMENÜ – STANDARD
   ========================================================= */

#header .dropdown-submenu > .dropdown-menu {
  display: none;
}

#header .dropdown-submenu.show > .dropdown-menu {
  display: block;
}

/* =========================================================
   DROPDOWN-PFEILE
   ========================================================= */

#header .dropdown-submenu > .dropdown-toggle::after {
  float: right;
  margin-left: 10px;
  transform: rotate(-90deg);
}

/* =========================================================
   PC
   ========================================================= */

@media (min-width: 992px) {
  #header .navbar-nav {
    align-items: center;
  }

  /* =======================================================
       HAUPTMENÜ
       ======================================================= */

  #header .navbar-nav > .nav-item > .nav-link {
    padding: 2px 10px;

    /* Optimierter Abstand zwischen den PC-Buttons */
    margin: 0 4px;

    font-size: 20px;

    line-height: 1;
    letter-spacing: 1px;

    border-radius: 8px;

    box-shadow:
      0 3px 0 #000000,
      0 4px 6px rgba(0, 0, 0, 0.35);
  }

  #header .navbar-nav > .nav-item > .nav-link:hover,
  #header .navbar-nav > .nav-item > .nav-link:focus {
    background: #39ff14;

    box-shadow:
      0 2px 0 #000000,
      0 3px 5px rgba(0, 0, 0, 0.35);

    transform: translateY(1px);
  }

  /* =======================================================
       DROPDOWN
       ======================================================= */

  #header .dropdown-menu {
    border-radius: 8px;
    overflow: visible;

    box-shadow:
      0 4px 0 #000000,
      0 6px 10px rgba(0, 0, 0, 0.35);
  }

  #header .dropdown-item {
    padding: 3px 12px;

    font-size: 17px;
    line-height: 1;
  }

  #header .dropdown-item:hover,
  #header .dropdown-item:focus {
    background: #39ff14;
  }

  /* =======================================================
       UNTERMENÜ
       ======================================================= */

  #header .dropdown-submenu > .dropdown-menu {
    display: none;

    position: absolute;

    top: 0;
    left: 100%;

    margin-top: 0;
    margin-left: 0;

    min-width: 100%;
  }

  #header .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

  #header .dropdown-submenu > .dropdown-toggle::after {
    margin-top: 4px;
  }

  /* =======================================================
       SUCHE
       ======================================================= */

  #header .menu-search {
    flex-shrink: 0;
    margin-left: 15px;
  }

  #header .menu-search form {
    display: flex;
    align-items: center;
    margin: 0;
  }

  #header .menu-search .form-control {
    width: 160px;

    height: 36px;
    padding: 5px 10px;

    border: 1px solid #000000;
    border-radius: 8px;

    background: #1182b7;
    color: #000000;

    font-size: 16px;

    outline: none;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  }

  #header .menu-search .form-control:focus {
    border-color: #39ff14;

    box-shadow:
      0 0 0 2px #39ff14,
      inset 0 2px 4px rgba(0, 0, 0, 0.25);
  }

  #header .menu-search .btn {
    width: auto;
    min-width: 36px;

    height: 36px;

    margin-left: 4px;
    padding: 0 8px;

    border: 1px solid #000000;
    border-radius: 8px;

    background: #39ff14;
    color: #000000;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;

    box-shadow:
      0 3px 0 #000000,
      0 4px 6px rgba(0, 0, 0, 0.35);
  }

  #header .menu-search .btn:hover,
  #header .menu-search .btn:focus {
    background: #1182b7;
    color: #000000;

    box-shadow:
      0 2px 0 #000000,
      0 3px 5px rgba(0, 0, 0, 0.35);

    transform: translateY(1px);
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 991.98px) {
  #header .navbar {
    padding: 14px 18px;
  }

  #header .navbar-collapse {
    max-height: calc(100vh - 75px);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #header .navbar-nav {
    width: 100%;

    align-items: stretch;

    margin-top: 12px;
  }

  #header .navbar-nav > .nav-item {
    width: 100%;
  }

  /* =======================================================
       HAUPTMENÜ
       BASIS: 26px
       ======================================================= */

  #header .navbar-nav > .nav-item > .nav-link {
    width: 100%;

    min-height: 68px;

    padding: 17px 22px;

    margin: 1px 0;

    font-size: 26px;

    line-height: 1.2;
    letter-spacing: 0.5px;

    display: flex;
    align-items: center;

    border-bottom: 1px solid #000000;

    touch-action: manipulation;
  }

  /* =======================================================
       DROPDOWN
       BASIS: 25px
       ======================================================= */

  #header .dropdown-menu {
    width: 100%;

    padding: 3px 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
  }

  #header .dropdown-item {
    width: 100%;

    min-height: 66px;

    padding: 16px 30px;

    font-size: 25px;

    line-height: 1.2;

    white-space: normal;

    display: flex;
    align-items: center;

    touch-action: manipulation;
  }

  /* =======================================================
       UNTERMENÜ
       ======================================================= */

  #header .dropdown-submenu > .dropdown-menu {
    display: none;

    position: static;

    width: 100%;

    padding-left: 18px;

    margin: 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }

  #header .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

  #header .dropdown-submenu > .dropdown-toggle::after {
    margin-top: 8px;
    margin-left: auto;

    transform: rotate(0deg);
  }

  /* =======================================================
       SUCHE
       BASIS: 23px
       ======================================================= */

  #header .menu-search {
    width: 100%;

    margin-top: 16px;
    margin-bottom: 16px;

    padding: 0 8px;
  }

  #header .menu-search form {
    width: 100%;

    display: flex;
    align-items: center;
  }

  #header .menu-search .form-control {
    width: 100%;

    height: 56px;

    padding: 10px 15px;

    border: 1px solid #000000;
    border-radius: 0;

    background: #1182b7;
    color: #000000;

    font-size: 23px;

    box-shadow: none;
  }

  #header .menu-search .form-control:focus {
    border-color: #000000;

    box-shadow: 0 0 0 2px #39ff14;
  }

  #header .menu-search .btn {
    width: 56px;
    min-width: 56px;

    height: 56px;

    margin-left: 0;
    padding: 0;

    border: 1px solid #000000;
    border-radius: 0;

    background: #39ff14;
    color: #000000;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    touch-action: manipulation;
  }

  /* =======================================================
       TABLET MENÜ-BUTTON
       ======================================================= */

  #header .navbar-toggler {
    min-width: 58px;

    min-height: 56px;

    padding: 10px 12px;

    border: 1px solid #000000;
    border-radius: 0;

    background: #39ff14;
    color: #000000;

    box-shadow: none;

    touch-action: manipulation;
  }

  #header .navbar-toggler:hover,
  #header .navbar-toggler:focus {
    background: #39ff14;
    color: #000000;
    box-shadow: none;
  }

  #header .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg);
  }
}

/* =========================================================
   SMARTPHONE
   ========================================================= */

@media (max-width: 767.98px) {
  #header .navbar {
    padding: 14px 16px;
  }

  #header .navbar-collapse {
    max-height: calc(100vh - 75px);

    overflow-x: hidden;
    overflow-y: auto;

    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  #header .navbar-nav {
    width: 100%;

    align-items: stretch;

    margin-top: 12px;
  }

  #header .navbar-nav > .nav-item {
    width: 100%;
  }

  /* =======================================================
       SMARTPHONE – BASIS

       Dynamische Schriftgröße bleibt erhalten.
       Die Button-Größen werden anschließend
       je Geräteklasse manuell angepasst.
       ======================================================= */

  #header .navbar-nav > .nav-item > .nav-link {
    width: 100%;

    min-height: 72px;

    padding: 18px 21px;

    margin: 1px 0;

    color: #000000;
    background: #ffd700;

    font-size: max(16px, 5vw);

    line-height: 1.2;
    letter-spacing: 0.5px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    border-bottom: 1px solid #000000;
    border-radius: 8px;

    touch-action: manipulation;

    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;

    box-shadow:
      0 3px 0 #000000,
      0 4px 6px rgba(0, 0, 0, 0.35);
  }

  #header .navbar-nav > .nav-item > .nav-link:hover,
  #header .navbar-nav > .nav-item > .nav-link:focus {
    color: #000000;

    background: #39ff14;

    box-shadow:
      0 2px 0 #000000,
      0 3px 5px rgba(0, 0, 0, 0.35);

    transform: translateY(1px);
  }

  #header .navbar-nav > .nav-item > .dropdown-toggle.show {
    color: #000000;
    background: #39ff14;
  }

  /* =======================================================
       DROPDOWN
       ======================================================= */

  #header .dropdown-menu {
    position: static !important;

    width: 100%;

    margin: 0;

    padding: 3px 0;

    border-top: 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 1px solid #000000;

    border-radius: 8px;

    background: #ffd700;

    box-shadow: none;
  }

  #header .dropdown-item {
    width: 100%;

    min-height: 68px;

    padding: 17px 29px;

    color: #000000;
    background: #ffd700;

    font-size: max(15px, 4.5vw);

    line-height: 1.2;

    white-space: normal;

    display: flex;
    align-items: center;

    touch-action: manipulation;

    border-radius: 6px;

    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  #header .dropdown-item:hover,
  #header .dropdown-item:focus {
    color: #000000;

    background: #39ff14;

    box-shadow: 0 2px 0 #000000;

    transform: translateY(1px);
  }

  /* =======================================================
       MEHRSTUFIGE DROPDOWNS
       ======================================================= */

  #header .dropdown-submenu > .dropdown-menu {
    display: none;

    position: static !important;

    width: 100%;

    padding: 0;

    margin: 0;

    border: 0;

    border-radius: 0;

    background: #064571;

    box-shadow: none;
  }

  #header .dropdown-submenu.show > .dropdown-menu {
    display: block;
  }

  #header .dropdown-submenu > .dropdown-toggle::after {
    float: right;

    margin-top: 8px;
    margin-left: auto;

    transform: rotate(0deg);
  }

  /* =======================================================
       SUCHE
       ======================================================= */

  #header .menu-search {
    width: 100%;

    margin-top: 18px;
    margin-bottom: 18px;

    padding: 0 8px;
  }

  #header .menu-search form {
    width: 100%;

    display: flex;
    align-items: center;
  }

  #header .menu-search .form-control {
    width: 100%;

    height: 58px;

    padding: 10px 15px;

    border: 1px solid #000000;
    border-radius: 8px;

    background: #ffd700;
    color: #000000;

    font-size: max(14px, 4vw);

    outline: none;

    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25);
  }

  #header .menu-search .form-control:focus {
    border-color: #000000;

    box-shadow:
      0 0 0 2px #39ff14,
      inset 0 2px 4px rgba(0, 0, 0, 0.25);
  }

  #header .menu-search .btn {
    width: 58px;
    min-width: 58px;

    height: 58px;

    margin-left: 0;
    padding: 0;

    border: 1px solid #000000;
    border-radius: 8px;

    background: #39ff14;
    color: #000000;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    touch-action: manipulation;

    box-shadow:
      0 3px 0 #000000,
      0 4px 6px rgba(0, 0, 0, 0.35);

    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  #header .menu-search .btn:hover,
  #header .menu-search .btn:focus {
    background: #ffd700;

    color: #000000;

    box-shadow:
      0 2px 0 #000000,
      0 3px 5px rgba(0, 0, 0, 0.35);

    transform: translateY(1px);
  }

  /* =======================================================
       MOBILE MENÜ-BUTTON
       ======================================================= */

  #header .navbar-toggler {
    min-width: 60px;

    min-height: 58px;

    padding: 10px 12px;

    border: 1px solid #000000;
    border-radius: 8px;

    background: #39ff14;
    color: #000000;

    box-shadow:
      0 3px 0 #000000,
      0 4px 6px rgba(0, 0, 0, 0.35);

    touch-action: manipulation;

    transition:
      color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.2s ease,
      transform 0.2s ease;
  }

  #header .navbar-toggler:hover,
  #header .navbar-toggler:focus {
    background: #ffd700;

    color: #000000;

    box-shadow:
      0 2px 0 #000000,
      0 3px 5px rgba(0, 0, 0, 0.35);

    transform: translateY(1px);
  }

  #header .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg);
  }
}

/* =========================================================
   H1
   BIS 359.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 50px
   Dropdown   = 48px

   ========================================================= */

@media (max-width: 359.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 50px;
    padding: 8px 14px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 48px;
    padding: 7px 18px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   H2
   360 BIS 374.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 52px
   Dropdown   = 50px

   ========================================================= */

@media (min-width: 360px) and (max-width: 374.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 52px;
    padding: 9px 15px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 50px;
    padding: 8px 19px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   H3
   375 BIS 399.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 54px
   Dropdown   = 52px

   ========================================================= */

@media (min-width: 375px) and (max-width: 399.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 54px;
    padding: 10px 16px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 52px;
    padding: 9px 21px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   H4
   400 BIS 429.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 56px
   Dropdown   = 54px

   ========================================================= */

@media (min-width: 400px) and (max-width: 429.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 56px;
    padding: 11px 17px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 54px;
    padding: 10px 22px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   H5
   430 BIS 499.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 58px
   Dropdown   = 56px

   ========================================================= */

@media (min-width: 430px) and (max-width: 499.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 58px;
    padding: 12px 18px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 56px;
    padding: 11px 24px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   HT
   500 BIS 767.98 PX

   Smartphone:
   Hauptmenü = max(16px, 5vw)
   Dropdown  = max(15px, 4.5vw)
   Suche     = max(14px, 4vw)

   MANUELLE BUTTON-GRÖSSE:
   Hauptmenü  = 62px
   Dropdown   = 60px

   ========================================================= */

@media (min-width: 500px) and (max-width: 767.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    min-height: 62px;
    padding: 14px 19px;
    font-size: max(16px, 5vw);
  }

  #header .dropdown-item {
    min-height: 60px;
    padding: 13px 26px;
    font-size: max(15px, 4.5vw);
  }

  #header .menu-search .form-control {
    font-size: max(14px, 4vw);
  }
}

/* =========================================================
   T1
   768 BIS 899.98 PX

   Tablet:
   Hauptmenü 26px
   Dropdown 25px
   Suche 23px

   ========================================================= */

@media (min-width: 768px) and (max-width: 899.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    font-size: 26px;
  }

  #header .dropdown-item {
    font-size: 25px;
  }

  #header .menu-search .form-control {
    font-size: 23px;
  }
}

/* =========================================================
   T2
   900 BIS 1023.98 PX

   Tablet:
   Hauptmenü 26px
   Dropdown 25px
   Suche 23px

   ========================================================= */

@media (min-width: 900px) and (max-width: 1023.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    font-size: 26px;
  }

  #header .dropdown-item {
    font-size: 25px;
  }

  #header .menu-search .form-control {
    font-size: 23px;
  }
}

/* =========================================================
   T3
   1024 BIS 1199.98 PX

   PC:
   Hauptmenü 20px
   Dropdown 17px
   Suche 16px

   PC WIRD NICHT VERÄNDERT.

   ========================================================= */

@media (min-width: 1024px) and (max-width: 1199.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    font-size: 20px;
  }

  #header .dropdown-item {
    font-size: 17px;
  }

  #header .menu-search .form-control {
    font-size: 16px;
  }
}

/* =========================================================
   T4
   1200 BIS 1439.98 PX

   PC:
   Hauptmenü 20px
   Dropdown 17px
   Suche 16px

   PC WIRD NICHT VERÄNDERT.

   ========================================================= */

@media (min-width: 1200px) and (max-width: 1439.98px) {
  #header .navbar-nav > .nav-item > .nav-link {
    font-size: 20px;
  }

  #header .dropdown-item {
    font-size: 17px;
  }

  #header .menu-search .form-control {
    font-size: 16px;
  }
}

/* =========================================================
   T5
   AB 1440 PX

   PC:
   Hauptmenü 20px
   Dropdown 17px
   Suche 16px

   PC WIRD NICHT VERÄNDERT.

   ========================================================= */

@media (min-width: 1440px) {
  #header .navbar-nav > .nav-item > .nav-link {
    font-size: 20px;
  }

  #header .dropdown-item {
    font-size: 17px;
  }

  #header .menu-search .form-control {
    font-size: 16px;
  }
}

/* =========================================================
   ENDE MENU.CSS
   ========================================================= */