/* ==========================================================================
   CityFoundry AG — Homepage

   Section order, backgrounds, copy blocks and measurements come from the
   client's Figma frame `startseite-v2` (1440x6022). Every number was read out
   of the node tree, not eyeballed — see reference-desing/data/.

   Surface rhythm, in order:
     navbar/hero  #004045   ->  finder  #F5F0EB  ->  ways  #E5F6FF
     ansatz       #FFFFFF   ->  cases   #F5F0EB  ->  offers #FFFFFF
     evidence     #E5F6FF   ->  cta/footer #004045

   Sections butt against each other; the rhythm is each section's own 120px
   padding, never a margin.

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

.cf-page { position: relative; }

/* --- Keyframes ---------------------------------------------------------- */

@keyframes cf-up {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

@keyframes cf-fade {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cf-bar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes cf-outT {
  0%, 58% { transform: translateY(0); }
  100%    { transform: translateY(-101%); }
}

@keyframes cf-outB {
  0%, 58% { transform: translateY(0); }
  100%    { transform: translateY(101%); }
}

@keyframes cf-hide {
  0%, 99% { visibility: visible; }
  100%    { visibility: hidden; }
}

@keyframes cf-pulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

@keyframes cf-spin {
  to { transform: rotate(360deg); }
}

@keyframes cf-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

@keyframes cf-draw {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}

/* ==========================================================================
   1. INTRO CURTAIN
   Two panels part over the wordmark, then the layer is hidden.
   The client liked this ("Love the loading window including cityfoundry") and
   asked for the logo in it — hence .cf-intro__mark. They also said not having
   to wait is best, so the whole sequence is 1.4s, down from 2.5s.
   ========================================================================== */

.cf-intro {
  position: fixed;
  inset: 0;
  z-index: 999;
  pointer-events: none;
  animation: cf-hide 1.4s linear forwards;
}

.cf-intro__panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.2%;
  background: var(--cf-teal);
}

.cf-intro__panel--top    { top: 0;    animation: cf-outT 1.4s var(--cf-ease-in-out) forwards; }
.cf-intro__panel--bottom { bottom: 0; animation: cf-outB 1.4s var(--cf-ease-in-out) forwards; }

.cf-intro__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  animation: cf-hide .85s linear forwards;
}

.cf-intro__mark {
  width: 52px;
  height: 52px;
  display: block;
  animation: cf-fade .5s ease both;
}

.cf-intro__mask { overflow: hidden; }

.cf-intro__word {
  margin: 0;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(28px, 5vw, 54px);
  letter-spacing: -.03em;
  color: var(--cf-white);
  animation: cf-up .55s var(--cf-ease) both;
}

.cf-intro__dot { color: var(--cf-cyan); }

.cf-intro__track {
  width: min(280px, 46vw);
  height: 2px;
  background: var(--cf-line-light-16);
  overflow: hidden;
}

.cf-intro__bar {
  height: 100%;
  background: var(--cf-cyan);
  transform-origin: left;
  animation: cf-bar .8s cubic-bezier(.6, 0, .2, 1) both;
}

/* ==========================================================================
   2. HERO
   Figma: 1440x732, ground #004045, text left, abstract diagram right.
   No photograph — the client asked for fewer pictures and their own hero has
   none.
   ========================================================================== */

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

.cf-hero__grid {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 72px;
  align-items: center;
  max-width: var(--cf-shell);
  margin: 0 auto;
}

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

.cf-hero__eyebrow {
  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);
  animation: cf-fade .8s ease .85s both;
}

.cf-hero__title {
  margin: 0;
  max-width: 12ch;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(34px, 4.4vw, var(--cf-fs-h1));
  line-height: var(--cf-lh-h1);
  letter-spacing: -.01em;
  color: var(--cf-white);
  hyphens: auto;
  overflow-wrap: break-word;
  animation: cf-fade .9s ease .95s both;
}

/* German runs long; the headline needs room to breathe before it wraps. */
@supports (width: 1cap) { .cf-hero__title { max-width: 15ch; } }

