.business-model-top { background: #fff; }
.business-model-top-inner { padding-block: 80px; }
@media (min-width: 1024px) { .business-model-top-inner { padding-block: 112px; } }

.bm-flow-wrap { margin-top: 56px; }

/* War 56px (mt-14), seit der BusinessFlow-Grafik davor auf 64/80px
   (mt-16 lg:mt-20) erhöht — mehr Luft zwischen Grafik und Bildboxen. */
.bm-columns-wrap { margin-top: 64px; }
@media (min-width: 1024px) { .bm-columns-wrap { margin-top: 80px; } }
.bm-columns {
  display: grid;
  gap: var(--gap-sol-md);
  align-items: stretch;
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .bm-columns { grid-template-columns: 1fr auto 1fr; } }

.bm-column { border-radius: var(--radius-sol-card); overflow: hidden; display: flex; flex-direction: column; }
.bm-column--sol { background: var(--color-sol-blue-dark); color: #fff; }
.bm-column--partner { background: #fff; border: 1px solid var(--color-sol-gray-300); }
.bm-column-image { aspect-ratio: 21 / 9; overflow: hidden; }
.bm-column-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Kundengespräch-Foto: object-position 38% statt center, damit die
   Köpfe im 21:9-Ausschnitt bleiben (Bild seit 25.08.2026). */
.bm-column--partner .bm-column-image img { object-position: center 38%; }
.bm-column-body { padding: 32px; }
@media (min-width: 1024px) { .bm-column-body { padding: 40px; } }

.bm-list { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.bm-list li { display: flex; align-items: flex-start; gap: 12px; }
.bm-check {
  margin-top: 2px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
}
.bm-check--light { background: #fff; color: var(--color-sol-blue-dark); }
.bm-check--dark { background: var(--color-sol-blue-dark); color: #fff; }
.bm-check .sol-icon { width: 0.875em; height: 0.875em; }

.bm-plus { display: flex; align-items: center; justify-content: center; color: var(--color-sol-blue-light); }
.bm-plus .sol-icon { width: 2rem; height: 2rem; }
@media (min-width: 1024px) { .bm-plus .sol-icon { width: 2.5rem; height: 2.5rem; } }

.business-model-benefits { background: var(--color-sol-gray-100); }
.business-model-benefits-inner { padding-block: 80px; }
@media (min-width: 1024px) { .business-model-benefits-inner { padding-block: 112px; } }

.bm-benefits-wrap { margin-top: 56px; }
.bm-benefits { display: grid; gap: var(--gap-sol-md); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .bm-benefits { grid-template-columns: repeat(3, 1fr); } }

.bm-benefit-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border-radius: var(--radius-sol-card); border: 1px solid var(--color-sol-gray-300);
  background: #fff; padding: 32px; box-shadow: var(--shadow-sol-default);
}
@media (min-width: 1024px) { .bm-benefit-card { padding: 40px; } }
.bm-benefit-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 999px;
  background: var(--color-sol-blue-light); color: var(--color-sol-blue-dark);
}
.bm-benefit-icon .sol-icon { width: 2rem; height: 2rem; }

/* ============================================================
   BUSINESSFLOW — die Businessmodell-Grafik (NEU seit 25.08.2026)
   Fast wörtlich aus global.css übernommen (dort bereits handgeschriebenes
   CSS statt Tailwind-Utilities, siehe Original-Kommentare dort für die
   Kontrast-/Geometrie-Begründungen). Linienfarbe bewusst
   --color-sol-blue-medium (3:1 Non-Text-Contrast, SC 1.4.11) statt
   --color-sol-blue-light (nur 2,27:1 auf Weiß).
   ============================================================ */
.flow {
  --flow-link-w: 210px;
  position: relative;
}
.flow-chain {
  display: grid;
  grid-template-columns: 1fr var(--flow-link-w) 1fr var(--flow-link-w) 1fr;
  align-items: stretch;
}

.flow-node {
  display: flex; flex-direction: column; justify-content: flex-start; text-align: center;
  padding: 22px 18px; background: #fff; border: 1px solid var(--color-sol-gray-300);
  border-radius: var(--radius-sol-card); box-shadow: var(--shadow-sol-default);
}
.flow-node--dark { background: var(--color-sol-blue-dark); border-color: var(--color-sol-blue-dark); }
.flow-node--light { background: var(--color-sol-blue-light); border-color: var(--color-sol-blue-light); }

.flow-mark { height: 144px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; }
.flow-logo-dark { width: 220px; max-width: 100%; height: auto; display: block; margin-inline: auto; }
.flow-logo-light { width: 140px; max-width: 100%; height: auto; display: block; border-radius: 10px; margin-inline: auto; }
.flow-node-ico { width: 44px; height: 44px; color: var(--color-sol-blue-dark); }

.flow-node-headline { font-family: var(--font-sans); font-weight: 800; font-size: 1.0625rem; line-height: 1.25; color: var(--color-sol-blue-dark); margin: 0 0 6px; }
.flow-node-copy { font-family: var(--font-sans); font-weight: 400; font-size: 0.90625rem; line-height: 1.5; color: var(--color-sol-gray-700); margin: 0; }
.flow-node--dark .flow-node-headline { color: #fff; }
.flow-node--dark .flow-node-copy { color: rgba(255,255,255,0.9); }
/* Brand-Dunkelblau erreicht auf Hellblau nur 3,93:1 (< 4,5:1, SC 1.4.3) —
   deshalb --color-sol-blue-ink (6,63:1) statt --color-sol-blue-dark. */
.flow-node--light .flow-node-headline,
.flow-node--light .flow-node-copy { color: var(--color-sol-blue-ink); }

.flow-link { position: relative; display: flex; align-items: center; padding: 0 4px; }
.flow-link-label { position: absolute; left: 50%; bottom: calc(50% + 10px); transform: translateX(-50%); white-space: nowrap; color: var(--color-sol-blue-dark); }
.flow-rail { flex: 1; height: 2px; margin-right: 9px; background: var(--color-sol-blue-medium); position: relative; }
.flow-rail::after {
  content: ""; position: absolute; right: -9px; top: 50%; transform: translateY(-50%);
  border-left: 9px solid var(--color-sol-blue-medium); border-top: 6px solid transparent; border-bottom: 6px solid transparent;
}

.flow-arc { position: relative; height: 54px; border-color: var(--color-sol-blue-medium); border-style: solid; }
.flow-arc--top { border-width: 2px 2px 0 2px; border-radius: 14px 14px 0 0; margin: 0 calc((100% - 2 * var(--flow-link-w)) / 6) 12px; }
.flow-arc--bottom { border-width: 0 2px 2px 2px; border-radius: 0 0 14px 14px; margin: 12px 0 0 calc((100% - 2 * var(--flow-link-w)) / 6); width: calc((100% - 2 * var(--flow-link-w)) / 3 + var(--flow-link-w)); }
.flow-arc-label {
  position: absolute; left: 50%; transform: translateX(-50%); background: #fff; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--color-sol-blue-dark);
}
.flow-arc--top .flow-arc-label { top: -10px; }
.flow-arc--bottom .flow-arc-label { bottom: -10px; }

.flow-arc-tip { position: absolute; right: -7px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; }
.flow-arc--top .flow-arc-tip { bottom: -8px; border-top: 9px solid var(--color-sol-blue-medium); }
.flow-arc--bottom .flow-arc-tip { top: -8px; border-bottom: 9px solid var(--color-sol-blue-medium); }

.flow-brace { display: none; }

@media (max-width: 1023px) {
  .flow-arc { display: none; }
  .flow-chain { grid-template-columns: 30px 1fr 30px; column-gap: 8px; }
  .flow-chain > *:nth-child(1) { grid-area: 1 / 2 / 3 / 3; }
  .flow-chain > *:nth-child(2) { grid-area: 3 / 2 / 4 / 3; }
  .flow-chain > *:nth-child(3) { grid-area: 4 / 2 / 6 / 3; }
  .flow-chain > *:nth-child(4) { grid-area: 6 / 2 / 7 / 3; }
  .flow-chain > *:nth-child(5) { grid-area: 7 / 2 / 9 / 3; }

  .flow-link { position: relative; flex-direction: row; justify-content: center; padding: 4px 0; }
  .flow-link-label { position: absolute; left: 50%; top: 50%; bottom: auto; transform: translate(20px, -50%); white-space: nowrap; }
  .flow-rail { flex: none; width: 2px; height: 55px; margin-right: 0; margin-bottom: 9px; }
  .flow-rail::after {
    right: auto; top: auto; bottom: -9px; left: 50%; transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-top: 9px solid var(--color-sol-blue-medium); border-bottom: 0;
  }

  .flow-brace { display: block; position: relative; border-color: var(--color-sol-blue-medium); border-style: solid; }
  .flow-brace--left { grid-area: 2 / 1 / 8 / 2; border-width: 2px 0 2px 2px; border-radius: var(--radius-sol-card) 0 0 var(--radius-sol-card); }
  .flow-brace--right { grid-area: 2 / 3 / 5 / 4; border-width: 2px 2px 2px 0; border-radius: 0 var(--radius-sol-card) var(--radius-sol-card) 0; }
  .flow-brace span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(180deg);
    writing-mode: vertical-rl; background: #fff; padding: 12px 0; color: var(--color-sol-blue-dark); white-space: nowrap;
  }
  .flow-brace::after { content: ""; position: absolute; bottom: -7px; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
  .flow-brace--left::after { right: -4px; border-left: 9px solid var(--color-sol-blue-medium); }
  .flow-brace--right::after { left: -4px; border-right: 9px solid var(--color-sol-blue-medium); }
}