/* Variante a, "Ziffern": Liste bleibt Liste, die Kennzahl führt. */

:root {
  --a-fig: clamp(3.25rem, 5.2vw, 4.75rem);
  --a-hero-fig: clamp(4.25rem, 7.6vw, 6.75rem);
  --a-ls: 1;                   /* Logo-Skalierung, mobil kleiner */
  --a-col4: calc(25% + .5rem); /* Beginn Spalte 4 im 12er-Raster */
}

/* ---------- Ziffern ---------- */
.a-num, .case-kpi .kv {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
/* Akzent nur auf dem vorangestellten Plus */
.a-plus {
  color: var(--accent);
  font-weight: 400;
  font-size: .7em;
  vertical-align: .22em;
  margin-right: .04em;
  letter-spacing: 0;
}
.a-pct {
  font-weight: 500;
  font-size: .5em;
  margin-left: .06em;
  letter-spacing: 0;
}

/* ---------- Logos: je Logo eigene Höhe, gleiche Tintenfläche ---------- */
.a-lg-xxl-parfum  { --a-h: 2.62rem; }
.a-lg-saemereien  { --a-h: 2.3rem; }
.a-lg-lemali      { --a-h: 1.88rem; }
.a-lg-liini       { --a-h: 2.4rem; }
.a-lg-reka        { --a-h: 2.85rem; }

/* ---------- Liste ---------- */
.caseteaser { border-top: 1px solid var(--ink); margin-inline: calc(-1 * var(--s2)); }

.ct-row {
  position: relative;
  margin-inline: 0;
  grid-template-rows: auto 1fr;
  align-items: start;
  row-gap: var(--s2);
  padding-block: 1.6rem;
  transition: background .2s;
}
.ct-row:hover { background: var(--recess); }
.ct-row:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  background: var(--recess);
}

.ct-logo.a-lg {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  height: calc(var(--a-fig) * .86);
  display: flex;
  align-items: center;
}
.ct-logo.a-lg img {
  height: calc(var(--a-h, 2.2rem) * var(--a-ls));
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: .88;
}

