/* Welle 2: Elementgruppe boxes (G3), Besitzer siehe docs/build/vertrag-welle-2.md
 * rsce_depla_iconbox, rsce_depla_pageheader, rsce_depla_team, rsce_depla_textimage. Doku: docs/build/elemente-g3.md
 * Farben, Schrift, Abstaende aus tokens.css. Komponenteneigene Messwerte der Live-Seite ohne passendes Token
 * stehen als Custom Property am Element-Root und sind dort kommentiert (wie docs/build/komponenten.md).
 */

/* ===== Iconbox ===== */
.iconbox {
  --iconbox-pad: 25px;            /* Innenabstand Kachel (live) */
  --iconbox-pad-bottom-m: 55px;   /* Innenabstand unten Kachel bis 767px (live) */
  --iconbox-pad-x-m: 27.5px;      /* Innenabstand seitlich Kachel bis 1024px, Textbreite mobil 280px (live) */
  --iconbox-notitle-offset: 5px;  /* Kachel ohne Titel: Text tiefer (live) */
  --iconbox-icon-col: 80px;       /* Iconspalte Variante Liste (live) */
  --iconbox-gap: 10px;            /* Abstand Link, Liste: Titel zu Text (live) */
  --iconbox-text-opacity: 0.6;    /* Text in Kacheln (live) */
  --iconbox-title-lh: 1.4;        /* Zeilenhoehe Titel (live) */
  --iconbox-lift: -5px;           /* Icon hebt sich bei Hover (Referenz hover-iconbox) */
  --iconbox-shadow-hover: 0 40px 70px rgba(0, 0, 0, 0.2); /* Hover-Schatten Kachel (live) */
  position: relative;
}

.iconbox__title {
  margin: 0;
  font-size: var(--fs-lead-xxs);
  line-height: var(--iconbox-title-lh);
  letter-spacing: var(--ls-iconbox);
}

.iconbox__text {
  margin-top: var(--iconbox-gap);
  font-weight: var(--fw-regular);
}

/* Absatzabstand bleibt auch am Ende stehen (live so in Kachel und Liste) */

.iconbox__link {
  display: inline-block;
  margin-top: var(--iconbox-gap);
}

.iconbox--text-weiss,
.iconbox--text-weiss .iconbox__title {
  color: var(--color-white);
}

/* Kachel */
/* Gleiche Hoehe kommt vom Raster (depla-grid stretch). Kein height: 100%, sonst zaehlt mb-* doppelt. */
.iconbox--kachel {
  z-index: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}

.iconbox--kachel:hover {
  z-index: 1;
}

.iconbox--kachel .iconbox__inner {
  flex: 1 1 auto;
  padding: var(--iconbox-pad);
  transition: box-shadow var(--ease-base);
}

.iconbox--kachel:hover .iconbox__inner {
  box-shadow: var(--iconbox-shadow-hover);
}

.iconbox--bg-akzent-90 .iconbox__inner { background-color: var(--color-primary-90); }
.iconbox--bg-akzent .iconbox__inner { background-color: var(--color-primary); }
.iconbox--bg-weiss-90 .iconbox__inner { background-color: var(--color-white-90); }

.iconbox--kachel .iconbox__icon {
  padding-top: 5px;
  transition: transform var(--ease-base);
}

.iconbox--kachel:hover .iconbox__icon {
  transform: translateY(var(--iconbox-lift));
}

.iconbox--kachel .iconbox__icon img {
  margin-inline: auto;
}

/* Kachel und Liste: Text live 19.2px bei geerbter Zeilenhoehe 28.8px, Titel mit 25px Abstand */
.iconbox--kachel .iconbox__title,
.iconbox--liste .iconbox__title {
  margin-bottom: var(--heading-mb);
}

.iconbox--kachel .iconbox__text,
.iconbox--liste .iconbox__text {
  margin-top: 0;
  font-size: var(--fs-lead-xxs);
  line-height: calc(var(--fs-base) * var(--lh-base));
}

