/* ==========================================================================
   CityFoundry AG — Shared components
   Pieces that appear on more than one template: page shell, section rhythm,
   eyebrow labels, headings, pill buttons, blog cards, image zoom.
   Requires: tokens.css
   ========================================================================== */

/* --- Layout -------------------------------------------------------------- */

/* Horizontal rhythm every section shares. */
.cf-section {
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

.cf-shell {
  max-width: var(--cf-shell);
  margin: 0 auto;
}

/* Section header: heading on the left, supporting text or a link on the
   right, wrapping to two rows when there is not enough room. */
.cf-sechead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cf-gap-head);
  margin-bottom: var(--cf-gap-sec);
}

.cf-sechead--center {
  align-items: center;
  text-align: center;
}

/* .cf-badge sets align-self: flex-start for the common left-aligned case,
   which beats the parent's align-items. Centred contexts have to undo it. */
.cf-sechead--center > .cf-badge,
.cf-pcta__shell > .cf-badge,
.cf-crosslink > .cf-badge {
  align-self: center;
}

.cf-sechead--center > * {
  max-width: 820px;
}

/* One centred heading runs the full container in the Figma instead of the
   820px measure — the homepage's `Zwei Wege …`. */
.cf-sechead--center-wide > * {
  max-width: none;
}

/* `--800` on its own only caps the measure; a centred head also has to centre
   the block itself. Scoped to the pairing so the left-aligned 800px heads on
   `personalprozesse-verbessern` keep their position. */
.cf-sechead--center.cf-sechead--800,
.cf-sechead--center.cf-sechead--900 {
  margin-inline: auto;
}

/* Figma uses three header measures across the inner pages: 800, 900 and the
   full 1280. `people-process-programme > intervention-section` is the 900. */
.cf-sechead--900 {
  max-width: 900px;
}

/* --- Eyebrow label ----------------------------------------------------------
   Small uppercase label preceded by a rule. Geometry varies a little
   between the homepage and the inner templates; colour is a separate
   modifier so either geometry can sit on a dark ground. */
.cf-eyebrow {
  --cf-dash: 26px;
  margin: 0 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cf-link);
}

.cf-eyebrow__dash {
  width: var(--cf-dash);
  height: 1px;
  background: currentColor;
}

/* Homepage stats band — smaller type, wider tracking. */
.cf-eyebrow--wide {
  margin-bottom: 20px;
  gap: 11px;
  font-size: 12.5px;
  letter-spacing: 0.18em;
}

/* Inner templates — slightly wider tracking, shorter rule. */
.cf-eyebrow--inner {
  --cf-dash: 24px;
  margin-bottom: 20px;
  gap: 10px;
  letter-spacing: 0.16em;
}

.cf-eyebrow--on-dark {
  color: var(--cf-cyan);
}

/* --- Headings -------------------------------------------------------------- */
.cf-h2 {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(28px, 3.1vw, var(--cf-fs-h2));
  line-height: var(--cf-lh-h2);
  letter-spacing: 0;
  color: var(--cf-ink);
}

/* Hero and closing-CTA headings run larger (Figma 48px). */
.cf-h2--lg {
  font-size: clamp(30px, 3.6vw, var(--cf-fs-h1-cta));
  line-height: var(--cf-lh-h1-cta);
}

/* --- Pill buttons ----------------------------------------------------------- */
.cf-btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--cf-radius-pill);
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

/* Anchors inherit the document font; <button> does not, so it is set
   explicitly rather than for every pill. */
button.cf-btn {
  font-family: var(--cf-font-body);
}

/* Solid Spark Cyan — the primary action. */
.cf-btn--primary {
  padding: 11px 11px 11px 28px;
  border: 0;
  background: var(--cf-cyan);
  color: var(--cf-ink);
  transition:
    transform 0.3s var(--cf-ease),
    background 0.3s ease;
}

.cf-btn--primary:hover {
  background: var(--cf-cyan-hover);
  color: var(--cf-ink);
  transform: translateY(-3px);
}

/* Lift only, no colour shift — used by the inner templates. */
.cf-btn--lift {
  padding: 11px 11px 11px 28px;
  border: 0;
  background: var(--cf-cyan);
  color: var(--cf-ink);
  transition: transform 0.3s ease;
}

.cf-btn--lift:hover {
  transform: translateY(-3px);
  color: var(--cf-ink);
}