.ct-fig {
  grid-column: 3 / 6;
  grid-row: 1 / 3;
  font-size: inherit;
  letter-spacing: 0;
  line-height: 1;
}
.ct-fig .a-num {
  display: block;
  font-size: var(--a-fig);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .86;
  color: var(--ink);
  transition: color .2s;
  white-space: nowrap;
}
.ct-fig .u {
  margin-top: .75rem;
  max-width: 34ch;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

.ct-teaser {
  grid-column: 6 / 12;
  grid-row: 1;
  padding-top: .2rem;
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.5;
  max-width: 42ch;
  text-wrap: pretty;
}

/* Klick-Hinweis unter dem Teaser, in Akzent, auf Höhe der Zeitraum-Zeile */
.ct-more {
  grid-column: 6 / 12;
  grid-row: 2;
  align-self: end;
  justify-self: start;
  color: var(--accent);
}
.ct-more .arw {
  display: inline-block;
  transition: transform .25s;
}
.ct-row:hover .a-num,
.ct-row:focus-visible .a-num { color: var(--accent); }
.ct-row:hover .ct-more,
.ct-row:focus-visible .ct-more { color: var(--accent-deep); }
.ct-row:hover .ct-more .arw,
.ct-row:focus-visible .ct-more .arw { transform: translateX(6px); }

@media (width <= 880px) {
  :root { --a-ls: .86; }
  .caseteaser { margin-inline: 0; }
  .ct-row {
    padding-inline: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 0;
    padding-block: var(--s3) var(--s2);
  }
  .ct-logo.a-lg, .ct-fig, .ct-teaser, .ct-more { grid-column: 1; grid-row: auto; }
  .ct-logo.a-lg { height: 2.75rem; margin-bottom: var(--s2); }
  .ct-fig { margin-bottom: var(--s2); }
  .ct-fig .u { margin-top: .6rem; max-width: none; }
  .ct-teaser { max-width: none; padding-top: 0; font-size: 1rem; }
  .ct-more {
    min-height: 44px;
    margin-top: .25rem;
    font-size: .75rem;
  }
  .ct-more .arw { font-size: 1rem; }
}

/* /cases: Seitenkopf und Abschnittskopf enger, damit die Liste früher beginnt */
.page-head > .sec { padding-block: var(--s4) var(--s3); }
.page-head ~ #cases > .sec { padding-top: var(--s4); }
.page-head ~ #cases .sec-head { margin-bottom: var(--s3); }
.page-head .sec-head { margin-bottom: var(--s2); }
@media (width > 880px) { .page-head .sec-head .h2 { grid-column: 1 / 10; } }

/* ---------- Case-Seite: Hero mit Hauptzahl ---------- */
.case-hero.a-hero { padding-bottom: var(--s4); }
.a-hero .case-brand {
  height: calc(var(--a-h, 1.6rem) * var(--a-ls) * .9);
  width: auto;
  margin-bottom: var(--s3);
}
.a-hero .case-h1 { max-width: 17ch; }
.a-hero .tech { max-width: 46ch; text-wrap: pretty; }

.a-hero-fig { margin-top: var(--s4); }
.a-hero-fig .case-kpis {
  margin-top: 0;
  display: block;
  border-top: 1px solid var(--ink);
}
.a-hero-fig .case-kpi,
.a-hero-fig .case-kpi + .case-kpi {
  padding: var(--s2) 0;
  border-left: 0;
  border-bottom: 1px solid var(--hairline);
}
/* Hauptzahl */
.a-hero-fig .case-kpi:first-child { display: block; padding: var(--s3) 0; }
.a-hero-fig .case-kpi:first-child .kv {
  font-size: var(--a-hero-fig);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: .84;
  color: var(--ink);
}
.a-hero-fig .case-kpi:first-child .kv sup {
  font-size: .2em;
  letter-spacing: 0;
  margin-left: -.1em;
  vertical-align: top;
  top: 2.1em;
}
.a-hero-fig .case-kpi:first-child .kl {
  margin-top: var(--s3);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.a-hero-fig .case-kpi:first-child .ks {
  margin-top: .35rem;
  max-width: 44ch;
  font-size: .875rem;
  line-height: 1.5;
  text-wrap: pretty;
}
/* weitere Kennzahlen als Bilanzzeile: Wert links auf derselben Achse wie die Hauptzahl */
.a-hero-fig .case-kpi:not(:first-child) {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  grid-template-areas: "kv kl" "kv ks";
  column-gap: var(--s2);
  align-items: baseline;
}
.a-hero-fig .case-kpi:not(:first-child) .kv {
  grid-area: kv;
  font-size: clamp(1.5rem, 2.2vw, 1.875rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--ink);
}
.a-hero-fig .case-kpi:not(:first-child) .a-plus { font-size: .85em; vertical-align: .06em; }
.a-hero-fig .case-kpi:not(:first-child) .kl { grid-area: kl; margin-top: 0; font-size: .95rem; }
.a-hero-fig .case-kpi:not(:first-child) .ks { grid-area: ks; margin-top: .15rem; }
.a-hero-fig .case-kpi:last-child:not(:first-child) { border-bottom: 0; padding-bottom: 0; }
.a-hero-fig .case-kpi-note { margin-top: var(--s2); max-width: 52ch; font-size: .8125rem; text-wrap: pretty; }

/* Fakten (LIINI, REKA) als Zeile unter dem Hero */
.a-hero .case-facts { margin-top: var(--s4); border-top: 1px solid var(--ink); }

@media (width > 1000px) {
  /* eine Achse: Kennzahlen-Linie auf Höhe der Eyebrow */
  .case-hero.a-hero {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--s3);
    align-items: start;
  }
  .case-hero.a-hero > .case-brand { grid-column: 1 / -1; grid-row: 1; }
  .case-hero.a-hero > .a-hero-main { grid-column: 1 / 8; grid-row: 2; }
  .case-hero.a-hero > .a-hero-fig { grid-column: 8 / 13; grid-row: 2; margin-top: .3rem; }
  .case-hero.a-hero > .case-facts {
    grid-column: 1 / 13;
    grid-row: 3;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    column-gap: var(--s3);
  }
  .a-hero .case-facts > div {
    display: block;
    border-bottom: 0;
    padding-block: var(--s2) 0;
  }
  .a-hero .case-facts dt { margin-bottom: .3rem; font-size: .8125rem; }
  .a-hero .case-facts dd { font-size: .875rem; }
}

/* ---------- Case-Seite: Satzspiegel ---------- */
.case-page p, .case-page li, .case-page .lead { text-wrap: pretty; }

@media (width > 1000px) {
  .case-tldr,
  section.case-prose {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--s3);
    max-width: none;
  }
  .case-tldr .label { grid-column: 1 / 4; padding-top: .45rem; }
  .case-tldr .lead { grid-column: 4 / 12; max-width: 52ch; margin-top: 0 !important; }

  section.case-prose h3 { grid-column: 1 / 4; margin: 0; padding-top: .15rem; }
  section.case-prose > :not(h3) { grid-column: 4 / 11; }
  section.case-prose p { max-width: 64ch; }
  section.case-prose h3:not(:first-child),
  section.case-prose h3:not(:first-child) + p { margin-top: var(--s4); }

  .case-page p.case-prose,
  .case-page .cfig,
  .case-page .case-table,
  .case-page .case-deep,
  .case-page .case-shot,
  .case-page .case-cta,
  .case-page .case-meta { margin-left: var(--a-col4); }
  .case-page p.case-prose { max-width: 64ch; }
  .case-page section.case-prose .case-deep { margin-left: 0; }
  .case-page .case-cta { margin-right: calc(100% / 12); }
}
.case-prose h3 { font-size: 1.0625rem; letter-spacing: -.005em; }
.case-page section.case-prose { padding-top: var(--s3); }
.case-page .a-hero + .case-prose { margin-top: var(--s2); }
.case-page .case-tldr + .case-prose { border-top: 0; margin-top: 0; }

