/* ================================
   EBZ Grid 2
   Info Grid + Info Strip

   Enthält:
   1. ebz-info-grid
      - 2x2 Inhalts-/Kennzahlenraster
      - z. B. Förderbeträge

   2. ebz-info-strip
      - universelles Fakten-/Detailraster
      - Layout-Basis für mehrere Textvarianten

   3. ebz-info-strip Modifier
      - ebz-info-strip--facts
      - ebz-info-strip--descriptions
      - ebz-info-strip--process
================================ */


/* =========================================================
   1. EBZ Info Grid
   Universelles 2x2 Inhalts-/Kennzahlenraster

   Verwendung:
   - Klasse auf nested Row: ebz-info-grid
   - Direkte Divi-Columns werden automatisch zu Grid-Kacheln
   - Farben/Hintergründe werden pro Column im Divi Builder gesetzt

   Ziel:
   - 2 Spalten auf Desktop
   - kein Gap
   - Trennung per weißem Innenrahmen
   - mobil einspaltig
========================================================= */


/* ================================
   Info Grid: Container
================================ */

.ebz-info-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
  grid-auto-flow: dense !important;
}


/* ================================
   Info Grid: Kacheln
================================ */

.ebz-info-grid > .et_pb_column {
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: clamp(28px, 2.4vw, 44px) !important;

  float: none !important;
  clear: none !important;

  box-shadow: inset 0 0 0 1px #ffffff;

  min-height: clamp(210px, 17vw, 300px) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  overflow: hidden !important;
}


/* ================================
   Info Grid: Divi-Abstände neutralisieren
================================ */

.ebz-info-grid > .et_pb_column > .et_pb_module {
  margin-bottom: 0 !important;
}

.ebz-info-grid .et_pb_text,
.ebz-info-grid .et_pb_text_inner,
.ebz-info-grid .et_pb_text_inner p,
.ebz-info-grid h1,
.ebz-info-grid h2,
.ebz-info-grid h3,
.ebz-info-grid h4 {
  margin: 0 !important;
}


/* ================================
   Info Grid: Typografie
================================ */

/* Kleine Kategorie / Eyebrow */
.ebz-info-grid .eyebrow-strong,
.ebz-info-grid .eyebrow-strong p {
  font-size: clamp(0.72rem, 0.62rem + 0.25vw, 0.9rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}


/* Große Zahl / Hauptwert */
.ebz-info-grid .hero-h3,
.ebz-info-grid .hero-h3 h3,
.ebz-info-grid .et_pb_module_header {
  font-size: clamp(2.6rem, 2rem + 2.2vw, 4.8rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  font-weight: 800 !important;
}


/* Beschreibungstext unterhalb des Werts */
.ebz-info-grid .hero-h3-text,
.ebz-info-grid .hero-h3-text p {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.3rem) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
}


/* ================================
   Info Grid: Mobile
================================ */

@media (max-width: 880px) {
  .ebz-info-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ebz-info-grid > .et_pb_column {
    width: 100% !important;
    max-width: none !important;

    min-height: clamp(180px, 42vw, 260px) !important;
    padding: clamp(24px, 6vw, 36px) !important;

    float: none !important;
    clear: none !important;
  }

  .ebz-info-grid .hero-h3,
  .ebz-info-grid .hero-h3 h3,
  .ebz-info-grid .et_pb_module_header {
    font-size: clamp(2.7rem, 13vw, 4rem) !important;
  }

  .ebz-info-grid .hero-h3-text,
  .ebz-info-grid .hero-h3-text p {
    font-size: clamp(1rem, 4vw, 1.2rem) !important;
  }
}



/* =========================================================
   2. EBZ Info Strip
   Universelles Fakten-/Detailraster

   Verwendung:
   - Klasse auf Row: ebz-info-strip
   - Direkte Divi-Columns werden automatisch zu Info-Feldern

   Wichtig:
   - ebz-info-strip regelt nur Layout/Grid
   - Typografie wird über Modifier-Klassen gesetzt

   Mögliche Modifier:
   - ebz-info-strip--facts
   - ebz-info-strip--descriptions
   - ebz-info-strip--process
========================================================= */


/* ================================
   Info Strip: Container
================================ */

.ebz-info-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;

  align-items: stretch !important;
}


/* ================================
   Info Strip: Felder
================================ */

.ebz-info-strip > .et_pb_column {
  width: auto !important;
  max-width: none !important;

  margin: 0 !important;
  padding: clamp(28px, 2.4vw, 44px) !important;

  float: none !important;
  clear: none !important;  

  min-height: clamp(190px, 15vw, 260px) !important;

  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  overflow: hidden !important;
}


/* ================================
   Info Strip: Divi-Abstände neutralisieren
================================ */

.ebz-info-strip > .et_pb_column > .et_pb_module {
  margin-bottom: 0 !important;
}

.ebz-info-strip .et_pb_text,
.ebz-info-strip .et_pb_text_inner,
.ebz-info-strip .et_pb_text_inner p,
.ebz-info-strip h1,
.ebz-info-strip h2,
.ebz-info-strip h3,
.ebz-info-strip h4 {
  margin: 0 !important;
}



/* =========================================================
   3. EBZ Info Strip Modifier
   Typografie-Varianten

   Diese Klassen werden zusätzlich zu ebz-info-strip
   auf die jeweilige Row gesetzt.

   Beispiele:
   ebz-info-strip ebz-info-strip--facts
   ebz-info-strip ebz-info-strip--descriptions
   ebz-info-strip ebz-info-strip--process
========================================================= */


/* ================================
   Variante: Facts
   Für Zahlen, Werte, harte Fakten

   Beispiel:
   11 Wochen
   bis zu 11 Wochen (55 Arbeitstage)
================================ */

