/* Corvint — Preview build
 * Tokens & Basis aus Design-Handoff (design_handoff_corvint_startseite/README.md).
 * Alle Werte 1:1 aus dem Handoff; keine Radien, keine Schatten.
 */

/* Poppins — lokal eingebunden (DSGVO) */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/poppins-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/poppins-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/poppins-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink: #2f2325;
  --blue: #0e3eff;
  --blue-hover: #0a31cc;
  --blue-tint: #f1f4ff;
  --blue-tint-2: #e3eaff;
  --slate: #5b6470;
  --slate-light: #9aa1ab;
  --paper: #fafafa;
  --white: #ffffff;
  --rule: #e4e2e3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
[id] {
  scroll-margin-top: 92px;
}

body {
  margin: 0;
  background: var(--paper);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  text-wrap: pretty;
}

a {
  color: var(--blue);
  text-decoration: none;
  border-bottom: 1px solid var(--blue);
  transition: color 150ms ease-out, border-color 150ms ease-out;
}
a:hover,
a:focus-visible {
  color: var(--blue-hover);
  border-bottom-color: var(--blue-hover);
}
a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  border-bottom: 0;
  z-index: 100;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  color: var(--paper);
}

/* Container */
.wrap {
  max-width: 1312px;
  margin: 0 auto;
  width: 100%;
}
.wrap--hero {
  max-width: 1440px;
}

/* Header */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  padding: 20px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  position: sticky;
  top: 0;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 0;
  color: var(--ink);
}
.brand:hover {
  color: var(--ink);
}
.brand__logo {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.raven {
  flex: none;
}
.raven--build .raven__body {
  animation: bodyRise 700ms ease-out both;
  transform-origin: center;
}
.raven--build .raven__beak {
  animation: beakIn 700ms ease-out both;
}
@keyframes bodyRise {
  0% {
    transform: translateY(12px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes beakIn {
  0%,
  30% {
    transform: translateX(-14px);
  }
  100% {
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .raven--build .raven__body,
  .raven--build .raven__beak {
    animation: none;
  }
}

.nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 15px;
}
.nav__link {
  color: var(--ink);
  border-bottom: 0;
  font-weight: 400;
}
.nav__link:hover,
.nav__link:focus-visible {
  color: var(--blue);
}
.nav__link[aria-current="page"] {
  color: var(--blue);
}
.nav__close,
.menu-toggle {
  display: none;
  border: 0;
  background: transparent;
  padding: 6px;
  color: var(--ink);
  cursor: pointer;
}
.menu-toggle:hover,
.menu-toggle:focus-visible,
.nav__close:hover,
.nav__close:focus-visible {
  color: var(--blue);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 16px 26px;
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 150ms ease-out, border-color 150ms ease-out,
    color 150ms ease-out;
  border-bottom: 0;
  text-align: center;
}
.btn--primary {
  background: var(--blue);
  color: var(--white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--blue-hover);
  color: var(--white);
}
.btn--secondary {
  border: 2px solid var(--ink);
  padding: 14px 26px;
  color: var(--ink);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.btn--small {
  font-size: 15px;
  padding: 11px 18px;
}
.btn--on-dark {
  background: var(--white);
  color: var(--blue);
}
.btn--on-dark:hover,
.btn--on-dark:focus-visible {
  background: var(--paper);
  color: var(--blue-hover);
}
.btn--ghost-on-dark {
  border: 2px solid var(--white);
  color: var(--white);
  padding: 14px 26px;
}
.btn--ghost-on-dark:hover,
.btn--ghost-on-dark:focus-visible {
  background: var(--white);
  color: var(--blue);
}

/* Hero */
.hero {
  padding: 84px 64px 72px;
  margin: 0 auto;
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.hero__title {
  font-size: 58px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hero__lead {
  font-size: 20px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 600px;
}
.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.hero__note {
  font-size: 14px;
  color: var(--slate);
}
.hero__segments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: baseline;
  margin-top: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}
.hero__segments-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  margin-right: 4px;
}

.case-card {
  border: 2px solid var(--ink);
  background: var(--white);
}
.case-card__head {
  border-bottom: 1px solid var(--rule);
  padding: 16px 24px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.case-card__body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.case-card__title {
  font-size: 22px;
  font-weight: 600;
}
.bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bar__row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--slate);
}
.bar__value {
  font-weight: 600;
  color: var(--ink);
}
.bar__value--blue {
  color: var(--blue);
}
.bar__track {
  height: 16px;
  background: var(--rule);
}
.bar__fill {
  height: 100%;
  background: var(--ink);
}
.bar__fill--blue {
  background: var(--blue);
  transition: width 200ms ease-out;
}
.stats {
  display: flex;
  gap: 32px;
  border-top: 2px solid var(--ink);
  padding-top: 18px;
}
.stat__value {
  font-size: 30px;
  font-weight: 600;
}
.stat__label {
  font-size: 14px;
  color: var(--slate);
}
.footnote {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}

/* Section */
.section {
  padding: 84px 64px;
}
.section--white {
  background: var(--white);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.section--paper {
  background: var(--paper);
}
.section--top-rule {
  border-top: 1px solid var(--rule);
}
.section__inner {
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}
.section__head-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 760px;
}
.section__title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.section__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--slate);
}

/* Legende Mensch/KI */
.legend {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 14px;
  color: var(--slate);
  padding-bottom: 4px;
}
.legend__item {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reiter (Fall-Umschalter) */
.tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  background: var(--rule);
}
.tab {
  border: 0;
  border-top: 4px solid var(--rule);
  background: var(--paper);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  text-align: left;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.tab[aria-selected="true"] {
  background: var(--white);
  border-top-color: var(--blue);
}
.tab__name {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
}
.tab__who {
  font-size: 15px;
  color: var(--slate);
  line-height: 1.45;
}

/* Prozessschritte */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.step {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.step--ki {
  border-color: var(--blue);
  background: var(--blue-tint);
}
.step__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.step__n,
.step__who {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--slate);
}
.step--ki .step__who {
  color: var(--blue);
}
.step__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
}
.step__body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}

/* Auswertungsband */
.summary {
  border: 2px solid var(--ink);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr);
}
.summary__cell {
  padding: 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-right: 1px solid var(--rule);
}
.summary__cell:last-child {
  border-right: 0;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.eyebrow--blue {
  color: var(--blue);
}
.effort {
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.effort__old {
  font-size: 34px;
  font-weight: 600;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  color: var(--slate);
}
.effort__new {
  font-size: 44px;
  font-weight: 600;
  color: var(--blue);
}
.monthly {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.monthly__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.monthly__row + .monthly__row {
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.monthly__label {
  font-size: 15px;
  color: var(--slate);
}
.monthly__value {
  font-size: 26px;
  font-weight: 600;
}
.monthly__value--blue {
  color: var(--blue);
}
.assumptions__item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-top: 1px solid var(--rule);
  padding-top: 10px;
}
.assumptions__item:first-child {
  border-top: 0;
  padding-top: 0;
}
.beak {
  flex: none;
  margin-top: 6px;
}
.assumptions__text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}

/* Bekannt vor — Problemliste + Antwortkarte */
.problems {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 44px;
  align-items: start;
}
.problems__list {
  display: flex;
  flex-direction: column;
}
.problem {
  border: 0;
  border-top: 1px solid var(--rule);
  border-left: 4px solid transparent;
  background: transparent;
  padding: 20px 22px;
  display: flex;
  gap: 18px;
  align-items: baseline;
  text-align: left;
  transition: background 150ms ease-out, border-color 150ms ease-out;
}
.problem:first-child {
  border-top: 2px solid var(--ink);
}
.problem:last-child {
  border-bottom: 2px solid var(--ink);
}
.problem[aria-selected="true"] {
  background: var(--white);
  border-left-color: var(--blue);
}
.problem__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
}
.problem__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
}
.answer {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 32px 36px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.answer__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.answer__block + .answer__block {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
}
.answer__text {
  font-size: 18px;
  line-height: 1.6;
}
.answer__text--muted {
  color: var(--slate);
}

/* Vier Seiten */
.dimensions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.dimension {
  border-top: 3px solid var(--ink);
  padding: 22px 28px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dimension + .dimension {
  padding-left: 28px;
}
.dimension:last-child {
  padding-right: 0;
}
.dimension__label {
  font-size: 13px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dimension__beak {
  flex: none;
}
.dimension__body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate);
}
.principle-row {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 48px;
  border-top: 2px solid var(--ink);
  padding-top: 26px;
  align-items: start;
}
.principle-row__lead {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.principle-row__body {
  font-size: 17px;
  line-height: 1.6;
  color: var(--slate);
}

/* Der Weg dahin (Module) */
.modules {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.module {
  background: var(--white);
  border: 2px solid var(--ink);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.module__head {
  display: flex;
  align-items: center;
  gap: 12px;
}
.module__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--slate);
}
.module__title {
  font-size: 22px;
  font-weight: 600;
}
.module__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate);
}

