/* ================================
   ECH Headline – Full-Bleed Version
   Layer:
     z10  = Hero-Background (100vw)
     z20  = Kasten und Inhalt
     z30  = Bild (im selben Container, aber höhere Z-Schicht)
   ================================ */

:root {
  --h1-color: rgb(242, 242, 242);
  --h2-color: rgb(0, 0, 0);
  --h1-padding-left: 20px;
  --h1-padding-top: 20px;
  --h2-margin-top: 20px;
  --line-margin-top: 20px;
}

.ech-headline {
  position: relative;
  padding: 0;
  min-height: var(--header-h, 300px);
  display: flex;
  align-items: center;
}

/* ---------- LAYER z10: Vollbreites Hintergrundbild ---------- */
.ech-hero-bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}

/* ---------- LAYER z20: Kasten und Inhalt ---------- */
.ech-headline-inner {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  z-index: 20;
}

.ech-box {
  position: relative;
  z-index: 20;
  min-height: var(--header-h, 300px); /* Höhe des Kastens an Header-Höhe anpassen */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ech-box-content {
  padding-top: 20px;
  padding-left: 20px;
}

.ech-h1 {
  color: var(--h1-color);
  margin: 0;
}

.ech-line {
  background-color: var(--h1-color);
  margin-top: 20px;
}

.ech-h2 {
  color: var(--h2-color);
  margin-top: 20px;
  margin-left: 20px;
}

/* ---------- Bild rechts ---------- */
.ech-headline-image {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 30;
  margin-left: auto;
}

.ech-headline-image img {
    max-height: var(--right-image-h, 200px);
    width: auto;
}

/* ---------- Tablet & Mobile ---------- */
@media (max-width: 768px) {
  .ech-headline-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .ech-headline-image {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    text-align: center;
    margin-top: 20px;
  }
}