/* Gemeinsame, dynamische Navigation für DynPG und /tests/. */
.top_out {
  position: relative;
  min-height: 220px;
  padding: 24px 6%;
  float: none;
  overflow: visible;
}

.top_out .top_logo {
  width: 220px;
  margin: 0;
  float: none;
}

.top_out .top_logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: 170px;
  object-fit: contain;
}

.top_out #nav {
  position: absolute;
  z-index: 1000;
  top: 38px;
  right: 6%;
}

.top_out #nav .container,
.top_out #nav .jtpl-mobile-navigation {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
}

.top_out #nav .navbar-header { float: none; }

.top_out #nav .navbar-toggle {
  display: block !important;
  width: 58px;
  height: 52px;
  margin: 0 0 0 auto;
  padding: 11px;
  float: none;
  border: 0;
  border-radius: 8px;
  background: #050505;
}

.top_out #nav .navbar-toggle:hover,
.top_out #nav .navbar-toggle:focus { background: #050505; }
.top_out #nav .navbar-toggle .icon-bar { width: 34px; height: 4px; margin: 4px 0; background: #fff; border-radius: 3px; }
.top_out #nav .navbar-toggle .icon-bar { display: block; }

.top_out #nav .navbar-collapse {
  position: absolute;
  top: 64px;
  right: 0;
  width: 340px;
  max-height: none !important;
  margin: 0;
  padding: 10px;
  overflow: visible !important;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 10px;
  background: #167966;
  box-shadow: 0 14px 35px rgba(0,0,0,.25);
}

.top_out #nav .navbar-collapse.collapse { display: none !important; }
.top_out #nav .navbar-collapse.collapse.in { display: block !important; }
.top_out #nav .navbar-nav { width: 100%; margin: 0; float: none !important; }
.top_out #nav ul { margin: 0; padding-left: 0; list-style: none; }
.top_out #nav .navbar-nav > li,
.top_out #nav .j-nav-level-0 > li { width: 100%; float: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.25); }
.top_out #nav li.j-nav-has-children { position: relative; }
.top_out #nav .navbar-nav > li:last-child,
.top_out #nav .j-nav-level-0 > li:last-child { border-bottom: 0; }

.top_out #nav .navbar-nav a,
.top_out #nav .jtpl-mobile-navigation a {
  display: block;
  min-height: 0;
  padding: 11px 42px 11px 12px;
  color: #fff;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  text-decoration: none;
  background: transparent;
}

.top_out #nav .navbar-nav a:hover,
.top_out #nav .navbar-nav a:focus,
.top_out #nav .navbar-nav a.hlink_a,
.top_out #nav .jtpl-mobile-navigation a:hover,
.top_out #nav .jtpl-mobile-navigation a:focus,
.top_out #nav .jtpl-mobile-navigation a.hlink_a { color: #fef400; background: transparent; }

.top_out #nav .jmd-nav__toggle-button {
  top: 5px;
  right: 4px;
  width: 34px;
  height: 34px;
  background: transparent;
}
.top_out #nav .jmd-nav__toggle-button::before,
.top_out #nav .jmd-nav__toggle-button::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 16px;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transition: transform .2s ease;
}
.top_out #nav .jmd-nav__toggle-button::after { transform: rotate(90deg); }
.top_out #nav .jmd-nav__item--last-opened > .jmd-nav__toggle-button::after { transform: rotate(0); }

.top_out #nav .j-nav-has-children > ul { display: none; }
.top_out #nav .j-nav-has-children.jmd-nav__item--last-opened > ul { display: block; }

.top_out #nav .j-nav-level-1,
.top_out #nav .j-nav-level-2 {
  margin: 0;
  padding: 3px 0 7px 14px;
  border: 0;
  background: rgba(0,0,0,.12);
  list-style: none;
}
.top_out #nav .j-nav-level-1 li,
.top_out #nav .j-nav-level-2 li { border-bottom: 1px solid rgba(255,255,255,.15); }
.top_out #nav .j-nav-level-1 li:last-child,
.top_out #nav .j-nav-level-2 li:last-child { border-bottom: 0; }
.top_out #nav .j-nav-level-1 a,
.top_out #nav .j-nav-level-2 a { padding: 9px 36px 9px 10px; font-size: 13px; font-weight: 600; }

.top_out #nav .ms-nav-fallback { display: inline-block; padding: 12px 16px; color: #fff; font-weight: 700; }

@media (max-width: 600px) {
  .top_out { min-height: 150px; padding: 15px 20px; }
  .top_out .top_logo { width: 155px; }
  .top_out .top_logo img { width: 155px; height: 112px; }
  .top_out #nav { top: 28px; right: 20px; }
  .top_out #nav .navbar-toggle { width: 52px; height: 48px; padding: 10px; }
  .top_out #nav .navbar-toggle .icon-bar { width: 30px; height: 3px; }
  .top_out #nav .navbar-collapse { top: 58px; width: min(330px, calc(100vw - 40px)); }
}

/* In /tests/ fehlen die alten Bootstrap-Grundregeln: Position explizit sichern. */
.public-site .top_out { padding-left: 6% !important; padding-right: 6% !important; }
.public-site .top_out .top_logo { margin-left: 0 !important; }

/* In /tests/ fehlt aus dem DynPG-Basis-CSS auch die absolute Positionierung
   der Aufklappschalter. Die Korrektur ist bewusst auf die Testplattform begrenzt. */
.public-site .top_out #nav li.j-nav-has-children {
  position: relative !important;
}

.public-site .top_out #nav .jmd-nav__toggle-button {
  position: absolute !important;
  top: 50% !important;
  right: 5px !important;
  left: auto !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateY(-50%);
  border: 0 !important;
  background: transparent !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  cursor: pointer;
  z-index: 2;
}

.public-site .top_out #nav .jmd-nav__toggle-button::before,
.public-site .top_out #nav .jmd-nav__toggle-button::after {
  content: '' !important;
  position: absolute !important;
  top: 16px !important;
  left: 9px !important;
  width: 16px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 2px;
  background: #fff !important;
}

.public-site .top_out #nav .jmd-nav__toggle-button::after {
  transform: rotate(90deg);
}

.public-site .top_out #nav .j-nav-has-children.jmd-nav__item--last-opened > .jmd-nav__toggle-button::after {
  transform: rotate(0);
}