/*
 Theme Name:   CDU Theme Child
 Template:     cdu
 Description:  Child Theme für Hero-Overlay-Anpassungen
 Version:      1.0.0
*/

/* Fluid Typography auf das H1-Element selbst */
.content-header.has-media .glide__slide h1.title {
  font-size: clamp(1.25rem, 5vw, 2.5rem) !important;
}

/* Fluid Typography auf das H2-Element selbst */
.content-header.has-media .glide__slide h2.subtitle {
  font-size: clamp(0.5rem, 3vw, 1.25rem) !important;
}

/* 1) Slide als Positionierungs-Kontext */
.content-header.has-media .glide__slide {
  position: relative !important;
}

/* 2) Bild unter Overlay bringen */
.content-header.has-media .glide__slide img {
  position: relative !important;
  z-index: 1 !important;
}

/* 3) Overlay-Container: full-cover, column, links + vertikal zentriert */
.content-header.has-media .glide__slide .absolute {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  flex-direction: column !important;       /* Headline über Subline */
  justify-content: center !important;     /* vertikal zentriert */
  align-items: flex-start !important;     /* linksbündig */
  padding-left: 10% !important;           /* Abstand vom linken Rand */
  z-index: 10 !important;                 /* über dem Bild */
}

/* 4) H1: weißer Hintergrund, Inline-Block, Margin-Bottom */
.content-header.has-media .glide__slide h1.title span {
  background-color: #ffffff !important;
  padding: 0.5em 1em !important;
  display: inline-block !important;
  margin-bottom: 0.1em !important;
  z-index: 11 !important;
}

/* 5) H2: blauer Hintergrund, Inline-Block */
.content-header.has-media .glide__slide h2.subtitle span {
  background-color: #2d3c4b !important;
  color: #ffffff !important;
  padding: 0.3em 0.8em !important;
  display: inline-block !important;
  z-index: 11 !important;
}