/* Maßnahmen als Zeitleiste (LIINI, REKA) */
.case-steps.levers { border-top: 0; margin-top: var(--s3); }
.case-steps .lever {
  position: relative;
  border-bottom: 0;
  padding-block: 0 var(--s4);
  row-gap: .35rem;
}
.case-steps .lever-body { display: contents; }
.case-steps .lever .label {
  grid-column: 1 / 4;
  grid-row: 1 / span 3;
  margin: 0;
  padding: .3rem 2.25rem 0 0;
  text-align: right;
  color: var(--ink);
  font-size: .75rem;
}
.case-steps .lever .idx { grid-column: 4 / 11; grid-row: 1; padding-top: .3rem; }
.case-steps .lever .h3 { grid-column: 4 / 11; grid-row: 2; margin: 0; color: var(--ink); font-weight: 600; }
.case-steps .lever p { grid-column: 4 / 11; grid-row: 3; max-width: 60ch; }
/* Linie und Punkt an der Spaltenkante */
.case-steps .lever::before {
  content: "";
  position: absolute;
  left: calc(var(--a-col4) - 1rem - .5px);
  top: .85rem;
  bottom: -.85rem;
  border-left: 1px solid var(--hairline);
}
.case-steps .lever:last-child::before { bottom: auto; height: 0; }
.case-steps .lever::after {
  content: "";
  position: absolute;
  left: calc(var(--a-col4) - 1rem - 4px);
  top: .55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ground);
  border: 1.5px solid var(--accent);
  box-sizing: border-box;
}
.case-steps .lever:first-child::after { background: var(--accent); }

@media (width <= 1000px) {
  .case-steps .lever {
    display: flex;
    flex-direction: column;
    padding: 0 0 var(--s3) 1.5rem;
  }
  .case-steps .lever .label { order: -1; display: block; margin-bottom: .35rem; padding: 0; text-align: left; }
  .case-steps .lever .idx { display: none; }
  .case-steps .lever .h3 { margin-bottom: var(--s1); }
  .case-steps .lever::before { left: 4px; top: .7rem; bottom: -.4rem; }
  .case-steps .lever::after { left: 0; top: .3rem; }
  .case-page .a-hero + .case-prose { border-top: 0; padding-top: 0; }
}

/* Zitat als Pull Quote */
.case-page .case-quote {
  max-width: none;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--ink);
}
.case-page .case-quote p {
  max-width: 38ch;
  font-size: clamp(1.375rem, 2.3vw, 2rem);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.02em;
  text-indent: -.42em;
}
.case-page .case-quote-who { margin-top: var(--s3); }

/* Modal-iframe: Hero etwas enger */
.embedded .case-hero.a-hero { padding-block: var(--s3); }