/* 1klima.com stylesheet. Tokens come from DESIGN.md; layout values were measured on
   the published Webflow site at 1920/1440/991/767/479px (issue #2198). Breakpoints:
   desktop from 992px, tablet 768-991px, mobile landscape 480-767px, portrait below 480px. */

/* Open Sans variable font (300-800), self-hosted: no Google Fonts CDN (GDPR).
   Latin subset covers German umlauts and the euro sign. */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/open-sans-var.woff2") format("woff2");
}

@font-face {
  font-family: "Open Sans";
  font-style: italic;
  font-weight: 300 800;
  font-display: swap;
  src: url("/static/fonts/open-sans-italic-var.woff2") format("woff2");
}

:root {
  --color-ink: #000000;
  --color-ink-soft: #333333;
  --color-accent: #FAFF00;
  --color-accent-soft: rgba(250, 255, 0, 0.56);
  --color-accent-tint: rgba(250, 255, 0, 0.22); /* light wash for quiet accent surfaces (#2237) */
  --color-accent-wash: rgba(250, 255, 0, 0.7);
  --color-surface: #FFFFFF;
  --color-surface-soft: #ECECEC;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-overlay-strong: rgba(0, 0, 0, 0.7); /* DESIGN.md "heavier" variant, #000000b3 */
  --color-overlay-light: rgba(0, 0, 0, 0.6); /* DESIGN.md "lighter" variant, #0009 */
  --color-positive: #17AD3A;
  --color-positive-tint: rgba(185, 255, 199, 0.5);
  --color-negative: #D30606;
  --color-negative-tint: #FFD6D6;

  --radius-xs: 8px;
  --radius-s: 12px;
  --radius-m: 15px;
  --radius-l: 25px;
  --radius-pill: 50px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 28px;
  --space-lg: 56px;
  --space-xl: 84px;
  --space-xxl: 112px;

  --gutter: 128px;
  --container: 1440px;

  --text-body: 1.125rem;
  --text-h2: 54px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--color-surface);
  color: var(--color-ink);
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.2;
}

img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
/* Keyboard focus indicator for every interactive element (DESIGN.md hard rule 2,
   #2199): never suppressed, never replaced by the accent, which vanishes on the soft
   surface. */
:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 2px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Layout primitives */
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.page-padding { padding: 0 var(--gutter); }

.section-title {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  margin: 20px 0 10px;
}
.section-title--center { text-align: center; }
.section-title__accent { padding-right: 0.5em; }

.section-cta { display: flex; justify-content: center; padding: 48px; }
.section-cta--tight { padding: 32px 0 28px; }

/* Buttons: rounded, flat, never bordered. Hover swaps black and yellow. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border-radius: var(--radius-m);
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}
.btn--accent {
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 8.64px 18px;
  font-size: 14.4px;
}
.btn--soft {
  background: var(--color-accent-soft);
  color: var(--color-ink);
  padding: 11.76px 18px;
  font-size: 16.8px;
  line-height: 1.4;
}
.btn--ink {
  background: var(--color-ink);
  color: var(--color-surface);
  padding: 18px;
  font-size: 21px;
}
.btn--accent:hover, .btn--soft:hover { background: var(--color-ink); color: var(--color-surface); }
.btn--ink:hover { background: var(--color-accent); color: var(--color-ink); }
/* Conversion CTAs that must keep the accent on hover (review round 3): the fill
   stays yellow and darkens slightly instead of swapping to black. */
.btn--stay:hover { background: var(--color-accent); color: var(--color-ink); filter: brightness(0.92); }
.btn__arrow { width: 24px; height: 24px; transition: filter 0.2s; }
.btn--soft:hover .btn__arrow { filter: invert(1); }

/* Banner */
.banner {
  display: block;
  background: var(--color-accent);
  color: var(--color-ink);
  text-align: center;
  padding: 20px 0;
  font-size: 14px;
  text-decoration: underline;
}

/* Header and navigation */
.site-header {
  position: relative;
  z-index: 1000;
  background: var(--color-surface);
  padding: 20px var(--gutter);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: var(--container);
  margin: 0 auto;
}
.site-header__logo { display: flex; align-items: center; margin-right: 1rem; }
.site-header__logo img { height: 13px; width: auto; }
.site-nav { flex: 1; display: flex; align-items: center; justify-content: space-between; }
.site-nav__links { display: flex; gap: 13px; }
.site-nav__link, .site-nav__cta {
  display: inline-block;
  padding: 12px 16px;
  border-radius: var(--radius-s);
  font-size: 16.8px;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.site-nav__link:first-child { font-size: 15.4px; }
.site-nav__cta { background: var(--color-accent); }
.site-nav__link:hover, .site-nav__cta:hover { background: var(--color-ink); color: var(--color-surface); }
/* Quiet secondary CTA (maintainer request): white fill with a yellow border, the
   one sanctioned border in the system (see DESIGN.md components). Declared after
   the generic hover rule so the accent hover wins at equal specificity. */
.site-nav__cta--portal { background: var(--color-surface); border: 2px solid var(--color-accent); }
.site-nav__cta--portal:hover { background: var(--color-accent); color: var(--color-ink); }
.menu-button { display: none; }

/* Hero */
/* The published hero is a fixed 90vh with overflow hidden, which clips the CTA
   between about 992px and 1200px. min-height keeps the same size at the audited
   widths and lets the section grow instead of clipping (readability first). */
.hero {
  position: relative;
  min-height: 90vh;
  overflow: hidden;
  background: linear-gradient(var(--color-overlay-strong), var(--color-overlay-strong)),
    url("/static/img/bg-hero-waermepumpe-haus.avif") center / cover no-repeat;
  color: var(--color-surface);
}
.hero__inner { margin-top: var(--space-lg); padding: var(--space-xl) 32px; }
.hero__grid {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 2rem 4rem;
  align-items: center;
  margin: 60px 28px 0;
}
.hero__copy { display: flex; flex-direction: column; justify-content: center; height: 100%; }
.hero__headline {
  font-size: 4vw;
  font-weight: 700;
  line-height: 1.2;
}
.hero__accent { color: var(--color-accent); }

.kit-slider { position: relative; }
.kit-slider__slides { display: grid; }
.kit-slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease-in;
}
.kit-slide.is-active { opacity: 1; pointer-events: auto; }
.kit-card {
  position: relative;
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 16px;
  background: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-m);
  padding: 28px 31.5px 28px 28px;
}
.kit-card__flag {
  grid-column: 1 / -1;
  justify-self: start;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 6px 16px;
  margin-top: 20px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.kit-card__title { grid-column: 1 / -1; text-decoration: underline; padding-right: 32px; }
.kit-card__title h2 { font-size: 2rem; font-weight: 700; line-height: 1.2; margin: 10px 0; }
.kit-card__figure { min-height: 15vh; }
.kit-card__image { display: block; width: 195px; padding-bottom: 28px; object-fit: contain; }
.kit-card__name { font-size: 16.8px; padding-bottom: 8.4px; }
.kit-card__facts {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 16px;
  align-items: baseline;
  margin-top: 21px;
}
.kit-card__fact { display: contents; }
.kit-card__facts dt, .kit-card__facts dd { font-size: 16.8px; padding-bottom: 12px; }
.kit-card__facts dd { font-weight: 600; text-align: right; white-space: nowrap; }
/* Price pill pair, same language as the product page: yellow full price, light
   green after-subsidy price. */
.kit-card__pill { display: inline-block; border-radius: var(--radius-xs); padding: 2px 10px; color: inherit; }
.kit-card__pill--accent { background: var(--color-accent); }
.kit-card__pill--positive { background: var(--color-positive-tint); }
.kit-card__cta { grid-column: 1 / -1; justify-self: center; margin-top: 8px; padding: 12px 28px; font-size: 16.8px; }
.kit-card__badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.kit-card__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-positive-tint);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}
.kit-card__badge img { width: 22px; height: 15px; flex: none; }
.kit-card__note { grid-column: 1 / -1; font-size: 9.8px; line-height: 1.2; }
.hero__badge {
  position: absolute;
  top: -60%;
  right: -10%;
  width: 23%;
  height: auto;
  pointer-events: none;
}
.kit-slider__dots { text-align: center; padding-top: 10px; height: 40px; }
.kit-slider__dot {
  width: 14px;
  height: 14px;
  margin: 0 3px 7px;
  border-radius: 50%;
  background: var(--color-surface);
  opacity: 0.4;
}
.kit-slider__dot.is-active { opacity: 1; }
.hero__cta { display: flex; justify-content: center; margin-top: 96px; padding: 0 0 24px; }
/* The hero CTA is the primary conversion point: dark-CTA scale, with the CTA glow from DESIGN.md. */
.hero__cta .btn--accent { padding: 20px 48px; font-size: 22px; font-weight: 700; box-shadow: 0 2px 20px var(--color-accent-soft); }

/* Brands */
.brands { display: flex; justify-content: center; }
.brands__inner { margin-top: 2vw; padding: 64px var(--gutter); }
.brands__title { font-size: 2vw; font-weight: 700; text-align: center; margin-bottom: 20px; }
.brands__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(4rem, auto);
  gap: 40px;
  place-items: center;
  padding-top: 1vh;
}
.brands__item { font-size: 2vw; font-weight: 300; padding-top: 28px; }

