/* ==========================================================================
   CityFoundry AG — Pillar pages
   `fuehrung-staerken` and `personalprozesse-verbessern`

   Read from the client's Figma frames `fuehrung-staerken-v2` (1440x4738) and
   `personalprozesse-verbessern` (1440x4617).

   These are NOT one shared template. Only hero / angebote / cta appear on both
   and even those differ inside. Section order and rhythm are shared; the
   section internals are per page. See Ai/PILLAR-BRIEF.md Section 0.

   Surface rhythm (identical on both pages):
     hero #004045 -> #FFFFFF -> #E5F6FF -> #F5F0EB -> #FFFFFF -> cta #004045

   Requires: tokens.css, base.css, components.css
   ========================================================================== */

/* ==========================================================================
   SHARED — hero
   Figma: dark ground, eyebrow, h1, kicker, pull-quote, lead, a stat chip and
   two buttons. Text only — no photograph, matching the homepage decision.
   ========================================================================== */

.cf-phero {
  background: var(--cf-teal);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

/* Figma lays every inner hero out as a row, gap 80: a 552px copy column and a
   648px visual column. The pull-quote, the kicker and the metric live in the
   visual card on the right — not stacked under the headline. */
.cf-phero__shell {
  display: grid;
  /* 552/648 with an 80 gutter is `personalprozesse-verbessern`'s frame. The
     other frames differ - see --even below. */
  grid-template-columns: 552fr 648fr;
  gap: 80px;
  align-items: center;
  max-width: var(--cf-shell);
  margin: 0 auto;
}

/* `hr-power-package` splits its hero evenly and uses a 60px gutter
   (Figma: hero-content 610 + gap 60 + hero-visual-wrapper 610). */
.cf-phero__shell--even {
  grid-template-columns: 610fr 610fr;
  gap: 60px;
}

.cf-phero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  min-width: 0;
}

.cf-phero__visual {
  display: flex;
  align-items: center;
  /* flex-end, not center: the card's right edge then sits on the same 1280
     grid line as every section below it. */
  justify-content: flex-end;
  min-width: 0;
}

/* --- Hero accent card (fuehrung-staerken, personalprozesse,
       leadership-companion) — 400px wide in Figma, same anatomy on all three:
       dot + label, pull-quote, divider, metric row. -------------------------- */

.cf-herocard {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  width: 100%;
  max-width: 400px;
  /* It is a <figure>: the browser default `margin: 1em 40px` was insetting the
     card 40px from its column on every screen. */
  margin: 0;
  padding: 32px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-card);
  background: var(--cf-teal-2);
}

.cf-herocard__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  line-height: var(--cf-lh-nav);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-sky);
}

.cf-herocard__dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: var(--cf-r-round);
  background: var(--cf-cyan);
}

.cf-herocard__quote {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.35;
  color: var(--cf-white);
}

.cf-herocard__rule {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--cf-line-sky-30);
}

/* The metric row is present in the Figma but its value is a literal "xxx" on
   all three pages. The row only renders once a real figure exists. */
.cf-herocard__metric {
  /* It is a <p> and the project has no global paragraph reset, so the browser
     default `margin: 1em 0` would add 16px inside the card's 24px gap. This
     rule shipped before the markup did, which is why it was never caught. */
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.cf-herocard__metric-label {
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-nav);
  color: var(--cf-sky);
}

.cf-herocard__metric-value {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  color: var(--cf-cyan);
}

.cf-phero__eyebrow {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-cyan);
}

.cf-phero__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  /* Floor is 30px, not 34: "Personalprozesse" is a single 16-character word
     and at 34px it did not fit a 320px viewport. */
  font-size: clamp(30px, 4.4vw, var(--cf-fs-h1));
  line-height: var(--cf-lh-h1);
  letter-spacing: -0.01em;
  color: var(--cf-white);
  hyphens: auto;
  overflow-wrap: break-word;
}

.cf-phero__title--sm {
  font-size: clamp(28px, 3.6vw, var(--cf-fs-h1-cta));
  line-height: var(--cf-lh-h1-cta);
}