/* Outlined, for use on dark grounds. */
.cf-btn--ghost {
  gap: 10px;
  padding: 17px 28px;
  border: 1px solid var(--cf-line-light-28);
  background: transparent;
  color: var(--cf-white);
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

.cf-btn--ghost:hover {
  border-color: var(--cf-cyan);
  background: var(--cf-cyan-14);
  color: var(--cf-white);
}

/* Outlined on dark, border-colour shift only — inner templates. */
.cf-btn--ghost-line {
  gap: 10px;
  padding: 17px 28px;
  border: 1px solid var(--cf-line-light-28);
  background: transparent;
  color: var(--cf-white);
  transition: border-color 0.3s ease;
}

.cf-btn--ghost-line:hover {
  border-color: var(--cf-cyan);
  color: var(--cf-white);
}

/* Outlined, for use on light grounds; inverts on hover. */
.cf-btn--outline {
  gap: 12px;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--cf-line-ink-18);
  background: transparent;
  color: var(--cf-ink);
  font-size: 16px;
  white-space: nowrap;
  transition: all 0.3s ease;
}

.cf-btn--outline:hover {
  background: var(--cf-ink);
  color: var(--cf-white);
  border-color: var(--cf-ink);
}

/* Circular arrow that rides inside a pill button. */
.cf-btn__icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cf-ink);
  color: var(--cf-cyan);
}

.cf-btn__icon--sm {
  width: 34px;
  height: 34px;
}

/* Inverted: dark pill, cyan disc. */
.cf-btn__icon--cyan {
  background: var(--cf-cyan);
  color: var(--cf-ink);
}

.cf-btn__icon--veil {
  background: var(--cf-line-light-12);
  color: var(--cf-white);
}

/* --- Plain emphasised link ----------------------------------------------------- */
.cf-link {
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* --- Text link with a trailing arrow ----------------------------------------- */
.cf-textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
}

/* --- Breadcrumb --------------------------------------------------------------
   Used on the legal and careers templates, always on a dark ground. */
.cf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--cf-placeholder);
}

.cf-breadcrumb a {
  color: var(--cf-placeholder);
  text-decoration: none;
}

.cf-breadcrumb__current {
  color: var(--cf-white);
}

/* --- Offer type badge ---------------------------------------------------------
   Dienstleistung / Webinar / Software, used on the pillar and services
   templates. */
.cf-badge {
  align-self: flex-start;
  margin: 0;
  padding: 6px 14px;
  border-radius: var(--cf-r-pill);
  background: var(--cf-crystal);
  color: var(--cf-teal);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  line-height: var(--cf-lh-eyebrow);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
}

/* On a Crystal Haze section the pill needs a lighter ground to read. */
.cf-badge--white {
  background: var(--cf-white);
}

/* On the dark closing CTA it becomes an outline. */
.cf-badge--outline {
  background: transparent;
  border: 1px solid var(--cf-line-sky-30);
  color: var(--cf-cyan);
}

.cf-badge--service {
  background: var(--cf-crystal);
  color: var(--cf-teal);
}
.cf-badge--software {
  background: var(--cf-cream);
  color: var(--cf-ink);
}
.cf-badge--webinar {
  background: var(--cf-cyan-14);
  color: var(--cf-teal-2);
}

/* --- Service card -----------------------------------------------------------
   Image, title, rotating arrow. Used on the homepage and the services
   overview. */
.cf-svc {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--cf-ink);
}

.cf-svc:hover {
  color: var(--cf-ink);
}

.cf-svc__media {
  display: block;
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.cf-svc__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cf-svc__index {
  position: absolute;
  left: 16px;
  top: 16px;
  padding: 7px 14px;
  border-radius: var(--cf-radius-pill);
  background: rgb(var(--cf-white-rgb) / 0.92);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--cf-ink);
}

.cf-svc__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-top: 24px;
}

.cf-svc__title {
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: 25px;
  line-height: 1.18;
  letter-spacing: -0.03em;
}

.cf-svc__arrow {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--cf-line-ink-18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.4s var(--cf-ease);
}

.cf-svc:hover .cf-svc__arrow {
  background: var(--cf-ink);
  color: var(--cf-white);
  border-color: var(--cf-ink);
  transform: rotate(-45deg);
}

.cf-svc__text {
  display: block;
  margin-top: 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--cf-muted);
}

/* --- Post meta ------------------------------------------------------------------ */
/* Figma sets the card eyebrow at DM Sans 12/16 w700 in #5F7572, uppercase.
   The reading time is ours - the frame shows the category alone - but it is
   information rather than decoration, so it stays. */
.cf-postmeta {
  display: flex;
  gap: 8px;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  line-height: var(--cf-lh-eyebrow);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-teal-muted);
}

