/* KI PraxisPilot – shared product-page component contract v2
   --------------------------------------------------------------------------
   This stylesheet is the reusable structural contract for present and future
   product pages. New products should clone an established product page and use
   these semantic components; product-specific CSS is not required for them.

   Shared components covered here:
   1) requirements-standard
   2) preview-standard / product-preview-gallery
   3) process-standard
   4) quickstart-standard
   5) fit-standard
   6) prepared-sale / commerce-blue buttons
*/

/* --------------------------------------------------------------------------
   Requirements & tasks – own component names, never package-card icon columns.
*/
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirements-list{
  display:grid!important;grid-template-columns:1fr!important;gap:10px!important;margin:0!important;padding:0!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card{
  display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0!important;
  overflow:hidden!important;background:#fff!important;border:1px solid var(--kpp-line,#D8DEC8)!important;
  border-radius:14px!important;box-shadow:none!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card>summary{
  display:block!important;width:100%!important;box-sizing:border-box!important;padding:17px 19px!important;
  cursor:pointer!important;list-style:none!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card>summary::-webkit-details-marker{display:none!important}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-head{
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;gap:16px!important;width:100%!important;min-width:0!important;padding-right:38px!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-head:after{
  content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);width:26px;height:26px;
  display:grid;place-items:center;border:1px solid var(--kpp-line,#D8DEC8);border-radius:50%;
  background:var(--kpp-cream,#F8F6EF);color:var(--kpp-blue-deep,#0E2F43);font-weight:800;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card[open] .requirement-head:after{content:"–"}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-head h3{
  min-width:0!important;margin:0!important;color:var(--kpp-blue-deep,#0E2F43)!important;
  font-size:1rem!important;line-height:1.35!important;overflow-wrap:normal!important;word-break:normal!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-ref{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;width:auto!important;max-width:260px!important;
  min-height:30px!important;box-sizing:border-box!important;padding:6px 10px!important;border:1px solid var(--kpp-line,#D8DEC8)!important;
  border-radius:999px!important;background:var(--kpp-cream,#F8F6EF)!important;color:var(--kpp-blue-deep,#0E2F43)!important;
  font-size:.72rem!important;font-weight:760!important;line-height:1.25!important;white-space:normal!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card-details{
  padding:0 19px 17px!important;border-top:1px solid var(--kpp-line,#D8DEC8)!important;
}
body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-card-details p{
  margin:11px 0 0!important;color:var(--muted,#6C705E)!important;font-size:.86rem!important;line-height:1.55!important;
}

/* --------------------------------------------------------------------------
   Real product previews – exactly three equal cards on desktop. Images are
   contained, never cropped, so screenshots of documents remain legible.
*/
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px;
}
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-card{
  display:flex;flex-direction:column;min-width:0;margin:0;overflow:hidden;background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-soft);
}
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-card img{
  display:block!important;width:100%!important;height:auto!important;aspect-ratio:3/2!important;
  padding:8px;box-sizing:border-box;object-fit:contain!important;object-position:center!important;background:#fff!important;
}
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-card figcaption{
  min-height:84px;padding:13px 15px 14px;color:var(--muted);font-size:.78rem;line-height:1.4;
}
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-card figcaption strong{
  display:block;margin-bottom:4px;color:var(--kpp-blue-deep,#0E2F43);font-size:.84rem;line-height:1.3;
}
body.brand-ki-praxispilot.product-page .preview-standard .product-preview-card figcaption span{
  display:block;margin:0;color:var(--muted);font-size:.78rem;line-height:1.4;
}

/* --------------------------------------------------------------------------
   Process model – same four-column architecture as KI-Inventar. Every phase
   has exactly two compact tasks and one short green result line. This keeps
   headings, white task hierarchy and green results vertically symmetric.
*/
body.brand-ki-praxispilot.product-page .process-standard .process-heading{
  grid-template-columns:minmax(0,1fr) 280px;align-items:end;margin-bottom:25px;
}
body.brand-ki-praxispilot.product-page .process-standard .process-heading>div:first-child{min-width:0}
body.brand-ki-praxispilot.product-page .process-standard .process-heading h2{
  max-width:720px;margin:8px 0;color:#fff;line-height:1.02;
}
body.brand-ki-praxispilot.product-page .process-standard .process-heading p{
  max-width:720px;margin:0;color:rgba(255,255,255,.72);line-height:1.5;
}
body.brand-ki-praxispilot.product-page .process-standard .process-board{
  grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:10px;
}
body.brand-ki-praxispilot.product-page .process-standard .process-phase{
  display:flex;flex-direction:column;min-width:0;height:100%;padding:15px;
}
body.brand-ki-praxispilot.product-page .process-standard .process-phase-head{
  min-height:58px;align-items:center;
}
body.brand-ki-praxispilot.product-page .process-standard .process-phase h3{
  margin:1px 0 0!important;color:#fff!important;font-size:.96rem!important;line-height:1.15!important;
  overflow-wrap:normal!important;word-break:normal!important;
}
body.brand-ki-praxispilot.product-page .process-standard .phase-tasks{
  display:grid!important;grid-template-rows:repeat(2,minmax(104px,1fr));gap:7px!important;
  flex:1;margin-top:13px!important;
}
body.brand-ki-praxispilot.product-page .process-standard .phase-task{
  display:flex!important;flex-direction:column!important;min-width:0!important;min-height:104px!important;
  padding:10px!important;border-radius:10px!important;background:rgba(0,0,0,.17)!important;
  font-size:inherit!important;line-height:inherit!important;overflow-wrap:normal!important;word-break:normal!important;
}
body.brand-ki-praxispilot.product-page .process-standard .phase-task strong{
  display:block!important;margin:0!important;color:#fff!important;font-size:.76rem!important;line-height:1.2!important;
  overflow-wrap:normal!important;word-break:normal!important;
}
body.brand-ki-praxispilot.product-page .process-standard .phase-task span{
  display:block!important;margin-top:5px!important;color:rgba(255,255,255,.66)!important;
  font-size:.67rem!important;line-height:1.35!important;overflow-wrap:normal!important;word-break:normal!important;
}
body.brand-ki-praxispilot.product-page .process-standard .phase-result{
  min-height:38px;margin-top:12px!important;padding-top:10px!important;border-top:1px solid rgba(255,255,255,.12)!important;
  color:var(--accent)!important;font-size:.65rem!important;font-weight:760!important;line-height:1.32!important;
}

/* --------------------------------------------------------------------------
   Quickstart – clone of KI-Inventar's left intro + icon list component.
*/
body.brand-ki-praxispilot.product-page .quickstart-standard .quickstart-grid{
  display:grid;grid-template-columns:minmax(250px,.68fr) minmax(0,1.32fr);gap:54px;align-items:start;
}
body.brand-ki-praxispilot.product-page .quickstart-standard .quickstart-list li{
  min-height:64px;grid-template-columns:38px minmax(0,1fr)!important;gap:14px;align-items:center!important;
}
body.brand-ki-praxispilot.product-page .quickstart-standard .quickstart-list li>span{
  display:grid!important;width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;
  place-items:center!important;border-radius:9px!important;background:var(--soft)!important;color:var(--primary-strong)!important;
}
body.brand-ki-praxispilot.product-page .quickstart-standard .quickstart-list li>p{
  margin:0!important;color:var(--muted)!important;font-size:.9rem!important;line-height:1.48!important;
}

/* --------------------------------------------------------------------------
   Eignung / Voraussetzungen / Nicht enthalten – no redundant section heading.
*/
body.brand-ki-praxispilot.product-page .fit-standard .fit-grid{align-items:stretch}
body.brand-ki-praxispilot.product-page .fit-standard .fit-grid article{height:100%;box-sizing:border-box}
body.brand-ki-praxispilot.product-page .fit-standard .fit-grid h2{margin:25px 0 18px;font-size:1.48rem;line-height:1.16}
body.brand-ki-praxispilot.product-page .fit-standard .icon-list li{align-items:flex-start}
body.brand-ki-praxispilot.product-page .fit-standard .icon-list li>.icon{flex:0 0 16px;width:16px;margin-top:2px}

/* --------------------------------------------------------------------------
   Prepared commerce – blue is the permanent commerce CTA color. Pending
   buttons remain inert; the final CTA can link to package contents until sale.
*/
body.brand-ki-praxispilot.product-page .button-preparing{
  background:var(--kpp-blue,#176F9F)!important;border-color:var(--kpp-blue,#176F9F)!important;color:#fff!important;
  opacity:1!important;cursor:default!important;pointer-events:none!important;box-shadow:0 12px 30px rgba(23,111,159,.18)!important;
}
body.brand-ki-praxispilot.product-page .final-cta .button.button-commerce-blue{
  background:var(--kpp-blue,#176F9F)!important;border-color:var(--kpp-blue,#176F9F)!important;color:#fff!important;
  box-shadow:0 12px 30px rgba(0,0,0,.14)!important;
}
body.brand-ki-praxispilot.product-page .final-cta .button.button-commerce-blue:hover,
body.brand-ki-praxispilot.product-page .final-cta .button.button-commerce-blue:focus-visible{
  background:var(--kpp-blue-hover,#1F8FC8)!important;border-color:var(--kpp-blue-hover,#1F8FC8)!important;color:#fff!important;
}

@media(max-width:980px){
  body.brand-ki-praxispilot.product-page .process-standard .process-board{grid-template-columns:repeat(2,minmax(0,1fr))}
  body.brand-ki-praxispilot.product-page .process-standard .process-phase:nth-child(2):after{display:none}
  body.brand-ki-praxispilot.product-page .process-standard .phase-tasks{grid-template-rows:none}
  body.brand-ki-praxispilot.product-page .preview-standard .product-preview-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-head{grid-template-columns:1fr!important;gap:8px!important;align-items:start!important}
  body.brand-ki-praxispilot.product-page #anforderungen.requirements-standard .requirement-ref{max-width:100%!important;width:max-content!important;border-radius:10px!important}
  body.brand-ki-praxispilot.product-page .process-standard .process-heading{grid-template-columns:1fr}
  body.brand-ki-praxispilot.product-page .process-standard .process-board{grid-template-columns:1fr}
  body.brand-ki-praxispilot.product-page .process-standard .phase-tasks{grid-template-rows:none}
  body.brand-ki-praxispilot.product-page .quickstart-standard .quickstart-grid{grid-template-columns:1fr;gap:24px}
  body.brand-ki-praxispilot.product-page .preview-standard .product-preview-gallery{grid-template-columns:1fr}
}