/* Large intro paragraph on a light ground (the 18px lead outside the hero). */
.cf-lead-lg {
  margin: 0;
  max-width: 68ch;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: var(--cf-lh-body);
  color: var(--cf-teal);
}

.cf-phero__kicker {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  line-height: var(--cf-lh-nav);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-cyan);
}

.cf-phero__quote {
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--cf-cyan);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.35;
  color: var(--cf-white);
  max-width: 60ch;
}

/* Figma sets this at Poppins 600/24 on one page only — the design has no other
   Poppins 600 anywhere, so it is normalised to 700. */
/* Figma: Poppins 600/24, colour #00E4F3 — the subheadline is the cyan line,
   not a second white heading. (600 is normalised to 700; the design has no
   other Poppins 600.) */
.cf-phero__sub {
  margin: 0;
  max-width: 40ch;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.3;
  color: var(--cf-cyan);
}

.cf-phero__lead {
  margin: 0;
  max-width: 68ch;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: 18px;
  line-height: var(--cf-lh-body-dark);
  color: var(--cf-sky);
}

/* Stat chip. The value is intentionally absent until the client supplies it —
   the Figma has a literal "xxx" placeholder in both heroes and inventing a
   number here would be inventing a claim. See PILLAR-BRIEF Section 6. */
.cf-phero__stat {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-btn);
}

.cf-phero__stat-label {
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-nav);
  color: var(--cf-sky);
}

.cf-phero__stat-value {
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  color: var(--cf-cyan);
}

.cf-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

/* ==========================================================================
   SHARED — three-up offer cards (both pages, different copy)
   ========================================================================== */

.cf-poffers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-4col);
}

.cf-poffer {
  display: flex;
  flex-direction: column;
  /* Figma `offer-card`: 411x508, padding 32, gap 24. */
  gap: 24px;
  padding: 32px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  transition:
    border-color 0.25s var(--cf-ease),
    transform 0.25s var(--cf-ease);
}

/* On the cream section the cards step to white; on the white section they step
   to cream, so a card never sits on its own colour. */
.cf-psec--white .cf-poffer {
  background: var(--cf-cream);
}

.cf-poffer:hover {
  border-color: var(--cf-cyan);
  transform: translateY(-2px);
}

/* Eyebrow and title are one group in the Figma (gap 8) with the 24px card gap
   under it, so they do not drift apart when the illustration follows. */
.cf-poffer__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Figma boxes are 180x160, 180x160 and 180x180 with scaleMode=FIT. The source
   files carry exactly those ratios (270x240, 270x240, 270x270), so a fixed
   width lands on the Figma height without any cropping. */
.cf-poffer__ill {
  display: block;
  width: 180px;
  height: auto;
}

.cf-poffer__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 22px);
  line-height: 1.3;
  color: var(--cf-ink);
}

/* ==========================================================================
   PAGE A — fuehrung-staerken
   ========================================================================== */

/* --- Ansatz: lead, callout, five numbered questions --------------------- */

/* Figma stacks this: full-width text block, then the five questions as a
   single row of 237px cards. It is not a two-column split. */
.cf-pansatz {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.cf-pquestions {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--cf-gap-4col);
  /* It is an <ol>: the browser's default padding-inline-start of 40px was
     pushing the whole row 40px right of the heading above it. */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Redesigned card. The heading weight stays as it was; what changes is the
   structure — the numeral becomes a small chip instead of a heading-sized
   figure, the top rule gives the card an edge to grow on hover, and the
   question sits on a tighter measure. */
.cf-pquestion {
  position: relative;
  display: flex;
  flex-direction: column;
  /* Figma `question-card`: 237x224, padding 32, gap 20. */
  gap: 20px;
  padding: 32px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  overflow: hidden;
  transition:
    border-color 0.25s var(--cf-ease),
    transform 0.25s var(--cf-ease),
    box-shadow 0.25s var(--cf-ease);
}

/* Accent rule along the top edge — 0 width until hover. */
.cf-pquestion::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--cf-cyan);
  transition: width 0.35s var(--cf-ease);
}

.cf-pquestion:hover {
  border-color: var(--cf-sky);
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgb(var(--cf-ink-rgb) / 0.07);
}

.cf-pquestion:hover::before {
  width: 100%;
}