/* Grundsätze (dunkel) */
.section--dark {
  background: var(--ink);
  padding: 84px 64px;
}
.principles {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
.principles__intro-title {
  font-size: 42px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--paper);
  letter-spacing: -0.01em;
}
.principles__intro-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--slate-light);
}
.principles__list {
  display: flex;
  flex-direction: column;
}
.principle {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--slate);
}
.principle:last-child {
  border-bottom: 0;
}
.principle__n {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate);
  width: 26px;
}
.principle__text {
  font-size: 20px;
  font-weight: 500;
  color: var(--paper);
  line-height: 1.35;
}

/* Ansprechpartnerin */
.person {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: center;
}
.person__portrait {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.person__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.person__portrait-caption {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.person__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.person__title {
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.person__lead {
  font-size: 18px;
  line-height: 1.6;
  color: var(--slate);
}
.person__facts {
  display: flex;
  gap: 40px;
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  flex-wrap: wrap;
}
.person__fact-value {
  font-size: 19px;
  font-weight: 600;
}
.person__fact-label {
  font-size: 14px;
  color: var(--slate);
}

/* CTA blau */
.cta {
  background: var(--blue);
  padding: 88px 64px;
}
.cta__inner {
  display: flex;
  gap: 64px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cta__text {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 720px;
}
.cta__title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--white);
  letter-spacing: -0.01em;
}
.cta__lead {
  font-size: 19px;
  line-height: 1.6;
  color: var(--white);
  opacity: 0.9;
}
.cta__actions {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Footer */
.site-footer {
  background: var(--ink);
  padding: 52px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.site-footer__top {
  display: flex;
  gap: 64px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 340px;
}
.site-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.site-footer__brand-word {
  font-size: 20px;
  font-weight: 600;
  color: var(--paper);
}
.site-footer__desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate-light);
}
.site-footer__cols {
  display: flex;
  gap: 56px;
  font-size: 15px;
  color: var(--paper);
  flex-wrap: wrap;
}
.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.site-footer__col a {
  color: var(--paper);
  border-bottom: 0;
}
.site-footer__col a:hover,
.site-footer__col a:focus-visible {
  color: var(--blue-tint);
}
.site-footer__legal {
  border-top: 1px solid var(--slate);
  padding-top: 18px;
  font-size: 14px;
  color: var(--slate-light);
}

/* -------------------------------------------------------------
 * Unterseiten-Muster: Sidebar mit Sprungnav + Content
 * ----------------------------------------------------------- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr);
  gap: 80px;
  max-width: 1312px;
  margin: 0 auto;
  padding: 48px 64px 96px;
}
.page__sidebar {
  position: sticky;
  top: 92px;
  align-self: start;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
}
.page__main {
  display: flex;
  flex-direction: column;
  gap: 96px;
  min-width: 0;
}

/* Sub-Hero (kompakter als Startseite) — optional mit Info-Karte rechts */
.sub-hero {
  padding: 56px 64px 32px;
  max-width: 1312px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.sub-hero--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 48px;
  align-items: start;
}
.sub-hero__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
@media (max-width: 900px) {
  .sub-hero--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.sub-hero__eyebrow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.sub-hero__title {
  font-size: 48px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.02em;
  max-width: 22ch;
}
.sub-hero__lead {
  font-size: 19px;
  line-height: 1.55;
  color: var(--slate);
  max-width: 62ch;
}
.sub-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

/* Anchor-Nav (vertikal, Desktop) */
.anchor-nav {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 12px 0;
}
.anchor-nav__label {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
  padding: 6px 4px 14px;
}
.anchor-nav__link {
  border: 0;
  padding: 10px 4px 10px 22px;
  font-size: 15px;
  color: var(--ink);
  text-align: left;
  position: relative;
  transition: color 150ms ease-out;
  display: block;
  line-height: 1.35;
}
.anchor-nav__link:hover,
.anchor-nav__link:focus-visible {
  color: var(--blue);
}
.anchor-nav__link[aria-current="location"] {
  color: var(--blue);
  font-weight: 500;
}
.anchor-nav__link[aria-current="location"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 8px;
  background: var(--blue);
  clip-path: polygon(0 20%, 100% 50%, 0 80%, 6% 50%);
}

/* Article-Section (numerierte Content-Blöcke)
 * Ruhig gehalten: Nummer klein als Zähler, Titel als Blickfang,
 * keine Trennbalken — Whitespace strukturiert.
 */
.article-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 100px;
}
.article-section__eyebrow {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  color: var(--slate);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.article-section__title {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.article-section__body {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  max-width: 66ch;
}
.article-section__body p + p {
  margin-top: 1em;
}
.article-section__body ul {
  list-style: none;
  padding-left: 0;
  margin: 14px 0;
}
.article-section__body li {
  position: relative;
  padding-left: 22px;
  margin: 10px 0;
}
.article-section__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
.article-section__body strong {
  font-weight: 600;
}
.article-section__body a {
  border-bottom-width: 1px;
}

/* Person-Row (Foto + Text nebeneinander im Content) */
.person-row {
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-bottom: 8px;
}
@media (max-width: 720px) {
  .person-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .person-row .person__portrait {
    max-width: 240px;
  }
}

/* Prozess-Kette (visueller Ablauf, vertikal) */
.step-chain {
  list-style: none;
  padding: 0;
  margin: 22px 0 8px;
  display: flex;
  flex-direction: column;
}
.step-chain__item {
  display: grid;
  grid-template-columns: 40px 24px 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 22px;
}
.step-chain__item:last-child {
  padding-bottom: 0;
}
.step-chain__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  padding-top: 4px;
}
.step-chain__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding-top: 4px;
}
.step-chain__dot {
  width: 12px;
  height: 12px;
  background: var(--ink);
  flex: none;
}
.step-chain__line {
  width: 1px;
  background: var(--rule);
  flex: 1;
  margin: 6px 0 -22px;
  min-height: 24px;
}
.step-chain__item:last-child .step-chain__line {
  display: none;
}
.step-chain__content {
  min-width: 0;
}
.step-chain__label {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 4px;
  color: var(--ink);
}
.step-chain__detail {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
@media (max-width: 720px) {
  .step-chain__item {
    grid-template-columns: 32px 18px 1fr;
    gap: 12px;
  }
  .step-chain__n {
    font-size: 11px;
  }
}

/* Rollen-Diagramm (Unsere / Eure Seite)
 * Zwei Spalten, jede mit Rollen-Karten (Person + Zuständigkeit)
 * plus Ressourcen-Bullets und ein hervorgehobener Kernsatz.
 */
.roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 24px 0 8px;
}
.roles__col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.roles__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  text-transform: uppercase;
  padding-bottom: 8px;
}
.role-card {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: start;
  border-top: 1px solid var(--rule);
  padding: 16px 0;
}
.role-card__icon {
  flex: none;
  padding-top: 2px;
}
.role-card__name {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.role-card__role {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.45;
  margin-top: 3px;
}
.roles__note {
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.roles__list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roles__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.roles__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
.roles__key {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--ink);
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
@media (max-width: 720px) {
  .roles {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* USP-Karten (Warum corvint) — fest 3-spaltig auf desktop, klarer rhythmus */
.usps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px 36px;
  margin: 28px 0 4px;
}
.usp {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.usp__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.usp__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.usp__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 900px) {
  .usps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }
}
@media (max-width: 600px) {
  .usps {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Wie-wir-arbeiten Prinzipien-Liste — nummer absolut, text normal im fluss */
.principles-list {
  counter-reset: princ;
  list-style: none;
  padding: 0;
  margin: 28px 0 8px;
  display: flex;
  flex-direction: column;
}
.principles-list li {
  counter-increment: princ;
  position: relative;
  padding: 24px 0 24px 68px;
  border-top: 1px solid var(--rule);
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
}
.principles-list li:first-child {
  border-top: 2px solid var(--ink);
}
.principles-list li::before {
  content: counter(princ, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 26px;
  font-size: 20px;
  font-weight: 600;
  color: var(--blue);
  line-height: 1;
  letter-spacing: -0.01em;
}
.principles-list li strong {
  display: block;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 6px;
  font-weight: 600;
  line-height: 1.3;
}
@media (max-width: 720px) {
  .principles-list li {
    padding: 20px 0 20px 44px;
  }
  .principles-list li::before {
    font-size: 16px;
    top: 22px;
  }
  .principles-list li strong {
    font-size: 17px;
  }
}

/* Person-Block mit Qualifikationen (Warum corvint) — grosseres portrait, luftiger */
.person-block {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
  max-width: 1120px;
  margin-top: 32px;
}
.person-block + .person-block {
  border-top: 1px solid var(--rule);
  padding-top: 48px;
  margin-top: 48px;
}
.person-block__portrait {
  margin: 0;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.person-block__portrait img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
}
.person-block__portrait-caption {
  padding: 12px 16px;
  border-top: 1px solid var(--rule);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--slate);
}
.person-block__icon-frame {
  border: 2px solid var(--ink);
  background: var(--paper);
  aspect-ratio: 4 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.person-block__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.person-block__name {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.person-block__role {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin-top: -14px;
}
.person-block__bio {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0;
  max-width: 62ch;
}
.qualifications {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.qual-block__label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.qual-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qual-block__list li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
}
.qual-block__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
@media (max-width: 900px) {
  .person-block {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .person-block__portrait,
  .person-block__icon-frame {
    max-width: 240px;
  }
}
@media (max-width: 720px) {
  .qualifications {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Kontakt-Zeilen (Warum corvint) */
.contact-list {
  list-style: none;
  padding: 0;
  margin: 20px 0 4px;
  display: grid;
  grid-template-columns: minmax(0, 180px) 1fr;
  gap: 8px 24px;
  align-items: baseline;
}
.contact-list dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 4px;
}
.contact-list dd {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
}
@media (max-width: 720px) {
  .contact-list {
    grid-template-columns: 1fr;
    gap: 4px 0;
  }
  .contact-list dt {
    margin-top: 12px;
  }
}

/* Mehrwert-Liste (Case-Card auf ki-beratung-b) */
.benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.benefit {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  align-items: start;
  padding: 14px 0;
  border-top: 1px solid var(--rule);
}
.benefit:first-child {
  border-top: 0;
  padding-top: 4px;
}
.benefit__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  padding-top: 3px;
}
.benefit__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 4px;
}
.benefit__body {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
  margin: 0;
}

/* Startseite: Outcomes / Ergebnisse (2x2 mit Titel + Body pro Kachel) */
.outcomes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 28px 0 0;
}
.outcome {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 14px;
  align-items: start;
}
.outcome__check {
  flex: none;
  margin-top: 4px;
}
.outcome__title {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 6px;
}
.outcome__body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 720px) {
  .outcomes {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .outcome {
    padding: 20px 22px;
  }
}

/* Startseite: Ausgangssituationen (nummer links, content rechts) */
.situations {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 20px 0 4px;
  max-width: 820px;
}
.situation {
  display: grid;
  grid-template-columns: 40px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: baseline;
}
.situation__n {
  grid-row: 1;
  grid-column: 1;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
}
.situation__title {
  grid-row: 1;
  grid-column: 2;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.situation__body {
  grid-row: 2;
  grid-column: 2;
  font-size: 14px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 480px) {
  .situation {
    grid-template-columns: 32px 1fr;
    column-gap: 12px;
  }
}

/* Startseite: Warum-jetzt auf dunklem grund (child-styles) */
.section--dark .section__title {
  color: var(--paper);
}
.section--dark .section__lead {
  color: var(--slate-light);
}
.section--dark .reason {
  border-top-color: var(--slate);
}
.section--dark .reason__title {
  color: var(--paper);
}
.section--dark .reason__body {
  color: var(--slate-light);
}

/* Aufklappbare Prozess-Kette (Weg-Sektion) */
.steps-collapse {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
}
.step-collapse {
  border-top: 1px solid var(--rule);
}
.step-collapse:last-child {
  border-bottom: 1px solid var(--rule);
}
.step-collapse > summary {
  padding: 16px 0;
  display: flex;
  align-items: baseline;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  transition: color 150ms ease-out;
}
.step-collapse > summary::-webkit-details-marker,
.step-collapse > summary::marker {
  display: none;
  content: "";
}
.step-collapse > summary:hover,
.step-collapse > summary:focus-visible {
  color: var(--blue);
}
.step-collapse__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  flex: none;
  width: 32px;
}
.step-collapse__label {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  line-height: 1.3;
}
.step-collapse__toggle {
  font-size: 20px;
  color: var(--slate);
  font-weight: 400;
  line-height: 1;
  transition: transform 150ms ease-out;
  flex: none;
}
.step-collapse[open] .step-collapse__toggle {
  transform: rotate(45deg);
}
.step-collapse__body {
  padding: 0 0 20px 48px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}

/* Startseite: Warum-jetzt-Sektion (3 Argumente) */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}
.reason {
  border-top: 2px solid var(--ink);
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reason__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
}
.reason__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
}
.reason__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
  margin: 0;
}
@media (max-width: 900px) {
  .reasons {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Startseite: Angebote-Karten */
.offers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.offer {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 32px 34px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.offer__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-transform: uppercase;
}
.offer__title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.offer__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--slate);
}
.offer__price {
  border-top: 1px solid var(--rule);
  padding-top: 14px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.offer__price-value {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}
.offer__price-note {
  font-size: 12px;
  color: var(--slate);
  letter-spacing: 0.06em;
}
.offer__fit {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding-top: 14px;
  margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.offer__fit-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--blue);
  text-transform: uppercase;
  flex: none;
}
.offer__fit-text {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}
.offer__link {
  margin-top: auto;
  padding-top: 4px;
}
.offer__link a {
  font-size: 15px;
  font-weight: 600;
  color: var(--blue);
  border-bottom: 1px solid var(--blue);
}
@media (max-width: 720px) {
  .offers {
    grid-template-columns: 1fr;
  }
}

/* Startseite: Ergebnis-Sektion (Text links, Karte rechts) */
.result-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 56px;
  align-items: center;
}
@media (max-width: 900px) {
  .result-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Startseite: Zahlen-Sektion (Text links, Case-Card rechts) */
.numbers-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px) {
  .numbers-section {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Was-wir-tun-Grid (Startseite): Prozess-Kette links, Ergebnis-Karte rechts */
.wwt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 56px;
  align-items: start;
}
.wwt-grid__main {
  min-width: 0;
}
.wwt-grid__hint {
  font-size: 15px;
  color: var(--slate);
  margin: 0 0 16px;
}
@media (max-width: 900px) {
  .wwt-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Section-Split: Titel links, Ergebnis-/Info-Karte rechts */
.section-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: 32px;
  align-items: start;
  margin-bottom: 4px;
}
.section-split > .article-section__title {
  margin: 0;
}
@media (max-width: 900px) {
  .section-split {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* Ergebnis-Karte (mit Häkchen) */
.result-card {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 20px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.result-card__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  text-transform: uppercase;
}
.result-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.result-card__list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink);
}
.result-card__check {
  flex: none;
  margin-top: 3px;
}

/* Crosscut (Querschnitts-Baustein, blau, neben oder unter prozess-kette) */
.crosscut {
  background: var(--blue-tint);
  padding: 22px 26px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Weg-grid: prozess-kette links, crosscut rechts (parallel) */
.weg-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 40px;
  align-items: start;
  max-width: 1000px;
}
.weg-grid > .crosscut {
  margin-top: 0;
  position: sticky;
  top: 24px;
}
@media (max-width: 900px) {
  .weg-grid {
    grid-template-columns: 1fr;
    gap: 24px;
    max-width: 820px;
  }
  .weg-grid > .crosscut {
    position: static;
  }
}
.crosscut__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-transform: uppercase;
}
.crosscut__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.crosscut__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Callout (eingefärbter Absatz, blue-tint) */
.callout {
  background: var(--blue-tint);
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 8px 0;
}
.callout__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-transform: uppercase;
}
.callout__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.callout__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.callout__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--blue);
}

