/* ============================================================
   BI-Portfolio (/bi/, /en/bi/): Sprungleiste, Bereiche, Rahmen der Grafiken, Fallstudie.
   Nur auf dieser Seite geladen. Farben, Rundungen und Schatten nur über brand.css,
   Diagrammfarben über --chart-*. Bewusst freundlicher als das AI-Portfolio:
   weiche Flächen, runde Formen, normale Groß- und Kleinschreibung in den Bereichstiteln.
   ============================================================ */

html { scroll-padding-top: calc(var(--bar-h) + 76px); }   /* Platz für Kopfzeile + Sprungleiste */

/* ---------- Hero ---------- */

.bi-hero h1 { max-width: 19ch; font-size: clamp(2rem, 3.5vw, 3.1rem); }   /* „SAP Analytics Cloud“ passt ungetrennt in die Spalte */
/* Hero: echte Grafiken aus dem Portfolio (Endbild, ohne Bedienung), Sankey vorn und am größten */
.bi-hero .hero-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.bi-hv { height: 540px; pointer-events: none; }
.bi-hv-card { position: absolute; animation: float 7s ease-in-out infinite; filter: drop-shadow(0 18px 30px rgba(23, 22, 29, .14)); }
.bi-hv-card svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.bi-hv-cockpit { width: 54%; top: -10px; right: -3%; opacity: .92; animation-delay: -2.5s; }
.bi-hv-forecast { width: 50%; top: 70px; left: -6%; opacity: .92; animation-delay: -4.5s; }
.bi-hv-finance { width: 80%; bottom: 0; left: 14%; z-index: 2; }
.bi-hero h1, .section-head h2 { hyphens: manual; -webkit-hyphens: manual; }   /* keine Trennung mitten im Wort (z. B. „Analy-tics“) */
.bi-hero .facts { margin-top: clamp(32px, 5vh, 52px); }
.bi-note { margin-top: 14px; font-size: 13.5px; color: var(--mist); max-width: 58ch; }

/* ---------- Sprungleiste ---------- */

.bi-jump {
  position: sticky; top: var(--bar-h); z-index: 90;
  background: color-mix(in oklab, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.bi-jump .shell { display: flex; gap: 6px; overflow-x: auto; padding-top: 9px; padding-bottom: 9px; scrollbar-width: none; }
.bi-jump .shell::-webkit-scrollbar { display: none; }
.bi-jump a {
  flex-shrink: 0; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--smoke);
  padding: 7px 15px; border-radius: var(--radius-pill); transition: background .2s ease, color .2s ease;
}
.bi-jump a:hover { background: var(--sand); color: var(--ink); }
.bi-jump a[aria-current="true"] { background: var(--accent-ink); color: var(--paper); }

/* ---------- Gruppen und Bereiche ---------- */

.bi-group .eyebrow.dot::before { background: var(--grp-ink); }
.bi-group[data-group="reporting"] { --grp: var(--chart-4); --grp-ink: var(--chart-4-ink); }
.bi-group[data-group="planning"] { --grp: var(--chart-2); --grp-ink: var(--chart-2-ink); }
.bi-group[data-group="foundation"] { --grp: var(--chart-5); --grp-ink: var(--chart-5-ink); }

.bi-area {
  display: grid; grid-template-columns: minmax(0, .64fr) minmax(0, 1.36fr); gap: clamp(28px, 4vw, 60px);
  align-items: center; padding: clamp(40px, 7vh, 72px) 0; border-top: 1px solid var(--hairline);
}
.section-head + .bi-area { border-top: none; padding-top: 0; }
.bi-area.flip { grid-template-columns: minmax(0, 1.36fr) minmax(0, .64fr); }   /* Grafik links, bleibt die breite Spalte */
.bi-area.flip .bi-text { order: 2; }
.bi-area h3 { font-size: clamp(1.35rem, 2.2vw, 1.8rem); font-weight: 600; line-height: 1.25; margin-bottom: 14px; }
.bi-area .lead { font-size: 1.02rem; }
.bi-points { list-style: none; margin-top: 22px; display: grid; gap: 10px; }
.bi-points li { position: relative; padding-left: 32px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; }
.bi-points li::before {
  content: "✓"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; background: var(--grp); color: var(--grp-ink);
}
.bi-clinic {
  display: inline-flex; align-items: center; gap: 7px; margin-bottom: 14px;
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--chart-3); color: var(--chart-3-ink);
}