/* Figma `num-badge`: a 48x48 crystal disc with the numeral in Poppins 18/27.
   It was a small pill here, which read as a tag rather than a step number. */
.cf-pquestion__num {
  align-self: flex-start;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cf-r-round);
  background: var(--cf-crystal);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: 1;
  color: var(--cf-teal);
}

.cf-pquestion__text {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  /* Figma 18/23. */
  font-size: var(--cf-fs-h5);
  line-height: 1.28;
  color: var(--cf-ink);
  hyphens: auto;
  overflow-wrap: break-word;
}

.cf-pansatz__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cf-pansatz__callout {
  /* Client asked for 20px margin and 30px padding above it (2026-08-31) - it
     was sitting too close to the paragraph over it. */
  margin: 20px 0 0;
  /* No white block behind it. The left rule carries the emphasis on its own,
     so the padding shrinks with the background gone. */
  padding: 30px 0 4px 20px;
  /* Figma `highlight-box`: left rule only, 4px, no radius. */
  border-left: 4px solid var(--cf-teal);
  background: transparent;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1.45;
  color: var(--cf-ink);
}

/* --- Evidence: three columns, one of them the quote slider -------------- */

.cf-pevidence {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-4col);
  align-items: start;
}

.cf-pev {
  display: flex;
  flex-direction: column;
  gap: var(--cf-gap-head);
  padding: 32px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-cream);
  height: 100%;
}

.cf-pev__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: var(--cf-lh-h5);
  color: var(--cf-ink);
}

/* Quote slider inside an evidence card. The client's three real testimonials
   live here — the component was already built for the homepage, this is where
   it belongs now. */
.cf-pquote {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
}

.cf-pquote__text {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-xs);
  line-height: 1.6;
  color: var(--cf-teal);
  /* Three quotes of different lengths would otherwise resize the card on every
     step. */
  min-height: 9.6em;
}

.cf-pquote__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cf-pquote__name {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  color: var(--cf-ink);
}

.cf-pquote__role {
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-eyebrow);
  color: var(--cf-teal);
}

.cf-pquote__controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
}

.cf-pquote__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-round);
  background: var(--cf-white);
  color: var(--cf-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition:
    border-color 0.2s var(--cf-ease),
    background 0.2s var(--cf-ease);
}

.cf-pquote__btn:hover {
  border-color: var(--cf-cyan);
  background: var(--cf-crystal);
}

.cf-pquote__pos {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  color: var(--cf-teal);
  font-variant-numeric: tabular-nums;
}

/* Content the client has not written yet reads as pending, not as a bug. */
.cf-pev__pending {
  margin: 0;
  padding: 16px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-white);
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-eyebrow);
  line-height: 1.5;
  color: var(--cf-placeholder);
}

/* ==========================================================================
   PAGE B — personalprozesse-verbessern
   ========================================================================== */

.cf-pproblems {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cf-gap-2col);
}

/* --- Perspektivwechsel: leitfrage + body -------------------------------- */

.cf-pperspective {
  display: grid;
  grid-template-columns: 551fr 649fr;
  gap: 80px;
  align-items: center;
}

.cf-pperspective__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  min-width: 0;
}

/* The callout carries the eyebrow, the question, a divider and the closing
   line — one block, not two stacked elements. */
.cf-pleitfrage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  padding: 48px;
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  border: 1px solid var(--cf-teal);
}

.cf-pleitfrage__rule {
  width: 100%;
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--cf-line-border-40);
}

.cf-pleitfrage__close {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-xs);
  color: var(--cf-teal);
}

.cf-pleitfrage__label {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-teal-2);
}

.cf-pleitfrage__quote {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(21px, 2.2vw, var(--cf-fs-h3));
  line-height: var(--cf-lh-h3);
  color: var(--cf-ink);
}

.cf-pbody {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Beispiel: three narrative steps, then the resolution --------------- */

/* One card, two columns: the narrative steps on the left, the resolution on
   the right. Figma: example-flow-card 1280x380, row, gap 64. */
.cf-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 48px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-psteps {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Figma gives these rows no ground of their own — only the numeral badge is
   filled, and a hairline separates one step from the next. */
.cf-pstep {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
}

.cf-pstep + .cf-pstep {
  border-top: 1px solid var(--cf-line-border-40);
}

.cf-pstep__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cf-pstep__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-crystal);
  color: var(--cf-teal);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1;
}