/* Passt das zu euch (Gute Passung / Weniger Passung + Voraussetzungen) */
.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 8px;
}
.fit__card {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fit__card--yes {
  border: 2px solid var(--ink);
  background: var(--white);
}
.fit__card--no {
  border: 1px solid var(--rule);
  background: var(--paper);
}
.fit__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fit__card--yes .fit__label {
  color: var(--blue);
}
.fit__card--no .fit__label {
  color: var(--slate);
}
.fit__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.fit__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fit__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--slate);
}
.fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
.fit__card--yes .fit__list li::before {
  background: var(--blue);
  height: 2px;
  top: 0.55em;
}
@media (max-width: 720px) {
  .fit {
    grid-template-columns: 1fr;
  }
}

/* Voraussetzungen (Streifen unter der Passung) */
.prereq {
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  margin-top: 28px;
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 32px;
  align-items: start;
}
.prereq__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  padding-top: 4px;
}
.prereq__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prereq__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.prereq__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 1px;
  background: var(--slate);
}
@media (max-width: 720px) {
  .prereq {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* Modul-Karten: interne Steps + Preis-Fuss */
.module__steps {
  counter-reset: mstep;
  list-style: none;
  padding: 12px 0 0;
  margin: 4px 0 0;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module__steps li {
  font-size: 13px;
  line-height: 1.45;
  color: var(--slate);
  padding-left: 28px;
  position: relative;
  counter-increment: mstep;
}
.module__steps li::before {
  content: counter(mstep, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.module__price {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module__price-value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.module__price-note {
  font-size: 11px;
  color: var(--blue);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.module__price-note--muted {
  color: var(--slate);
}

/* Modul-Details (aufklappbar) */
.module__more {
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  margin-top: 4px;
}
.module__more > summary {
  padding: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 150ms ease-out;
}
.module__more > summary::-webkit-details-marker,
.module__more > summary::marker {
  display: none;
  content: "";
}
.module__more > summary::after {
  content: "+";
  color: var(--slate);
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
  transition: transform 150ms ease-out;
}
.module__more[open] > summary::after {
  transform: rotate(45deg);
}
.module__more > summary:hover,
.module__more > summary:focus-visible {
  color: var(--blue-hover);
}
.module__more .module__steps {
  padding-top: 10px;
  margin-top: 0;
  border-top: 0;
}

/* Roles-lean (schlankere Rollen-Darstellung) */
.roles-lean {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 20px 0 8px;
}
.roles-lean__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border-top: 1px solid var(--rule);
  padding-top: 16px;
}
.roles-lean__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--slate);
  text-transform: uppercase;
}
.roles-lean__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.roles-lean__list li {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.roles-lean__list li strong {
  font-weight: 600;
}
.roles-lean__foot {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
  margin: 6px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.roles-lean__persons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}
.roles-lean__person {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.roles-lean__person:first-child {
  border-top: 0;
  padding-top: 0;
}
.roles-lean__person-icon {
  flex: none;
}
.roles-lean__name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.roles-lean__desc {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.4;
  margin-top: 2px;
}
@media (max-width: 720px) {
  .roles-lean {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* Foerder-lean (schlanker als Kacheln) */
.foerder-lean {
  margin: 18px 0 8px;
  border-top: 1px solid var(--rule);
}
.foerder-lean__item {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
  display: grid;
  grid-template-columns: minmax(0, 220px) 1fr;
  gap: 24px;
  align-items: baseline;
}
.foerder-lean__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}
.foerder-lean__note {
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}
@media (max-width: 720px) {
  .foerder-lean__item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
}

/* Kompakte Preistabelle in Sektion "Preise und Förderung" */
.pricing {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  margin: 20px 0 8px;
}
.pricing__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
  gap: 20px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}
.pricing__name {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pricing__module {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.pricing__title {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.pricing__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.pricing__foerder {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--blue);
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing__foerder--muted {
  color: var(--slate);
}
@media (max-width: 720px) {
  .pricing__row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 14px 0;
  }
}

/* Förder-Kacheln */
.foerder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 8px;
}
.foerder__card {
  border: 2px solid var(--ink);
  background: var(--white);
  padding: 24px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}
.foerder__mark {
  position: absolute;
  top: 20px;
  right: 22px;
  opacity: 0.9;
}
.foerder__scope {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-transform: uppercase;
}
.foerder__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  max-width: 78%;
}
.foerder__body {
  font-size: 15px;
  line-height: 1.55;
  color: var(--slate);
}
.foerder__meta {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}
@media (max-width: 720px) {
  .foerder {
    grid-template-columns: 1fr;
  }
  .foerder__title {
    max-width: 100%;
  }
}

/* Pull-Quote (Hervorhebung im Content) — ohne Balken, nur größerer Text */
.pull-quote {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  max-width: 30em;
  margin: 22px 0;
  padding: 0;
  border: 0;
  font-style: normal;
}

/* FAQ (native <details>) */
.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--rule);
}
.faq__item {
  border-bottom: 1px solid var(--rule);
}
.faq__summary {
  padding: 20px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  color: var(--ink);
  transition: color 150ms ease-out;
}
.faq__summary:hover,
.faq__summary:focus-visible {
  color: var(--blue);
}
.faq__summary::-webkit-details-marker,
.faq__summary::marker {
  display: none;
  content: "";
}
.faq__summary::after {
  content: "+";
  font-size: 20px;
  color: var(--slate);
  font-weight: 400;
  flex: none;
  line-height: 1;
  transition: transform 150ms ease-out, color 150ms ease-out;
}
.faq__item[open] .faq__summary::after {
  content: "+";
  transform: rotate(45deg);
  color: var(--slate);
}
.faq__body {
  padding: 0 0 22px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 68ch;
}

/* Sub-Hero + Sidebar responsive */
@media (max-width: 1080px) {
  .page {
    padding: 32px 32px 64px;
    gap: 48px;
  }
  .sub-hero {
    padding: 40px 32px 24px;
  }
  .sub-hero__title {
    font-size: 38px;
  }
}
@media (max-width: 900px) {
  .page {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .page__sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
  .anchor-nav {
    flex-direction: row;
    overflow-x: auto;
    padding: 6px 0;
    gap: 4px;
    scrollbar-width: thin;
  }
  .anchor-nav__label {
    display: none;
  }
  .anchor-nav__link {
    flex: none;
    padding: 10px 14px;
    font-size: 14px;
    border-bottom: 0;
    white-space: nowrap;
  }
  .anchor-nav__link[aria-current="location"]::before {
    display: none;
  }
  .anchor-nav__link[aria-current="location"] {
    background: var(--ink);
    color: var(--paper);
  }
  .article-section__title {
    font-size: 26px;
  }
  .page__main {
    gap: 72px;
  }
}
@media (max-width: 720px) {
  .page {
    padding: 24px 20px 48px;
  }
  .sub-hero {
    padding: 32px 20px 20px;
  }
  .sub-hero__title {
    font-size: 30px;
  }
  .article-section__title {
    font-size: 22px;
  }
  .page__main {
    gap: 56px;
  }
}

/* Kennzahlen-Zeile (fuer B-Layouts / Landing-Style) */
.kpi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  padding: 60px 64px;
  max-width: 1312px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.kpi__item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kpi__value {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.kpi__value--blue {
  color: var(--blue);
}
.kpi__label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--slate);
}
@media (max-width: 900px) {
  .kpi {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 32px;
  }
  .kpi__value {
    font-size: 44px;
  }
}
@media (max-width: 720px) {
  .kpi {
    padding: 32px 20px;
  }
}

/* Fit-dark: passt-das im dunklen bereich (B-layout) */
.fit-dark {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin: 24px 0 8px;
}
.fit-dark__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 20px;
  border-top: 1px solid var(--slate);
}
.fit-dark__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.fit-dark__col--yes .fit-dark__label {
  color: var(--blue-tint);
}
.fit-dark__col--no .fit-dark__label {
  color: var(--slate-light);
}
.fit-dark__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fit-dark__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--paper);
}
.fit-dark__col--yes .fit-dark__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--blue);
}
.fit-dark__col--no .fit-dark__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 10px;
  height: 1px;
  background: var(--slate-light);
  opacity: 0.5;
}
.fit-dark__prereq {
  border-top: 1px solid var(--slate);
  padding-top: 20px;
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--slate-light);
}
.fit-dark__prereq strong {
  color: var(--paper);
  font-weight: 600;
}
@media (max-width: 720px) {
  .fit-dark {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

/* ======================================================================
 * Kombi-Design (Redesign-Bausteine)
 * Haarlinien-Raster, sticky-header, getönte Sektionen, Grundsatz-Block
 * ==================================================================== */

/* Getönter Section-Hintergrund (statt aktuellem --paper für spezifische Blöcke) */
.section--tone {
  background: #f5f7fa;
  border-top: 1px solid var(--rule);
  padding: 84px 64px;
}

/* Haarlinien-Raster (grid mit 1px gap auf grauem grund) */
.hairline-grid {
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin: 40px 0 0;
}
.section--tone .hairline-grid {
  background: #d5dae1;
  border-color: #d5dae1;
}
.section--dark .hairline-grid {
  background: #4a3f42;
  border-color: #4a3f42;
}
.section--dark .hairline-cell {
  background: var(--ink);
}
.section--dark .hairline-cell__title {
  color: var(--paper);
}
.section--dark .hairline-cell__body {
  color: #c7cacf;
}
.section--dark .hairline-cell__n {
  color: var(--blue);
}
.section--dark .hairline-cell__label {
  color: #a9adb4;
}
.hairline-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}
.hairline-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}
.hairline-grid--2 {
  grid-template-columns: repeat(2, 1fr);
}
.hairline-cell {
  background: var(--white);
  padding: 32px 28px 36px;
  display: flex;
  flex-direction: column;
}
.hairline-grid--compact .hairline-cell {
  padding: 22px 22px 24px;
}
.hairline-grid--compact .hairline-cell__title {
  font-size: 16px;
  margin-top: 14px;
}
.hairline-grid--compact .hairline-cell__body {
  font-size: 14px;
  margin-top: 8px;
  line-height: 1.55;
}
.section--tone .hairline-cell {
  background: #f5f7fa;
}
.hairline-cell__n {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--blue);
}
.hairline-cell__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--slate);
  text-transform: uppercase;
}
.hairline-cell__title {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  margin: 20px 0 0;
  color: var(--ink);
}
.hairline-cell__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 12px 0 0;
}
@media (max-width: 900px) {
  .hairline-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .hairline-grid--3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 600px) {
  .hairline-grid--4,
  .hairline-grid--2 {
    grid-template-columns: 1fr;
  }
  .hairline-cell {
    padding: 24px 22px 28px;
  }
}

