/* OneQrew v7 — Conversion Banner, Element 29.

   Der kompakte Aufruf innerhalb des Rasters, kein eigener Abschnitt.
   Umsetzung von "taifun-element-29-conversion-banner.html". Eigener Handle
   "conversion", nicht "abschluss" (Element 08 Full Width Banner): kein
   Bild, darf mehrfach je Seite stehen. Nutzt die geteilten Button-Klassen
   aus kern.css (oq-inhalt__btn--primaer/--sekundaer, oq-inhalt__pfeil)
   statt eigener Buttonregeln. Aenderungen immer auch in conversion.min.css. */

.oq-v7 .oq-conversion {
  --oq-conversion-linie: var(--oq-farbe-linie);
  --oq-conversion-text-leise: color-mix(in oklab, var(--oq-farbe-text) 74%, var(--oq-farbe-flaeche));
  --oq-conversion-box: color-mix(in oklab, var(--oq-farbe-flaeche) 94%, var(--oq-farbe-text));

  position: relative;
  container-type: inline-size;
  background: var(--oq-farbe-flaeche);
  color: var(--oq-farbe-text);
  padding-block: clamp(34px, 4vw, 56px);
}

.oq-v7 .oq-conversion__in {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* --- Die vier Flaechenrollen der Sektion, siehe tokens.md ------------------ */
.oq-v7 .oq-conversion.variant-dark,
.oq-v7 .oq-conversion.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel);
  --oq-farbe-text: var(--oq-farbe-dunkel-text);
  --oq-conversion-box: var(--oq-farbe-dunkel-kachel);
}

.oq-v7 .oq-conversion.variant-dark-alt {
  --oq-farbe-flaeche: var(--oq-farbe-dunkel-alt);
}

.oq-v7 .oq-conversion.variant-neutral,
.oq-v7 .oq-conversion.variant-neutral-alt {
  --oq-farbe-flaeche: var(--oq-farbe-flaeche-alt);
  --oq-conversion-box: var(--oq-farbe-flaeche-hell, #fff);
}

/* --- Darstellung Kasten: immer auf der Markenflaeche -----------------------
   Bewusst unabhaengig von der Sektionsvariante — die Regel "Markenflaeche
   einmal je Seite" gilt hier nicht, er unterbricht den Lesefluss nur kurz. */
.oq-v7 .oq-conversion--kasten .oq-conversion__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(26px, 3.2vw, 44px);
  background: var(--oq-farbe-marke);
  color: var(--oq-farbe-marke-kontrast);
  border-radius: var(--oq-radius-gross);
}

.oq-v7 .oq-conversion--kasten .oq-conversion__btn.oq-inhalt__btn--primaer {
  background: var(--oq-farbe-marke-kontrast);
  color: var(--oq-farbe-marke);
}

.oq-v7 .oq-conversion--kasten .oq-conversion__btn.oq-inhalt__btn--primaer:hover {
  background-color: color-mix(in oklab, var(--oq-farbe-marke-kontrast) 85%, var(--oq-farbe-marke));
}

.oq-v7 .oq-conversion--kasten .oq-conversion__aktion {
  flex: none;
}

/* --- Darstellung Band: zwei Haarlinien statt Kasten ------------------------- */
.oq-v7 .oq-conversion--band .oq-conversion__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  padding-block: clamp(24px, 3vw, 36px);
  border-block: 1px solid var(--oq-conversion-linie);
}

/* --- Optionales Bild ---------------------------------------------------------
   Nimmt die volle Hoehe des Kastens ein (align-self:stretch gegen das
   align-items:center von __box), mit demselben Innenabstand zum Rand wie
   Text/Aktion — kein randloses Vollbild wie Element 08 Full Width Banner,
   das bleibt ein Einschub im Textfluss. */
/* aspect-ratio statt freier Hoehe: .oq-conversion__bild-img steht per
   height:100% ohne eigene aspect-ratio auf der Figure, ein auto-hohes
   Flex-Item bemisst seine Hoehe in diesem Fall am Seitenverhaeltnis des
   Quellbilds statt an min-height — bei einem breiten Motiv (Bild waechst per
   flex:1 auf die Restbreite neben Text/Aktion) reisst das den ganzen Kasten
   samt Text auf, weil align-items:center/align-self:stretch die Zeilenhoehe
   dann am Bild ausrichten. Fester Ratio macht die Zellenhoehe wieder
   unabhaengig vom Quellbild, wie bei kennzahlen.css (__b1/__b2) und
   stage.css (--oq-stage-bild-format). */
.oq-v7 .oq-conversion__bild {
  flex: 1 1 260px;
  align-self: stretch;
  min-height: 140px;
  aspect-ratio: 4 / 3;
  border-radius: var(--oq-radius-mittel);
  overflow: hidden;
}

.oq-v7 .oq-conversion__bild-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Imagify-Kompatibilitaet: wrappt ein nacktes <img> in <picture> und
   verschiebt Klasse und Fokuspunkt dorthin, siehe kennzahlen.css. */
.oq-v7 picture.oq-conversion__bild-img {
  width: 100%;
  height: 100%;
}

.oq-v7 picture.oq-conversion__bild-img > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: inherit;
}

@container (max-width: 640px) {
  .oq-v7 .oq-conversion__bild {
    flex-basis: 100%;
    min-height: 160px;
  }
}

/* --- Gemeinsam: Satz, Ueberschrift, Text ------------------------------------ */
.oq-v7 .oq-conversion__satz {
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-width: 44ch;
  min-width: 0;
}

.oq-v7 .oq-conversion__dachzeile {
  font-size: 1rem;
  font-weight: 600;
}

.oq-v7 .oq-conversion__headline {
  font-family: var(--oq-schrift-display);
  font-weight: var(--oq-display-gewicht);
  font-size: clamp(1.4rem, 2.4cqw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.oq-v7 .oq-conversion__text {
  font-size: 1.02rem;
}

.oq-v7 .oq-conversion--band .oq-conversion__text {
  color: var(--oq-conversion-text-leise);
}

.oq-v7 .oq-conversion__aktion {
  display: flex;
}

/* --- Zusagen statt Druck ----------------------------------------------------- */
.oq-v7 .oq-conversion__zusagen {
  display: flex;
  gap: 12px 26px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: .94rem;
  color: var(--oq-conversion-text-leise);
}

.oq-v7 .oq-conversion__zusagen span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.oq-v7 .oq-conversion__haken {
  position: relative;
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50%;
  background: var(--oq-farbe-haken, var(--oq-farbe-bestaetigung));
}

.oq-v7 .oq-conversion__haken::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 5px;
  width: 9px;
  height: 5px;
  border: 2px solid var(--oq-farbe-haken-strich, var(--oq-farbe-akzent-kontrast));
  border-top: 0;
  border-right: 0;
  transform: rotate(-45deg);
}

/* --- Umbrueche --------------------------------------------------------------- */
@container (max-width: 640px) {
  .oq-v7 .oq-conversion__box {
    flex-direction: column;
    align-items: flex-start;
  }

  .oq-v7 .oq-conversion__aktion,
  .oq-v7 .oq-conversion__btn {
    width: 100%;
  }

  .oq-v7 .oq-conversion__btn {
    justify-content: center;
  }
}