/* ==========================================================================
   PPC Automation – Custom CSS
   Struktur:
   1. Logo & Header
   2. Hoverboxes – Layout & gleiche Höhe
   3. Hoverboxes – Rückseite (Typografie & Innenabstand)
   4. Hoverboxes – Responsive Höhen
   5. Mobile-spezifische Anpassungen
   ========================================================================== */


/* 1. LOGO & HEADER
   -------------------------------------------------------------------------- */

.edgtf-logo-wrapper a {
  padding: 40px 0;
  height: auto !important;
  box-sizing: content-box;
}

.edgtf-logo-wrapper img {
  max-height: 110px;
  width: auto;
}


/* 2. HOVERBOXES – LAYOUT & GLEICHE HÖHE
   -------------------------------------------------------------------------- */

.edgtf-elements-holder.edgtf-three-columns {
  display: flex !important;
  flex-wrap: wrap;
  align-items: stretch;
}

.edgtf-elements-holder.edgtf-three-columns > .edgtf-eh-item {
  display: flex;
  flex-direction: column;
}

.edgtf-eh-item .edgtf-eh-item-inner,
.edgtf-eh-item .edgtf-eh-item-content,
.edgtf-eh-item .vc-hoverbox-wrapper {
  height: 100% !important;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.edgtf-eh-item .vc-hoverbox-wrapper {
  width: 100%;
}

/* Aspect-Ratio-Padding des Plugins entfernen */
.edgtf-eh-item .vc-hoverbox {
  height: 100% !important;
  padding-bottom: 0 !important;   /* WICHTIG: deaktiviert Plugin-Quadrat */
  flex: 1 1 auto;
}

/* JS-Inline-min-height überschreiben */
.edgtf-eh-item .vc-hoverbox-inner {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;       /* setzt Plugin-Wert zurück */
  padding-bottom: 0 !important;
}

.edgtf-eh-item .vc-hoverbox-block {
  position: absolute;             /* bleibt absolut für den Flip-Effekt */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/* 3. HOVERBOXES – RÜCKSEITE (Typografie & Innenabstand)
   -------------------------------------------------------------------------- */

.vc-hoverbox-block-inner.vc-hoverbox-back-inner {
  padding: 24px 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.vc-hoverbox-block-inner.vc-hoverbox-back-inner h2 {
  font-size: clamp(16px, 1.8vw, 22px);
  line-height: 1.25;
  margin: 0 0 10px;
}

.vc-hoverbox-block-inner.vc-hoverbox-back-inner p {
  margin: 0 0 16px;
  line-height: 1.45;
}

/* Lange Wörter dürfen umbrechen */
.vc-hoverbox-block-inner.vc-hoverbox-back-inner,
.vc-hoverbox-block-inner.vc-hoverbox-back-inner h2,
.vc-hoverbox-block-inner.vc-hoverbox-back-inner p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}


/* 4. HOVERBOXES – RESPONSIVE HÖHEN
   -------------------------------------------------------------------------- */

/* Desktop (>1024px) */
@media (min-width: 1025px) {
  .edgtf-eh-item .vc-hoverbox-inner {
    min-height: 350px !important;
  }
}

/* Tablet (769–1024px) – schmaler, daher mehr Höhe */
@media (min-width: 769px) and (max-width: 1024px) {
  .edgtf-eh-item .vc-hoverbox-inner {
    min-height: 380px !important;
  }
  .vc-hoverbox-block-inner.vc-hoverbox-back-inner {
    padding: 18px 16px;
  }
  .vc-hoverbox-block-inner.vc-hoverbox-back-inner p {
    font-size: 14px;
  }
}


/* 5. MOBILE-SPEZIFISCHE ANPASSUNGEN
   -------------------------------------------------------------------------- */

/* Mobile (≤768px): eine Spalte, lesbarer Text, mehr Höhe */
@media (max-width: 768px) {
  .edgtf-elements-holder.edgtf-three-columns {
    gap: 20px;
  }
  .edgtf-elements-holder.edgtf-three-columns > .edgtf-eh-item {
    width: 100%;
  }
  .edgtf-eh-item .vc-hoverbox-inner {
    min-height: 380px !important;
  }
  .vc-hoverbox-block-inner.vc-hoverbox-back-inner {
    padding: 22px 18px;
  }
  .vc-hoverbox-block-inner.vc-hoverbox-back-inner h2 {
    font-size: 20px;
  }
  .vc-hoverbox-block-inner.vc-hoverbox-back-inner p {
    font-size: 15px;
    line-height: 1.45;
  }
}

/* Mobile – Site-Logo ausblenden (z. B. doppeltes Logo) */
@media (max-width: 767px) {
  #site-logo {
    display: none !important;
  }
}

/* Sehr schmale Geräte (≤380px, z. B. iPhone SE) */
@media (max-width: 380px) {
  .edgtf-eh-item .vc-hoverbox-inner {
    min-height: 420px !important;
  }
}