/* Grundsatz-Block (border-left blau, grid label + body) */
.grundsatz-block {
  display: grid;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  gap: 32px;
  border-left: 2px solid var(--blue);
  padding: 8px 0 8px 32px;
  max-width: 1160px;
  margin: 0 auto;
}
.grundsatz-block__label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
}
.grundsatz-block__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  line-height: 1.3;
}
.grundsatz-block__body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  max-width: 640px;
  margin: 0;
}
.section--dark .grundsatz-block__title {
  color: var(--paper);
}
.section--dark .grundsatz-block__body {
  color: #c7cacf;
}
@media (max-width: 720px) {
  .grundsatz-block {
    grid-template-columns: 1fr;
    gap: 16px;
    padding-left: 24px;
  }
}

/* Outcomes-Grid (2-Spalten, border-top statt Karten) */
.outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 64px;
  margin: 40px 0 0;
}
.outcome-row {
  border-top: 1px solid #d5dae1;
  padding: 28px 0;
}
.outcome-row h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0;
  color: var(--ink);
}
.outcome-row p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--slate);
  margin: 12px 0 0;
}
@media (max-width: 720px) {
  .outcomes-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* USP-Liste (grundsätze-artig, mit Titel + Body) */
.usp-list {
  list-style: none;
  padding: 0;
  margin: 40px 0 0;
}
.usp-item {
  display: grid;
  grid-template-columns: 32px 40px minmax(0, 1fr);
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid #4a3f42;
  align-items: baseline;
}
.usp-item:first-child {
  border-top: none;
  padding-top: 8px;
}
.usp-item .beak {
  align-self: center;
  justify-self: start;
}
.usp-item__n {
  font-size: 14px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0;
}
.usp-item__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.usp-item__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--paper);
  line-height: 1.3;
}
.usp-item__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #c7cacf;
}
@media (max-width: 720px) {
  .usp-item {
    grid-template-columns: 28px 32px minmax(0, 1fr);
    gap: 14px;
  }
  .usp-item__title {
    font-size: 16px;
  }
}

