/* ==========================================================================
   Partial: ContentLightbox (Fancybox 6, inline content)
   --------------------------------------------------------------------------
   The box is the hidden element of the partial (.lightbox-content-element),
   Fancybox adds its class .f-html and the close button. Max. 850px wide.
   On old pages the base styles come from Css/Legacy/header-footer.css
   (scope .lightbox-content-element), on new pages from the global CSS.

   01. Backdrop
   02. Box
   03. Title, content
   ========================================================================== */


/* ==========================================================================
   01. BACKDROP: like the rest of the layout (text color), not black
   ========================================================================== */
.fancybox__container:has(.lightbox-content-element) {
  --fancybox-backdrop-bg: rgb(29 29 27 / 0.6);
}


/* ==========================================================================
   02. BOX
   Fancybox variables for .f-html: padding, background, text color (the
   Fancybox container has white text).
   ========================================================================== */
.lightbox-content-element {
  --lightbox-pad: clamp(1.5rem, 0.75rem + 2.5vw, 3rem);           /* 48px at 1360 */
  --f-html-padding: var(--lightbox-pad);
  --f-html-bg: var(--c-white);
  --f-html-color: var(--c-text);
  box-sizing: border-box;
  width: 100%;
  max-width: 53.125rem;                                 /* 850px */
  font-family: var(--ff-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-align: start;
}
.lightbox-content-element *,
.lightbox-content-element ::before,
.lightbox-content-element ::after { box-sizing: border-box; }


/* ==========================================================================
   03. TITLE, CONTENT
   ========================================================================== */
/* Explicit values: on old pages the old heading styles must not apply.
   Space on the right: the close button of Fancybox sits in the top right corner */
.lightbox-content-element__title {
  margin: 0 2.5rem clamp(1rem, 2vw, 1.5rem) 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-l);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  text-wrap: balance;
}

/* Forms (EXT:offers): wide box for the two columns, title large and light (design "Onlinebewerbung") */
.lightbox-content-element--wide { max-width: 90rem; }
.lightbox-content-element--wide .lightbox-content-element__title {
  margin-bottom: clamp(1.5rem, 3vw, 2.75rem);
  font-family: var(--ff-base);
  font-size: var(--fs-xl);
  font-weight: 300;
  line-height: 1.15;
}

/* Content elements in the box (later): no own section spacing, full width of the box */
.lightbox-content-element__body .section {
  margin-block: 0;
  padding-block: 0;
}
.lightbox-content-element__body .section + .section { margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.lightbox-content-element__body .container { width: 100%; }