.cf-postmeta__cat {
  color: var(--cf-teal-muted);
  font-weight: 700;
}

/* --- Post grid -------------------------------------------------------------------- */
/* Figma `artikel-grid-section`: three 405px cards per row, 32 between the
   cards and 48 between the rows (the section's own item spacing). */
.cf-postgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 32px;
  row-gap: 48px;
}

/* Figma `article-card`: 405x499, white, 40% hairline, r=16, padding 32.
   Inside it the rhythm is 24 around the copy block and 12 within it - the
   card had no chrome at all before. */
.cf-postcard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  text-decoration: none;
  color: var(--cf-ink);
  transition: border-color .25s var(--cf-ease), transform .25s var(--cf-ease);
}

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

.cf-postcard:hover {
  color: var(--cf-ink);
}

/* Figma `Rectangle`: 341x200 (1.7:1), r=8, scaleMode=FILL. */
.cf-postcard__media {
  display: block;
  margin-bottom: 12px;
  border-radius: var(--cf-r-btn);
  overflow: hidden;
  aspect-ratio: 341 / 200;
}

.cf-postcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cf-postcard__title {
  display: block;
  font-family: var(--cf-font-head);
  font-weight: 700;
  /* Figma: Poppins 22/33, no tracking. */
  letter-spacing: 0;
  line-height: 1.5;
  font-size: 21px;
}

.cf-postcard__text {
  display: block;
  /* Figma: DM Sans 14/21 in the ink colour, not the muted grey. */
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-xs);
  color: var(--cf-ink);
}

/* Figma closes the card with `Weiterlesen` + a 14px arrow. The card itself is
   the link, so this is a span - a nested <a> would be invalid and would give
   the card two click targets. `margin-top: auto` keeps it on the card floor
   so the row lines up whatever the title length. */
.cf-postcard__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-body-xs);
  line-height: 1.3;
  color: var(--cf-ink);
}

.cf-postcard__more .cf-arrowlink__icon { transition: transform .2s var(--cf-ease); }
.cf-postcard:hover .cf-arrowlink__icon { transform: translateX(4px); }

@media (max-width: 1000px) {
  .cf-postgrid { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
}

@media (max-width: 767px) {
  .cf-postgrid { grid-template-columns: 1fr; }
  .cf-postcard { padding: 24px; }
}

/* --- Image zoom on hover ------------------------------------------------------ */
.cf-zoom {
  overflow: hidden;
}

.cf-zoom img {
  transition: transform var(--cf-zoom-duration) var(--cf-ease);
}

.cf-zoom:hover img {
  transform: scale(var(--cf-zoom-scale));
}

/* ==========================================================================
   FIGMA SYSTEM PRIMITIVES
   Added with the client's Figma direction (2026-08-20). Every value here
   comes from node data in that file — see Ai/DESIGN-DECISION.txt Section 1.8.
   ========================================================================== */

/* --- Headings ----------------------------------------------------------- */

/* --- German compound safety ---------------------------------------------
   Long compounds are the recurring overflow hazard here. Hyphenation needs a
   lang attribute to have a dictionary; <html lang="de-CH"> is set on every
   page. break-word catches whatever the dictionary will not split.        */
.cf-h2,
.cf-h3,
.cf-h5 {
  hyphens: auto;
  overflow-wrap: break-word;
}

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

.cf-h5 {
  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);
}

/* --- Body copy ---------------------------------------------------------- */

.cf-body,
.cf-body-sm,
.cf-body-xs {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 400;
  color: var(--cf-teal);
}

.cf-body {
  font-size: var(--cf-fs-body);
  line-height: var(--cf-lh-body);
}
.cf-body-sm {
  font-size: var(--cf-fs-body-sm);
  line-height: var(--cf-lh-body-sm);
}
.cf-body-xs {
  font-size: var(--cf-fs-body-xs);
  line-height: var(--cf-lh-body-xs);
}

/* Small uppercase card label — no rule, unlike .cf-eyebrow. */
.cf-eyebrow-sm {
  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-teal);
}

/* --- Cards -------------------------------------------------------------
   Figma separates cards with a 1px hairline, not a shadow. Two sizes:
   the 2-column card (624px, 48px padding) and the 4-column card (302px,
   32px padding, cream ground).                                          */

.cf-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  transition:
    border-color 0.25s var(--cf-ease),
    transform 0.25s var(--cf-ease);
}

.cf-card--lg {
  gap: var(--cf-gap-card);
  padding: var(--cf-pad-card);
  background: var(--cf-white);
}