/* Advantages */
.advantages { padding: var(--space-md) 0; }
.advantages__grid {
  display: grid;
  grid-template-columns: 1fr 0.75fr;
  gap: 2rem 4rem;
  align-items: center;
  padding: 96px 0 16px;
}
.advantages__content { display: flex; flex-direction: column; gap: 16px; }
.advantages__content .section-title { margin: 0 0 1rem; }
.advantages__list { display: flex; flex-direction: column; gap: 16px; }
.advantage { display: flex; }
.advantage__icon { width: 39px; height: auto; align-self: stretch; object-fit: contain; object-position: top; }
.advantage__text { flex: 1; min-width: 206px; padding-left: 40px; font-size: 20px; line-height: 1.5; }
/* Item subheadlines sit on the light-green tint (review round 3). */
.advantage__title {
  display: inline-block;
  background: var(--color-positive-tint);
  border-radius: var(--radius-xs);
  padding: 2px 12px;
  margin-bottom: 6px;
}
.advantages__footnote { font-size: 12px; line-height: 1.4; color: var(--color-ink-soft); padding-left: 79px; }
.advantages__image {
  width: 100%;
  max-width: 35.9375rem;
  height: 100%;
  max-height: 48rem;
  object-fit: cover;
  border-radius: var(--radius-xs);
}

/* Proof points */
.proof { padding: 32px 0 64px; }
/* Rows are at least 4rem (the published grid) but grow with two-line captions. */
.proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(4rem, auto);
  align-items: start;
  width: 100%;
}
.proof__item { padding-top: 24px; text-decoration: none; }
.proof__row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding-bottom: 21px;
}
.proof__row--logo { padding-bottom: 14px; }
.proof__number { font-size: 2vw; font-weight: 300; }
.proof__stars { width: 166px; height: auto; }
.proof__dena { width: 166px; height: auto; }
.proof__caption { font-size: 15.6px; line-height: 1.6; text-align: center; }
.proof__logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 4.5rem;
  margin-top: 1.5rem;
}
.proof__cofunding { display: block; max-width: 24rem; max-height: 6rem; width: auto; height: auto; object-fit: contain; }

/* Logo line (homepage): VDI, dena, EU co-funding on one row */
.proof-logos { padding: 0 0 var(--space-xxl); }
.proof-logos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: center; justify-items: center; }
.proof-logos__item { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }

/* Case studies */
.cases { background: var(--color-accent-wash); padding: var(--space-xxl) 0; }
.cases__inner { display: flex; flex-direction: column; align-items: center; margin-left: 0; padding-bottom: 84px; }
.cases .section-title { margin: 32px 0 44px; }
/* Arrow rails sit beside the cards, never over them; the mask shows whole cards
   only (two from 992px, one below). The track moves by one card plus its gap. */
.case-slider { position: relative; width: 100%; padding: 0 50px; }
.case-slider__mask { overflow: hidden; }
.case-slider__track {
  --per: 2;
  --gap: 1rem;
  display: flex;
  gap: var(--gap);
  transform: translateX(calc(-1 * var(--i, 0) * (100% / var(--per) + var(--gap) / var(--per))));
  transition: transform 0.5s ease;
}
.case-slide { flex: 0 0 calc((100% - var(--gap) * (var(--per) - 1)) / var(--per)); text-decoration: none; color: var(--color-ink); }
.case-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border-radius: var(--radius-l);
  overflow: hidden;
}
.case-card__image { width: 100%; aspect-ratio: 1; object-fit: cover; }
.case-card__info { display: flex; flex-direction: column; gap: 0.4rem; padding: 1.6rem; }
.case-card__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.case-card__label { font-size: 20px; font-weight: 700; line-height: 1.4; margin-bottom: 10px; }
.case-card__value { font-size: 20px; line-height: 1.4; margin-bottom: 10px; }
.case-card__price { font-size: 2.4vw; line-height: 1.4; }
.case-slider__arrow {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50px;
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ink);
  background: var(--color-accent-soft);
}
.case-slider__arrow--left { left: 0; }
.case-slider__arrow--right { right: 0; }
.case-slider__arrow:disabled { opacity: 0.35; cursor: default; }
/* On the yellow-wash section the CTA is black; hovering to yellow would vanish
   against the background, so it brightens to white instead. */
.cases .btn--ink:hover { background: var(--color-surface); color: var(--color-ink); }

/* Steps */
.steps { padding: var(--space-xxl) 0; }
.steps__inner { margin-left: 0; }
.steps__title { max-width: 64rem; margin: 20px auto 10px; font-size: 48px; text-align: center; }
.steps__list { display: flex; flex-direction: column; gap: 100px; margin: 30px 0 50px; }
.step { display: flex; align-items: flex-start; gap: 38px; }
.step:nth-child(1) { margin-left: 40px; }
.step:nth-child(2) { margin-left: 80px; }
.step:nth-child(3) { margin-left: 120px; }
.step__number { font-size: 128px; font-weight: 700; line-height: 1; }
.step__body { display: flex; flex-direction: column; gap: 20px; }
.step__title { font-size: 48px; font-weight: 400; line-height: 1.2; }
.step__text { font-size: 20px; line-height: 1.4; }

/* Price comparison */
.compare {
  background: var(--color-ink);
  background-image: linear-gradient(var(--color-overlay-light), var(--color-overlay-light)),
    url("/static/img/bg-house-construction.jpg");
  background-position: 0 0, 50%;
  background-size: auto, cover;
  padding: var(--space-xxl) 0;
}
.compare__card {
  background: var(--color-surface);
  border-radius: var(--radius-l);
  padding: 39px 39px 39px 48px;
}
.compare__title { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; text-align: center; margin: 20px 0 10px; }
.compare__amount { color: var(--color-positive); font-weight: 700; }
.compare__lede { font-size: 18px; line-height: 1.5; text-align: center; max-width: 44rem; margin: 0 auto 40px; }
/* Two cost cards; the bar length is each provider's share of the larger total and the
   segments split it by category, so the saving is visible before the numbers are read.
   The semantic red/green pair is allowed here only (DESIGN.md, price comparison). */
.compare__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.compare__side { background: var(--color-surface-soft); border-radius: var(--radius-l); padding: 28px 32px 24px; }
.compare__side--us { background: var(--color-positive-tint); }
.compare__side-title { font-size: 24px; font-weight: 700; line-height: 1.2; margin-bottom: 20px; }
.compare__bar { display: flex; width: calc(var(--share) * 100%); min-width: 6%; height: 28px; border-radius: var(--radius-xs); overflow: hidden; margin-bottom: 24px; }
.compare__segment { flex: var(--part) 1 0; background: var(--color-negative); }
.compare__segment--2 { opacity: 0.7; }
.compare__segment--3 { opacity: 0.4; }
.compare__side--us .compare__segment { background: var(--color-positive); }
.compare__rows { display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.4; }
.compare__line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.compare__line dt { display: flex; align-items: center; gap: 10px; }
.compare__line dd { white-space: nowrap; font-weight: 600; }
.compare__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-negative); flex: none; }
.compare__dot--2 { opacity: 0.7; }
.compare__dot--3 { opacity: 0.4; }
.compare__side--us .compare__dot { background: var(--color-positive); }
.compare__line--total { margin-top: 10px; padding-top: 14px; font-weight: 600; }
.compare__line--after { align-items: center; font-weight: 600; }
.compare__line--after .compare__after { font-size: 34px; font-weight: 700; line-height: 1.1; }
.compare__side--competitor .compare__after { color: var(--color-negative); }
.compare__side--us .compare__after { color: var(--color-positive); }
.compare__savings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 32px auto 0;
  width: fit-content;
  background: var(--color-accent);
  border-radius: var(--radius-pill);
  padding: 14px 32px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: none;
}
.compare__savings-amount { font-size: 34px; font-weight: 800; line-height: 1; }
.compare__savings-label { line-height: 1.2; }
.compare__note { font-size: 15.4px; line-height: 1.6; text-align: center; padding-top: 30.8px; }

/* Services and FAQ accordions */
.services, .faq {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 75svh;
  padding: var(--space-xxl) 0;
}
.services__lede { font-size: 20px; line-height: 1.4; }
.accordion { width: 100%; padding-top: 2rem; }
.accordion__item { border-top: 1px solid var(--color-ink); }
.accordion__toggle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 30px;
  padding: 20px 40px 20px 20px;
  list-style: none;
  cursor: pointer;
  transition: background-color 0.2s;
}
.accordion__toggle::-webkit-details-marker { display: none; }
.accordion__toggle:hover { background: var(--color-surface-soft); }
.accordion__title { font-size: 18.2px; font-weight: 700; line-height: 1.2; }
.accordion__icon { font-size: 21px; font-weight: 700; line-height: 1.2; transition: transform 0.2s; }
.accordion__item[open] .accordion__icon { transform: rotate(45deg); }
.accordion__body { padding: 15px 25px; }
.accordion__body p { font-size: var(--text-body); line-height: 1.55; margin-bottom: 10px; }

/* Expert: photo on the left, headline, quote, and CTA on the right. */
.expert {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--color-accent-wash);
  padding: var(--space-xxl) 0;
}
.expert__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.expert__figure { display: flex; }
.expert__image { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 30%; border-radius: var(--radius-l); }
.expert__content { display: flex; flex-direction: column; gap: 20px; }
.expert__title { margin: 0; }
.expert__quote { font-size: 28px; font-style: italic; line-height: 1.6; }
.expert__name { font-size: 19.6px; line-height: 1.6; }
.expert__cta { display: flex; padding-top: 20px; }

