/* ================================
   EBZ Global Section Spacing
   Divi responsive defaults neutralisieren

   Layout-Logik:
   - Normale Sections im Hauptinhalt erzeugen den globalen Seitenabstand.
   - Normale Rows bilden den zentrierten Contentbereich mit max. 1800px.
   - Fullwidth-Sections können per Klasse wirklich randlos laufen.

   Neue Klassen:
   - fullwidth-section: auf die Section setzen, wenn sie randlos laufen soll.
   - contained-row: optional auf eine Row innerhalb einer fullwidth-section setzen,
     wenn diese Row wieder auf max. 1800px begrenzt werden soll.
================================ */

:root {
  --ebz-section-padding-x: clamp(16px, 2vw, 20px);
}

/* Normale Sections im Hauptinhalt */
#main-content .et_pb_section,
#main-content .et_pb_section.et_section_regular,
#main-content .et_pb_section.et_section_specialty,
#main-content .et_pb_fullwidth_section {
  padding-top: 0 !important;
  padding-right: var(--ebz-section-padding-x) !important;
  padding-bottom: 0 !important;
  padding-left: var(--ebz-section-padding-x) !important;
  box-sizing: border-box;
}

/* Normale Rows bilden den zentrierten Contentbereich */
#main-content .et_pb_row {
  width: 100% !important;
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* =========================================================
   EBZ Fullwidth Section
   Klasse auf die Section setzen: fullwidth-section

   Verwendung:
   - Für Bereiche, die wirklich bis an den Viewportrand laufen sollen.
   - Beispiel: vollbreite Bilder, Trenner, visuelle Flächen.
   - Entfernt das globale Section-Padding links/rechts.
   - Rows innerhalb dieser Section dürfen ebenfalls volle Breite nutzen.
========================================================= */

#main-content .et_pb_section.fullwidth-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main-content .et_pb_section.fullwidth-section > .et_pb_row {
  width: 100% !important;
  max-width: none !important;
}

/* Optional:
   Wenn du innerhalb einer Fullwidth-Section doch wieder
   eine begrenzte 1800px-Row brauchst, gib der Row zusätzlich
   die Klasse: contained-row
*/

#main-content .et_pb_section.fullwidth-section > .et_pb_row.contained-row {
  width: 100% !important;
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Divi setzt bei <= 980px automatisch 50px 0.
   Wird hier global überschrieben. */
@media (max-width: 980px) {
  #main-content .et_pb_section,
  #main-content .et_pb_section.et_section_regular,
  #main-content .et_pb_section.et_section_specialty,
  #main-content .et_pb_fullwidth_section {
    padding-top: 0 !important;
    padding-right: var(--ebz-section-padding-x) !important;
    padding-bottom: 0 !important;
    padding-left: var(--ebz-section-padding-x) !important;
  }

  #main-content .et_pb_section.fullwidth-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Sicherheit für kleinere Breakpoints */
@media (max-width: 767px) {
  #main-content .et_pb_section,
  #main-content .et_pb_section.et_section_regular,
  #main-content .et_pb_section.et_section_specialty,
  #main-content .et_pb_fullwidth_section {
    padding-top: 0 !important;
    padding-right: var(--ebz-section-padding-x) !important;
    padding-bottom: 0 !important;
    padding-left: var(--ebz-section-padding-x) !important;
  }

  #main-content .et_pb_section.fullwidth-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ======================================
   Buttons automatische Worttrennung
   ====================================== */

.et_pb_button {
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  max-width: 100%;
}

/* ================================
   EBZ Global Button Hover
   Background Slide-In für alle Divi Buttons
================================ */

.et_pb_button,
.et_pb_button_module_wrapper .et_pb_button {
  background-image: linear-gradient(
    90deg,
    rgba(214, 214, 214, 0.28) 0%,
    rgba(214, 214, 214, 0.28) 100%
  ) !important;

  background-size: 0% 100% !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;

  transition:
    background-size 0.6s ease,
    color 0.4s ease,
    border-color 0.4s ease !important;
}

.et_pb_button:hover,
.et_pb_button_module_wrapper .et_pb_button:hover {
  background-size: 100% 100% !important;
}


/* ================================
   EBZ Kachel Hover
   Background Slide-In für klickbare Kacheln
   Container-Klasse auf Row: kachel-container
================================ */

.kachel-container .et_clickable {
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer;
  isolation: isolate;
}

/* Hover-Fläche als Overlay, damit Hintergrundbilder nicht überschrieben werden */
.kachel-container .et_clickable::before {
  content: "";
  position: absolute;
  inset: 0;

  background: rgba(214, 214, 214, 0.28);

  transform: scaleX(0);
  transform-origin: left center;

  transition: transform 0.6s ease;

  pointer-events: none;
  z-index: 1;
}

/* Hover aktiviert den Slide-In */
.kachel-container .et_clickable:hover::before {
  transform: scaleX(1);
}

/* Inhalte über dem Hover-Overlay halten */
.kachel-container .et_clickable > * {
  position: relative;
  z-index: 2;
}

@media (max-width: 980px) {
  .et_pb_column.et_pb_column_empty {
    display: inherit !important;
  }
}