.cf-card--sm {
  gap: 20px;
  padding: var(--cf-pad-card-sm);
  background: var(--cf-cream);
}

.cf-card--white {
  background: var(--cf-white);
}

.cf-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--cf-gap-head);
}

/* Only cards that lead somewhere get the lift. */
a.cf-card:hover,
.cf-card:has(.cf-arrowlink):hover {
  border-color: var(--cf-cyan);
  transform: translateY(-2px);
}

/* --- Inner box (the cream list panel inside a large card) --------------- */

.cf-inbox {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 20px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-cream);
  list-style: none;
}

.cf-inbox li {
  position: relative;
  padding-left: 16px;
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  color: var(--cf-ink);
}

.cf-inbox li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: var(--cf-r-round);
  background: var(--cf-teal);
}

/* A cream card needs its inner box to step to white instead. */
.cf-card--sm .cf-inbox {
  background: var(--cf-white);
}

/* Two large cards side by side. It started on the homepage (`Zwei Wege`), but
   `people-process-programme` uses it too and does not load home.css - which
   left its two cards stacked full-width. Base rule and its override move
   together. */
.cf-ways__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-gap-2col);
}

@media (max-width: 991px) {
  .cf-ways__grid {
    grid-template-columns: 1fr;
  }
}

/* --- Arrow link --------------------------------------------------------- */

.cf-arrowlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-body-sm);
  line-height: 1.3;
  color: var(--cf-ink);
  text-decoration: none;
}

.cf-arrowlink--sm {
  font-size: var(--cf-fs-nav);
}

/* The arrow is the Figma glyph as inline SVG (stroke: currentColor, so the
   colour still comes from this rule, not from the markup). */
.cf-arrowlink__icon {
  flex: 0 0 auto;
  transition: transform 0.2s var(--cf-ease);
}
.cf-arrowlink:hover {
  color: var(--cf-teal-2);
}
.cf-arrowlink:hover .cf-arrowlink__icon {
  transform: translateX(4px);
}

/* --- Highlight band ----------------------------------------------------
   Figma `people-process-programme > highlight-box`: 900 wide, crystal ground,
   a 4px rule on the left only, 32px padding, the line centred at 20/28.
   `personalprozesse-verbessern` has the same device with that frame's own
   metrics (`.cf-presolution__kicker`); merge them when that page is next
   touched, not before - it is client-approved as it stands.              */

.cf-highlight {
  margin: 0;
  max-width: 900px;
  margin-inline: auto;
  padding: 32px;
  border-left: 4px 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-h4);
  line-height: 1.4;
  color: var(--cf-ink);
  text-align: center;
}

/* --- Callout ------------------------------------------------------------ */

.cf-callout {
  margin: 0;
  padding: 20px;
  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-body);
  line-height: 1.45;
  color: var(--cf-ink);
}

/* --- Buttons (Figma: 8px radius, not pills) ----------------------------- */

.cf-btn--dark,
.cf-btn--cyan,
.cf-btn--ghost-cyan,
.cf-btn--ghost-teal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  padding: 0 32px;
  border: 1px solid transparent;
  border-radius: var(--cf-r-btn);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.2s var(--cf-ease),
    transform 0.2s var(--cf-ease),
    border-color 0.2s var(--cf-ease),
    color 0.2s var(--cf-ease);
}

.cf-btn--dark {
  background: var(--cf-ink);
  color: var(--cf-white);
}
.cf-btn--cyan {
  background: var(--cf-cyan);
  color: var(--cf-teal);
}

.cf-btn--ghost-cyan {
  background: transparent;
  border-color: var(--cf-cyan);
  color: var(--cf-cyan);
}

/* Same button on a light ground — the dark-on-cyan pair does not work there. */
.cf-btn--ghost-teal {
  background: transparent;
  border-color: var(--cf-teal);
  color: var(--cf-teal);
}

/* Secondary buttons in a hero are deliberately lighter than the primary. */
.cf-btn--sm {
  height: 46px;
  padding: 0 24px;
  font-size: var(--cf-fs-label);
}

.cf-btn--dark:hover {
  background: var(--cf-ink-hover);
  transform: translateY(-1px);
}
.cf-btn--cyan:hover {
  background: var(--cf-cyan-hover);
  transform: translateY(-1px);
}
.cf-btn--ghost-cyan:hover {
  background: var(--cf-cyan-14);
  transform: translateY(-1px);
}
.cf-btn--ghost-teal:hover {
  background: var(--cf-teal);
  color: var(--cf-white);
  transform: translateY(-1px);
}

