/*
 Theme Name:     Gerbig Digital
 Theme URI:      http://www.elegantthemes.com
 Description:    Gerbig Digital Theme
 Author:         Gerbig Digital
 Author URI:     https://gerbig-digital.de
 Template:       Divi
 Version:        1.0.0
*/

/* =Ab hier kannst du deine CSS-Anpassungen eintragen
------------------------------------------------------- */

/* ---------------------------------------
   Table of Contents
--------------------------------------- */

/* 1. Reset and Defaults */
/* 2. Header Styles */
/* 3. Main Content Styles */
/* 4. Footer Styles */
/* 5. Breakpoints */

/* ---------------------------------------
   1. Reset and Defaults
--------------------------------------- */

#main-content {
  overflow: hidden;
}

.animation-main,
.animation-main-img img {
  transition: 300ms all ease-in-out;
}

.animation-main:hover,
.animation-main-img img:hover {
  transform: scale(0.9);
}

.bullet-list-arrow ul,
.bullet-list-check ul {
  list-style-type: none !important;
}

.bullet-list-arrow li,
.bullet-list-check li {
  display: flex;
  padding-bottom: 25px;
}

.bullet-list-arrow ul li:before {
  content: "\24" !important;
  color: #a87637;
  font-family: "ETMODULES" !important;
  margin-right: 10px;
  margin-left: -14px;
  font-size: 1.2em !important;
}

.bullet-list-check ul li:before {
  content: "\e052" !important;
  color: rgba(0, 0, 0, 0.2);
  font-family: "ETMODULES" !important;
  margin-right: 10px;
  margin-left: -14px;
  font-size: 1.2em !important;
}

/* ---------------------------------------
   2. Header Styles
--------------------------------------- */

#menu-header {
  align-items: center;
}

.menu_cta {
  -webkit-background-clip: padding-box; /* for Safari */
  background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
  color: #fff;
  padding: 0 !important;
  height: fit-content;
  margin: auto auto auto 25px !important;
  transition: 0.4s all;
  background: orange;
  text-align: center;
}

.menu_cta a {
  color: #fff !important;
  padding: 20px 15px !important;
}

.menu_cta:hover {
  opacity: 0.7;
}

.et-menu a:hover {
  opacity: 1;
}

.et-menu .menu-item:not(:last-child) a {
  color: #000 !important;
  background: #fff;
  border-radius: 5px;
  padding: 12px 17px;
  height: auto;
}

.et-menu .menu-item:not(:last-child) a:hover {
  background: #f5f5f6;
  opacity: 1;
}

.et_pb_menu .et-menu > li {
  padding-left: 0px;
  padding-right: 0px;
}

.et-menu li {
  display: block;
}

.sub-menu li {
  padding-right: 0px !important;
  padding-left: 0px !important;
}

.et-menu li li a {
  padding: 6px 0px;
  width: auto;
  border-radius: 0px !important;
}

.et_mobile_nav_menu:before {
  content: "MENÜ";
  position: absolute;
  right: 35px;
  margin-top: 5px;
  color: #2e6164;
  font-size: 16px;
}

.et_mobile_menu {
  min-width: 100vw;
  margin-left: -2.5vw;
}

.et_mobile_menu li a {
  padding: 15px 5%;
}

.first-level a {
  padding: 12px 35px 12px 17px !important;
}

.et_mobile_menu .menu-item-has-children > a {
  font-weight: 400 !important;
}

.et_mobile_menu li li,
.et_pb_menu .et_mobile_menu li ul {
  padding-left: 0%;
}

.et-menu .menu-item-has-children > a:first-child:after {
  right: 13px;
}