/* Footer */
.footer { background: var(--color-ink); color: var(--color-surface); }
.footer__inner { display: flex; flex-direction: column; align-items: center; padding: 80px 0; }
.footer__links { display: flex; gap: 39px; }
.footer__link { font-size: 18.2px; line-height: 1.2; text-decoration: none; }
.footer__copyright { font-size: 14px; line-height: 1.2; padding-top: 28px; text-align: center; }

/* Upsizing tier */
@media screen and (min-width: 1920px) {
  .hero { min-height: 95vh; }
  .hero__inner { padding-top: var(--space-xxl); padding-bottom: var(--space-xxl); }
  .hero__headline { font-size: 3vw; }
  .hero__cta { padding-top: 0; }
  .brands__inner { padding-top: 84px; padding-bottom: 84px; }
  .proof { padding: 84px 0; }
  .cases__inner { padding-bottom: 28px; }
  .case-card__info { padding: 2.4rem; }
  .steps { padding-bottom: var(--space-md); }
  .section-cta--tight { padding-top: 0; }
}

/* Tablet and below */
/* Intermediate desktop widths: tighten gutters and control padding so the nav
   links plus both CTAs still fit on one row (Codex finding on #2241). */
@media screen and (max-width: 1180px) and (min-width: 992px) {
  .site-header { padding-left: 24px; padding-right: 24px; }
  .site-nav__link, .site-nav__cta { padding: 10px 10px; font-size: 15px; }
  .site-nav__links { gap: 4px; }
  .site-nav__cta-wrapper { display: flex; align-items: center; gap: 8px; }
}

@media screen and (max-width: 991px) {
  .site-header { padding: 12px 32px; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-surface);
  }
  .site-nav.is-open { display: flex; }
  .site-nav__links { flex-direction: column; gap: 0; padding: 10px 31px; }
  .site-nav__link, .site-nav__link:first-child { padding: 16px 40px; font-size: 16px; border-radius: 0; }
  .site-nav__cta-wrapper { padding: 12px 40px; }
  .site-nav__cta { display: block; padding: 16px 40px; font-size: 16px; }
  .menu-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 12px;
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-ink);
  }
  .hero__inner { margin-top: 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__headline { font-size: 56px; padding-bottom: 56px; }
  .kit-card { min-height: 30em; padding-top: 0; padding-bottom: 14px; }
  .kit-card__image { padding-top: 28px; }
  .hero__badge { width: 21%; }
  .brands__title { font-size: 2vw; text-align: center; }
  .brands__grid { grid-template-columns: 100%; gap: 0; }
  .brands__item { font-size: 4vw; }
  .advantages__grid { display: flex; flex-direction: column; align-items: stretch; }
  .advantages__image { max-width: none; max-height: none; height: auto; }
  .proof__grid { grid-template-columns: 100%; justify-items: center; align-items: center; }
  .proof__number { font-size: 4vw; }
  .proof-logos__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .case-slider__track { --per: 1; }
  .case-card__info { padding: 1.2rem; }
  .case-card__price { font-size: 4vw; }
  .compare__grid { grid-template-columns: 1fr; }
  .compare__side { padding: 24px; }
  .compare__note { text-align: left; font-size: 14px; padding-top: 28px; }
  .section-cta { padding: 40px; }
  .expert__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .expert__image { aspect-ratio: 3 / 2; object-position: center 20%; }
  .expert__cta { justify-content: center; }
  .hero__cta .btn--accent { padding: 18px 40px; font-size: 20px; }
  .footer__inner { padding: 64px 0; }
}

@media screen and (max-width: 767px) {
  .page-padding { padding: 0 24px; }
  .site-header { padding: 12px 24px; }
  .hero__inner { padding-left: 24px; padding-right: 24px; }
  .hero__grid { display: flex; flex-direction: column; }
  .kit-card { padding: 0 0 14px; }
  .kit-card__title h2 { font-size: 1.5rem; }
  .kit-card__title { padding-right: 24px; }
  .kit-card__image { width: 50%; }
  .hero__badge { top: -46%; right: -2%; }
  .brands__inner { padding-left: 24px; padding-right: 24px; }
  .brands__title { font-size: 24px; }
  .brands__item { font-size: 30.68px; }
  .brands__grid { row-gap: 0.4em; }
  .section-title { font-size: 24px; }
  .advantages__content .section-title, .steps .section-title { font-size: var(--text-h2); }
  .steps .steps__title { font-size: 48px; }
  .cases .section-title { font-size: 6.5vw; }
  .advantage__text { font-size: 16px; }
  .proof__caption { font-size: 16px; }
  .proof__logo-row { min-height: 4rem; margin-top: 1.25rem; }
  .proof__cofunding { max-width: 14rem; max-height: 3.5rem; }
  .case-card__label, .case-card__value { font-size: 16px; }
  .case-card__price { font-size: 6vw; }
  .steps__list { gap: 32px; }
  .step:nth-child(1) { margin-left: 10px; }
  .step:nth-child(2) { margin-left: 20px; }
  .step:nth-child(3) { margin-left: 30px; }
  .step__number { font-size: 60px; }
  .step__title { font-size: 24px; }
  .step__text { font-size: 16px; }
  .compare__card { padding: 22px; }
  .compare__title { font-size: 28px; }
  .compare__lede { font-size: 16px; margin-bottom: 24px; }
  .compare__line--after .compare__after, .compare__savings-amount { font-size: 26px; }
  .compare__savings { font-size: 16px; padding: 12px 24px; }
  .compare__note { font-size: 16px; padding-top: 32px; }
  .advantages__footnote { padding-left: 79px; }
  .brands__grid { grid-template-columns: 100%; }
  .services__lede { font-size: 16px; }
  .section-cta { padding: 24px; }
  .footer__inner { padding: 48px 0; }
  .footer__links { gap: 53px; }
  .footer__link { text-align: center; }
}

@media screen and (max-width: 479px) {
  .page-padding { padding: 0 20px; }
  .hero__inner { padding-left: 20px; padding-right: 20px; }
  .hero__grid { gap: 2rem; align-items: center; width: 90%; margin: 60px auto 0; }
  .hero__copy { height: auto; align-items: center; }
  .hero__headline { font-size: 42px; text-align: center; max-width: 90%; padding-bottom: 42px; }
  .kit-slider { width: 100%; }
  .kit-card { grid-template-columns: 1fr; min-height: 0; padding: 14px; text-align: center; }
  .kit-card__title { padding-right: 0; }
  .kit-card__flag { justify-self: center; }
  .kit-card__figure { display: flex; justify-content: center; }
  .kit-card__image { width: 70%; padding: 14px 0; }
  .kit-card__details { text-align: left; }
  .kit-card__facts { gap: 0 12px; }
  .kit-card__cta { width: 100%; }
  .kit-card__badges { justify-content: center; }
  .hero__badge { display: none; }
  .hero__cta { margin-top: 0; padding-top: 32px; }
  .btn--accent { padding-left: 14.4px; padding-right: 14.4px; }
  .brands__inner { margin-top: 0; padding-left: 20px; padding-right: 20px; }
  .brands__grid { display: flex; flex-direction: column; justify-content: space-around; }
  .brands__item { font-size: 8vw; padding-top: 28px; }
  .advantages { display: flex; justify-content: center; }
  .advantages__grid { padding-top: 0; }
  .advantages__content .section-title, .cases .section-title, .steps .section-title { font-size: 6vw; }
  .section-title { text-align: center; }
  .proof { padding-left: 20px; padding-right: 20px; }
  .proof__grid { display: flex; flex-direction: column; align-items: center; gap: 2.3rem; }
  .proof__item { display: flex; flex-direction: column; align-items: center; padding-bottom: 24px; }
  .proof__row { gap: 17px; }
  .proof__number { font-size: 8vw; }
  .proof__caption { font-size: 12px; }
  .cases__inner { margin-left: 0; padding-bottom: 28px; }
  /* No arrows on portrait phones (as published); the cards scroll and snap by touch instead. */
  .case-slider { padding: 0; }
  .case-slider__mask { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .case-slider__track { transform: none; }
  .case-slide { scroll-snap-align: start; }
  .case-slider__arrow { display: none; }
  .case-card__price { font-size: 8vw; }
  .steps { padding: var(--space-md) 0; }
  .steps__inner { margin: 0 1em; }
  .step:nth-child(n) { margin-left: 0; }
  .step__text { font-size: 12px; text-align: center; }
  .compare { background: var(--color-surface); background-image: none; padding: var(--space-md) 0; }
  .compare__card { padding: 22px 14px; }
  .compare__side { padding: 20px 16px; }
  .compare__rows { font-size: 14px; }
  .compare__line--after { flex-direction: column; align-items: flex-start; gap: 4px; }
  .hero__cta .btn--accent { padding: 16px 28px; font-size: 18px; }
  .compare__note { font-size: 12px; padding-top: 24px; overflow-wrap: break-word; }
  .btn--soft { padding-left: 1em; padding-right: 1em; }
  .btn__arrow { display: none; }
  .services, .faq { display: block; padding: var(--space-xl) 0; }
  .services__lede { font-size: 12px; text-align: center; }
  .accordion__toggle { flex-direction: column; align-items: center; text-align: center; padding: 20px; }
  .accordion__icon { display: none; }
  .expert__quote { font-size: 21px; font-weight: 300; text-align: center; }
  .expert__name { text-align: center; }
  .expert__title { text-align: center; }
  .advantages__footnote { padding-left: 0; text-align: center; }
  .footer__links { flex-direction: column; align-items: center; gap: 39px; }
  .footer__link { font-size: 14px; }
}

/* Pages: legal + contact */
/* Legal pages (/imprint, /datapolicy): a short dark photo band (the published
   section-layout1-imprint, 20vh over the hero photo), then the text at reading size.
   The published legal text sits at 11-14px; the rebuild uses the body token. */
.legal-band {
  min-height: 20vh;
  background: linear-gradient(var(--color-overlay-strong), var(--color-overlay-strong)),
    url("/static/img/bg-hero-waermepumpe-haus.avif") center / cover no-repeat;
}
.legal {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 75svh;
  padding: var(--space-xxl) 0 var(--space-lg);
}
.legal__inner { max-width: 68rem; }
.legal__title { font-size: 3em; font-weight: 400; line-height: 1.2; padding-bottom: var(--space-lg); }
.legal__body { font-size: var(--text-body); font-weight: 300; line-height: 1.7; }
.legal__body p { margin-bottom: var(--space-sm); }
.legal__body strong { font-weight: 600; }
.legal__h2 { font-size: 1.875rem; font-weight: 700; line-height: 1.2; padding: var(--space-md) 0 var(--space-xs); }
.legal__h3 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; padding: var(--space-sm) 0 var(--space-xs); }
.legal .section-cta { padding-left: 0; padding-right: 0; justify-content: flex-start; }