/* The Figma arrow inside a button (same glyph as .cf-arrowlink). */
.cf-btn__arrow {
  flex: 0 0 auto;
  transition: transform 0.2s var(--cf-ease);
}
.cf-btn:hover .cf-btn__arrow {
  transform: translateX(3px);
}

.cf-btn--dark .cf-btn__icon,
.cf-btn--cyan .cf-btn__icon {
  transition: transform 0.2s var(--cf-ease);
}
.cf-btn--dark:hover .cf-btn__icon,
.cf-btn--cyan:hover .cf-btn__icon {
  transform: translateX(3px);
}

/* --- Legacy button variants --------------------------------------------
   The pre-Figma pages still carry --primary / --lift / --ghost / --ghost-line
   / --outline. Rather than editing markup on every one of them, those names
   now resolve to the Figma geometry: 8px radius, 56px tall, Poppins 700/16.
   Delete a line here once its page is rebuilt.                            */

.cf-btn--primary,
.cf-btn--lift,
.cf-btn--ghost,
.cf-btn--ghost-line,
.cf-btn--outline {
  border-radius: var(--cf-r-btn);
  min-height: 56px;
  padding: 0 32px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-body);
  letter-spacing: 0;
}

.cf-btn--primary,
.cf-btn--lift {
  background: var(--cf-ink);
  color: var(--cf-white);
  border: 1px solid transparent;
}

.cf-btn--primary:hover,
.cf-btn--lift:hover {
  background: var(--cf-ink-hover);
  transform: translateY(-1px);
}

.cf-btn--ghost,
.cf-btn--ghost-line,
.cf-btn--outline {
  background: transparent;
  border: 1px solid var(--cf-border);
  color: var(--cf-ink);
}

.cf-btn--ghost:hover,
.cf-btn--ghost-line:hover,
.cf-btn--outline:hover {
  border-color: var(--cf-cyan);
  background: var(--cf-crystal);
}

/* On a dark ground the legacy ghost has to switch sides. */
.cf-ihero .cf-btn--ghost,
.cf-ihero .cf-btn--ghost-line,
.cf-ihero .cf-btn--outline {
  border-color: var(--cf-cyan);
  color: var(--cf-cyan);
}

.cf-ihero .cf-btn--primary,
.cf-ihero .cf-btn--lift {
  background: var(--cf-cyan);
  color: var(--cf-teal);
}

/* --- Selectable chip (Situationsfinder perspectives) --------------------
   finder.js drives --p-bg / --p-border / --p-fg, so the palette lives in
   JS and only the geometry lives here.                                    */

.cf-chip-select {
  padding: 10px 18px;
  border: 1px solid var(--p-border, var(--cf-border));
  border-radius: var(--cf-r-round);
  background: var(--p-bg, var(--cf-white));
  color: var(--p-fg, var(--cf-ink));
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  white-space: nowrap;
  cursor: pointer;
  transition:
    border-color 0.2s var(--cf-ease),
    background 0.2s var(--cf-ease),
    color 0.2s var(--cf-ease);
}

.cf-chip-select:hover {
  border-color: var(--cf-cyan);
}

@media (max-width: 767px) {
  .cf-card--lg {
    padding: 28px;
    gap: 24px;
  }
  .cf-card--sm {
    padding: 24px;
  }
  /* Four perspective chips took four lines at the desktop size. Smaller
     padding and type lets two sit side by side. */
  .cf-chip-select {
    padding: 9px 14px;
    font-size: var(--cf-fs-nav);
  }
  .cf-btn--dark,
  .cf-btn--cyan,
  .cf-btn--ghost-cyan,
  .cf-btn--primary,
  .cf-btn--lift,
  .cf-btn--ghost,
  .cf-btn--ghost-line,
  .cf-btn--outline {
    width: 100%;
    /* min-height, not height: a wrapped label used to overflow a fixed box. */
    min-height: 50px;
    height: auto;
    padding: 12px 18px;
    font-size: var(--cf-fs-body-sm);
    line-height: 1.3;
    text-align: center;
  }

  .cf-btn--sm {
    min-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-card,
  .cf-arrowlink__icon,
  .cf-btn--dark,
  .cf-btn--cyan,
  .cf-btn--ghost-cyan,
  .cf-btn--ghost-teal,
  .cf-btn__arrow,
  .cf-chip-select {
    transition: none;
  }

  a.cf-card:hover,
  .cf-card:has(.cf-arrowlink):hover,
  .cf-btn--dark:hover,
  .cf-btn--cyan:hover,
  .cf-btn--ghost-cyan:hover,
  .cf-btn--ghost-teal:hover {
    transform: none;
  }

  .cf-btn:hover .cf-btn__arrow {
    transform: none;
  }

  .cf-arrowlink:hover .cf-arrowlink__icon {
    transform: none;
  }
}

/* ==========================================================================
   PILLAR-PAGE PRIMITIVES
   Added with the two pillar pages (2026-08-20). Both patterns come from the
   client's Figma frames and are built entirely from existing tokens — no new
   colour enters the system here. See Ai/PILLAR-BRIEF.md Section 2.
   ========================================================================== */

/* --- Numbered problem card ---------------------------------------------
   Figma `personalprozesse-verbessern > problem-section`: three 405px cards,
   32px gap, cream ground, 40px padding, 24px internal gap.              */

.cf-problem {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px;
  border: 1px solid var(--cf-line-border-40);
  border-radius: var(--cf-r-card);
  background: var(--cf-cream);
}

.cf-problem__head {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 48px;
}

/* Figma: 48x48 on #004045 with the numeral in white. */
.cf-problem__num {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-teal);
  color: var(--cf-white);
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h4);
  line-height: 1;
}

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