.et_mobile_menu .first-level > a {
  background-color: transparent;
  position: relative;
}
.et_mobile_menu .first-level > a:after {
  font-family: "ETmodules";
  content: "\4c";
  font-weight: normal;
  position: absolute;
  font-size: 16px;
  top: 15px !important;
  right: 10px;
}
.et_mobile_menu .first-level > .icon-switch:after {
  content: "\4d";
}
.second-level {
  display: none;
}
.reveal-items {
  display: block;
}
.et_mobile_menu {
  margin-top: 10px !important;
}
.second-level a {
  font-weight: 400 !important;
}

.mobile_nav.opened .mobile_menu_bar:before {
  content: "\4d";
}

/* ---------------------------------------
   3. Main Content Styles
--------------------------------------- */

/*place button modules next to each other in the same column*/
.inline-buttons .et_pb_button_module_wrapper {
  display: inline-block;
}

.nf-form-fields-required {
  display: none;
}

.contact nf-fields-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
}

nf-fields-wrap nf-field:nth-child(n + 1):nth-child(-n + 2) {
  flex: 0 0 calc(50% - 5px);
}

nf-fields-wrap nf-field:nth-child(3) {
  flex-basis: 100%;
}

.contact_button input {
  color: #000 !important;
  transition: 0.4s all;
  background: #ffcc01 !important;
  text-align: center;
  border-radius: 9px !important;
  font-weight: 700;
  font-size: 16px !important;
  padding: 13px 25px !important;
  cursor: pointer;
}

.contact .nf-form-content label {
  font-size: 14px;
}

.contact_field input,
.contact_message textarea {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  border-radius: 10px !important;
  background: #fff !important;
}

.contact_field input:hover,
.contact_message textarea:hover,
.contact_field input:focus,
.contact_message textarea:focus {
  border: 1px solid rgba(0, 0, 0, 0.3) !important;
}

.contact_field label,
.contact_message label {
  color: #000 !important;
}

.contact_field .nf-error.field-wrap .nf-field-element:after {
  border-radius: 0px 8px 8px 0px;
}

.contact_message .nf-error.field-wrap .nf-field-element:after {
  border-radius: 0px 8px 0px 0px;
}

.nf-error-required-error {
  display: none;
}

/* ---------------------------------------
   4. Footer Styles
--------------------------------------- */

.footer-icon .et_pb_icon_wrap {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

/* ---------------------------------------
   5. Breakpoints
--------------------------------------- */

/* Breakpoints for responsive design */
@media screen and (max-width: 576px) {
  /* Styles for screens smaller than 576px (typical smartphones) */

  .btn-mobile-full .et_pb_button_module_wrapper,
  .btn-mobile-full .et_pb_button {
    width: 100%;
    text-align: center;
  }
}

@media screen and (max-width: 768px) {
  /* Styles for screens smaller than 768px (tablets) */
  .menu_cta {
    margin: 20px auto auto auto !important;
  }
  .et_mobile_menu li a {
    text-align: center;
  }
  .first-level a {
    padding: 15px 5% !important;
  }
  .et_pb_menu__wrap {
    margin-right: -8px;
  }
}

@media screen and (max-width: 1024px) {
  /* Styles for screens smaller than 1024px (small desktops) */
}

@media screen and (max-width: 1200px) {
  /* Styles for screens smaller than 1200px (medium to large desktops) */
}

/* Reset Counter — funktioniert im Editor & Frontend */
.entry-content,
.wp-block-post-content,
.block-editor-block-list__layout,
.editor-styles-wrapper {
  counter-reset: section-heading;
}

/* Stil für nummerierte Überschriften */
.wp-block-heading.is-style-section-numbered {
  position: relative;
  padding-left: 3.5rem; /* Platz für Badge links */
  margin: 48px 0px 24px;
}

/* Die Nummer selbst */
.wp-block-heading.is-style-section-numbered::before {
  counter-increment: section-heading;
  content: counter(section-heading);

  position: absolute;
  left: 0;
  top: -6px;

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

  width: 2.4rem;
  height: 2.4rem;
  border-radius: 999px;

  background: #f2f2f2; /* grauer Kasten */
  color: #333;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0;
}