/* Contact (/contact, /contact-confirm): two columns, the intro on the left and the
   contact card on the right. The published card has a 3px translucent-yellow border
   on white; the rebuild separates it with a soft surface (Hard Rule 2). */
.contact {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 75svh;
  padding: var(--space-xxl) 0 var(--space-lg);
}
.contact__columns {
  display: flex;
  gap: 1em 4em;
  align-items: center;
  justify-content: center;
}
.contact__column { flex: 1; display: flex; flex-direction: column; align-items: center; }
.contact__intro { padding: 0 4em; }
.contact__headline {
  max-width: 600px;
  font-size: 2em;
  font-weight: 400;
  line-height: 1.3;
  text-align: center;
  margin-bottom: 10px;
}
.contact__headline a { text-decoration: underline; }
.contact__headline--confirm { max-width: none; }
.contact__rating { display: flex; flex-direction: column; align-items: center; padding-top: 2em; text-decoration: none; }
.contact__rating-row { display: flex; align-items: center; gap: 2.9em; padding-bottom: 1.5em; }
.contact__rating-number { font-size: 2vw; font-weight: 300; }
.contact__rating-caption { font-size: 1.3em; line-height: 1.6; text-align: center; }
.contact__card {
  width: 100%;
  min-width: 40%;
  background: var(--color-surface-soft);
  border-radius: var(--radius-m);
  padding: 30px 30px 30px 4em;
  text-align: center;
}
.contact__subheading { font-size: 24px; font-weight: 700; line-height: 1.3; padding-bottom: 2rem; }
.contact__cta { padding: 0.6em 18px; font-size: 16.8px; }
.contact__note { padding-top: 2rem; font-size: 14px; line-height: 1.4; text-align: left; }
.contact__options { padding-top: 2rem; font-size: 16.8px; line-height: 1.6; text-align: left; }
.contact__options p { margin-bottom: var(--space-sm); }
.contact__options a { text-decoration: none; font-weight: 600; }
.contact__hours { display: grid; grid-template-columns: max-content max-content; gap: 0 var(--space-md); margin-bottom: var(--space-sm); }
.contact__hours-row { display: contents; }


@media screen and (max-width: 991px) {
  .legal, .contact { padding-top: var(--space-xl); }
  .contact__columns { flex-direction: column; gap: 20px; }
  .contact__intro { padding: 0; }
  .contact__headline { font-size: 28px; }
  .contact__rating-number { font-size: 4vw; }
  .contact__card { padding: 20px 12px; }
  .contact__subheading { font-size: 18px; }
  .contact__note, .contact__options { text-align: center; }
  .contact__hours { justify-content: center; }
}

@media screen and (max-width: 767px) {
  .legal__title { font-size: 2em; }
  .legal__h2 { font-size: 1.5rem; }
  .contact__rating-caption { font-size: 16px; }
}

@media screen and (max-width: 479px) {
  .legal, .contact { padding: var(--space-xl) 0; }
  .legal__title { font-size: 1.5em; font-weight: 600; padding-bottom: var(--space-md); }
  .legal__h2 { font-size: 1.25rem; }
  .legal__h3 { font-size: 1.125rem; }
  .legal .section-cta { justify-content: center; }
  .contact__columns { gap: 40px; }
  .contact__headline { font-size: 20px; line-height: 1.4; }
  .contact__rating-number { font-size: 8vw; }
  .contact__rating-row { gap: 17px; }
  .contact__rating-caption { font-size: 14px; }
  .contact__card { padding: 20px 0; background: none; }
  .contact__subheading { font-size: 16px; }
  .contact__note, .contact__options { padding-left: 14px; padding-right: 14px; }
  .contact__cta { padding-left: 1em; padding-right: 1em; }
}

/* Pages: company + knowledge */
/* Full-bleed photo hero shared by the company page (light overlay, as published). */
.page-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-xl) var(--gutter);
  text-align: center;
  color: var(--color-surface);
  background: linear-gradient(var(--color-overlay-light), var(--color-overlay-light)),
    url("/static/img/company-bg-hero-2000.avif") center / cover no-repeat;
}
.page-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 80vw; }
.page-hero__title { font-size: 4.4vw; font-weight: 700; line-height: 1.2; }
.page-hero__accent { color: var(--color-accent); }
.page-hero__lede { max-width: 54rem; font-size: 20px; line-height: 1.5; }

.company-story { padding: var(--space-xxl) 0 var(--space-lg); }
.company-story__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  align-items: center;
  padding-bottom: var(--space-lg);
}
.company-text { display: flex; flex-direction: column; gap: 1rem; }
.company-text .section-title { margin: 0; }
.company-subheading { font-size: 30px; line-height: 1.5; }
.company-paragraph { font-size: 20px; line-height: 1.5; }
.company-paragraph + .company-paragraph { margin-top: 0.5rem; }
.company-figure { margin: 0; display: flex; flex-direction: column; align-items: center; }
.company-figure__image { width: 100%; border-radius: var(--radius-l); object-fit: cover; }
.company-figure__caption { margin-top: 1rem; font-size: 14px; line-height: 1.4; text-align: center; }
.company-story .proof { padding: 0 0 var(--space-lg); }
.company-story .proof__logo-row { display: none; }
.company-story .proof__grid { justify-items: center; }
.company-story .proof__item { text-align: center; }
.company-foundation { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: stretch; }
.company-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
  background: var(--color-accent);
  border-radius: var(--radius-l);
  padding: 4rem 3.9rem;
}
.company-card .section-title { margin: 0; }
/* The Bauteilschema is a white diagram; a soft frame separates it from the page
   and object-fit contain keeps every label readable. */
.company-foundation__figure {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  background: var(--color-surface-soft);
  border-radius: var(--radius-l);
  padding: 20px 20px 16px;
}
.company-foundation__image { width: 100%; height: auto; max-height: 640px; object-fit: contain; border-radius: var(--radius-s); }
/* Stacked Bauteilschemen: overlapping, rotated sheets. Deliberately only partly
   readable; the soft shadow separates the white sheets from the page. */
.schema-stack { position: relative; width: 100%; aspect-ratio: 5 / 4; }
/* Sheet height is 48% x 1084/750 = 69.4% of the container width; with tops of at
   most 7% and about 2.5% extra from rotation, everything stays inside the 80%
   tall 5/4 box and clear of the caption below (Codex finding on #2241). */
.schema-stack__img { position: absolute; width: 48%; height: auto; border-radius: var(--radius-xs); box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14); }
.schema-stack__img:nth-child(1) { left: 0; top: 4%; transform: rotate(-7deg); }
.schema-stack__img:nth-child(2) { left: 24%; top: 0; transform: rotate(2deg); z-index: 1; }
.schema-stack__img:nth-child(3) { left: 48%; top: 7%; transform: rotate(6deg); z-index: 2; }

.company-principles { padding: var(--space-lg) 0; }
.company-heading { display: flex; flex-direction: column; gap: 1rem; max-width: 80vw; margin-bottom: 3rem; }
.company-heading .section-title { margin: 0; }
.company-heading--center { align-items: center; margin: 0 auto 3rem; text-align: center; }
.company-principles__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  align-items: stretch;
}
.company-principles__group { display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
/* Published order on desktop: copy (two columns) beside a photo, then a photo beside copy. */
.company-principles__grid > :nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.company-principles__grid > :nth-child(2) { grid-column: 3; grid-row: 1; }
.company-principles__grid > :nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
.company-principles__grid > :nth-child(4) { grid-column: 1; grid-row: 2; }
.company-principles__image { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-l); }
.company-principle { display: flex; flex-direction: column; align-items: flex-start; gap: 1.4rem; }
/* Tick and subheadline share one light-green pill (review round 3). */
.company-principle__title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--color-positive-tint);
  border-radius: var(--radius-pill);
  padding: 10px 24px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.company-principle__tick { width: 28px; height: 28px; flex: none; }