/* Step-Spalten mit blauer border-top (Wie es abläuft) */
.step-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin: 40px 0 0;
}
.step-col {
  border-top: 2px solid var(--blue);
  padding: 20px 0 0;
}
.step-col__n {
  font-size: 13px;
  font-weight: 600;
  color: var(--blue);
  letter-spacing: 0;
}
.step-col__title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 12px 0 0;
  color: var(--ink);
}
.step-col__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--slate);
  margin: 12px 0 0;
}
@media (max-width: 900px) {
  .step-cols {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Portrait/Placeholder: keine schwarzen Rahmen mehr auf warum-corvint */
.person-block__portrait,
.person-block__icon-frame {
  border: none;
  background: transparent;
}
.person-block__portrait-caption {
  border-top: none;
  padding: 12px 0 0;
}

/* Einheitlicher Placeholder (Hannes, bis Foto da) */
.person-placeholder {
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 260px;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.person-placeholder__initials {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.person-placeholder__note {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.people-grid .qualifications {
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (max-width: 900px) {
  .people-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}

/* Person-Info-Blocks (Rolle im Projekt, Kernkompetenz) */
.person-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.person-info__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
}
.person-info__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}

/* Aufklappbares "Mehr über" pro Person */
.person-more {
  border-top: 1px solid var(--rule);
  padding-top: 16px;
  margin-top: 4px;
}
.person-more > summary {
  cursor: pointer;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.person-more > summary::-webkit-details-marker,
.person-more > summary::marker {
  display: none;
}
.person-more > summary::after {
  content: "+";
  margin-left: auto;
  font-weight: 400;
  font-size: 18px;
  color: var(--blue);
}
.person-more[open] > summary::after {
  content: "−";
}
.person-more__body {
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.person-more__body p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.person-more__body .qualifications {
  margin-top: 0;
  padding-top: 20px;
}

/* Netzwerk-Partner-Grafik */
.partners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  max-width: 1160px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.partners__text h3 {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 8px;
}
.partners__text p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0;
}
.partners__graphic {
  margin: 0;
}
.partners__graphic svg {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .partners {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Hero-Rabe (warum-corvint, Marken-Anker) */
.hero__raven {
  display: flex;
  justify-content: center;
  align-items: center;
}
.hero__raven svg {
  width: min(100%, 360px);
  height: auto;
}
@media (max-width: 720px) {
  .hero__raven {
    display: none;
  }
}

/* Portrait grayscale (Hannah + spätere Fotos) */
.portrait--grayscale img {
  filter: grayscale(1);
}

/* Sticky Header mit backdrop-filter */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Angebots-Karten: Modul 1 hervorgehoben (ink border), andere leichter (rule) */
.offer--highlight,
.module--highlight {
  border: 1px solid var(--ink);
}
.offer--soft,
.module--soft {
  border: 1px solid var(--rule);
}

/* Legal Content (Impressum, Datenschutz) */
.legal-content {
  max-width: 720px;
}
.legal-content h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  margin: 36px 0 10px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.legal-content h2:first-child {
  margin-top: 0;
}
.legal-content p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  margin: 0 0 14px;
}
.legal-content a {
  color: var(--blue);
  text-decoration: underline;
}

/* ========================================================================
 * STARTSEITE V2 — Neue Struktur (Leistungen, Fälle, Türen)
 * ==================================================================== */

/* Leistungen-Grid (5 Leistungen, eine hervorgehoben) — nebeneinander */
.leistungen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-top: 48px;
}
.leistung {
  background: var(--white);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
@media (max-width: 900px) {
  .leistungen {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .leistungen {
    grid-template-columns: 1fr;
  }
}
.leistung--highlight {
  background: var(--ink);
}
.leistung--highlight .leistung__title {
  color: var(--paper);
}
.leistung--highlight .leistung__body {
  color: #c7cacf;
}
.leistung--highlight .leistung__result {
  color: var(--paper);
  border-top-color: #4a3f42;
}
.leistung--highlight .leistung__result strong {
  color: var(--blue);
}
.leistung--highlight .leistung__icon path,
.leistung--highlight .leistung__icon circle,
.leistung--highlight .leistung__icon rect,
.leistung--highlight .leistung__icon line {
  stroke: var(--paper);
}
.leistung__icon {
  width: 36px;
  height: 36px;
}
.leistung > div {
  display: flex;
  flex-direction: column;
}
.leistung__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  display: block;
  margin-bottom: 4px;
}
.leistung__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0 0 10px;
}
.leistung__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0 0 14px;
}
.leistung__result {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.leistung__result strong {
  font-weight: 700;
  color: var(--blue);
  letter-spacing: 0.02em;
}
@media (max-width: 720px) {
  .leistung {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px;
  }
}

/* Case Stories (Anwendungsfälle) — nebeneinander */
.case-stories {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.case-story {
  border: 1px solid var(--rule);
  background: var(--white);
  padding: 0 0 0;
  display: flex;
  flex-direction: column;
}
.case-story__image {
  aspect-ratio: 16 / 9;
  background: #f5f7fa;
  border-bottom: 1px dashed #d5dae1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--slate);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.case-story__image svg {
  width: 56px;
  height: 56px;
  opacity: 0.7;
}
.case-story__content {
  padding: 28px 28px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}
@media (max-width: 900px) {
  .case-stories {
    grid-template-columns: 1fr;
  }
}

/* Door-Icons */
.door__icon {
  width: 44px;
  height: 44px;
  margin-bottom: 4px;
}
.case-story__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.case-story__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  border: 1px solid var(--rule);
  padding: 5px 10px;
}
.case-story__tag--lead {
  color: var(--blue);
  border-color: var(--blue);
}
.case-story__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
}
.case-story__cols {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 28px;
}
.case-story__col h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(14, 62, 255, 0.2);
}
.case-story__col p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--slate);
  margin: 0 0 12px;
}
.case-story__col p:last-child {
  margin-bottom: 0;
}
.case-story__result {
  background: #f5f7fa;
  margin: 0 -28px;
  padding: 24px 28px 26px;
  margin-top: auto;
}
.case-story__result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 18px;
}
.case-story__shifts {
  display: grid;
  gap: 1px;
  background: #d5dae1;
  border: 1px solid #d5dae1;
  margin-bottom: 20px;
}
.case-story__shift {
  background: #f5f7fa;
  padding: 12px 16px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
}
.case-story__shift-label {
  font-size: 14px;
  color: var(--slate);
}
.case-story__shift-value {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
}
.case-story__shift-value em {
  font-style: normal;
  color: var(--slate);
  font-weight: 500;
}
.case-story__shift-value .arrow {
  color: var(--blue);
  margin: 0 4px;
}
.case-story__roi {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}
.case-story__roi p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.case-story__payback {
  background: var(--white);
  border: 2px solid var(--blue);
  padding: 12px 18px;
  text-align: center;
  min-width: 110px;
  flex: none;
}
.case-story__payback-big {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--blue);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.case-story__payback-small {
  display: block;
  font-size: 11px;
  color: var(--slate);
  margin-top: 4px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.case-story__aside {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #d5dae1;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.55;
}
.case-story__aside strong {
  color: var(--ink);
  font-weight: 600;
}
@media (max-width: 720px) {
  .case-story__content {
    padding: 24px 20px 0;
  }
  .case-story__result {
    margin: 0 -20px;
    padding: 22px 20px 26px;
  }
  .case-story__roi {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Türen (3 Angebots-Kategorien) */
.doors {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.door {
  background: var(--white);
  border: 1px solid var(--rule);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.door__n {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--blue);
  text-transform: uppercase;
}
.door__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
  margin: 0;
}
.door__quote {
  font-size: 14px;
  font-style: italic;
  color: var(--slate);
  line-height: 1.55;
  padding-left: 14px;
  border-left: 2px solid var(--blue);
  margin: 0;
}
.door__products {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.55;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.door__products strong {
  font-weight: 600;
  display: block;
  margin-bottom: 4px;
  color: var(--blue);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .doors {
    grid-template-columns: 1fr;
  }
}

/* Preview-Banner (nur Vorschau, nie live) */
.preview-banner {
  background: var(--ink);
  color: var(--paper);
  font-size: 13px;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: 0.02em;
}
.preview-banner strong {
  color: var(--blue-tint);
  font-weight: 600;
}

body.is-menu-open {
  overflow: hidden;
}

/* Mobile Nav Overlay */
@media (max-width: 900px) {
  .menu-toggle {
    display: inline-flex;
  }
  .nav {
    position: fixed;
    inset: 0;
    background: var(--paper);
    padding: 20px 32px 48px;
    display: none;
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
    overflow-y: auto;
    z-index: 100;
  }
  .nav[data-open="true"] {
    display: flex;
  }
  .nav__close {
    display: inline-flex;
    align-self: flex-end;
    padding: 6px;
    margin-bottom: 8px;
  }
  .nav__link {
    padding: 16px 0;
    font-size: 22px;
    font-weight: 500;
    border-bottom: 1px solid var(--rule);
  }
  .nav .btn {
    margin-top: 20px;
    justify-content: center;
    font-size: 17px;
  }
}

/* Reduziert */
@media (max-width: 1080px) {
  .site-header,
  .hero,
  .section,
  .section--dark,
  .cta,
  .site-footer {
    padding-left: 32px;
    padding-right: 32px;
  }
  .hero__grid,
  .problems {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .person {
    grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
    gap: 40px;
  }
  .person__network {
    grid-column: 1 / -1;
    max-width: 520px;
  }
  .hero__title {
    font-size: 44px;
  }
  .section__title,
  .principles__intro-title,
  .cta__title {
    font-size: 32px;
  }
  .person__title {
    font-size: 30px;
  }
  .steps,
  .modules,
  .dimensions {
    grid-template-columns: 1fr 1fr;
  }
  .tabs {
    grid-template-columns: 1fr;
  }
  .summary {
    grid-template-columns: 1fr;
  }
  .summary__cell {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .summary__cell:last-child {
    border-bottom: 0;
  }
  .principles {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .principle-row {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .cta__inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 720px) {
  .site-header {
    padding: 14px 20px;
    gap: 12px;
  }
  .nav {
    padding: 16px 20px 40px;
  }
  .person {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .person__portrait {
    max-width: 320px;
  }
  .hero__segments {
    font-size: 12px;
  }
  .hero,
  .section,
  .section--dark,
  .cta {
    padding: 56px 20px;
  }
  .site-footer {
    padding: 40px 20px;
  }
  .hero__title {
    font-size: 34px;
  }
  .section__title,
  .principles__intro-title,
  .cta__title {
    font-size: 26px;
  }
  .steps,
  .modules,
  .dimensions {
    grid-template-columns: 1fr;
  }
  .dimension + .dimension {
    padding-left: 0;
  }
  .stats,
  .person__facts,
  .site-footer__cols {
    gap: 20px;
  }
  .effort__old {
    font-size: 24px;
  }
  .effort__new {
    font-size: 32px;
  }
}

/* --- Mobile Fixes 2026-08-13 --- */

/* KRITISCH: Menu-Overlay wird sonst vom backdrop-filter der Kopfzeile
   eingesperrt und auf ~66px Hoehe abgeschnitten. */
body.is-menu-open .site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Fusszeilen-Links bekommen groessere Antippflaeche auf mobil. */
@media (max-width: 900px) {
  .site-footer__col a {
    display: block;
    padding: 10px 0;
  }
}

/* Aufklapper auf ki-einfuehrung auch. */
@media (max-width: 900px) {
  summary {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}