/* ---------- Rahmen der Grafiken ---------- */

.bi-fig {
  position: relative; margin: 0; border-radius: var(--radius-lg); border: 1px solid var(--hairline);
  padding: clamp(6px, 1.2vw, 14px) clamp(6px, 1.2vw, 14px) 4px;
  background:
    radial-gradient(110% 80% at 0% 0%, var(--accent-tint), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, color-mix(in oklab, var(--chart-4) 50%, transparent), transparent 65%),
    var(--canvas);
}
.bi-fig svg { width: 100%; height: auto; font-family: var(--font); }
.bi-fig figcaption { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 4px 6px; }
.bi-hint {
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
  padding: 4px 12px; border-radius: var(--radius-pill); background: var(--accent-tint);
  animation: bi-pulse 2.8s ease-in-out infinite;
}
@keyframes bi-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.bi-fig .bi-edit { cursor: text; outline: none; }
.bi-fig .bi-edit:hover { filter: brightness(.95); }
.bi-fig .bi-edit:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.bi-input {
  position: absolute; z-index: 310; box-sizing: border-box; padding: 0 8px; text-align: right;
  font: 600 13px var(--font); color: var(--accent-ink); background: var(--paper);
  border: 2px solid var(--accent-ink); border-radius: 8px; box-shadow: var(--shadow);
}
.bi-replay { margin-left: auto; }

/* Interaktion in den Grafiken (bi.js): Klickflächen, Hervorheben, Tooltip */
.bi-fig .bi-act { cursor: pointer; outline: none; transition: filter .2s ease; }
.bi-fig .bi-act:hover { filter: brightness(.94) saturate(1.15); }
.bi-fig .bi-act:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
.bi-fig [data-k] { transition: opacity .2s ease; }
.bi-fig .bi-hl-on [data-k]:not(.bi-hl) { opacity: .18; }
.bi-tip {
  position: fixed; z-index: 300; pointer-events: none; max-width: 280px;
  background: var(--ink); color: var(--paper); border-radius: 10px; padding: 8px 12px;
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-lg);
}
.bi-tip strong { display: block; font-weight: 650; }
.bi-tip span { display: block; color: color-mix(in oklab, var(--paper) 80%, var(--ink)); }
.bi-replay {
  font-size: 12px; font-weight: 600; color: var(--smoke); padding: 5px 12px; border-radius: var(--radius-pill);
  transition: background .2s ease, color .2s ease;
}
.bi-replay:hover { background: var(--paper); color: var(--accent-ink); }

/* ---------- Themen-Übersicht ---------- */

