:root {
  --berger-green: #006473;
  --berger-yellow: #fadc8c;
  --berger-bg-light: #f8f8f8;
  --berger-bg: #f2feff;
  --berger-text-dark: #000;
  scroll-behavior: smooth;
}

/* Typo */
@media screen and (min-width:768px) {
  h2 {
    font-size: 2.5rem;
  }
}

/* Focus */
.btn:focus,
.btn-link:focus,
.btn-link.focus {
  outline: solid;
  text-decoration: none;
}

/* Header */
header nav.navbar .container {
  padding-top: 10px;
  padding-bottom: 10px;
}

header nav.navbar .navbar-brand {
  height: auto;
  margin-right: auto;
  transform: translateY(-50%);
  position: relative;
  padding: 0 0 0 2rem;
  top: 50%;
  left: 0;
}

header nav.navbar .navbar-brand img {
  max-width: 180px;
  height: auto;
}

header nav.navbar .navbar-toggler {
  padding-bottom: 0.75rem;
}

@media (min-width:768px) {
  header nav.navbar .navbar-brand {}
}

header nav.navbar .navbar-collapse{
  top: 79px;
}

/* Container-Inner */
.container-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
}

@media screen and (min-width:992px) {
  .container-inner {
    padding: 0 50px;
  }
}

/* Object Fit Cover */
.object-fit-cover {
  object-fit: cover;
}

/* Toggle Text */
.text-toggle-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

.text-toggle-wrapper .text-toggle-content {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.text-toggle-wrapper .text-toggle-content.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}

.text-toggle-wrapper .text-toggle-btn {
  background: none;
  border: none;
  color: var(--berger-green);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}

.text-toggle-wrapper .text-toggle-btn .toggle-icon {
  width: 24px;
  height: 24px;
  margin-right: 8px;
}

.text-toggle-wrapper .text-toggle-btn span {
  width: calc(100% - 32px);
}

.text-toggle-wrapper .text-toggle-btn .hide {
  display: none;
}

.text-toggle-wrapper .text-toggle-btn .toggle-icon.hide {
  transform: rotate(180deg);
}

.text-toggle-wrapper .text-toggle-btn[aria-expanded="true"] .show {
  display: none;
}

.text-toggle-wrapper .text-toggle-btn[aria-expanded="true"] .hide {
  display: inline-block;
}

/* Carousel */
.berger-carousel .carouesel-inner {
  padding-bottom: 30px;
}

.berger-carousel .carousel-indicators {
  margin-left: 15px;
  margin-right: 15px;
  margin-bottom: 0;
  bottom: -10px;
}

.berger-carousel .carousel-indicators li {
  width: 20px;
  height: 20px;
  background-color: var(--berger-green);
  opacity: 0.5;
  border-radius: 50%;
  border-top: none;
  border-bottom: none;
  margin-right: 5px;
}

.berger-carousel .carousel-indicators li.active {
  border-bottom: none;
  border-top: none;
  background-color: var(--berger-green);
  opacity: 1;
}

.berger-carousel .carousel-control-prev,
.berger-carousel .carousel-control-next {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  opacity: 1;
}

.berger-carousel .carousel-control-prev img,
.berger-carousel .carousel-control-next img {
  width: 38px;
  height: 38px;
}

.berger-carousel .carousel-control-prev {
  left: unset;
  right: 30px;
}

.berger-carousel .carousel-control-prev img {
  transform: rotate(90deg);
}

.berger-carousel .carousel-control-next img {
  transform: rotate(-90deg);
}

@media screen and (min-width:768px) {
  .berger-carousel .carousel-indicators {
    justify-content: flex-end;
  }
}

/* Störer/Hero Overlay */
section.stoerer .overlay,
section.hero-pfeffermond .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4rem;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