.company-team { background: var(--color-accent); padding: var(--space-lg) 0; }
.company-team__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; }
.company-team__image { width: 100%; height: auto; object-fit: cover; }

.company-stories { padding: var(--space-lg) 0; }
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 3rem 0; }
.story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border-radius: var(--radius-l);
  overflow: hidden;
  color: var(--color-ink);
  text-decoration: none;
  background: var(--color-surface-soft);
}
.story-card__image { position: static; width: 100%; height: clamp(220px, 18vw, 280px); object-fit: cover; }
.story-card__info {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.6rem;
  flex: 1;
}
.story-card__facts { margin-top: 0.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.16); }
.story-card__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0; border-top: 1px solid rgba(0, 0, 0, 0.16); }
.story-card__label { font-size: 20px; font-weight: 700; line-height: 1.4; }
.story-card__text { font-size: 17px; line-height: 1.45; }
.story-card__teaser { min-height: 3em; }
.story-card__summary { color: var(--color-ink-soft); font-size: 15px; }
.story-card__price { font-size: 2.4vw; line-height: 1.4; }

.company-mission { background: var(--color-accent); padding: var(--space-lg) 0; }
.company-mission__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; max-width: 80vw; text-align: center; }
.company-mission .section-title { margin: 0; max-width: 60rem; }

/* Company page relaunch sections (September 2026). Reuses company-* primitives above. */
.about-hero { padding: var(--space-lg) 0 var(--space-md); }
.about-hero__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }
.about-hero__copy { display: flex; flex-direction: column; gap: 1rem; }
.about-hero__title { font-size: 4vw; font-weight: 700; line-height: 1.15; margin-bottom: 0.5rem; }
.about-hero__accent { background: var(--color-accent); padding: 0 0.15em; border-radius: var(--radius-xs); }
.about-hero__lede { font-size: 20px; line-height: 1.5; max-width: 40rem; }
.about-hero__image { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-l); }
/* The three chips span the full section width (review round 3). */
.about-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: var(--space-md); }
.about-chip { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--color-positive-tint); border-radius: var(--radius-pill); padding: 12px 20px; font-size: 16px; font-weight: 600; line-height: 1.3; text-align: center; }
.about-chip__tick { width: 16px; height: 16px; flex: none; }

.about-facts { background: var(--color-ink); color: var(--color-surface); padding: var(--space-xl) 0; }
.about-facts__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); }
.about-fact { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.about-fact__value { display: inline-flex; align-items: center; gap: 12px; font-size: clamp(28px, 2.2vw, 36px); font-weight: 800; line-height: 1.15; color: var(--color-accent); }
.about-fact__tick { width: 28px; height: 28px; flex: none; }
.about-fact__label { max-width: 26rem; font-size: 18px; line-height: 1.55; }

.about-principles__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem 4rem; }

.company-principles--with-reel { padding-bottom: var(--space-xxl); }
.reel { overflow: hidden; padding: 0 0 var(--space-lg); }
.reel__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; padding: 0 var(--gutter) 16px; }
.reel__set { display: flex; width: max-content; gap: 16px; }
.reel__item { flex: none; scroll-snap-align: start; }
.reel__image { display: block; width: 240px; height: 240px; object-fit: cover; border-radius: var(--radius-l); }
@keyframes reel { to { transform: translateX(-50%); } }

.partners { padding: var(--space-lg) 0 var(--space-xxl); }
.partners__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: stretch; }
.partners__benefits { display: flex; flex-direction: column; gap: 12px; padding-top: 0.5rem; }
.partners__benefit { display: flex; align-items: center; gap: 14px; font-size: 20px; line-height: 1.4; }
.partners__benefit img { width: 28px; flex: none; }
.partners__footnote { font-size: 12px; line-height: 1.4; color: var(--color-ink-soft); }
.partners__list { display: flex; flex-wrap: wrap; gap: 10px 12px; padding: 0.5rem 0; }
.partners__brand { background: var(--color-surface-soft); border-radius: var(--radius-m); padding: 12px 22px; font-size: 20px; font-weight: 300; line-height: 1.2; }
.partners__image { width: 100%; height: 100%; min-height: 100%; object-fit: cover; border-radius: var(--radius-l); }

.about-service { background: var(--color-ink); color: var(--color-surface); padding: var(--space-xxl) 0; }
.about-service .company-subheading { color: inherit; }
.about-service__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: var(--space-lg); }
.about-service__item { display: flex; flex-direction: column; gap: 12px; background: var(--color-surface); color: var(--color-ink); border-radius: var(--radius-l); padding: 32px; }
.about-service__icon { width: 39px; }
.about-service__title { font-size: 22px; font-weight: 700; line-height: 1.3; }
.about-service__text { font-size: 17px; line-height: 1.5; }
.about-service__footnote { font-size: 12px; line-height: 1.4; color: var(--color-surface-soft); text-align: center; padding-bottom: var(--space-lg); }
.about-service__cta { padding: 0; }

.company-team__grid { padding-bottom: var(--space-lg); }
.company-team__image { border-radius: var(--radius-l); }
.team-lead { display: grid; grid-template-columns: 240px 1fr; gap: 3rem; align-items: center; background: var(--color-surface); border-radius: var(--radius-l); padding: 2.5rem 3rem; }
.team-lead__image { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--radius-m); }
.team-lead__title { font-size: 28px; font-weight: 700; line-height: 1.3; }

.reviews { padding: var(--space-xxl) 0 var(--space-lg); }
.reviews__head { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; }
.reviews__head .section-title { margin: 0; }
.reviews__rating {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-positive-tint);
  border-radius: var(--radius-pill);
  padding: 12px 28px;
  text-decoration: none;
}
.reviews__number { font-size: 44px; font-weight: 700; line-height: 1; }
.reviews__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.reviews__cta { padding: var(--space-lg) 0 0; }
.review { display: flex; flex-direction: column; gap: 16px; background: var(--color-surface-soft); border-radius: var(--radius-l); padding: 32px; }
.review__stars { width: 120px; height: auto; }
.review__text { margin: 0; font-size: 18px; line-height: 1.55; flex: 1; }
.review__name { display: flex; flex-direction: column; gap: 2px; font-size: 16px; font-weight: 700; }
.review__source { font-size: 13px; font-weight: 400; color: var(--color-ink-soft); }

.press { padding: var(--space-xxl) 0; overflow: hidden; }
.press__title { font-size: 2vw; font-weight: 700; text-align: center; margin-bottom: 2rem; }
.press__viewport { overflow: hidden; }
.press__track { display: flex; width: max-content; animation: reel 45s linear infinite; }
.press:hover .press__track, .press:focus-within .press__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .press__track { animation: none; } }
.press__set { display: flex; gap: 16px; padding-right: 16px; }
.press__item { display: flex; }
.press__tile {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 22rem;
  border-radius: var(--radius-l);
  padding: 12px 24px;
  text-decoration: none;
  transition: background-color 0.2s;
}
a.press__tile:hover { background: var(--color-surface-soft); }
a.press__tile:hover .press__logo { filter: invert(1); }
.press__avatar-wrap { position: relative; flex: none; width: 56px; height: 56px; }
.press__avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.press__badge { position: absolute; right: -4px; bottom: -2px; width: 21px; height: 15px; }
/* heise appears as rendered text close to their look: no logo file, no link. */
.press__heise {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-s);
  background: var(--color-ink-soft);
  color: var(--color-surface);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
/* the association logo ships as its white variant; invert it on the light page */
.press__logo { flex: none; width: 56px; height: 40px; object-fit: contain; filter: invert(1); }
.press__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.press__name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.press__detail { font-size: 13px; line-height: 1.4; }
/* The company page runs the same looping marquee as the homepage, only with a
   tighter top so "Bekannt aus" sits close to the hero (review round 3). */
.press--company { padding: var(--space-md) 0 var(--space-xl); }

.timeline { padding: var(--space-lg) 0 var(--space-xxl); }
.timeline__list { display: grid; grid-template-columns: repeat(5, 1fr); }
.timeline__item { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 0 24px 0 0; }
.timeline__year { font-size: 40px; font-weight: 800; line-height: 1; }
/* the rail: a rule through every item, a dot on it per milestone */
.timeline__dot { position: relative; display: block; height: 17px; margin: 10px 0 14px; }
.timeline__dot::before { content: ""; position: absolute; left: 0; right: -24px; top: 7px; height: 3px; background: var(--color-ink); }
.timeline__item:last-child .timeline__dot::before { right: 0; }
.timeline__dot::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: inset 0 0 0 3px var(--color-ink);
}
.timeline__item--next .timeline__dot::after { background: var(--color-ink); box-shadow: inset 0 0 0 3px var(--color-accent); }
.timeline__title { font-size: 20px; font-weight: 700; line-height: 1.3; }
.timeline__text { font-size: 15px; line-height: 1.5; }

