:root { --pep-green: #267e22; --pep-green-dark: #175a20; --pep-mint: #f2f8ec; }
body { color: #1e2a24; background: #fff; }
.header .logo-link { position: relative; width: 250px; min-height: 92px; align-items: center; overflow: hidden; text-decoration: none; }
.header .logo-link .logo-img { visibility: hidden; width: 250px !important; height: 92px !important; }
.header .logo-link::before { content: "PEP"; position: absolute; top: 10px; left: 0; color: var(--pep-green); font: 600 3.4rem/1 Oswald, sans-serif; letter-spacing: .04em; }
.header .logo-link::after { content: "AQUARIENDÜNGER"; position: absolute; left: 3px; top: 65px; color: #395044; font: 600 .73rem/1.1 Roboto, sans-serif; letter-spacing: .17em; }
#mainnav.navbar-mega { background: var(--pep-green); padding: 0 .75rem; }
#mainnav.navbar-mega > .navbar-collapse { background: var(--pep-green); }
#mainnav.navbar-mega .navbar-nav { display: flex; flex-wrap: wrap; }
#mainnav.navbar-mega .nav-link { color: #fff; font-size: 1rem; padding: .95rem 1.15rem; text-decoration: none; }
#mainnav.navbar-mega .nav-link:hover, #mainnav.navbar-mega .nav-link:focus, #mainnav.navbar-mega .nav-link.active { background: var(--pep-green-dark); color: #fff; }
.pep-hero { margin: 0 auto 2.5rem; max-width: 1170px; overflow: hidden; background: var(--pep-mint); }
.pep-hero .carousel-item img { aspect-ratio: 1170 / 370; object-fit: cover; }
.pep-hero .carousel-control-prev, .pep-hero .carousel-control-next { width: 8%; opacity: .8; }
.pep-hero .carousel-control-prev-icon, .pep-hero .carousel-control-next-icon { width: 2.7rem; height: 2.7rem; background-color: rgba(255, 255, 255, .72); border-radius: 50%; background-size: 45%; }
.pep-hero .carousel-indicators { margin-bottom: .6rem; }
.pep-hero .carousel-indicators button { width: .55rem; height: .55rem; border-radius: 50%; border: 0; }
@media (min-width: 992px) { #mainnav.navbar-mega > .navbar-collapse { display: flex !important; } #mainnav.navbar-mega .navbar-nav { flex: 0 0 100%; width: 100%; max-width: 100%; } }
@media (max-width: 991px) { #mainnav.navbar-mega, #mainnav.navbar-mega > .navbar-collapse { background: #fff; padding: 0; } #mainnav.navbar-mega .nav-link { color: #1e2a24; padding: .65rem .25rem; } #mainnav.navbar-mega .nav-link:hover, #mainnav.navbar-mega .nav-link:focus { color: var(--pep-green); background: transparent; } }
@media (max-width: 767px) { .header .logo-link { min-height: 74px; width: 210px; } .header .logo-link .logo-img { width: 210px !important; height: 74px !important; } .header .logo-link::before { top: 8px; font-size: 2.7rem; } .header .logo-link::after { top: 55px; font-size: .57rem; } .pep-hero { margin-bottom: 1.5rem; } .pep-hero .carousel-control-prev-icon, .pep-hero .carousel-control-next-icon { width: 2rem; height: 2rem; } }
.btn-primary { background-color: var(--pep-green); border-color: var(--pep-green); }
.btn-primary:hover, .btn-primary:focus { background-color: var(--pep-green-dark); border-color: var(--pep-green-dark); }
.details-top .gallery .wrap { max-width: 420px; margin: 0 auto; }
.details-top .gallery { margin-top: -130px; }
.details-top .gallery figure { height: 400px; margin: 0; padding-top: 20px; display: flex; align-items: flex-start; justify-content: center; }
.details-top .gallery .wrap figure img { max-height: 330px; width: auto !important; max-width: 100%; object-fit: contain; margin: 0 auto; display: block; }
@media (max-width: 767px) { .details-top .gallery { margin-top: 0; } .details-top .gallery figure { height: 320px; } .details-top .gallery .wrap figure img { max-height: 285px; } }
@media (min-width: 992px) {
  .details-top .row.row-cols-md-2 > .col-lg-8.col-xl-9 { flex: 0 0 auto; width: 48%; }
  .details-top .row.row-cols-md-2 > .col-lg-4.col-xl-3 { flex: 0 0 auto; width: 52%; }
  .details-top .gallery { margin-top: -80px; }
}