/* Same card on `people-process-programme > cards-grid`, but that frame paints
   it differently: white ground and a 40x40 crystal num-badge with the numeral
   in teal (personalprozesse keeps the cream card and the 48x48 dark badge -
   the client asked for that one explicitly). */
.cf-pproblems--white .cf-problem {
  background: var(--cf-white);
}

.cf-pproblems--white .cf-problem__head {
  min-height: 40px;
}

.cf-pproblems--white .cf-problem__num {
  width: 40px;
  height: 40px;
  border-radius: var(--cf-r-btn);
  background: var(--cf-crystal);
  color: var(--cf-teal);
  font-size: var(--cf-fs-body);
}

/* --- Situation chip cloud ----------------------------------------------
   Figma `fuehrung-staerken-v2 > alltagssituationen-section`. Decorative:
   one chip is highlighted at a time. The Figma highlights a fixed chip; we
   rotate the highlight, because the client asked to keep the movement.   */

.cf-sitchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.cf-sitchip {
  padding: 14px 24px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-round);
  background: var(--cf-cream);
  color: var(--cf-ink);
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: var(--cf-fs-body-sm);
  line-height: 1.3;
  transition:
    background 0.45s var(--cf-ease),
    color 0.45s var(--cf-ease),
    border-color 0.45s var(--cf-ease);
}

.cf-sitchip.is-lit {
  background: var(--cf-teal);
  border-color: transparent;
  color: var(--cf-white);
}

/* --- Numbered question list (fuehrung ansatz-section) ------------------- */

.cf-qlist {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: cf-q;
}

.cf-qlist li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 24px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-inner);
  background: var(--cf-white);
  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);
  counter-increment: cf-q;
}

.cf-qlist li::before {
  content: '0' counter(cf-q);
  flex: 0 0 auto;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  color: var(--cf-teal-2);
}