.bi-overview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.bi-ov-group {
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 20px; box-shadow: var(--shadow-sm);
}
.bi-ov-group[data-group="reporting"] { --grp: var(--chart-4); --grp-ink: var(--chart-4-ink); }
.bi-ov-group[data-group="planning"] { --grp: var(--chart-2); --grp-ink: var(--chart-2-ink); }
.bi-ov-group[data-group="foundation"] { --grp: var(--chart-5); --grp-ink: var(--chart-5-ink); grid-column: 1 / -1; }
.bi-ov-group[data-group="foundation"] .bi-ov-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bi-ov-head { display: flex; align-items: center; gap: 14px; padding: 2px 4px 16px; }
.bi-ov-head h3 { font-size: 17px; font-weight: 700; line-height: 1.2; }
.bi-ov-head span { font-size: 13px; color: var(--smoke); }
.bi-ov-gico {
  width: 42px; height: 42px; border-radius: 14px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--grp); color: var(--grp-ink);
}
.bi-ov-gico svg { width: 22px; height: 22px; }
.bi-ov-list { display: grid; gap: 8px; }
.bi-ov-item {
  display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--canvas); border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, opacity .6s var(--ease);
  transition-delay: 0s, 0s, 0s, calc(var(--i, 0) * 45ms);
}
.bi-ov-item.reveal { transform: none; }
.bi-ov-item:hover, .bi-ov-item:focus-visible { background: color-mix(in oklab, var(--grp) 35%, var(--paper)); border-color: var(--grp); transform: translateX(3px); }
.bi-ov-ico {
  width: 36px; height: 36px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--paper); color: var(--grp-ink); border: 1px solid var(--hairline);
}
.bi-ov-ico svg { width: 19px; height: 19px; }
.bi-ov-txt { display: grid; min-width: 0; line-height: 1.35; }
.bi-ov-txt strong { font-size: 14.5px; font-weight: 650; color: var(--ink); }
.bi-ov-txt small { font-size: 12.5px; color: var(--smoke); }
.bi-ov-clinic { color: var(--chart-3-ink); font-size: 12px; }
.bi-ov-arr { margin-left: auto; color: var(--grp-ink); font-weight: 700; opacity: 0; transition: opacity .2s ease; }
.bi-ov-item:hover .bi-ov-arr, .bi-ov-item:focus-visible .bi-ov-arr { opacity: 1; }
.bi-ov-legend { margin-top: 14px; font-size: 13px; color: var(--smoke); }
.bi-ov-legend span { color: var(--chart-3-ink); font-weight: 700; margin-right: 4px; }

/* ---------- Weitere Szenarien ---------- */

.bi-more {
  margin-top: clamp(28px, 5vh, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 10px;
  background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: 20px 24px;
}
.bi-more h3 { font-size: 15px; font-weight: 700; margin-right: 10px; }
.bi-more span { font-size: 13px; padding: 5px 13px; border-radius: var(--radius-pill); background: var(--chart-2); color: var(--chart-2-ink); font-weight: 600; }

/* ---------- Fallstudie ---------- */

.bi-case { background: linear-gradient(180deg, color-mix(in oklab, var(--chart-3) 30%, var(--paper)), var(--paper) 85%); }
.bi-case .eyebrow.dot::before { background: var(--chart-3-ink); }
.bi-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; counter-reset: step; }
.bi-step {
  position: relative; background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  padding: 26px 26px 28px; box-shadow: var(--shadow-sm);
}
.bi-step .k { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 700; margin-bottom: 12px; }
.bi-step .k::before {
  counter-increment: step; content: counter(step); width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; background: var(--chart-3); color: var(--chart-3-ink);
}
.bi-step p { font-size: 14.5px; color: var(--smoke); }
.bi-step:not(:last-child)::after {
  content: "→"; position: absolute; right: -16px; top: 50%; z-index: 1; width: 28px; height: 28px; margin-top: -14px;
  border-radius: 50%; display: grid; place-items: center; background: var(--paper); border: 1px solid var(--hairline);
  color: var(--chart-3-ink); font-weight: 700; font-size: 14px;
}

/* ---------- Responsiv ---------- */

@media (max-width: 1020px) {
  /* Hero: schwebende Grafiken unter dem Text statt daneben; Lage in % der Fläche */
  .bi-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .bi-hero .bi-hv { display: block; height: auto; aspect-ratio: 1.3; max-width: 640px; width: 100%; justify-self: center; margin-top: 8px; }
  .bi-hv-cockpit { top: 0; right: 0; }
  .bi-hv-forecast { top: 14%; left: 0; }
  .bi-hv-finance { left: 10%; }
  .bi-area, .bi-area.flip { grid-template-columns: minmax(0, 1fr); }
  .bi-area.flip .bi-text { order: 0; }
}
@media (max-width: 860px) {
  .bi-overview, .bi-ov-group[data-group="foundation"] .bi-ov-list { grid-template-columns: minmax(0, 1fr); }
  .bi-ov-group { padding: 14px; }
  .bi-steps { grid-template-columns: minmax(0, 1fr); }
  .bi-step:not(:last-child)::after { content: "↓"; right: auto; left: 50%; top: auto; bottom: -16px; margin: 0 0 0 -14px; }
}