.ebz-info-strip.ebz-info-strip--facts .eyebrow-strong,
.ebz-info-strip.ebz-info-strip--facts .eyebrow-strong p {
  font-size: clamp(0.68rem, 0.58rem + 0.22vw, 0.82rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

.ebz-info-strip.ebz-info-strip--facts .hero-h3,
.ebz-info-strip.ebz-info-strip--facts .hero-h3 h3,
.ebz-info-strip.ebz-info-strip--facts .et_pb_module_header {
  font-size: clamp(2.2rem, 1.5rem + 2vw, 3rem) !important;
  line-height: 0.95 !important;
  letter-spacing: -0.055em !important;
  font-weight: 800 !important;
}

.ebz-info-strip.ebz-info-strip--facts .hero-h3-text,
.ebz-info-strip.ebz-info-strip--facts .hero-h3-text p {
  font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.15rem) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}


/* ================================
   Variante: Descriptions
   Für kurze beschreibende Aussagen / Themen

   Beispiel:
   01
   Ausbildung sichern
================================ */

.ebz-info-strip.ebz-info-strip--descriptions .eyebrow-strong,
.ebz-info-strip.ebz-info-strip--descriptions .eyebrow-strong p {
  font-size: clamp(0.95rem, 0.85rem + 0.25vw, 1.0625rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  font-weight: 800 !important;
}

.ebz-info-strip.ebz-info-strip--descriptions .hero-h3,
.ebz-info-strip.ebz-info-strip--descriptions .hero-h3 h3,
.ebz-info-strip.ebz-info-strip--descriptions .et_pb_module_header {
  font-size: clamp(2rem, 1.5rem + 1.4vw, 2.5rem) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  font-weight: 800 !important;
}

.ebz-info-strip.ebz-info-strip--descriptions .hero-h3-text,
.ebz-info-strip.ebz-info-strip--descriptions .hero-h3-text p {
  font-size: clamp(0.95rem, 0.86rem + 0.3vw, 1.1rem) !important;
  line-height: 1.25 !important;
  font-weight: 400 !important;
}


/* ================================
   Variante: Process
   Für Ablauf-/Schrittkacheln mit Erklärung

   Beispiel:
   01
   Kontakt aufnehmen
   Nutzen Sie das Kontaktformular.
================================ */

.ebz-info-strip.ebz-info-strip--process .eyebrow-strong,
.ebz-info-strip.ebz-info-strip--process .eyebrow-strong p {
  font-size: clamp(2rem, 1.4rem + 1.7vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -0.04em !important;
  text-transform: none !important;
  font-weight: 800 !important;
}

.ebz-info-strip.ebz-info-strip--process .hero-h3,
.ebz-info-strip.ebz-info-strip--process .hero-h3 h3,
.ebz-info-strip.ebz-info-strip--process .et_pb_module_header {
  font-size: clamp(1.25rem, 1rem + 0.55vw, 1.5rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  font-weight: 800 !important;
}

.ebz-info-strip.ebz-info-strip--process .hero-h3-text,
.ebz-info-strip.ebz-info-strip--process .hero-h3-text p {
  font-size: clamp(1rem, 0.9rem + 0.35vw, 1.15rem) !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
}



/* =========================================================
   4. EBZ Info Strip Breakpoints
========================================================= */


/* ================================
   Tablet
   4 Spalten werden zu 2 Spalten
================================ */

@media (max-width: 1200px) {
  .ebz-info-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* ================================
   Mobile
   2 Spalten werden zu 1 Spalte
================================ */

@media (max-width: 880px) {
  .ebz-info-strip {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .ebz-info-strip > .et_pb_column {
    width: 100% !important;
    max-width: none !important;

    min-height: clamp(160px, 38vw, 230px) !important;
    padding: clamp(24px, 6vw, 36px) !important;

    float: none !important;
    clear: none !important;
  }

  /* Facts */
  .ebz-info-strip.ebz-info-strip--facts .hero-h3,
  .ebz-info-strip.ebz-info-strip--facts .hero-h3 h3,
  .ebz-info-strip.ebz-info-strip--facts .et_pb_module_header {
    font-size: clamp(2.2rem, 10vw, 3rem) !important;
  }

  .ebz-info-strip.ebz-info-strip--facts .hero-h3-text,
  .ebz-info-strip.ebz-info-strip--facts .hero-h3-text p {
    font-size: clamp(0.95rem, 3.8vw, 1.1rem) !important;
  }

  /* Descriptions */
  .ebz-info-strip.ebz-info-strip--descriptions .hero-h3,
  .ebz-info-strip.ebz-info-strip--descriptions .hero-h3 h3,
  .ebz-info-strip.ebz-info-strip--descriptions .et_pb_module_header {
    font-size: clamp(2rem, 9vw, 2.5rem) !important;
  }

  /* Process */
  .ebz-info-strip.ebz-info-strip--process .eyebrow-strong,
  .ebz-info-strip.ebz-info-strip--process .eyebrow-strong p {
    font-size: clamp(2rem, 12vw, 3rem) !important;
  }

  .ebz-info-strip.ebz-info-strip--process .hero-h3,
  .ebz-info-strip.ebz-info-strip--process .hero-h3 h3,
  .ebz-info-strip.ebz-info-strip--process .et_pb_module_header {
    font-size: clamp(1.25rem, 5vw, 1.5rem) !important;
  }

  .ebz-info-strip.ebz-info-strip--process .hero-h3-text,
  .ebz-info-strip.ebz-info-strip--process .hero-h3-text p {
    font-size: clamp(1rem, 4vw, 1.15rem) !important;
  }
}