.cf-hero__quote {
  margin: 0;
  padding-left: 20px;
  border-left: 3px solid var(--cf-cyan);
  animation: cf-fade .9s ease 1.05s both;
}

.cf-hero__quote-text {
  margin: 0 0 6px;
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.3;
  color: var(--cf-white);
}

.cf-hero__quote-cite {
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-nav);
  font-style: normal;
  color: var(--cf-sky);
}

.cf-hero__lead {
  margin: 0;
  max-width: 60ch;
  font-family: var(--cf-font-body);
  font-weight: 400;
  font-size: var(--cf-fs-body);
  line-height: var(--cf-lh-body-dark);
  color: var(--cf-sky);
  animation: cf-fade 1s ease 1.15s both;
}

.cf-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: cf-fade 1s ease 1.25s both;
}

/* --- Hero diagram (Kultur / Prozesse / Software) ------------------------ */

.cf-hero__diagram {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  border: 1px solid var(--cf-line-light-16);
  border-radius: var(--cf-r-card);
  animation: cf-fade 1s ease 1.35s both;
}

.cf-orbit {
  position: relative;
  width: 100%;
  max-width: 300px;
  aspect-ratio: 1;
}

.cf-orbit__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* The SVG strokes are currentColor so the value stays in the token layer. */
  color: rgb(var(--cf-sky-rgb) / .45);
  animation: cf-spin 48s linear infinite;
}

.cf-orbit__core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: var(--cf-r-round);
  background: var(--cf-sky);
}

.cf-orbit__node {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--cf-line-light-28);
  border-radius: var(--cf-r-btn);
  background: var(--cf-teal);
  /* Icon colour: the SVGs inside are currentColor. White so the node reads as
     one unit with its label, which was already white. */
  color: var(--cf-white);
  animation: cf-float 6s ease-in-out infinite;
}

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

.cf-orbit__node--1 { top: -6%;  left: 50%; transform: translateX(-50%); animation-delay: 0s; }
.cf-orbit__node--2 { bottom: 4%; left: -8%; animation-delay: 2s; }
.cf-orbit__node--3 { bottom: 4%; right: -8%; animation-delay: 4s; }

/* The float animation would otherwise fight the centring transform. */
.cf-orbit__node--1 { animation-name: cf-float-centre; }

@keyframes cf-float-centre {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -5px); }
}

/* ==========================================================================
   3. SITUATIONSFINDER
   Figma: wrapper #F5F0EB with 100px padding, card 1120px wide, r=16, white,
   1px hairline, 64px padding, 36px internal gap.
   ========================================================================== */

.cf-finder {
  background: var(--cf-cream);
  padding: var(--cf-sec-pad-alt) var(--cf-gutter);
}

.cf-finder__card {
  display: flex;
  flex-direction: column;
  gap: 36px;
  max-width: var(--cf-shell-narrow);
  margin: 0 auto;
  padding: var(--cf-pad-finder);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
}

.cf-finder__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cf-gap-head);
}

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

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

.cf-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: flex;
  flex-direction: column;
  /* The legend needs more air than a normal stack gap — it labels the whole
     chip group, not the next line. */
  gap: 20px;
}

.cf-finder__label {
  display: block;
  padding: 0;
  /* A <legend> ignores the fieldset's flex gap in some engines, so the space
     under it has to be its own margin. */
  margin: 0 0 8px;
}

/* `Beschreibe deine Situation` sat too close to the perspective chips. Scoped
   to the legend so step 2's label keeps its Figma spacing. */
.cf-fieldset > .cf-finder__label {
  margin-bottom: 16px;
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: var(--cf-fs-label);
  line-height: var(--cf-lh-label);
  color: var(--cf-ink);
}

.cf-perspectives {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Step 2: inert until a perspective is chosen ------------------------
   This replaces the old 1-2-3 dot row. finder.js drives the two custom
   properties; the gating is what stops people missing that perspective
   comes first.                                                            */

.cf-finder__step2 {
  display: flex;
  flex-direction: column;
  gap: var(--cf-gap-head);
  min-width: 0;
  opacity: var(--step2-opacity, .4);
  pointer-events: var(--step2-events, none);
  transition: opacity .35s var(--cf-ease);
}

/* --- Combobox ----------------------------------------------------------- */

.cf-combobox { position: relative; }

.cf-combobox__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 8px 20px;
  border: 1px solid var(--field-border, var(--cf-border-2));
  border-radius: var(--cf-r-btn);
  background: var(--cf-field);
  box-shadow: var(--field-shadow, none);
  transition: border-color .2s var(--cf-ease), box-shadow .2s var(--cf-ease);
}