.iconbox--kachel .iconbox__icon + .iconbox__body {
  margin-top: var(--space-xxs);
}

.iconbox--kachel .iconbox__text {
  opacity: var(--iconbox-text-opacity);
}

/* Kachel ohne Titel: Text 25px unter dem Icon statt 20px (live, messestaende alle Breiten) */
.iconbox--kachel .iconbox__icon + .iconbox__body > .iconbox__text:first-child {
  padding-top: var(--iconbox-notitle-offset);
}

/* Kachel bis 1024px (live gemessen, messestaende/768-full.png, startseite/375-full.png): Text 18.1px bei
   gleicher Zeilenhoehe, seitlich 2.5px mehr Innenabstand (Textbreite mobil 280px) */
@media (max-width: 1024px) {
  .iconbox--kachel .iconbox__inner {
    padding-inline: var(--iconbox-pad-x-m);
  }

  .iconbox--kachel .iconbox__text {
    font-size: var(--fs-lead-s-mobile);
  }
}

/* Kachel Smartphone: unter dem Text 30px mehr Luft (live) */
@media (max-width: 767px) {
  .iconbox--kachel .iconbox__inner {
    padding-bottom: var(--iconbox-pad-bottom-m);
  }
}

/* Liste: Bild-Icon links, Titel und Text rechts */
.iconbox--liste .iconbox__inner {
  display: flex;
  align-items: flex-start;
}

.iconbox--liste .iconbox__icon {
  flex: 0 0 var(--iconbox-icon-col);
}

.iconbox--liste .iconbox__body {
  flex: 1 1 auto;
  min-width: 0;
}

/* Kontaktzeile: Markup .icon-row aus elements.css (Agent A) */
.iconbox--inline .iconbox__text {
  margin-top: 0;
  font-weight: inherit;
}

.iconbox--inline .iconbox__text p {
  margin: 0;
}

.iconbox--inline .iconbox__title {
  margin-bottom: var(--iconbox-gap);
}

/* ===== Seitenkopf ===== */
.pageheader {
  --pageheader-h-gross: 450px;    /* height_large Desktop (live) */
  --pageheader-h-gross-m: 250px;  /* height_large Smartphone (live) */
  position: relative;
  height: var(--pageheader-h);
  overflow: hidden;
  background-color: var(--color-secondary);
}

.pageheader--gross {
  --pageheader-h: var(--pageheader-h-gross);
  --pageheader-h-m: var(--pageheader-h-gross-m);
}

.pageheader__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 767px) {
  .pageheader {
    height: var(--pageheader-h-m);
  }
}

/* ===== Team-Karte ===== */
.team {
  --team-pad: 20px;               /* Innenabstand Infobereich (live) */
  --team-name-mt: 15px;           /* Abstand ueber dem Namen (live) */
  --team-name-mb: 5px;            /* Abstand unter dem Namen (live) */
  --team-name-lh: 1.4;            /* Zeilenhoehe Name, 30px bei 21.3px (live) */
  --team-name-lh-m: 1.47;         /* Zeilenhoehe Name mobil, 25px bei 17.1px (live) */
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface-muted);
  color: var(--color-text);
}

.team__image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.team__body {
  flex: 1 1 auto;
  padding: var(--team-pad);
}

.team__name {
  margin: var(--team-name-mt) 0 var(--team-name-mb);
  font-size: var(--fs-h5);
  line-height: var(--team-name-lh);
  color: var(--color-primary);
}

.team__function {
  margin: 0 0 var(--team-pad);
  font-size: var(--fs-small);
}

.team__contact {
  margin: 0;
  font-size: var(--fs-small);
}

@media (max-width: 767px) {
  .team__name {
    font-size: var(--fs-h5-mobile);
    line-height: var(--team-name-lh-m);
  }
}

