/* CONCIVIS SAP AI — Produkt, Einsatz, Governance, Abschluss */

/* Produkt-Beweis: das Cockpit als heller Bildschirm in der dunklen Welt */
.cockpit { background: oklch(97.5% 0.003 100); color: oklch(20% 0.01 160); border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 0 1px oklch(95.5% 0.004 100 / .12), 0 80px 160px -60px oklch(0% 0 0 / .9), 0 0 140px -50px oklch(80% 0.16 158 / .35); }
.ck-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; padding: 13px 22px; border-bottom: 1px solid oklch(20% 0.01 160 / .08);
  font: 500 12px/1.4 var(--f-sans); color: oklch(40% 0.01 160); }
.ck-body { display: grid; grid-template-columns: 300px 1fr; }
.ck-list { padding: 16px; display: grid; gap: 6px; align-content: start; background: oklch(95% 0.004 100); border-right: 1px solid oklch(20% 0.01 160 / .08); }
.ck-item { display: grid; gap: 3px; padding: 14px; border-radius: 10px; border: 1px solid transparent; }
.ck-item strong { font-size: .9rem; font-weight: 600; }
.ck-item span { font: 400 11.5px/1.3 var(--f-mono); color: oklch(42% 0.01 160); }
.ck-item.is-active { background: oklch(99.5% 0.002 100); border-color: oklch(20% 0.01 160 / .12); box-shadow: 0 12px 28px -18px oklch(0% 0 0 / .5); }
.st { justify-self: start; margin-top: 6px; font: 500 11px/1 var(--f-sans); font-style: normal; padding: 5px 8px; border-radius: 999px; }
.st-open { background: oklch(94% 0.04 85); color: oklch(42% 0.09 70); }
.st-ask { background: oklch(93% 0.02 250); color: oklch(42% 0.06 250); }
.st-done, .st-auto { background: oklch(92% 0.06 158); color: oklch(36% 0.1 158); }
.st-rej { background: oklch(93% 0.03 32); color: oklch(46% 0.15 32); }
.ck-detail { padding: 30px 34px 28px; min-width: 0; }
.ck-detail h3 { font-size: 1.5rem; letter-spacing: -0.03em; margin-bottom: 22px; }
.ck-diff { display: grid; grid-template-columns: 1fr auto 1fr; gap: 18px; align-items: end; padding: 18px 0;
  border-top: 1px solid oklch(20% 0.01 160 / .1); border-bottom: 1px solid oklch(20% 0.01 160 / .1); }
.ck-diff div { display: grid; gap: 6px; }
.ck-cap { font-size: 12px; font-weight: 500; color: oklch(45% 0.01 160); }
.ck-diff .bad { font-size: 1.125rem; color: oklch(46% 0.15 32); text-decoration: line-through; text-decoration-thickness: 1px; }
.ck-diff .good { font-size: 1.125rem; font-weight: 600; color: oklch(36% 0.1 158); }
.ck-arrow { font-size: 1.4rem; color: oklch(40% 0.01 160); }
.ck-why { margin: 18px 0 22px; font-size: .92rem; color: oklch(38% 0.01 160); max-width: 44em; }
.ck-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-dark { background: oklch(20% 0.01 160); color: oklch(97.5% 0.003 100); }
.btn-dark:hover { background: oklch(36% 0.1 158); }
.btn-quiet { border-color: oklch(20% 0.01 160 / .2); color: oklch(20% 0.01 160); }
.btn-quiet:hover { border-color: oklch(20% 0.01 160); }
.ck-result { margin: 16px 0 0; font-size: .85rem; color: oklch(42% 0.01 160); min-height: 1.5em; }
.cockpit.is-booked .ck-result { color: oklch(36% 0.1 158); }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); margin: 56px 0 0; }
.figures div { border-top: 1px solid var(--line-2); padding: 20px 24px 0 0; }
.figures dt { font-size: clamp(1.7rem, 2.4vw, 2.3rem); font-weight: 500; letter-spacing: -0.035em; }
.figures dd { margin: 6px 0 0; font-size: .875rem; color: var(--ink-2); }

/* Einsatz: ruhiger Index */
.areas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.areas li { display: grid; grid-template-columns: 15rem 1fr; gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); transition: padding .5s var(--ease); }
.areas h3 { font-size: 1.5rem; letter-spacing: -0.03em; }
.areas p { margin: 0; color: var(--ink-2); }
.areas li:hover { padding-left: 10px; }
.areas li:hover h3 { color: var(--signal); }

/* Governance: vier Spalten, Haarlinien */
.gov { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-2); }
.gov article { padding: 28px 28px 0 0; }
.gov article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.gov h3 { font-size: 1.2rem; letter-spacing: -0.02em; margin-bottom: 12px; }
.gov p { margin: 0; font-size: .95rem; color: var(--ink-2); }

/* Abschluss */
.finale { padding-bottom: 14vh; }
.closing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 18vh; padding-top: 26px; border-top: 1px solid var(--line-2); }
.closing h3 { font-size: .8125rem; font-weight: 500; color: var(--ink-3); margin-bottom: 10px; }
.closing p { margin: 0; color: var(--ink-2); font-size: .95rem; }

@media (max-width: 1000px) {
  .gov { grid-template-columns: 1fr 1fr; }
  .gov article:nth-child(3) { padding-left: 0; border-left: 0; }
  .gov article { padding-bottom: 24px; }
}
@media (max-width: 900px) {
  .ck-body { grid-template-columns: 1fr; }
  .ck-list { grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    border-right: 0; border-bottom: 1px solid oklch(20% 0.01 160 / .08); }
  .ck-item { scroll-snap-align: start; background: oklch(99.5% 0.002 100); border-color: oklch(20% 0.01 160 / .1); }
  .ck-detail { padding: 22px 18px; }
  .ck-diff { grid-template-columns: 1fr; }
  .ck-arrow { transform: rotate(90deg); justify-self: start; }
  .ck-actions .btn { flex: 1 1 auto; }
  .figures { grid-template-columns: 1fr; margin-top: 36px; }
  .figures div { padding: 16px 0; }
  .areas li { grid-template-columns: 1fr; gap: 6px; }
  .gov { grid-template-columns: 1fr; }
  .gov article, .gov article + article { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .closing { grid-template-columns: 1fr; gap: 22px; margin-top: 10vh; }
}