@media screen and (max-width: 991px) {
  .about-hero__grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-hero__title { font-size: 6vw; }
  .about-facts__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .about-principles__grid { grid-template-columns: 1fr; gap: 2rem; }
  .partners__grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .about-service__grid, .reviews__grid { grid-template-columns: 1fr 1fr; }
  .press__title { font-size: 24px; }
  .press__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 24px; }
  .press__track { animation: none; width: auto; }
  .press__set[aria-hidden] { display: none; }
  .press__set { gap: 12px; padding-right: 0; }
  .press__item { scroll-snap-align: center; }
  .press__tile { width: calc(100vw - 48px); background: var(--color-surface-soft); }
  .partners__grid { grid-template-columns: 1fr; }
  .partners__image { min-height: 0; aspect-ratio: 3 / 2; }
  .timeline__list { grid-template-columns: 1fr; }
  .timeline__item { display: grid; grid-template-columns: 17px 1fr; grid-template-rows: auto auto auto; column-gap: 20px; padding: 0 0 32px; }
  .timeline__dot { grid-column: 1; grid-row: 1 / span 3; height: auto; margin: 4px 0 0; }
  .timeline__dot::before { left: 7px; right: auto; top: 0; bottom: -36px; width: 3px; height: auto; }
  .timeline__item:last-child .timeline__dot::before { bottom: 0; }
  .timeline__year { grid-column: 2; font-size: 32px; }
  .timeline__title, .timeline__text { grid-column: 2; }
  .team-lead { grid-template-columns: 200px 1fr; padding: 2rem; }
}

@media screen and (max-width: 767px) {
  .about-hero__title { font-size: 8vw; }
  .about-hero__lede { font-size: 16px; }
  .about-chips { grid-template-columns: 1fr; gap: 10px; }
  .about-fact__value { font-size: 32px; }
  .reel__image { width: 200px; height: 200px; }
  .about-service__grid, .reviews__grid { grid-template-columns: 1fr; }
  .about-service__item, .review { padding: 24px; }
  .partners__brand { font-size: 20px; padding: 12px 20px; }
  .partners__benefit { font-size: 16px; }
  .team-lead { grid-template-columns: 1fr; padding: 1.5rem; }
  .team-lead__image { max-width: 240px; }
  .reviews__number { font-size: 36px; }
  .about-hero__grid { gap: 1.5rem; }
  .company-team .section-title, .partners .section-title, .reviews .section-title, .timeline .section-title, .about-service .section-title { font-size: var(--text-h2); }
}

@media screen and (max-width: 479px) {
  .about-hero { padding-top: var(--space-md); }
  .about-hero__title { font-size: 10vw; }
  .about-facts__grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .about-fact { align-items: center; text-align: center; }
  .partners .section-title, .reviews .section-title, .timeline .section-title, .about-service .section-title, .company-team .section-title { font-size: 6vw; }
  .reviews__head { justify-content: center; text-align: center; }
  .team-lead__title { font-size: 22px; }
}

/* Knowledge: the published yellow frame with glow becomes a soft card holding white
   article rows (Hard Rule 2: no borders on rounded surfaces). */
.knowledge { padding: 4em 0; }
.knowledge__card { background: var(--color-surface-soft); border-radius: var(--radius-m); padding: 1rem 5% 2rem; }
.knowledge__title { max-width: 48rem; padding: 1em 0; font-size: 5rem; font-weight: 700; line-height: 1.2; }
.knowledge__accent { font-style: italic; font-weight: 300; }
.knowledge__list { display: grid; gap: 32px; }
.knowledge-item {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 32px 24px 24px;
  background: var(--color-surface);
  border-radius: var(--radius-s);
  text-decoration: none;
}
.knowledge-item__image { flex: none; width: 200px; height: 200px; object-fit: cover; border-radius: var(--radius-xs); }
.knowledge-item__body { display: flex; flex-direction: column; gap: 16px; }
.knowledge-item__title { font-size: 24px; font-weight: 700; line-height: 1.2; }
.knowledge-item__text { font-size: 20px; line-height: 1.3; }
.knowledge__divider { height: 1px; background: var(--color-ink); margin: 2rem 0; }
.knowledge__cta { display: flex; justify-content: center; padding: 2rem 0; }
.knowledge__btn { font-size: 16.8px; padding: 10px 18px; }

/* KI project page: single column at every width, as published. Bordered cards become
   soft or white fills depending on the section background. */
.ki__container { width: min(100% - 28px, 1180px); margin: 0 auto; }
.ki-hero { background: var(--color-surface-soft); padding: 52px 0 48px; }
.ki-hero__grid { display: grid; gap: 32px; align-items: center; }
.ki-hero__copy { max-width: 680px; }
.ki-kicker {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 20px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}
.ki-kicker--on-accent { background: var(--color-surface); }
.ki-title { margin-bottom: 24px; font-size: 36px; font-weight: 800; line-height: 1.02; }
.ki-lead { margin-bottom: 18px; font-size: 18px; font-weight: 600; line-height: 1.55; }
.ki-note { margin-bottom: 28px; color: var(--color-ink-soft); font-size: 16px; line-height: 1.55; }
.ki-cta { min-height: 48px; padding: 13px 22px; font-size: 16px; font-weight: 800; line-height: 1; }
.ki-hero__media { margin: 0; }
.ki-hero__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-l); }
.ki-funding { padding: 44px 0 20px; }
.ki-funding__card { display: grid; gap: 32px; align-items: center; padding: 20px; background: var(--color-surface-soft); border-radius: var(--radius-m); }
.ki-funding__logos { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ki-funding__logo-main { display: block; width: 100%; max-width: 660px; height: auto; object-fit: contain; }
.ki-funding__logo-claim { display: block; width: 100%; max-width: 380px; height: auto; object-fit: contain; }
.ki-label { display: block; margin-bottom: 10px; color: var(--color-ink-soft); font-size: 13px; font-weight: 800; line-height: 1.3; text-transform: uppercase; }
.ki-body { font-size: 18px; line-height: 1.65; }
.ki-section { padding: 54px 0; }
.ki-section--soft { background: var(--color-surface-soft); }
.ki-section--accent { background: var(--color-accent); }
.ki-card { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--color-surface-soft); border-radius: var(--radius-m); }
.ki-section--soft .ki-card, .ki-section--accent .ki-card { background: var(--color-surface); }
.ki-fact-grid { display: grid; gap: 18px; margin-top: 10px; }
.ki-fact { min-height: 132px; }
.ki-fact .ki-label { margin-bottom: 0; }
.ki-fact__value { font-size: 18px; line-height: 1.35; }
.ki-two-column { display: grid; gap: 32px; align-items: start; }
.ki-section-head { max-width: 560px; }
.ki-section-head--wide { max-width: 760px; margin-bottom: 32px; }
.ki-heading { font-size: 34px; font-weight: 800; line-height: 1.12; }
.ki-copy { display: flex; flex-direction: column; gap: 18px; }
.ki-card-grid { display: grid; gap: 18px; }
.ki-info-card { min-height: 220px; gap: 14px; padding: 24px; }
.ki-card__title { font-size: 20px; font-weight: 800; line-height: 1.25; }
.ki-card__text { font-size: 16px; line-height: 1.55; }
.ki-ap-list { display: flex; flex-direction: column; gap: 14px; }
.ki-ap { display: grid; gap: 18px; align-items: start; padding: 18px; }
.ki-ap__code {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  min-height: 44px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.ki-ap__text { font-size: 17px; line-height: 1.55; }
.ki-impact-grid { display: grid; gap: 18px; }
.ki-impact { min-height: 170px; padding: 24px; }

@media screen and (max-width: 991px) {
  .page-hero__title { font-size: 6vw; }
  .company-story { padding-top: var(--space-xl); }
  .company-story__grid, .company-foundation { grid-template-columns: 1fr; }
  .company-subheading { font-size: 2.8vw; }
  .company-paragraph, .company-figure__caption { font-size: 18px; }
  .story-grid { grid-template-columns: 1fr 1fr; }
  .story-card__price { font-size: 4vw; }
}

@media screen and (max-width: 767px) {
  .page-hero { padding-left: 20px; padding-right: 20px; }
  .company-subheading { font-size: 3.6vw; }
  .company-paragraph { font-size: 16px; }
  /* The published company headings keep their desktop size on mobile landscape. */
  .company-story .section-title, .company-principles .section-title, .company-team .section-title,
  .company-stories .section-title, .company-mission .section-title { font-size: var(--text-h2); }
  .company-principles__grid { grid-template-columns: 1fr; gap: 2rem; }
  .company-principles__grid > * { grid-column: auto !important; grid-row: auto !important; width: 100% !important; }
  .company-principles__image--desktop { display: none; }
  .company-team__grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card__label, .story-card__text { font-size: 16px; }
  .story-card__price { font-size: 6vw; }
  .knowledge { padding: 3em 0; }
  .knowledge__title { font-size: 2.5rem; }
  .knowledge-item { flex-direction: column; gap: 32px; text-align: center; }
  .knowledge-item__body { align-items: center; }
  .knowledge-item__image { width: 100%; height: 320px; }
}

@media screen and (max-width: 479px) {
  .page-hero__title { font-size: 10vw; }
  .page-hero__inner { max-width: 100%; }
  .page-hero__lede { font-size: 16px; }
  .company-story .proof { width: auto; }
  .company-heading { max-width: 100%; }
  .company-heading--center { align-items: flex-start; text-align: left; }
  .company-card { padding: 1.8rem 1.2rem; }
  .company-subheading, .company-story .section-title, .company-principles .section-title,
  .company-team .section-title, .company-stories .section-title, .company-mission .section-title { font-size: 6vw; }
  .company-principle__title { font-size: 18px; padding: 8px 16px; gap: 8px; }
  .company-principle__tick { width: 22px; height: 22px; }
  .company-mission__inner { max-width: 100%; }
  .story-card__price { font-size: 8vw; }
  .knowledge__card { padding: 0 0 1rem; background: none; }
  .knowledge__title { padding: 1em 5%; font-size: 2rem; text-align: center; }
  .knowledge-item { padding: 16px; background: var(--color-surface-soft); }
  .knowledge-item__image { height: 62vw; }
  .knowledge__divider { margin: 1rem 5%; }
}

/* Pages: blog */
/* Article pages: one reading column (54rem, the published 955px column at 1440px
   was 66% of the viewport). Body copy uses the DESIGN.md reading size instead of the
   published 24px Inter paragraphs; headings keep the published scale in Open Sans. */
.blog { padding: var(--space-xxl) 0; }
.article { max-width: 54rem; margin: 0 auto; }
.article__back { display: inline-block; font-size: 16px; line-height: 1.5; text-decoration: underline; margin-bottom: var(--space-md); }
.article__title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1.2;
  padding: var(--space-lg) 0;
}
.article__body { font-size: var(--text-body); line-height: 1.55; }
.article__h2 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: var(--space-lg) 0 var(--space-md);
}
.article__h2--icon { display: flex; align-items: center; gap: var(--space-sm); }
.article__icon { width: 40px; height: 40px; flex: none; }
.article__h3 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  margin: var(--space-md) 0 var(--space-sm);
}
.article__body > .article__h2:first-child, .article__split-text > .article__h2:first-child { margin-top: 0; }
.article__p { font-size: var(--text-body); line-height: 1.55; margin-bottom: var(--space-sm); }
.article__p a, .article__item a { text-decoration: underline; }
.article__list { margin: 0 0 var(--space-sm) 1.4em; }
.article__list.article__list { list-style: disc; }
.article__item { padding: 4px 0; }
.article__figure { display: flex; flex-direction: column; align-items: center; margin: var(--space-md) 0 var(--space-lg); }
/* Rich-text figures render at 60% of the column as published; charts keep their native size. */
.article__figure .article__image { max-width: 60%; height: auto; border-radius: var(--radius-xs); }
.article__figure--natural .article__image { max-width: 100%; }
.article__caption { font-size: 14px; line-height: 1.3; text-align: center; padding-top: 10px; }
.article__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin: var(--space-md) 0 var(--space-lg);
}
.article__split--image-first .article__split-figure { order: -1; }
.article__split-figure .article__image { width: 100%; height: auto; border-radius: var(--radius-xs); }
.article__divider { border: 0; height: 1px; background: var(--color-ink); margin: var(--space-lg) 0 var(--space-md); }
.article__cta { padding: var(--space-md) 0 0; }
.article__cta-button {
  width: 100%;
  background: var(--color-accent);
  color: var(--color-ink);
  padding: 16px 32px;
  font-size: 1.2rem;
  gap: 35px;
}
.article__cta-button:hover { background: var(--color-ink); color: var(--color-surface); }
.article__cta-button:hover .btn__arrow { filter: invert(1); }

