/* =========================================
   UU Group - kleine Icon-Leiste unter Bild
   div class="uu-group"
   ========================================= */

.uu-group {
  position: relative;
}

/* Abstand vom Bild-Element nach unten entfernen,
   damit die Icon-Leiste wirklich über das Bild gezogen werden kann */
.uu-group .frame-type-textmedia,
.uu-group .frame-type-textmedia .ce-textpic,
.uu-group .frame-type-textmedia .ce-gallery,
.uu-group .frame-type-textmedia .ce-row,
.uu-group .frame-type-textmedia .ce-column,
.uu-group .frame-type-textmedia figure {
  margin-bottom: 0;
}

/* Nur die Row stylen, in der die Text/Icon-Elemente liegen */
.uu-group .row:has(.frame-type-texticon) {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: stretch;
  width: min(100%, 620px);
  margin: -5.4rem 2rem 0 auto;
  overflow: hidden;
  background: #fcfff9;
  border: 1px solid rgba(49, 95, 71, 0.13);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgba(27, 35, 31, 0.14);

  --bs-gutter-x: 0;
  --bs-gutter-y: 0;
}

/* Spalten */
.uu-group .row:has(.frame-type-texticon) > [class*="col-"] {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 0;
}

/* Trennlinien */
.uu-group .row:has(.frame-type-texticon) > [class*="col-"]:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 1.35rem;
  right: 0;
  bottom: 1.35rem;
  width: 1px;
  background: rgba(49, 95, 71, 0.18);
}

/* TYPO3-Wrapper neutralisieren */
.uu-group .row:has(.frame-type-texticon) .frame,
.uu-group .row:has(.frame-type-texticon) .frame-group-container,
.uu-group .row:has(.frame-type-texticon) .frame-group-inner,
.uu-group .row:has(.frame-type-texticon) .frame-container,
.uu-group .row:has(.frame-type-texticon) .frame-inner {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.uu-group .row:has(.frame-type-texticon) .frame-type-texticon {
  margin: 0;
  padding: 0;
}

/* Text/Icon Element */
.uu-group .row:has(.frame-type-texticon) .texticon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 118px;
  height: 100%;
  padding: 1rem 1.15rem 1.15rem;
  text-align: center;
}

/* Icon-Kreis */
.uu-group .row:has(.frame-type-texticon) .texticon-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  margin: 0 auto 0.75rem;
  padding: 0;
  background: #eef4eb;
  border-radius: 50%;
  text-align: center;
  line-height: 1;
}

/* Alles innerhalb vom Icon wirklich mittig zwingen */
.uu-group .row:has(.frame-type-texticon) .texticon-icon > *,
.uu-group .row:has(.frame-type-texticon) .texticon-icon .icon,
.uu-group .row:has(.frame-type-texticon) .texticon-icon .icon-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

/* SVG sauber mittig und richtige Farbe */
.uu-group .row:has(.frame-type-texticon) .texticon-icon svg {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0;
  padding: 0;
  background: transparent;
  color: #315f47;
  stroke: #315f47;
}

/* Text */
.uu-group .row:has(.frame-type-texticon) .texticon-content {
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}

.uu-group .row:has(.frame-type-texticon) .texticon-content p {
  max-width: 17ch;
  margin: 0 auto;
  color: #2b2b2b;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.38;
  text-align: center;
}

/* Falls strong oder Überschriften verwendet werden */
.uu-group .row:has(.frame-type-texticon) .texticon-content strong,
.uu-group .row:has(.frame-type-texticon) h1,
.uu-group .row:has(.frame-type-texticon) h2,
.uu-group .row:has(.frame-type-texticon) h3,
.uu-group .row:has(.frame-type-texticon) h4 {
  display: block;
  max-width: 16ch;
  margin: 0 auto 0.35rem;
  color: #315f47;
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}

.uu-group .row:has(.frame-type-texticon) h1::after,
.uu-group .row:has(.frame-type-texticon) h2::after,
.uu-group .row:has(.frame-type-texticon) h3::after,
.uu-group .row:has(.frame-type-texticon) h4::after {
  display: none;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 991.98px) {
  .uu-group .row:has(.frame-type-texticon) {
    width: calc(100% - 3rem);
    margin: -4.5rem auto 0;
  }
}


/* =========================================
   Mobile
   ========================================= */

@media (max-width: 767.98px) {
  .uu-group .row:has(.frame-type-texticon) {
    flex-direction: column;
    width: 100%;
    margin: 1.5rem auto 0;
    border-radius: 12px;
  }

  .uu-group .row:has(.frame-type-texticon) > [class*="col-"] {
    width: 100%;
  }

  .uu-group .row:has(.frame-type-texticon) > [class*="col-"]:not(:last-child)::after {
    top: auto;
    right: 1.25rem;
    bottom: 0;
    left: 1.25rem;
    width: auto;
    height: 1px;
  }

  .uu-group .row:has(.frame-type-texticon) .texticon {
    min-height: 100px;
    padding: 1rem 1.25rem;
  }
}


/* =========================================
   UU Group / Über uns
   rechte Spalte tiefer setzen + Textfluss beruhigen
   ========================================= */

/* gesamte 2-Spalten-Zeile */
.row:has(> [class*="col-"] > .uu-group) {
  align-items: flex-start;
}

/* linke Textspalte:
   Text etwas schmäler halten, damit der Umbruch ruhiger wird */
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:not(:has(> .uu-group)) .frame {
  max-width: 44rem;
}

/* rechte Spalte mit Bild + uu-group bewusst tiefer setzen */
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) {
  display: flex;
  flex-direction: column;
  padding-top: clamp(2.75rem, 4.5vw, 4.75rem);
}

/* Bild-Element sauber halten */
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .frame-type-textmedia,
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .ce-textpic,
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .ce-gallery,
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .ce-row,
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .ce-column,
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) figure {
  margin-bottom: 0;
}

.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) img {
  display: block;
  width: 100%;
  height: auto;
}

/* uu-group selbst nicht extra schieben */
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .uu-group {
  margin: 0;
}

/* die kleine Icon-Leiste unter dem Bild:
   zentriert, etwas schmäler und nicht zu weit hochgezogen */
.row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .uu-group .row:has(.frame-type-texticon) {
  width: min(100%, 640px);
  margin: -2.75rem auto 0;
}


/* =========================================
   Tablet
   ========================================= */

@media (max-width: 1199.98px) {
  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) {
    padding-top: 2rem;
  }

  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .uu-group .row:has(.frame-type-texticon) {
    width: calc(100% - 2rem);
    margin: -2.1rem auto 0;
  }

  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:not(:has(> .uu-group)) .frame {
    max-width: 100%;
  }
}


/* =========================================
   Mobile / kleinere Tablets
   ========================================= */

@media (max-width: 991.98px) {
  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) {
    padding-top: 1.5rem;
  }

  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .uu-group .row:has(.frame-type-texticon) {
    width: calc(100% - 1rem);
    margin: -1.6rem auto 0;
  }
}


/* =========================================
   Handy
   ========================================= */

@media (max-width: 767.98px) {
  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) {
    padding-top: 0;
  }

  .row:has(> [class*="col-"] > .uu-group) > [class*="col-"]:has(> .frame-type-textmedia + .uu-group) .uu-group .row:has(.frame-type-texticon) {
    width: 100%;
    margin: 1.25rem auto 0;
  }
}