.cf-combobox__input {
  flex: 1 1 180px;
  min-width: 0;
  border: 0;
  background: transparent;
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-ink);
}

.cf-combobox__input:focus { outline: none; }
.cf-combobox__input::placeholder { color: var(--cf-placeholder); }

/* --- Selected topic chips (built by finder.js) -------------------------- */

.cf-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 14px;
  border-radius: var(--cf-r-round);
  background: var(--cf-crystal);
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-nav);
  color: var(--cf-teal);
}

.cf-chip__kind {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--cf-ls-caps);
  font-size: 10.5px;
  color: var(--cf-teal-2);
}

.cf-chip__label { font-weight: 500; }

.cf-chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--cf-r-round);
  background: var(--cf-white);
  color: var(--cf-teal);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.cf-chip__remove:hover { background: var(--cf-cyan); }

.cf-chip--perspective { background: var(--cf-cream); }

/* --- Autocomplete listbox ---------------------------------------------- */

.cf-listbox {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 8px);
  z-index: 20;
  max-height: 320px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-inner);
  background: var(--cf-white);
  box-shadow: 0 20px 44px rgb(var(--cf-ink-rgb) / .14);
}

.cf-listbox__group {
  padding: 12px 12px 6px;
  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-listbox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--cf-r-btn);
  background: var(--opt-bg, transparent);
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-ink);
  cursor: pointer;
}

.cf-listbox__enter { color: var(--opt-arrow, transparent); font-weight: 700; }

.cf-listbox__empty {
  padding: 16px 12px;
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-teal);
}

/* --- Suggestion chips --------------------------------------------------- */

.cf-suggest {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

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

.cf-suggest__track {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 2px;
  /* A flex item defaults to min-width:auto, which lets the chip row grow to
     its content width and push the whole page sideways instead of scrolling
     inside itself. These two lines are what keep it contained. */
  flex: 1 1 0;
  min-width: 0;
}

.cf-suggest__chip {
  flex: 0 0 auto;
  scroll-snap-align: start;
  padding: 8px 14px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-round);
  background: var(--cf-white);
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: var(--cf-fs-nav);
  color: var(--cf-ink);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .2s var(--cf-ease), background .2s var(--cf-ease);
}

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

/* --- Action row --------------------------------------------------------- */

.cf-finder__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.cf-finder__error {
  margin: 0;
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-error-strong);
}

/* --- Results — INSIDE the card ------------------------------------------
   Client: "I'd suggest to have the recommendations inside the same box
   though, didn't see them first." This block used to be a sibling of the
   card. The divider marks it off without breaking out of the box.        */

.cf-finder__results:not(:empty) {
  padding-top: 36px;
  border-top: 1px solid var(--cf-border);
}

.cf-results__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}

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

.cf-results__title:focus-visible { outline: 2px solid var(--cf-cyan); outline-offset: 4px; }

.cf-results__count {
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-teal);
}

.cf-results {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cf-gap-4col);
}

.cf-result {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: var(--cf-pad-card-sm);
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  transition: border-color .25s var(--cf-ease), transform .25s var(--cf-ease);
}

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

.cf-result__badge {
  padding: 6px 14px;
  border-radius: var(--cf-r-pill);
  background: var(--badge-bg, var(--cf-crystal));
  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);
}

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

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

/* "Passt zu: …" — the reason line. This is what turns the recommendation
   from a black box into something a visitor can sanity-check. */
.cf-result__reason {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: var(--cf-r-inner);
  background: var(--cf-cream);
}

.cf-result__check { color: var(--cf-teal-2); font-weight: 700; }