@media screen and (max-width: 991px) {
  .article__title { font-size: 3.25rem; }
  .article__h2 { font-size: 2rem; }
}

@media screen and (max-width: 767px) {
  .blog { padding: var(--space-xl) 0; }
  .article__title { font-size: 2.5rem; padding: var(--space-md) 0; }
  .article__h2 { font-size: 1.75rem; }
  /* Published tablet layout squeezes the step photos to a few pixels; stack instead. */
  .article__split { grid-template-columns: 1fr; gap: var(--space-md); }
  .article__split--image-first .article__split-figure { order: 0; }
}

@media screen and (max-width: 479px) {
  .article__title { font-size: 2rem; text-align: center; }
  .article__h2 { font-size: 1.5rem; }
  .article__h3 { font-size: 1.25rem; }
  .article__cta-button { padding-left: 1em; padding-right: 1em; }
}

/* Pages: catalog */
/* Kit overview, kit and package details, case-study overview and details (issue #2202,
   work package D). Values measured on the published pages at 1440/767/479px; the
   published faint card borders and hairline dividers are replaced by the neutral-soft
   surface and spacing (DESIGN.md hard rule 2). */
.catalog-section { padding: 64px 0; }
.catalog-section--bottom { padding-top: 0; }
.catalog-section--cost { padding: 0 0 32px; }
.catalog-section--flush { padding: 0 0 32px; }
.catalog-stack { display: flex; flex-direction: column; align-items: center; gap: 48px; }
.catalog-stack--tight { gap: 0; }
.catalog-title {
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 16px;
}
.catalog-title--center { text-align: center; }
.catalog-intro { max-width: 1200px; text-align: center; }
.catalog-intro__note { font-size: 0.875rem; line-height: 2; }
.catalog-cta { display: flex; justify-content: center; width: 100%; }
.btn--catalog { padding: 10px 18px; font-size: 16.8px; }
.rich ul, .rich ol { list-style: disc; padding-left: 40px; }
.rich ol { list-style: decimal; }
.rich p + p, .rich ul + p, .rich p + ul { margin-top: 0.6em; }
.rich--lg { font-size: 20px; line-height: 1.5; }

/* Kit cards on the overview: white product cards with a soft large-radius shadow
   (the one shadow DESIGN.md allows) instead of the former grey fill, a small image
   gallery with origin badge, and a collapsible spec sheet. */
.kit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; width: 100%; }
.kit-tile {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.08);
}
.kit-tile__frame { position: relative; display: block; height: clamp(240px, 45vw, 360px); overflow: hidden; }
.kit-tile__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; border-radius: var(--radius-s); }
.origin-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  padding: 6px 14px 6px 8px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
}
.origin-badge img { width: 20px; height: 20px; border-radius: 6px; }
.kit-tile__title { text-decoration: none; }
.kit-tile__title h3 { font-size: 22px; font-weight: 700; line-height: 1.25; }
.kit-tile__title:hover h3 { text-decoration: underline; }
.kit-tile__subhead { font-size: 14px; line-height: 1.4; color: var(--color-ink-soft); }
.kit-tile__facts { display: flex; flex-direction: column; gap: 16px; font-size: 15px; line-height: 1.4; padding-top: 12px; }
.kit-tile__intro { font-weight: 700; }
.kit-tile__prices { display: flex; flex-direction: column; padding-top: 4px; }
.kit-tile__price { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 8px 0; }
.kit-tile__price dt { font-size: 17px; font-weight: 600; line-height: 1.4; }
.kit-tile__price-note { font-size: 14px; font-weight: 400; }
.kit-tile__price dd { font-size: 28px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.kit-tile__price--subsidy dd { font-size: 21px; }
.kit-tile__specs { border-top: 1px solid var(--color-ink); }
.kit-tile__specs-toggle {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 4px;
  font-size: 16px;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}
.kit-tile__specs-toggle::-webkit-details-marker { display: none; }
.kit-tile__specs-toggle span { font-size: 20px; transition: transform 0.2s; }
.kit-tile__specs[open] .kit-tile__specs-toggle span { transform: rotate(45deg); }
.kit-tile__specs .kit-tile__facts { padding: 0 4px 12px; }
.kit-tile__rows { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.kit-tile__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 17px; line-height: 1.3; }
.kit-tile__status { flex: 0 0 auto; width: 21px; height: 26px; }
.kit-tile__status--excluded { width: 17px; height: 17px; }
.kit-tile__btn { margin-top: auto; padding: 14px 18px; font-size: 16.8px; }

/* Product page (kit detail): gallery beside the product facts, buy box with the
   prices and CTA (review round 3, solago-style split). */
.product { display: grid; grid-template-columns: 2fr 3fr; gap: 48px; align-items: start; }
.product__gallery { display: flex; flex-direction: column; gap: 12px; }
.product__stage { position: relative; aspect-ratio: 1; background: var(--color-surface); border-radius: var(--radius-l); overflow: hidden; }
/* #2237: absolutely positioned stack, so an image's intrinsic height can never
   grow the square stage and get clipped at the bottom. */
.product__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.product__image.is-active { opacity: 1; }
.product__thumbs { display: flex; flex-wrap: wrap; gap: 10px; }
.product__thumb {
  width: 76px;
  height: 76px;
  border-radius: var(--radius-s);
  background: var(--color-surface-soft);
  padding: 8px;
  opacity: 0.55;
  transition: opacity 0.2s, background-color 0.2s;
}
.product__thumb:hover { opacity: 1; }
.product__thumb.is-active { background: var(--color-accent-soft); opacity: 1; }
.product__thumb img { width: 100%; height: 100%; object-fit: contain; }
.product__info { display: flex; flex-direction: column; gap: 20px; }
.product__title { font-size: clamp(28px, 2.4vw, 40px); font-weight: 700; line-height: 1.2; margin: 0; }
.product__subhead { font-size: 20px; line-height: 1.5; color: var(--color-ink-soft); }
.product__buy { background: var(--color-surface-soft); border-radius: var(--radius-l); padding: 20px 24px; }
.product__prices { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.product__price-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.product__price-row dt { font-size: 15px; line-height: 1.4; }
.product__price-row dd { font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; margin: 0; }
/* Price pills, shared style language: yellow for the full price, light green for
   the after-subsidy price. The homepage kit cards mirror this pair. */
.price-pill { display: inline-block; border-radius: var(--radius-xs); padding: 3px 12px; color: inherit; }
.price-pill--accent { background: var(--color-accent); }
.price-pill--positive { background: var(--color-positive-tint); }
.product__cta { width: 100%; padding: 13px 24px; font-size: 17px; }
.product__trust { margin-top: -8px; text-align: center; font-size: 13px; color: var(--color-ink-soft); }
.product__note { margin-top: 14px; font-size: 13px; line-height: 1.45; color: var(--color-ink-soft); }
.product__note summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; cursor: pointer; font-weight: 600; list-style: none; }
.product__note summary::-webkit-details-marker { display: none; }
.product__note summary::after { content: "+"; font-weight: 700; }
.product__note[open] summary::after { content: "\2212"; }
.product__note[open] summary { margin-bottom: 6px; }
.product__note p { margin: 0; }
.product__includes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.product__includes-label { font-weight: 600; font-size: 14px; }
.product__include { display: inline-flex; align-items: center; gap: 6px; background: var(--color-positive-tint); border-radius: var(--radius-pill); padding: 5px 12px; font-size: 14px; line-height: 1.3; text-decoration: none; color: inherit; }
.product__include:hover { filter: brightness(0.96); }
.product__include img { flex-shrink: 0; }
.product__section-title { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; }
.product__intro { margin: 0; font-size: 16px; line-height: 1.55; }
.spec { display: flex; flex-direction: column; margin: 0; }
.spec__row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 8px 14px; font-size: 15px; border-radius: var(--radius-s); }
.spec > .spec__row:nth-child(odd) { background: var(--color-surface-soft); }
.spec__row dt { line-height: 1.4; color: var(--color-ink-soft); }
.spec__row dd { font-weight: 600; line-height: 1.4; text-align: right; margin: 0; }
.spec-more { margin-top: 4px; }
.spec-more summary { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 8px 14px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none; border-radius: var(--radius-s); }
.spec-more summary::-webkit-details-marker { display: none; }
.spec-more summary::after { content: "+"; font-weight: 700; }
.spec-more[open] summary::after { content: "\2212"; }
.spec-more summary:hover { background: var(--color-accent-soft); }
.spec__note { font-size: 0.875rem; line-height: 1.45; color: var(--color-ink-soft); margin-top: 8px; }