/* ===== Text-Bild-Leiste ===== */
.textimage {
  --textimage-h: 500px;           /* Standardhoehe (live) */
  --textimage-pad-y: 40px;        /* Mindestabstand Textflaeche oben/unten. Live: feste Hoehe 500px, Text zentriert,
                                     langer Text laeuft in den Rand (1440: bis 407px Text). Neu waechst die Leiste
                                     erst ab 420px Text, siehe docs/build/qa-abschluss.md */
  --textimage-pad-x: 60px;        /* Innenabstand Textflaeche links/rechts (live) */
  --textimage-pad-m: 30px;        /* Innenabstand Textflaeche Smartphone (live) */
  --textimage-fs: 1.15rem;        /* Text 18.4px (live, alle Breiten) */
  --textimage-lh: 2rem;           /* Zeilenhoehe 32px (live) */
  --textimage-arrow: 20px;        /* Raute an der Textflaeche (live) */
  --textimage-button-pad: 12px 20px; /* Button in der Leiste, 60px hoch (live) */
  --textimage-button-lh: 2rem;
  --textimage-button-mt: 35px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--textimage-h);
}

.textimage__text {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--textimage-pad-y) var(--textimage-pad-x);
  font-size: var(--textimage-fs);
  line-height: var(--textimage-lh);
}

.textimage--bg-akzent .textimage__text { background-color: var(--color-primary); }
.textimage--bg-second .textimage__text { background-color: var(--color-secondary); }
.textimage--bg-hellgrau .textimage__text { background-color: var(--color-surface-muted); }

.textimage--color-weiss .textimage__text,
.textimage--color-weiss .textimage__title {
  color: var(--color-white);
}

.textimage__body > :last-child {
  margin-bottom: 0;
}

/* Mobil ohne Button bleibt der Absatzabstand am Ende live stehen (modelle/375-full.png, projekte/375-full.png: +15px) */
@media (max-width: 767px) {
  .textimage__body:last-child > p:last-child {
    margin-bottom: var(--p-mb);
  }
}

.textimage__subline {
  font-size: var(--fs-lead-xxs);
  color: var(--color-text-light);
}

.textimage--color-weiss .textimage__subline {
  color: var(--color-on-dark-strong);
}

.textimage__action {
  margin: var(--textimage-button-mt) 0 0;
}

.textimage__button {
  display: inline-block;
  padding: var(--textimage-button-pad);
  border: 2px solid var(--color-white-30);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: var(--fs-button);
  font-weight: var(--fw-bold);
  line-height: var(--textimage-button-lh);
  text-align: center;
  transition: opacity var(--ease-fast);
}

.textimage--bg-akzent .textimage__button {
  background-color: var(--color-button-dark);
}

.textimage__button:hover,
.textimage__button:focus-visible {
  opacity: var(--hover-opacity);
}

/* Pfeil: Raute in der Farbe der Textflaeche, ragt 10px ins Bild */
.textimage--pfeil .textimage__text::after {
  content: '';
  position: absolute;
  top: 50%;
  right: calc(var(--textimage-arrow) / -2);
  z-index: 1;
  width: var(--textimage-arrow);
  height: var(--textimage-arrow);
  margin-top: calc(var(--textimage-arrow) / -2);
  background: inherit;
  transform: rotate(45deg);
}

.textimage--text-rechts.textimage--pfeil .textimage__text::after {
  right: auto;
  left: calc(var(--textimage-arrow) / -2);
}

.textimage__media {
  position: relative;
  overflow: hidden;
}

.textimage--text-rechts .textimage__media {
  order: -1;
}

.textimage__media figure,
.textimage__media picture {
  display: contents;
}

.textimage__media figcaption {
  display: none;                  /* live keine sichtbare Bildunterschrift, Text steht im alt */
}

.textimage__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

@media (max-width: 767px) {
  .textimage {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .textimage__text {
    padding: var(--textimage-pad-m);
  }

  .textimage--pfeil .textimage__text::after {
    display: none;
  }

  .textimage--bild-zuerst .textimage__media {
    order: -1;
  }

  .textimage--text-zuerst .textimage__media {
    order: 1;
  }

  .textimage__media img {
    position: static;
    height: auto;
  }
}