.cf-result__reason-text {
  font-family: var(--cf-font-body);
  font-weight: 500;
  font-size: var(--cf-fs-nav);
  line-height: 1.45;
  color: var(--cf-teal-2);
}

.cf-result__link {
  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-nav);
  color: var(--cf-ink);
  text-decoration: none;
}

.cf-result__link:hover { color: var(--cf-teal-2); }

.cf-results__more { margin-top: 20px; }

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

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

/* --- Loading state ------------------------------------------------------
   Branded with the mark, and only ever on screen for one frame now — the
   matching is local, there is nothing to wait for.                       */

.cf-finder__loading {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cf-finder__loading-mark {
  width: 32px;
  height: 32px;
  animation: cf-pulse 1.4s ease-in-out infinite;
}

.cf-finder__loading-text {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-sm);
  color: var(--cf-teal);
}

.cf-skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--cf-gap-4col);
}

.cf-skeleton__block {
  height: 168px;
  border-radius: var(--cf-r-card);
  background: var(--cf-field);
  animation: cf-pulse 1.4s ease-in-out infinite;
}

/* --- Never a dead end --------------------------------------------------- */

.cf-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: var(--cf-pad-card-sm);
  border-radius: var(--cf-r-card);
  background: var(--cf-crystal);
}

.cf-fallback__body { display: flex; flex-direction: column; gap: 6px; }

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

.cf-fallback__text {
  margin: 0;
  font-family: var(--cf-font-body);
  font-size: var(--cf-fs-body-xs);
  color: var(--cf-teal);
}

.cf-fallback__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  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);
  text-decoration: none;
}

/* ==========================================================================
   4. ZWEI WEGE — the two-pillar structure the client restructured to
   ========================================================================== */

.cf-ways {
  background: var(--cf-crystal);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

/* ==========================================================================
   5. ANSATZ
   ========================================================================== */

.cf-approach {
  background: var(--cf-white);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

.cf-approach__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 72px;
  align-items: center;
}

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

/* --- Decision diagram --------------------------------------------------- */

.cf-decision {
  position: relative;
  aspect-ratio: 1.13;
  padding: 40px;
  border-radius: var(--cf-r-card);
  background: var(--cf-cream);
}

.cf-decision__lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: rgb(var(--cf-ink-rgb) / .32);
}

html.js-reveal [data-reveal].is-in .cf-decision__lines path {
  stroke-dasharray: 6 8;
  animation: cf-draw .9s var(--cf-ease) both;
}

.cf-decision__pill {
  position: absolute;
  padding: 8px 14px;
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-round);
  background: var(--cf-white);
  font-family: var(--cf-font-body);
  font-weight: 600;
  font-size: var(--cf-fs-eyebrow);
  color: var(--cf-ink);
  white-space: nowrap;
}

.cf-decision__pill--tl { top: 26px;    left: 26px; }
.cf-decision__pill--tr { top: 26px;    right: 26px; }
.cf-decision__pill--bl { bottom: 26px; left: 26px; }
.cf-decision__pill--br { bottom: 26px; right: 26px; }

.cf-decision__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: var(--cf-r-round);
  background: var(--cf-teal);
  font-family: var(--cf-font-body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: var(--cf-ls-caps);
  text-transform: uppercase;
  color: var(--cf-cyan);
}

/* ==========================================================================
   6. ALLTAGSBEISPIELE — real accordion, not the Figma's static "+"
   ========================================================================== */

.cf-cases {
  background: var(--cf-cream);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

.cf-cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cf-gap-2col);
  align-items: start;
}

.cf-case {
  border: 1px solid var(--cf-border);
  border-radius: var(--cf-r-card);
  background: var(--cf-white);
  overflow: hidden;
}

.cf-case__head { margin: 0; }

.cf-case__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: var(--cf-pad-card);
  border: 0;
  background: transparent;
  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);
  text-align: left;
  cursor: pointer;
}

.cf-case__sign {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cf-r-round);
  background: var(--icon-bg, transparent);
  color: var(--icon-fg, var(--cf-ink));
  font-size: 20px;
  line-height: 1;
  transition: background .2s var(--cf-ease), color .2s var(--cf-ease);
}