/* Case-study inspiration cards (kit overview) reuse the homepage case card */
.inspiration-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; width: 100%; margin: 48px 0; }
.inspiration { display: block; text-decoration: none; color: inherit; }

/* Detail heroes (kit, package, case study) */
.detail-hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; align-items: start; }
.detail-hero__copy { display: flex; flex-direction: column; gap: 32px; }
.detail-hero__copy--kit { gap: 16px; }
.detail-hero__title { font-size: 4.4vw; font-weight: 700; line-height: 1.2; margin: 0 0 10px; }
.catalog-subheading { font-size: 30px; line-height: 1.5; }
.detail-hero__intro { font-size: 20px; line-height: 1.5; margin-top: 0.25em; }
.detail-hero__image { display: block; width: 100%; border-radius: var(--radius-l); }
.detail-hero__image--kit { aspect-ratio: 1; object-fit: contain; }

/* Cost card */
.cost__card { background: var(--color-accent); border-radius: var(--radius-l); padding: 24px var(--space-lg) 16px; }
.cost__heading { font-size: 30px; line-height: 1.5; }
.cost__heading--bold { font-weight: 600; }
.cost__grid { display: grid; grid-template-columns: 0.8fr 1fr; gap: 160px; align-items: start; }
.cost__column { display: flex; flex-direction: column; }
.cost__row { display: flex; justify-content: space-between; align-items: center; gap: 80px; }
.cost__row dt, .cost__row dd { font-size: 20px; line-height: 1.5; margin-top: 0.25em; }
.cost__row--total { align-items: center; }
.cost__row .cost__price { font-size: 3vw; line-height: 1.5; white-space: nowrap; }
.cost__cta { display: flex; justify-content: center; margin-top: 64px; }
.cost__note { font-size: 0.875rem; line-height: 1.4; text-align: center; padding: 15px 25px; }

/* Package rows on the kit detail: always-open disclosure rows */
.accordion--catalog { padding-top: 0; font-size: 20px; line-height: 1.4; }
.accordion--catalog .accordion__title { font-size: 24px; line-height: 1.5; }
.accordion__status { display: flex; align-items: center; gap: 24px; flex: 0 0 auto; }
.accordion__status img { width: 21px; height: 26px; }
.accordion--catalog .accordion__body { padding: 0 25px 15px 40px; }

/* Mission (yellow closing section) */
.mission { background: var(--color-accent); padding: 64px 0; }
.mission__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; text-align: center; }
.mission__heading { font-size: var(--text-h2); font-weight: 700; line-height: 1.2; max-width: 960px; margin: 0; }
.mission__text { font-size: 20px; line-height: 1.5; max-width: 736px; }

/* Case-study overview */
.cases-hero {
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 64px 0;
  background: linear-gradient(var(--color-overlay-light), var(--color-overlay-light)),
    url("/static/img/catalog-bg-case-studies.avif") center / cover no-repeat;
  color: var(--color-surface);
  text-align: center;
}
.cases-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 80vw; }
.cases-hero__title { font-size: 4.4vw; font-weight: 700; line-height: 1.2; }
.cases-hero__lede { font-size: 20px; line-height: 1.5; max-width: 864px; }
.case-story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 48px 0; }
.case-story-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-l);
  padding-top: 64px;
  color: var(--color-surface);
  text-decoration: none;
}
.case-story-card::before { content: ""; position: absolute; inset: 0; background: var(--color-overlay); z-index: 1; }
.case-story-card__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.case-story-card__info { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-xs); padding: 24px; }
.case-story-card__name { font-size: 30px; font-weight: 700; line-height: 1.4; }
.case-story-card__row { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.case-story-card__label { font-size: 20px; font-weight: 700; line-height: 1.4; }
.case-story-card__value { font-size: 20px; line-height: 1.4; }
.case-story-card__price { font-size: 2.4vw; line-height: 1.4; white-space: nowrap; }

/* Case-study detail */
.gallery { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 32px; scroll-snap-type: x proximity; }
.gallery__image { flex: 0 0 auto; width: 416px; height: 416px; object-fit: cover; border-radius: var(--radius-l); scroll-snap-align: start; }
.project-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: stretch; }
.project-block { display: flex; flex-direction: column; }
.project-block__head { display: flex; align-items: center; gap: 16px; }
.project-block__icon { width: 39px; height: auto; }
.project-block__list { display: grid; grid-template-columns: 0.6fr 1fr; gap: var(--space-xs); margin-top: 32px; font-size: 20px; line-height: 1.5; }
.project-block__image { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-l); }

@media screen and (max-width: 991px) {
  .kit-grid { grid-template-columns: 1fr; gap: 40px; }
  .detail-hero, .product { grid-template-columns: 1fr; }
  .cost__grid { grid-template-columns: 1fr; gap: 16px; }
  .case-story-grid { grid-template-columns: 1fr; max-width: 415px; margin-left: auto; margin-right: auto; }
  .case-story-card__price { font-size: 4vw; }
  .inspiration-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: 1fr; }
  .project-block__list { grid-template-columns: 0.4fr 1fr; }
}

@media screen and (max-width: 767px) {
  .kit-tile { padding: 20px; }
  .kit-tile__price dt { font-size: 15px; }
  .kit-tile__price dd { font-size: 24px; }
  .kit-tile__row { font-size: 15px; }
  .detail-hero__title { font-size: 6vw; }
  .catalog-subheading { font-size: 3.6vw; }
  .detail-hero__intro, .rich--lg, .cost__row dt, .cost__row dd, .mission__text, .cases-hero__lede, .project-block__list, .accordion--catalog { font-size: 16px; }
  .cost__card { padding: 40px; }
  .cost__row .cost__price { font-size: 3vw; }
  .accordion--catalog .accordion__title { font-size: 3.6vw; }
  .gallery__image { width: 320px; height: 320px; }
  .case-story-card__price { font-size: 6vw; }
}

@media screen and (max-width: 479px) {
  .catalog-title, .mission__heading { font-size: 6vw; }
  .detail-hero__title { font-size: 10vw; }
  .catalog-subheading, .accordion--catalog .accordion__title { font-size: 6vw; }
  .cost__card { padding: var(--space-md); }
  /* The published page drops to 12px copy and a 3vw price here; readability first keeps
     16px and 24px. */
  .cost__row .cost__price { font-size: 24px; }
  .product__buy { padding: 16px; }
  .spec__row, .spec-more summary { gap: 16px; padding: 8px 10px; }
  .case-story-grid { max-width: none; }
  .case-story-card { padding: 80px 16px 16px; }
  .case-story-card__price { font-size: 8vw; }
  .gallery__image { width: 256px; height: 256px; }
  .accordion--catalog .accordion__toggle { flex-direction: row; text-align: left; align-items: baseline; }
  .accordion--catalog .accordion__icon { display: none; }
}