/* The third step is the pain point, so it is marked rather than numbered. */
.cf-pstep--alert .cf-pstep__num {
  background: var(--cf-error-bg);
  color: var(--cf-error-strong);
}

/* Figma reddens the label as well — this step is the pain point. */
.cf-pstep--alert .cf-pstep__label {
  color: var(--cf-error-strong);
}

.cf-pstep__label {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1.3;
  color: var(--cf-ink);
}

.cf-presolution {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cf-presolution__title {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 24px);
  line-height: 1.3;
  color: var(--cf-ink);
}

/* Figma: solution-banner, ground #E5F6FF with a left rule in #004045. */
.cf-presolution__kicker {
  margin: 0;
  padding: 18px 22px;
  border-left: 3px solid var(--cf-teal);
  /* border-radius: var(--cf-r-inner); */
  background: var(--cf-crystal);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  line-height: var(--cf-lh-h5);
  color: var(--cf-ink);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1439px) {
  .cf-phero {
    padding-left: var(--cf-gutter-md);
    padding-right: var(--cf-gutter-md);
  }
}

@media (max-width: 1199px) {
  .cf-pansatz,
  .cf-pperspective {
    gap: 40px;
  }
  .cf-poffers,
  .cf-pevidence,
  .cf-pproblems {
    grid-template-columns: 1fr 1fr;
  }
  /* An odd card left alone on the last row looks accidental; it spans instead. */
  .cf-poffers > :last-child:nth-child(odd),
  .cf-pevidence > :last-child:nth-child(odd),
  .cf-pproblems > :last-child:nth-child(odd),
  .cf-psteps > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1199px) {
  .cf-pquestions {
    grid-template-columns: repeat(3, 1fr);
  }
  /* The 552:648 split leaves the copy column near 400px here — too narrow for a
     56px headline — so the hero stacks one step earlier than the rest. */
  .cf-phero__shell {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  /* The accent card is supporting material, so it follows the copy. */
  .cf-phero__visual {
    order: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 991px) {
  .cf-pperspective,
  .cf-example {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .cf-pquestions {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .cf-phero {
    padding: 64px var(--cf-gutter-sm);
  }
  .cf-poffers,
  .cf-pevidence,
  .cf-pproblems,
  .cf-psteps {
    grid-template-columns: 1fr;
  }
  .cf-poffers > :last-child:nth-child(odd),
  .cf-pevidence > :last-child:nth-child(odd),
  .cf-pproblems > :last-child:nth-child(odd),
  .cf-psteps > :last-child:nth-child(odd) {
    grid-column: auto;
  }

  .cf-poffer {
    padding: 24px;
  }
  /* .cf-presolution has no card chrome of its own — it sits inside
     .cf-example, which already carries the padding. Adding more here pushed
     its text out of line with the steps above it. */
  .cf-presolution {
    padding: 0;
  }
  .cf-pev,
  .cf-pleitfrage,
  .cf-example {
    padding: 24px;
  }
  .cf-phero__actions {
    width: 100%;
  }
  .cf-pquote__text {
    min-height: 0;
  }
  /* The 400px cap is a desktop measure; on a phone it left the card floating
     in the middle of the column. */
  .cf-herocard {
    padding: 20px;
    max-width: none;
    width: 100%;
    gap: 16px;
  }
  .cf-phero__visual {
    justify-content: flex-start;
  }
  /* 22px over a 280px column ran the pull-quote to seven lines. */
  .cf-herocard__quote {
    font-size: 17px;
    line-height: 1.4;
  }
  .cf-herocard__label {
    font-size: var(--cf-fs-eyebrow);
  }
  .cf-phero__shell {
    gap: 28px;
  }
  .cf-pquestions {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-poffer,
  .cf-pquote__btn,
  .cf-pquestion,
  .cf-pquestion::before {
    transition: none;
  }
  .cf-poffer:hover,
  .cf-pquestion:hover {
    transform: none;
  }
}