.cf-case__panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0 var(--cf-pad-card) var(--cf-pad-card);
}

/* ==========================================================================
   7. ANGEBOTE
   ========================================================================== */

.cf-offers {
  background: var(--cf-white);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

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

/* ==========================================================================
   8. EVIDENCE + STATS
   The stats row is not in the Figma. It is here because the earlier round's
   loudest complaint was that these trust signals were set as small grey text.
   ========================================================================== */

.cf-evidence {
  background: var(--cf-crystal);
  padding: var(--cf-sec-pad) var(--cf-gutter);
}

.cf-evidence__lead { max-width: 70ch; }

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

.cf-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--cf-gap-4col);
  margin: 48px 0 0;
  padding-top: 48px;
  border-top: 1px solid var(--cf-sky);
}

.cf-stats__item { display: flex; flex-direction: column; gap: 6px; }

.cf-stats__value {
  font-family: var(--cf-font-head);
  font-weight: 700;
  font-size: clamp(30px, 3vw, var(--cf-fs-h2));
  line-height: 1.05;
  color: var(--cf-teal);
  font-variant-numeric: tabular-nums;
}

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

/* ==========================================================================
   9. CLOSING CTA
   Removed. The homepage used its own .cf-cta* rules while every other page
   used .cf-psec--dark + .cf-pcta__shell from components.css. One block, one
   implementation — so Phase 2 converts to a single WordPress block whose only
   variable is the copy.
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE
   The Figma is desktop-only (1440px), so everything below is ours.
   ========================================================================== */

@media (max-width: 1439px) {
  .cf-hero,
  .cf-finder,
  .cf-ways,
  .cf-approach,
  .cf-cases,
  .cf-offers,
  .cf-evidence { padding-left: var(--cf-gutter-md); padding-right: var(--cf-gutter-md); }
}

@media (max-width: 1199px) {
  .cf-hero__grid,
  .cf-approach__grid { gap: 48px; }
  .cf-offers__grid,
  .cf-evidence__grid { grid-template-columns: 1fr 1fr; }
  .cf-finder__card { padding: 40px; }
}

@media (max-width: 991px) {
  .cf-hero__grid,
  .cf-approach__grid { grid-template-columns: 1fr; }
  /* Hero: the headline has to come first, so its diagram follows. */
  .cf-hero__diagram { order: 2; max-width: 460px; }
  /* Ansatz: here the diagram IS the argument, so on mobile it leads and the
     explanation follows it. */
  .cf-decision { order: -1; max-width: 460px; }
  .cf-cases__grid { grid-template-columns: 1fr; }
  .cf-stats { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}

@media (max-width: 767px) {
  .cf-hero,
  .cf-ways,
  .cf-approach,
  .cf-cases,
  .cf-offers,
  .cf-evidence,
  .cf-cta {
    padding: 64px var(--cf-gutter-sm);
  }

  .cf-finder { padding: 48px var(--cf-gutter-sm); }
  .cf-finder__card { padding: 24px; gap: 28px; }
  .cf-finder__results:not(:empty) { padding-top: 28px; }

  .cf-hero__title { max-width: none; }
  .cf-hero__actions { width: 100%; }
  .cf-hero__diagram { padding: 24px; }

  .cf-offers__grid,
  .cf-evidence__grid { grid-template-columns: 1fr; }

  /* Long labels ("Häufig gesucht:") stack above the scroller instead of
     stealing half the row. */
  .cf-suggest { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cf-suggest__track { width: 100%; }

  .cf-case__trigger { padding: 24px; font-size: var(--cf-fs-h5); }
  .cf-case__panel { padding: 0 24px 24px; }

  .cf-stats { margin-top: 32px; padding-top: 32px; }

}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  * {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  /* The intro is purely decorative. Anyone who asked for less motion should
     not meet a splash screen at all. */
  .cf-intro { display: none; }

  .cf-result,
  .cf-case__sign,
  .cf-case__panel,
  .cf-suggest__chip,
  .cf-btn--more,
  .cf-combobox__row,
  .cf-finder__step2 { transition: none; }

  .cf-result:hover { transform: none; }
}