section.stoerer .overlay img,
section.hero-pfeffermond .overlay img {
  height: 2.5rem;
  position: absolute;
  right: 20px;
}

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

  section.stoerer .overlay,
  section.hero-pfeffermond .overlay {
    height: 10rem;
  }

  section.stoerer .overlay img,
  section.hero-pfeffermond .overlay img {
    height: 5rem;
    right: 30px;
  }
}

/* Btn Wrapper */
.btn--wrapper {
  margin-top: 2rem;
  gap: 10px;
  padding: 0 15px;
}

/* Text and Images */
section.text-and-images .content {
  font-weight: 400;
}

section.text-and-images .images {
  padding-top: 50px;
  padding-bottom: 20px;
}

@media screen and (min-width:768px) {
  section.text-and-images .images {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Hero */
.hero-pfeffermond .hero--text {
  padding: 50px 20px calc(30px + 4rem);
}

@media screen and (min-width:768px) {
  .hero-pfeffermond .hero--text {
    padding: 100px 100px calc(50px + 10rem) 50px;
  }
}

.hero-pfeffermond .hero--text h1 {
  margin-bottom: 2rem;
}

.hero-pfeffermond .hero--image img {
  object-fit: cover;
}

.hero-pfeffermond .overlay-top {
  height: 0.3125rem;
  top: 0.3125rem;
  background: rgba(255, 255, 255, 0.75);
}

.hero-pfeffermond .overlay-top .header-brand {
  width: 154px;
  left: 18vw;
  top: -46px;
  z-index: 1040;
}

@media screen and (min-width:768px) {
  .hero-pfeffermond .overlay-top {
    height: 2.5rem;
    top: 0;
    background: #f8f8f8;
  }

  .hero-pfeffermond .overlay-top .header-brand {
    width: 300px;
    left: 215px;
    top: -50px;
    z-index: 1040;
  }
}

/* Btns */
.btn-primary,
.btn-secondary {
  position: relative;
  font-weight: 500;
  padding: 10px 36px 10px 24px;
  border-radius: 30px;
  background-color: var(--berger-green);
  border: 1px solid var(--berger-green);
  color: #fff;
}

.btn-secondary {
  background-color: var(--berger-yellow);
  border: 1px solid var(--berger-yellow);
  color: var(--berger-green);
}

.btn-primary.alt {
  border: 1px solid #fff;
  background-color: transparent;
}

.btn-primary::before,
.btn-secondary::before {
  content: '';
  background: url('../img/icons/circle-filled-secondary.svg') no-repeat center center;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
}

.btn-secondary::before {
  background: url('../img/icons/circle-filled-primary.svg') no-repeat center center;
}

.btn-primary:hover,
.btn-secondary:hover,
.btn-primary.alt:hover {
  border-color: #fff;
  background-color: #fff;
  color: var(--berger-green);
}

.btn-primary:hover::before,
.btn-primary.alt:hover::before,
.btn-secondary:hover::before {
  background: url('../img/icons/circle-filled-secondary.svg') no-repeat center center;
}

/* Section Padding */
.section-padding {
  padding: 50px 0;
}

@media screen and (min-width:768px) {
  .section-padding {
    padding: 100px 0;
  }
}

.section-padding h2,
.section-padding h3,
.section-padding h4 {
  margin-bottom: 1.5rem;
}

/* Section BG Secondary */
section.bg-secondary {
  color: var(--berger-text-dark);
}

section.bg-secondary strong,
section.bg-secondary .content strong {
  color: var(--berger-green);
  text-transform: none;
}

/* section bg */
section.bg {
  background-color: var(--berger-bg);
  color: var(--berger-text-dark);
}

/* Benefits */
section.benefits .intro p {
  font-weight: 400;
}

.benefits .benefit-item {
  margin-bottom: 2rem;
}

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

  .benefits .benefits-grid .benefit-item {
    margin-bottom: 4rem;
  }
}

.benefits .benefit-item img {
  max-width: 100px;
  height: auto;
}

.benefits .benefit-item .title {
  margin-top: 1.5rem;
}

.benefits .benefit-item .description {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.benefits .benefit-item .description p {
  text-align: left;
}

/* Modal */
.modal.benefits .benefit-item {
  color: var(--berger-text-dark);
}

.modal.benefits .modal-header .icon img {
  width: 40px;
}

.modal.benefits .modal-header .title {
  font-weight: 500;
}

.modal-header .close {
  opacity: 1;
}

.modal-header .close svg path {
  fill: var(--berger-green);
}

.benefits .benefit-item .modal-trigger {
  background: none;
  border: none;
  color: var(--berger-green);
  cursor: pointer;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-top: 1rem;
}

.benefits .benefit-item .modal-trigger img {
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.benefits .benefit-item .modal-trigger span {
  width: calc(100% - 32px);
}

.modal.benefits .benefit-item .modal-trigger {
  display: none;
}

.modal.benefits .benefit-item .description {
  -webkit-line-clamp: unset;
  overflow: unset;
}

/* Job Listing */
@media screen and (min-width:768px) {
  section.job-listing h2 {
    margin-bottom: 2rem;
  }
}

section.job-listing ul {
  list-style-type: disc;
  margin-bottom: 1.5rem;
  padding-inline-start: 1rem;
}

section.job-listing .card-header,
section.job-listing .card-header button,
section.job-listing .card-body {
  color: var(--berger-text-dark);
}

section.job-listing .card-header button:focus {
  outline-offset: 10px;
  outline-color: #dedede;
}

section.job-listing .card-header {
  padding: 1rem;
}

@media screen and (min-width:768px) {
  section.job-listing .card-header {
    padding: 2rem;
  }
}

section.job-listing .card-header button:hover {
  text-decoration: none;
}

section.job-listing .card-body {
  padding: 2rem 1rem;
}

@media screen and (min-width:768px) {
  section.job-listing .card-body {
    padding: 3rem 2rem;
  }
}

section.job-listing .icon-with-text {
  gap: 10px;
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

@media screen and (min-width:768px) {
  section.job-listing .icon-with-text {
    margin-bottom: 0;
  }
}

section.job-listing .icon-with-text .icon {
  width: 32px;
  height: 32px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transition: transform ease-in-out 0.3s;
}

section.job-listing .icon-with-text .icon.date {
  background-image: url('../img/icons/calendar.svg');
}

section.job-listing .icon-with-text .icon.type {
  background-image: url('../img/icons/clock.svg');
}

section.job-listing .icon-with-text .icon.arrow {
  background-image: url('../img/icons/chevron-down-primary.svg');
}

section.job-listing .icon-with-text .text {
  width: calc(100% - 32px - 10px);
}

section.job-listing .icon-with-text.circled .icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--berger-yellow);
  background-size: 32px;
}

section.job-listing .card-header button[aria-expanded="true"] .icon-with-text .icon.arrow {
  transform: rotate(180deg);
}

section.job-listing .icon-with-text.circled .text {
  width: calc(100% - 48px - 10px);
}

/* Contact */
section.contact {
  margin-bottom: -2.75rem;
  margin-top: -76px;
}

section.contact .intro .name {
  margin-bottom: 0.5rem;
}

section.contact .intro .name span {
  color: var(--berger-green);
  text-transform: uppercase;
  display: block;
}

section.contact .intro img {
  margin: 2rem 0;
}

section.contact .intro a {
  color: var(--berger-text-dark);
}

section.contact .intro a:hover {
  color: var(--berger-green);
  text-decoration: underline;
}

section.contact .spacer {
  height: 30px;
}

@media screen and (min-width:768px) {
  section.contact {
    padding-top: 50px;
  }

  section.contact .intro .name span {
    display: inline;
  }

  section.contact .form {
    z-index: 999;
    position: absolute;
    right: 0;
    bottom: -200px;
  }

  section.contact .form .wpforms-container {
    min-height: 650px;
  }
}