@media (max-width: 767px) {
  .cf-problem {
    padding: 24px;
    gap: 18px;
  }
  .cf-problem__num {
    width: 40px;
    height: 40px;
    font-size: var(--cf-fs-h5);
  }
  /* Seven chips of different lengths wrapped at random. A two-column grid
     gives the cloud a shape; centring text keeps the labels readable. */
  .cf-sitchips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cf-sitchip {
    padding: 10px 12px;
    font-size: var(--cf-fs-eyebrow);
    text-align: center;
  }
  /* An odd last chip spans rather than sitting alone. */
  .cf-sitchips > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .cf-qlist li {
    padding: 16px 18px;
    gap: 14px;
    font-size: var(--cf-fs-body);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-sitchip {
    transition: none;
  }
}

/* ==========================================================================
   SHARED PAGE SHELLS
   Moved here from pillar.css: section grounds, container widths and the
   closing CTA are used by every page, not just the pillar ones, and two
   copies of them would drift apart.
   ========================================================================== */

/* ==========================================================================
   SHARED — section shells
   ========================================================================== */

.cf-psec {
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

.cf-psec--white {
  background: var(--cf-white);
}

/* 🔴 These lived in pillar.css while the base rule moved here, so the six
   pages that do not load pillar.css (index, kontakt, ressourcen, beitrag,
   karriere, rechtliches) kept the 80px desktop gutter on a phone — their CTA
   content was 200px wide inside a 360px screen. */
@media (max-width: 1439px) {
  .cf-psec {
    padding-left: var(--cf-gutter-md);
    padding-right: var(--cf-gutter-md);
  }
}

@media (max-width: 767px) {
  .cf-psec {
    padding: 64px var(--cf-gutter-sm);
  }
}
.cf-psec--crystal {
  background: var(--cf-crystal);
}
.cf-psec--cream {
  background: var(--cf-cream);
}
.cf-psec--dark {
  background: var(--cf-teal);
}

.cf-psec__shell {
  max-width: var(--cf-shell);
  margin: 0 auto;
}

/* The chip-cloud section is deliberately narrower than the grid (Figma insets
   it to 1000px) so the cloud reads as one object rather than a full-width band. */
.cf-psec__shell--narrow {
  max-width: 1000px;
}

/* 800px: sequences and single statements that should read as one column. */
.cf-psec__shell--text {
  max-width: var(--cf-shell-text);
}

/* Figma sets some section headers to 800px inside the 1280 grid, which is what
   makes those headlines break to two lines instead of running edge to edge. */
.cf-sechead--800 {
  max-width: var(--cf-shell-text);
}

/* ==========================================================================
   SHARED — closing CTA
   ========================================================================== */

.cf-pcta__shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: var(--cf-shell-text);
  margin: 0 auto;
  text-align: center;
}

/* A CTA headline is short and centred, so automatic hyphenation only ever
   makes it worse — "Ter-min", "Poten-zial". The compound safety on .cf-h2 is
   for long body headings, not this. */
.cf-pcta__title {
  color: var(--cf-white);
  hyphens: manual;
}

@media (max-width: 767px) {
  .cf-pcta__shell {
    gap: 18px;
  }
  /* At 320-390px the 30px floor filled the screen; the lead ran to eight
     short lines and the button label wrapped. */
  .cf-pcta__title {
    font-size: clamp(23px, 6.6vw, 28px);
  }
  .cf-pcta__lead {
    font-size: var(--cf-fs-body-sm);
  }
}

.cf-pcta__lead {
  max-width: 62ch;
  line-height: var(--cf-lh-body-dark);
  color: var(--cf-sky);
}

/* Client asked for 48px above the CTA button (2026-08-31). The shell's row
   gap already contributes 24, so this adds the remaining 24 instead of
   stacking a second 48 on top of it. Figma's own gap here is 36.
   One rule, all 13 closing CTAs - they are deliberately one block. */
.cf-pcta__shell > .cf-btn {
  margin-top: 24px;
}

/* --- Back link ----------------------------------------------------------
   Client comment #9 asked for a button back to the blog index, not just a
   breadcrumb. Used at the top and the bottom of an article.               */

.cf-backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--cf-line-sky-30);
  border-radius: var(--cf-r-btn);
  background: transparent;
  color: var(--cf-sky);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  text-decoration: none;
  transition:
    border-color 0.2s var(--cf-ease),
    color 0.2s var(--cf-ease);
}

.cf-backlink:hover {
  border-color: var(--cf-cyan);
  color: var(--cf-cyan);
}

.cf-backlink span {
  transition: transform 0.2s var(--cf-ease);
}
.cf-backlink:hover span {
  transform: translateX(-3px);
}

/* On a light ground it flips to the ink palette. */
.cf-backlink--light {
  border-color: var(--cf-border);
  color: var(--cf-ink);
}

.cf-backlink--light:hover {
  border-color: var(--cf-cyan);
  color: var(--cf-teal-2);
}

/* ==========================================================================
   ACCORDION TRANSITION
   The three accordions on the site (homepage Alltagsbeispiele, Kontakt FAQ,
   legal pages) all flipped the `hidden` attribute, which cannot animate.
   accordion.js now also toggles .is-open and marks the document, so this can
   drive the motion. `hidden` stays as the no-JS fallback.

   max-height is used rather than grid-template-rows: the three panels have
   different markup and none wraps its content in a single child, which the
   0fr->1fr technique requires.
   ========================================================================== */

html.js-accordion .cf-case__panel,
html.js-accordion .cf-accordion__a,
html.js-accordion .cf-legal-accordion__a {
  overflow: hidden;
  max-height: 60rem;
  opacity: 1;
  transition:
    max-height 0.4s var(--cf-ease),
    opacity 0.28s var(--cf-ease),
    padding-top 0.4s var(--cf-ease),
    padding-bottom 0.4s var(--cf-ease),
    visibility 0s;
}

