/* public/shared/rich-text.css
 *
 * The defined text styles of the CMS formatting toolbar's "Style" dropdown
 * (public/shared/rich-text-format.js → RICH_STYLE_PRESETS). Content only
 * stores the class name, so changing a style here restyles every text that
 * uses it — on the site and in the CMS fields. Sizes are fluid (clamp) so a
 * headline that fits on desktop doesn't overflow on a phone.
 *
 * Selectors are doubled with .project-richtext so they win over that
 * container's own h2/h3/p defaults (public/project.html).
 * Bump the ?v=N on every <link> to this file when it changes (Cloudflare).
 */

/* Small label above a heading ("DIE AUSGANGSLAGE") */
.rt-eyebrow, .project-richtext .rt-eyebrow {
  display: block;
  font-size: 0.8125rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: normal;
  color: #00abbd;
  margin: 2.5rem 0 0.5rem;
}
/* an eyebrow sits tight on the heading that follows it */
.rt-eyebrow + :is(.rt-headline, .rt-h1, .rt-h2, .rt-h3, h2, h3, h4) { margin-top: 0; }

.rt-headline, .project-richtext .rt-headline {
  display: block;
  font-size: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: none;
  font-style: normal;
  color: #f1f5f9;
  margin: 0 0 1.25rem;
}

.rt-subline, .project-richtext .rt-subline {
  display: block;
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.005em;
  text-transform: none;
  font-style: normal;
  color: #bcc9cb;
  margin: 0 0 1.5rem;
}

.rt-h1, .project-richtext .rt-h1 {
  display: block;
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-transform: none;
  font-style: normal;
  color: #f1f5f9;
  margin: 2.5rem 0 1rem;
}

.rt-h2, .project-richtext .rt-h2 {
  display: block;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-transform: none;
  font-style: normal;
  color: #f1f5f9;
  margin: 2rem 0 0.75rem;
}

.rt-h3, .project-richtext .rt-h3 {
  display: block;
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  text-transform: none;
  font-style: normal;
  color: #f1f5f9;
  margin: 1.5rem 0 0.5rem;
}

/* The first style in a block shouldn't push it down. */
:is(.rt-eyebrow, .rt-headline, .rt-subline, .rt-h1, .rt-h2, .rt-h3):first-child { margin-top: 0; }

.rt-copy, .project-richtext .rt-copy {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.75;
  text-transform: none;
  font-style: normal;
  letter-spacing: normal;
  margin: 0 0 1rem;
}

.rt-small, .project-richtext .rt-small {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.6;
  text-transform: none;
  font-style: normal;
  letter-spacing: normal;
  margin: 0 0 0.75rem;
}

.rt-quote, .project-richtext .rt-quote {
  display: block;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.45;
  letter-spacing: -0.005em;
  text-transform: none;
  color: #f1f5f9;
  border-left: 3px solid #00abbd;
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 2rem 0;
}

.rt-caption, .project-richtext .rt-caption {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-style: normal;
  color: #94a3b8;
  margin: 0.5rem 0 1rem;
}

/* Applied to a selected run (click-to-edit text mode) the style stays in the
   line instead of breaking it out into its own block. */
span:is(.rt-eyebrow, .rt-headline, .rt-subline, .rt-h1, .rt-h2, .rt-h3, .rt-copy, .rt-small, .rt-quote, .rt-caption) {
  display: inline;
  margin: 0;
}
span.rt-quote { border-left: 0; padding: 0; }

/* ── Lists: level 1 + level 2 (toolbar ☰• ☰1 / ◦• ◦a / ⇤) ─────────────────
   Tailwind's reset strips list markers, so they are set explicitly here —
   for the site's rich-text containers and the CMS edit fields alike. */
:is(.project-richtext, .cms-rich) ul { list-style: disc; padding-left: 1.5rem; }
:is(.project-richtext, .cms-rich) ol { list-style: decimal; padding-left: 1.5rem; }
:is(.project-richtext, .cms-rich) :is(ul, ol) :is(ul, ol) { margin: 0.25rem 0 0.35rem; padding-left: 1.5rem; }
:is(.project-richtext, .cms-rich) :is(ul, ol) ul { list-style: circle; }
:is(.project-richtext, .cms-rich) :is(ul, ol) ol { list-style: lower-alpha; }

/* Lead-in brush (toolbar "A:"): the item's colour for its bullet / number is
   stored on the <li> as --rt-marker (::marker inherits it from its item).
   A nested list starts fresh, so sub-items only get a colour of their own. */
:is(.project-richtext, .cms-rich) li::marker { color: var(--rt-marker, #00abbd); }
:is(.project-richtext, .cms-rich) :is(li, ul, ol) > :is(ul, ol) { --rt-marker: initial; }

/* Image blocks with the "Frame" switch off (CMS): floating graphics — no
   background, no rounded corners, nothing cropped (object-fit: contain). */
.rt-floating .carousel-viewport,
.rt-floating .ba-block { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; }
.rt-floating img,
.rt-floating video { border-radius: 0 !important; object-fit: contain !important; background: transparent !important; }
.rt-floating .carousel-caption { background: none; }

/* Image-block caption (content-render.js): a block centred under the image,
   wider than the 48rem body copy, text left-aligned */
.block-caption { max-width: 56rem; margin: 1rem auto 0; text-align: left; font-size: .9rem; font-weight: 500; color: #bcc9cb; }