/* ==========================================================
   V11 – gemeinsame Hülle für interaktive WESTKERN-Demos
   ========================================================== */
.wk-demo-page{
  min-height:100vh;
  padding:34px 0 80px;
  background:
    radial-gradient(circle at 92% 8%,rgba(16,140,255,.09),transparent 25rem),
    #f5f8fa;
}

.wk-breadcrumb{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:28px;
  color:#6c7c86;
  font-size:.72rem;
}

.wk-breadcrumb a:hover{color:#108cff}

.wk-demo-heading{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:30px;
  align-items:end;
  margin-bottom:27px;
}

.wk-demo-heading h1{
  margin-top:5px;
  color:#0b2635;
  font-size:clamp(2.5rem,5vw,4.8rem);
}

.wk-demo-heading p{
  max-width:760px;
  margin-top:13px;
  color:#61737e;
  line-height:1.7;
}

.wk-demo-tech{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  max-width:430px;
}

.wk-demo-tech span{
  padding:7px 10px;
  border:1px solid #dbe7ee;
  border-radius:999px;
  color:#49616f;
  background:#f8fbfd;
  font-size:.7rem;
  font-weight:800;
}

.wk-demo-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#108cff;
  box-shadow:0 0 0 5px rgba(16,140,255,.12);
}

.wk-demo-info-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:24px;
}

.wk-demo-info-grid article{
  padding:19px;
  border:1px solid #dfe8ed;
  border-radius:15px;
  background:#fff;
}

.wk-demo-info-grid span{
  color:#108cff;
  font-size:.66rem;
  font-weight:900;
}

.wk-demo-info-grid h2{
  margin-top:8px;
  color:#153244;
  font-size:1rem;
}

.wk-demo-info-grid p{
  margin-top:6px;
  color:#697a84;
  font-size:.77rem;
  line-height:1.55;
}

.wk-demo-explain{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:60px;
  align-items:start;
  margin-top:58px;
  padding-top:42px;
  border-top:1px solid #dae5eb;
}

.wk-demo-explain h2{
  margin-top:7px;
  color:#132f40;
}

.wk-demo-explain>p{
  color:#61747f;
  line-height:1.72;
}

.wk-demo-pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  font-size:.65rem;
  font-weight:850;
}

.wk-demo-pill.live{
  color:#15784d;
  background:#e8f8f0;
}

.wk-demo-pill.live:before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#20b66c;
  box-shadow:0 0 0 4px rgba(32,182,108,.10);
}

@media(max-width:950px){
  .wk-demo-heading{grid-template-columns:1fr}
  .wk-demo-tech{justify-content:flex-start;max-width:none}
  .wk-demo-info-grid{grid-template-columns:repeat(2,1fr)}
  .wk-demo-explain{grid-template-columns:1fr;gap:20px}
}

@media(max-width:700px){
  .wk-demo-info-grid{grid-template-columns:1fr}
}

@media(max-width:480px){
  .wk-demo-page{padding-top:22px}
}