html.js-accordion .cf-case__panel[hidden],
html.js-accordion .cf-accordion__a[hidden],
html.js-accordion .cf-legal-accordion__a[hidden] {
  display: block !important;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition:
    max-height 0.4s var(--cf-ease),
    opacity 0.2s var(--cf-ease),
    padding-top 0.4s var(--cf-ease),
    padding-bottom 0.4s var(--cf-ease),
    visibility 0s linear 0.4s;
}

@media (prefers-reduced-motion: reduce) {
  html.js-accordion .cf-case__panel,
  html.js-accordion .cf-accordion__a,
  html.js-accordion .cf-legal-accordion__a,
  html.js-accordion .cf-case__panel[hidden],
  html.js-accordion .cf-accordion__a[hidden],
  html.js-accordion .cf-legal-accordion__a[hidden] {
    transition: none;
  }
}

/* ==========================================================================
   POST TEASER GRID + PAGER
   Homepage blog section. The one image block on this page — client asked to
   keep some pictures, and article thumbnails are the case where a picture
   carries information rather than decorating.
   ========================================================================== */

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

.cf-teaser__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-radius: var(--cf-r-card);
  text-decoration: none;
  transition: transform 0.25s var(--cf-ease);
}

.cf-teaser__media {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--cf-r-card);
  overflow: hidden;
  background: var(--cf-cream);
}

.cf-teaser__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--cf-zoom-duration) var(--cf-ease);
}

.cf-teaser__card:hover {
  transform: translateY(-3px);
}
.cf-teaser__card:hover .cf-teaser__media img {
  transform: scale(var(--cf-zoom-scale));
}

.cf-teaser__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-eyebrow);
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-teal-2);
}

.cf-teaser__meta span:not(.cf-teaser__cat) {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--cf-teal-muted);
}

.cf-teaser__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);
  hyphens: auto;
  overflow-wrap: break-word;
}

/* --- Pager -------------------------------------------------------------
   Static in the prototype; in WordPress this becomes the real paged query. */

.cf-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}

.cf-pager__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-btn);
  background: var(--cf-white);
  color: var(--cf-ink);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color 0.2s var(--cf-ease),
    background 0.2s var(--cf-ease),
    color 0.2s var(--cf-ease);
}

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

.cf-pager__btn[aria-current='page'] {
  background: var(--cf-ink);
  border-color: transparent;
  color: var(--cf-white);
}

.cf-pager__btn[aria-disabled='true'] {
  opacity: 0.45;
  pointer-events: none;
}

@media (max-width: 991px) {
  .cf-teaser {
    grid-template-columns: 1fr 1fr;
  }
  .cf-teaser > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .cf-teaser {
    grid-template-columns: 1fr;
  }
  .cf-teaser > :last-child:nth-child(odd) {
    grid-column: auto;
  }
  .cf-pager {
    gap: 6px;
  }
  .cf-pager__btn {
    min-width: 38px;
    height: 38px;
    padding: 0 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cf-teaser__card,
  .cf-teaser__media img,
  .cf-pager__btn {
    transition: none;
  }
  .cf-teaser__card:hover {
    transform: none;
  }
  .cf-teaser__card:hover .cf-teaser__media img {
    transform: none;
  }
}

/* ==========================================================================
   COOKIE NOTICE
   Lives here and not in home.css: footer.php prints the banner on every
   page, so its styles have to load on every page too. It sat in home.css
   because the prototype only ever showed it on the homepage.

   Real consent gating arrives in Phase 7 (Complianz/CookieYes). Nothing is
   tracked yet, so this is presentation only.
   ========================================================================== */

.cf-cookie {
  position: fixed;
  left: 24px;
  bottom: 24px;
  z-index: 300;
  max-width: 420px;
  padding: 26px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  box-shadow: 0 30px 70px rgb(var(--cf-ink-rgb) / .24);
  animation: cf-fade .5s ease 1.45s both;
}

.cf-cookie__title {
  margin: 0 0 8px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: var(--cf-fs-h5);
  color: var(--cf-ink);
}

.cf-cookie__text {
  margin: 0 0 18px;
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  line-height: 1.6;
  color: var(--cf-teal);
}

.cf-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.cf-cookie__btn {
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: var(--cf-r-btn);
  background: var(--cf-ink);
  color: var(--cf-white);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  cursor: pointer;
}

.cf-cookie__btn--secondary {
  border-color: var(--cf-border);
  background: var(--cf-white);
  color: var(--cf-ink);
}

@media (max-width: 767px) {
  .cf-cookie { left: 16px; right: 16px; bottom: 16px; max-width: none; }
  .cf-cookie__btn { flex: 1 1 auto; }
}